/* =============================================================================
   OPERS Navigation Styles
   Targets WordPress block markup: wp:navigation, wp:search, wp:site-logo
   ============================================================================= */

/* Search magnifier: position on the right side of the search input.
   wpautop wraps the <button.promagnifier> in a <p>, so the <p> is
   the actual flex child -- target it with the :has() selector. */
div.asp_m.ajaxsearchpro .probox > p:has(.promagnifier) {
    order: 10 !important;
}

div.asp_m.ajaxsearchpro .probox .promagnifier {
    order: 10 !important;
}

div.asp_m.ajaxsearchpro .probox .proinput {
    order: 1 !important;
}

div.asp_m.ajaxsearchpro .probox .prosettings {
    order: 0 !important;
}

div.asp_m.ajaxsearchpro .probox .proloading {
    order: 11 !important;
}

/* Always keep proclose in flex flow so the magnifier never shifts position.
   Visibility is controlled via :placeholder-shown instead of intercepting
   the plugin's inline display:none/block toggles, which are too transient. */
div.asp_m.ajaxsearchpro .probox .proclose {
    order: 9 !important;
    display: block !important;
}

div.asp_m.ajaxsearchpro .probox:has(.proinput input.orig:placeholder-shown) .proclose {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* AjaxSearchPro: ensure placeholder meets WCAG 2.1 AA contrast (4.5:1).
   Plugin default is #555 at opacity 0.85 on a #d1eaff field ≈ 4.48:1. */
div.asp_m.ajaxsearchpro .probox .proinput input::placeholder {
    color: #4a4a4a;
    opacity: 1;
}

/* AjaxSearchPro: give input.orig an explicit opaque background + text color
   so WCAG contrast is deterministic. Plugin sets background:transparent and
   the wrapper uses a radial gradient, which makes axe flag "needs review"
   because it cannot resolve the effective background color. #333 on #fff is
   12.6:1 (AAA). */
div.asp_m.ajaxsearchpro .probox .proinput input.orig {
    background-color: #ffffff !important;
    color: #333333 !important;
}

.skip-links {
    position: absolute;
}

header {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 100 !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
    padding: 0;
    margin: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

header.header-scrolled {
    background-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* =============================================================================
   Desktop Header (>= 1200px)
   Override overlayMenu:"always" so the desktop nav shows above 1200px.
   ============================================================================= */
@media (min-width: 1200px) {
    /* Show desktop nav inline (undo hidden-by-default from overlayMenu:"always") */
    header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
        background-color: inherit;
        display: block;
        position: relative;
        width: 100%;
        z-index: auto;
    }

    /* Hide hamburger open button on desktop */
    header .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Hide close button when overlay is not open */
    header .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
        display: none;
    }

    /* -------------------------------------------------------------------------
       Desktop top-level nav items: tall clickable block with hover state
       Matches live site (opers.org) where hovering a main item shows a large
       highlighted block that connects seamlessly to the flyout submenu.
       ------------------------------------------------------------------------- */

    /* Remove inherited gap between top-level nav items so the hover
       blocks sit flush against each other */
    header .wp-block-navigation__container {
        gap: 0 !important;
    }

    /* Top-level nav items: use large negative top margin + matching padding
       so the hover background reaches the very top of the page. Bottom
       negative margin counteracts the header group's bottom padding. */
    header .wp-block-navigation__container > .wp-block-navigation-item {
        position: relative;
        display: flex;
        align-items: center;
        margin-top: -100px;
        margin-bottom: calc(-1 * var(--wp--preset--spacing--4, 1.5rem));
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        transition: background-color 150ms, border-color 150ms;
        z-index: 2;
    }

    /* Top-level links: top padding absorbs the negative margin overflow so
       the text stays vertically centered while the background extends to
       the top of the header. */
    header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        padding: calc(100px + var(--wp--preset--spacing--4, 1.5rem)) 0.5em var(--wp--preset--spacing--4, 1.5rem) 1.5em;
    }

    /* Chevron icon (rendered as <span> by navigation-link blocks):
       ensure it's visible in the flex layout and vertically centered.
       Core sets height/width to .6em which can collapse in flex; use
       explicit min dimensions and ensure the SVG stroke is visible. */
    header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
        display: inline-flex !important;
        align-items: center;
        flex-shrink: 0;
        min-width: 20px;
        min-height: 20px;
        padding: calc(100px + var(--wp--preset--spacing--4, 1.5rem)) 0.5em var(--wp--preset--spacing--4, 1.5rem) 0;
        background: transparent;
        border: none;
    }

    header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
    }

    /* Hover/focus state on the parent item: light background + blue borders
       wrapping both the link text and the chevron icon */
    header .wp-block-navigation__container > .has-child:hover,
    header .wp-block-navigation__container > .has-child:focus-within {
        background-color: var(--wp--preset--color--ice-blue);
        border-left-color: var(--wp--preset--color--blue);
        border-right-color: var(--wp--preset--color--blue);
    }

    /* Suppress text underline on the link inside the hover block */
    header .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content,
    header .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content {
        text-decoration: none !important;
    }

    /* Bridge pseudo-element: covers the submenu top border so the hover block
       appears connected to the dropdown. Uses ::before to avoid conflicting
       with the ::after WordPress core uses for the submenu chevron icon. */
    header .wp-block-navigation__container > .has-child:hover::before,
    header .wp-block-navigation__container > .has-child:focus-within::before {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--wp--preset--color--ice-blue);
        z-index: 3;
    }

    /* Submenu dropdown: blue border, white background, positioned flush below */
    header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
    header .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
    header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
        min-width: 300px;
        border: 1px solid var(--wp--preset--color--blue);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* Second-level submenu items: remove bottom margin, add light-blue border */
    header .wp-block-navigation__submenu-container > .wp-block-navigation-item {
        margin-bottom: 0;
        border-bottom: 1px solid var(--wp--preset--color--light-blue);
    }

    header .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
        border-bottom: none;
    }

    /* Submenu link hover: highlight background */
    header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
        background-color: var(--wp--preset--color--dusty-blue);
    }

    /* Third-level submenu (nested flyouts): slide out to the right */
    header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        border: 1px solid var(--wp--preset--color--blue);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* Scrolled state: reduce bottom padding for a compact header;
       top padding keeps the 100px overflow so the background still
       reaches the top edge. */
    header.header-scrolled .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding-top: calc(100px + 1em);
        padding-bottom: 1em;
    }

    header.header-scrolled .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
        padding-top: calc(100px + 1em);
        padding-bottom: 1em;
    }

}

/* =============================================================================
   Mobile Header (< 1200px)
   Matches Figma mobile design: smaller logo, hidden search, orange login button.
   ============================================================================= */
@media (max-width: 1199px) {
    /* Prevent horizontal overflow on mobile */
    body {
        overflow-x: hidden;
    }

    header {
        max-width: 100vw;
        overflow-x: hidden;
    }

    header > .wp-block-group {
        max-width: 100vw;
        overflow-x: hidden;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Smaller logo on mobile (40px vs 75px desktop) */
    header .wp-block-site-logo img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Hide search on mobile by default */
    header .main-nav__search {
        display: none !important;
    }

    /* -------------------------------------------------------------------------
       Mobile overlay: full-width, white background, no WP default padding
       ------------------------------------------------------------------------- */
    header .wp-block-navigation__responsive-container.is-menu-open {
        background-color: transparent !important;
        padding: 0 !important;
        overflow-y: auto !important; /* Allow scrolling when menu is taller than viewport */
    }

    /* White background only on the content area, not the full overlay */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        background-color: #fff;
    }

    /* -------------------------------------------------------------------------
       Mobile overlay: search bar + close button row at top
       Figma: gray (#ccc) bar, search on left, X close on right, 16px padding
       ------------------------------------------------------------------------- */

    /* Show search in overlay, gray bar at top, stopping before close button */
    header:has(.wp-block-navigation__responsive-container.is-menu-open) .main-nav__search {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 58px; /* Stop before the close button */
        height: 72px;
        z-index: 100001;
        background-color: var(--wp--preset--color--silver);
        border-bottom: 1px solid var(--wp--preset--color--light-blue);
        padding: 16px;
        min-width: unset !important;
        box-sizing: border-box;
        align-items: center;
    }

    /* Close button: gray background, positioned to match the hamburger location */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 72px !important;
        z-index: 1 !important; /* Above siblings within overlay stacking context */
        width: 58px !important;
        background-color: var(--wp--preset--color--silver) !important;
        border: none !important;
        border-bottom: 1px solid var(--wp--preset--color--light-blue) !important;
        padding: 0 10px 0 0 !important; /* Right padding matches header padding */
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Hide the default thin WP close SVG */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close svg {
        display: none !important;
    }

    /* Replace with a thick OPERS Blue X using pseudo-elements */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close::before,
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 4px;
        background-color: var(--wp--preset--color--blue);
        border-radius: 2px;
        top: 50%;
        left: 50%;
    }

    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Push nav content below the search/close bar */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
        padding: 0 !important;
        /* Search bar ~72px tall; push content below it */
        margin-top: 72px;
    }

    /* Remove WP default flex gaps, padding, and alignment overrides */
    header .wp-block-navigation__responsive-container.is-menu-open,
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content,
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Remove WP default padding-top on submenu containers */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        padding-top: 0 !important;
    }

    /* -------------------------------------------------------------------------
       Mobile overlay: menu item styles matching Figma
       Figma: 20px semibold OPERS Blue, Light Blue (#89A1C4) bottom border,
       padding 10px left, 30px right (items with chevron)
       ------------------------------------------------------------------------- */

    /* Top-level nav items: full-width bordered rows */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item {
        width: 100% !important;
        border-bottom: 1px solid var(--wp--preset--color--light-blue) !important;
        margin: 0 !important;
    }

    /* Nav item links: consistent padding matching Figma (10px top, 11px bottom, 10px left, 30px right) */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
        color: var(--wp--preset--color--blue) !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 30px !important;
        padding: 10px 30px 11px 10px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Active/current page: Pale Blue background, bold text */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item {
        background-color: var(--wp--preset--color--pale-blue) !important;
    }

    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item
    > .wp-block-navigation-item__content {
        font-weight: 700 !important;
    }

    /* Parent items need position:relative for absolute chevron */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child {
        position: relative !important;
    }

    /* -------------------------------------------------------------------------
       Mobile overlay: collapsible submenus
       WP default forces submenus open + hides toggle icons in overlay.
       We reverse both: hide submenus, show toggles, expand on click.
       ------------------------------------------------------------------------- */

    /* Show submenu toggle buttons (WP hides them in overlay).
       Stretch to cover the full row so tapping anywhere toggles the submenu.
       Chevron is right-aligned at 10px from edge, vertically centered. */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
        display: flex !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 51px !important; /* Match single row height: 10px + 30px + 11px */
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 10px 0 0 !important;
        margin: 0 !important;
        background: none !important;
        border: none !important;
        cursor: pointer;
        z-index: 1; /* Above the <a> link so tap reaches the toggle */
    }

    /* Chevron SVG: 20x20, OPERS Blue stroke */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon svg {
        width: 20px !important;
        height: 20px !important;
        stroke: var(--wp--preset--color--blue);
        transition: transform 0.2s ease;
    }

    /* Rotate chevron when expanded */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    /* Collapse all submenus by default (override WP forced-open) */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
        display: none !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Expand submenu when toggle aria-expanded is true */
    header .wp-block-navigation__responsive-container.is-menu-open
    .has-child:has(> .wp-block-navigation__submenu-icon[aria-expanded="true"])
    > .wp-block-navigation__submenu-container {
        display: block !important;
    }

    /* Submenu items: indented, bordered, normal weight */
    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container > .wp-block-navigation-item {
        width: 100% !important;
        border-bottom: 1px solid var(--wp--preset--color--light-blue) !important;
        margin: 0 !important;
    }

    header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--wp--preset--color--blue) !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px !important;
        padding: 10px 30px 11px 20px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Reorder: push nav (hamburger) to the end so button sits between logo and hamburger */
    header .wp-block-navigation {
        order: 99;
    }

    /* Push button + hamburger to the right as a group */
    header .main-nav__actions {
        margin-left: auto !important;
        gap: 8px !important;
    }

    /* Remove min-width constraint on button wrapper for mobile */
    header .main-nav__actions .wp-block-group[style*="min-width"] {
        min-width: auto !important;
    }

    /* -------------------------------------------------------------------------
       Hamburger icon: replace thin WP SVG with thicker lines matching Figma
       ------------------------------------------------------------------------- */
    header .wp-block-navigation__responsive-container-open {
        position: relative;
        width: 24px;
        height: 24px;
    }

    /* Hide default thin SVG */
    header .wp-block-navigation__responsive-container-open svg {
        display: none !important;
    }

    /* Three thick bars via box-shadow on a single pseudo-element */
    header .wp-block-navigation__responsive-container-open::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 2px;
        width: 20px;
        height: 3px;
        background-color: var(--wp--preset--color--blue);
        border-radius: 1.5px;
        box-shadow:
            0 7px 0 var(--wp--preset--color--blue),
            0 14px 0 var(--wp--preset--color--blue);
    }
}