/*
 * Site-wide responsive fixes (Oct 2026), loaded after styles.min.css (see functions/enqueue-scripts.php).
 * Kept outside dev-src/ so a Tailwind rebuild never drops them. If the SCSS is rebuilt one day, these
 * header rules can move into dev-src/scss/_responsive.scss (change its 1024px block to max-width 1279.98px)
 * and this copy can be deleted.
 */

/* ---------- Header menu: one breakpoint for the whole menu (1280px) ----------
   The desktop menu row switched on at 1200px (Tailwind screens.lg in tailwind.config.js), its hover
   dropdowns at 1280px (_style.scss) and the off-canvas mobile menu only up to 1024px (_responsive.scss),
   so from 1025px to 1279px the menu showed open inline. Below 1280px the off-canvas menu now applies
   (the same rules as the theme's 1024px block); from 1280px the desktop row with hover dropdowns,
   unchanged. */

@media (max-width: 1279.98px) {
    .primary-menu-wrapper {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 999999;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        background-color: #0A509F;
    }

    .primary-menu-wrapper.openmenu {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }

    .primary-menu-wrapper .sub-menu li a {
        font-size: 16px;
        color: #fff;
        padding-left: 20px;
        padding-bottom: 5px;
        background-color: transparent;
        border: none;
    }

    .primary-menu-wrapper .dropdown a {
        background-color: transparent;
        padding-right: 20px !important;
    }

    /* menu links only (the top bar's links also carry .nav-link); :where() keeps the theme's
       specificity so the hover colour still wins */
    header .primary-menu-wrapper :where(.nav-link) {
        font-size: 20px;
        color: #fff;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* while the menu is open, lift the header (z-50) above page elements such as back-to-top */
    header:has(.primary-menu-wrapper.openmenu) {
        z-index: 999999;
    }
}

/* 1200px to 1279px: undo the Tailwind lg switches (hamburger hidden, menu row, column spans, panel
   spacing) until the desktop menu takes over at 1280px */
@media (min-width: 1200px) and (max-width: 1279.98px) {
    #toggleMenu {
        display: block;
    }

    .primary-menu-wrapper > .flex.lg\:hidden {
        display: flex;
        padding: 1rem;
    }

    .primary-menu-wrapper > .inline-flex.lg\:hidden {
        display: inline-flex;
        margin-top: 1.25rem;
    }

    .primary-menu-wrapper ul.nav {
        display: block;
    }

    .menu-wrapper > .col-span-4 {
        grid-column: span 4 / span 4;
    }

    .menu-wrapper > .header-buttons {
        grid-column: span 8 / span 8;
    }
}

/* 1280px to 1365px: slightly tighter menu links so the row clears the logo and the buttons
   (dropdown links keep 16px on the right for their arrow via the theme's 1450px rule) */
@media (min-width: 1280px) and (max-width: 1365.98px) {
    .primary-menu-wrapper .nav-link {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* 1700px to 1799px: Tailwind 2xl enlarges the links, so tighten them the same way there */
@media (min-width: 1700px) and (max-width: 1799.98px) {
    .primary-menu-wrapper .nav-link {
        padding-left: 8px;
        padding-right: 8px;
    }

    .primary-menu-wrapper .dropdown > .nav-link {
        padding-right: 16px;
    }
}