/*
 * Reusable grouped journal navigation.
 * Loaded only when Config\JournalCmsMenu approves the current journal + CMS page.
 */
.journal-menu.oap-cms-journal-menu {
    --cms-menu-space-1: 4px;
    --cms-menu-space-2: 8px;
    --cms-menu-space-3: 12px;
    --cms-menu-space-4: 16px;
    --cms-menu-focus: #60a5fa;
}

.journal-menu.oap-cms-journal-menu .inner-menu .container > ul {
    gap: var(--cms-menu-space-2);
}

.journal-menu.oap-cms-journal-menu .inner-menu .container > ul > li > a,
.journal-menu.oap-cms-journal-menu .ijn-menu-toggle,
.journal-menu.oap-cms-journal-menu .ijn-submit-cta,
.journal-menu.oap-cms-journal-menu .ijn-menu-controls .filterbtn {
    min-height: 44px;
}

.journal-menu.oap-cms-journal-menu .ijn-dropdown-menu a {
    align-items: center;
    display: flex;
    min-height: 44px;
    padding: var(--cms-menu-space-2) var(--cms-menu-space-4);
}

/*
 * The legacy journal navigation constrains nested lists to the height of a
 * single row and clips their overflow. Keep the complete journal-scoped
 * dropdown in the pointer hit-testing area at every viewport size.
 */
.journal-menu.oap-cms-journal-menu .inner-menu .container > ul > li > .ijn-dropdown-menu {
    display: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: none;
    visibility: hidden;
}

.journal-menu.oap-cms-journal-menu .inner-menu .container > ul > li.is-open > .ijn-dropdown-menu {
    display: block !important;
    pointer-events: auto;
    visibility: visible;
}

.journal-menu.oap-cms-journal-menu .filterclosebtn {
    display: none !important;
}

.journal-menu.oap-cms-journal-menu .ijn-menu-toggle:focus-visible,
.journal-menu.oap-cms-journal-menu .inner-menu a:focus-visible,
.journal-menu.oap-cms-journal-menu .ijn-submit-cta:focus-visible,
.journal-menu.oap-cms-journal-menu .filterbtn:focus-visible {
    outline: 3px solid var(--cms-menu-focus);
    outline-offset: 2px;
}

@media (min-width: 993px) {
    .journal-menu.oap-cms-journal-menu .ijn-menu-item > .ijn-dropdown-menu {
        top: calc(100% - 1px);
    }
}

@media (max-width: 992px) {
    .journal-menu.oap-cms-journal-menu .inner-menu.Jmmenu {
        max-height: calc(100dvh - var(--oap-header-offset, 68px) - 112px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .journal-menu.oap-cms-journal-menu .ijn-dropdown-menu {
        padding: var(--cms-menu-space-1) 0 var(--cms-menu-space-2) var(--cms-menu-space-3);
    }
}

/*
 * Desktop (>=993px): keep the journal identity + navigation bar visible while the
 * page scrolls. Previously the whole .journal-menu was static (in normal flow) on
 * the CMS layout, so the nav scrolled away and a fixed-nav clearance margin on the
 * first content became a dead gap. Pin the bar just below the fixed global header.
 *
 * - position:sticky keeps the bar in flow at rest (no page needs a manual top
 *   offset, so nothing overlaps), then pins it below the header on scroll.
 * - Sticky needs the body to size to its content. The global `html,body{height:100%}`
 *   caps the body at one viewport, which would let the bar un-stick partway down the
 *   page, so the CMS body is allowed to grow (see body.oap-cms-body below).
 * - overflow:visible lets the nav dropdowns escape the bar; the base rule's
 *   overflow-x:hidden (added for narrow viewports) otherwise clips them on desktop.
 */
@media (min-width: 993px) {
    /* The global header is position:fixed but the journal menu rides in normal
       flow, so an overscroll "rubber-band" bounce at the very top pulls the flow
       content down while the fixed header stays put, briefly opening a gap between
       them. overscroll-behavior:none stops that bounce (Chrome/Firefox/Safari 16+).
       On the scroll container (html) and the body, to cover UA propagation quirks. */
    html:has(> body.oap-cms-body) {
        overscroll-behavior-y: none;
    }

    body.oap-cms-body {
        height: auto;
        min-height: 100%;
        /* Pin the content start to the real fixed-header height. The global body
           padding is 70px but the header is 68px, so 2px of white page background
           was showing as a hairline between the header and the pinned journal
           menu at the top of the page. Tracking --oap-header-offset closes it and
           keeps the at-rest menu position identical to its pinned position. */
        padding-top: var(--oap-header-offset, 68px) !important;
        overscroll-behavior-y: none;
        /* Belt-and-braces: the body background is the canvas the overscroll bounce
           reveals and is never visible on the laid-out page (header/menu/content/
           footer cover it). Painting it the dark header tone means that even if a
           browser still bounces, the revealed sliver matches the bars instead of
           flashing white. The site footer is already #000, so the bottom edge stays
           consistent too. */
        background-color: #0b1117 !important;
    }

    .journal-menu.ijn-compact-menu.oap-cms-journal-menu {
        position: sticky;
        top: var(--oap-header-offset, 68px);
        z-index: 900;
        overflow: visible;
    }
}

@media (max-width: 360px) {
    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .navbar {
        gap: 6px !important;
        grid-template-columns: 118px minmax(0, 1fr) !important;
    }

    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .navbar-brand {
        min-width: 0 !important;
        width: 118px !important;
    }

    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .navbar-brand img {
        max-width: 118px !important;
    }

    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .heder-serach {
        gap: 4px !important;
        min-width: 0;
        width: 100%;
    }

    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .heder-serach .click_search,
    header.inner-header.ijn-home-utility-header.oap-cms-utility-header .navbar-toggler {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 44px !important;
        min-width: 44px;
        padding: 8px !important;
    }

    header.inner-header.ijn-home-utility-header.oap-cms-utility-header #google_translate_element,
    header.inner-header.ijn-home-utility-header.oap-cms-utility-header #google_translate_element .goog-te-gadget-simple {
        max-width: 100%;
        min-width: 0;
        width: 100% !important;
    }
}