/* =========================================================
   NikoUArxive Global Layout Engine — Phase 1.1
   Unified Header + Body + Footer Width
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    background: #e9edf5;
}

/*
 * The entire header block, body block and footer block now share the same
 * outer frame. This is the boxed institutional layout requested by the user.
 */
.site-frame {
    width: 100%;
    margin-inline: auto;
}

/* Recommended contained mode: all three blocks have identical edges. */
body.layout-mode-contained .site-frame {
    max-width: var(--site-max-width);
}

/* Full-wide mode: all three blocks expand together.
 * The body class emitted by public_header.php is layout-mode-full-wide.
 * Keep layout-mode-full as a backward-compatible alias.
 */
body.layout-mode-full-wide .site-frame,
body.layout-mode-full .site-frame {
    max-width: none;
}

/* Header and footer internal padding. */
.site-shell {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--site-side-padding);
}

/* Entire header block is contained in contained mode. */
.site-frame-header {
    background: transparent;
}


/* Dropdown safety: public navigation must remain above page banners. */
.site-frame-header,
.public-header,
.header-shell,
.public-header .navbar-collapse {
    overflow: visible;
}

.site-frame-header {
    z-index: 1050;
}

.page-wrap {
    position: relative;
    z-index: 1;
}

body.layout-mode-full-wide .page-wrap,
body.layout-mode-full .page-wrap,
body.layout-mode-full-wide .site-shell,
body.layout-mode-full .site-shell {
    width: 100%;
    max-width: none;
}

/* Main page block uses the same outer width as header and footer. */
.page-wrap {
    min-height: 60vh;
    padding:
        22px
        var(--site-side-padding)
        60px;
    background: #f4f7ff;
}

/* More deliberate hierarchy below the ribbon header. */
.page-wrap > .niko-search-container:first-child,
.page-wrap > form:first-child,
.page-wrap > .search-shell:first-child {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.page-wrap > .hero:first-child,
.page-wrap > .archive-hero:first-child,
.page-wrap > .pd-hero:first-child,
.page-wrap > section:first-child {
    margin-top: 0;
}

/* Header colored background occupies only the shared site-frame width. */
.public-header {
    width: 100%;
    margin: 0;
}

.header-shell {
    min-height: 58px;
}

/* Footer colored background occupies only the shared site-frame width. */
.public-footer {
    width: 100%;
    color: #333;
    background: #eef3ff;
    border-top: 3px solid #cfd9ef;
    font-size: .9rem;
}

.footer-founder {
    margin-bottom: 6px;
    color: #00305c;
    font-size: .92rem;
    font-weight: 600;
}

.footer-contact {
    margin-bottom: 14px;
    font-size: .85rem;
    font-weight: 500;
}

.footer-contact a,
.footer-links a {
    color: #0057d8;
    font-weight: 600;
    text-decoration: none;
}

.footer-copyright {
    margin-bottom: 8px;
    color: #001f4d;
    font-size: .85rem;
    font-weight: 600;
}

.footer-links {
    margin-bottom: 5px;
    font-size: .85rem;
}

.footer-links a {
    margin-inline: 6px;
}

.layout-grid,
.row.layout-grid {
    --bs-gutter-x: var(--site-card-gap);
    --bs-gutter-y: var(--site-card-gap);
}

/* Keep page-local Bootstrap containers inside the shared site frame. */
.page-wrap > .container,
.page-wrap > .container-sm,
.page-wrap > .container-md,
.page-wrap > .container-lg,
.page-wrap > .container-xl,
.page-wrap > .container-xxl,
.page-wrap > .container-fluid {
    max-width: 100%;
}

/*
 * At ordinary desktop widths, the contained frame is visually separated from
 * the browser canvas, similar to a journal/OJS institutional website.
 */
@media (min-width: 992px) {
    body.layout-mode-contained .site-frame-header {
        margin-top: 20px;
    }

    body.layout-mode-contained .site-frame {
        box-shadow: 0 0 0 1px rgba(19, 61, 117, .05);
    }
}

/* Ribbon remains refined across desktop and tablet sizes. */
@media (max-width: 1199.98px) {
    .public-header .navbar-brand {
        margin-right: 12px;
    }

    .public-header .nav-link {
        margin-right: .18rem;
        padding-inline: .48rem !important;
        font-size: .91rem;
    }

    .btn-submit,
    .btn-preprint,
    .btn-published {
        min-width: 92px;
        margin-right: 7px;
        padding-inline: 12px;
        font-size: .84rem;
    }
}

/* Mobile: the frame naturally fills the screen, with safe inner padding. */
@media (max-width: 991.98px) {
    .public-header {
        border-radius: 0 0 15px 15px;
    }

    .public-header::before {
        right: -190px;
        opacity: .18;
    }

    .public-header::after {
        left: 10%;
        opacity: .10;
    }

    .header-shell {
        flex-wrap: wrap;
    }

    .public-header .navbar-collapse {
        width: 100%;
        padding-top: 12px;
    }

    .public-header .nav-link {
        margin-right: 0;
    }

    .btn-preprint,
    .btn-published,
    .btn-submit {
        display: inline-block;
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --site-side-padding: 16px !important;
        --site-section-spacing: 22px !important;
    }

    .public-header .navbar-brand img {
        height: 46px !important;
    }

    .public-header .navbar-brand span {
        font-size: 1.28rem !important;
    }
}