/* ============================================
   Header Width + Nav Alignment — Phase 1
   Scoped to desktop (min-width: 992px) to match the theme's own
   mobile breakpoint — leaves the mobile hamburger menu untouched.
   ============================================ */
@media (min-width: 992px) {

    /* Override Bootstrap container max-width for header only */
    .site-header .header-container {
        max-width: 1480px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    /* Navbar takes remaining space after logo (it's a flex item, not the root) */
    #navbar {
        display: flex;
        align-items: center;
        flex: 1;
        flex-wrap: nowrap;
    }

    /* Main nav fills navbar, pushes content to the right */
    #site-navigation {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        white-space: nowrap;
    }

    /* Nav items in a single row, evenly spaced */
    #site-navigation .nav-menu {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }

    #site-navigation .nav-menu > li > a {
        padding-left: 16px;
        padding-right: 28px;
        font-size: 18px;
        position: relative;
    }

    /* Take the dropdown caret out of absolute positioning so it flows
       naturally after the text with consistent spacing, regardless of
       how much padding the link has */
    #site-navigation .nav-menu > li.menu-item-has-children > a:after {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%);
        margin: 0;
    }

    /* Dropdown submenus must stay a vertical block list, not inherit the
       inline-block layout used for top-level nav items */
    #site-navigation .sub-menu {
        display: none;
        position: absolute;
        flex-direction: column;
    }

    #site-navigation .nav-menu > li:hover > .sub-menu {
        display: flex;
    }

    #site-navigation .sub-menu li {
        display: block !important;
        width: 250px;
    }

    #site-navigation .sub-menu li a {
        font-size: 16px !important;
        padding: 14px 20px !important;
    }

}

/* ============================================
   Mobile Header Fixes (max-width: 991px)
   ============================================ */
@media (max-width: 991px) {

    /* Defensive rebuild of the 3-line hamburger icon — guarantees all
       three bars render regardless of any conflicting/missing compiled CSS.
       The middle bar (.lines itself, no pseudo) is excluded via :not(.close)
       because style.css already hides it on click (.lines-button.x.close
       .lines { background: transparent }) so only the two pseudo-elements
       remain, rotating into a clean X. Our rule has an ID, so without this
       exclusion it always wins that fight and the middle bar stays visible
       through the X, rendering as an asterisk instead of a clean X. */
    #lines-button:not(.close) .lines,
    #lines-button .lines:before,
    #lines-button .lines:after {
        background: #1b4872;
        content: '';
        display: inline-block;
    }

    /* Root cause of the icons drifting: the open dropdown is normal-flow
       content, so it grows .header-container's height while open, which
       breaks any "top" offset measured against that height. Make the open
       menu an overlay instead — it floats below the header without adding
       to its height, so the header (and the icons within it) never moves. */
    .site-header .header-container {
        position: relative;
    }

    #site-navigation {
        position: relative;
    }

    /* Cancel the theme's original margin-top:65px on the toggled nav —
       that margin was designed for in-flow push-down behavior and would
       otherwise re-create the height-growth bug via a different path */
    #site-navigation.toggled-on {
        margin-top: 0 !important;
    }

    /* #site-navigation (the positioning ancestor for both this dropdown
       and the icons below) collapses to a zero-height box that sits at
       the BOTTOM of .header-container's padding box (84px down), not at
       the bottom of the full header band (104px tall). That 20px gap is
       stable across viewport widths (verified 320-428px), so anchor here
       with a fixed +20px instead of top:100%, which lands at .nav's own
       top edge (84px) — 20px short of the real header bottom. */
    #site-navigation.toggled-on .nav-menu {
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0 !important;
        z-index: 25;
        /* The navy background used to live on the parent <nav>, sized to
           fit this list in normal flow. Now that the list is the absolute
           overlay, the parent collapses to zero height and the background
           has nothing to paint onto — so it has to live here instead. */
        background-color: rgb(15, 76, 139) !important;
    }

    /* Same collapsed-ancestor issue as the dropdown above: top:50% centers
       against #site-navigation's own (zero-height) box, not the real
       104px header band, landing icons at the header's bottom edge
       instead of its middle. -32px moves the anchor point from that box's
       top (84px down the page) up to the header's true center (52px down):
       84 + (-32) = 52. transform still centers the icon on that point.

       z-index bumped from 30 to 1000: h2.site-title (the logo) has
       z-index:999 and spans the full header width, and #navbar/
       #site-navigation (z-index:auto) don't form their own stacking
       context, so it was competing directly against these buttons.
       At the old vertical position the icons mostly sat below
       site-title's box (which ends at the header-container's bottom,
       84px down) so clicks still landed on the button; centered here
       they sit fully inside it, and site-title's higher z-index won
       every click. Confirmed via elementFromPoint before/after. */
    #lines-button.menu-toggle {
        position: absolute !important;
        top: -32px !important;
        right: 15px !important;
        transform: translateY(-50%);
        z-index: 1000;
    }

    /* !important is required here: the unscoped desktop "color: inherit"
       rule further down this file has no media query, so it still applies
       on mobile too and wins the cascade tie without this. */
    #search-toggle {
        position: absolute !important;
        top: -32px !important;
        left: 20px !important;
        transform: translateY(-50%);
        font-size: 18px;
        margin-left: 0;
        z-index: 1000;
        color: #1b4872 !important;
    }

    /* Icons sit at the header's vertical center, which stays on the white
       header background in both states (the navy dropdown starts below
       them) — same as production. Keep them permanently navy; no
       toggled-on color switch needed. */

    /* Suppress the browser's default focus ring on tap — these are
       icon-only buttons with their own visible pressed/open states
       (color change, X animation), so the native outline just reads as
       a stray colored box around the icon. */
    #search-toggle:focus,
    #lines-button.menu-toggle:focus {
        outline: none;
    }

}

/* ============================================
   Search Toggle + Drawer — Phase 1
   ============================================ */

/* Icon button at far right of primary nav (desktop) */
#search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0 8px;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    opacity: 0.85;
    transition: opacity 0.2s;
    margin-left: 6px;
}

#search-toggle:hover,
#search-toggle[aria-expanded="true"] {
    opacity: 1;
}

/* Drawer — hidden by default, slides down below header */
#search-drawer {
    background: #fff;
    border-bottom: 2px solid #ddd;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#search-drawer.is-open {
    max-height: 80px;
}

#search-drawer .search-drawer-inner {
    padding: 14px 0;
    display: flex;
    align-items: center;
}

#search-drawer form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

#search-drawer-input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 8px 14px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    /* Theme's global `input, textarea` rule sets margin-bottom:10px.
       The submit/close buttons have no such margin, so flexbox's
       align-items:center (which centers on the margin box) centered
       this input 5px higher than them. Zero it out so all three share
       the same center. */
    margin-bottom: 0;
}

#search-drawer-input:focus {
    border-color: #1b4872;
}

#search-drawer-submit {
    background: #1b4872;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

#search-drawer-submit:hover {
    background: #163b5e;
}

#search-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 18px;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

#search-close:hover {
    color: #333;
}