/* ==========================================================================
   TABLE OF CONTENTS:
   1. Base Header Styles
   2. Secondary Navigation
   3. Primary Navigation
   4. Dropdown Menus
   5. Search Functionality
   6. Mobile Menu
   7. Accessibility
   8. Responsive Styles
   ========================================================================== */

/* ==========================================================================
   1. Base Header Styles
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-family-primary);
    font-size: var(--primary-menu-font-size);
    font-weight: 300;
}

.site-header a {
    text-decoration: none;
}

.site-branding {
    display: flex;
    align-self: center;
    max-height: 100%;
}

.site-branding img {
    height: auto;
    max-width: var(--primary-logo-width);
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   2. Secondary Navigation
   ========================================================================== */
.secondary-nav-container {
    background-color: #e7e8e9;
    height: var(--secondary-menu-height);
    display: flex;
    justify-content: center;
}

.secondary-navigation {
    display: flex;
    align-items: center;
    max-width: var(--container-max-width);
    flex: 1;
    justify-content: flex-end;
    margin: 0 var(--container-margin-inline);
}

.secondary-menu-items {
    display: flex;
    list-style: none;
    margin: 0 1.5rem;
    padding: 0;
    font-weight: 600;
    align-items: center;
}

.secondary-menu-items li {
    margin-right: var(--margin-left-nav-items);
}

.secondary-menu-items li a {
    color: var(--color-black);
    font-size: var(--secondary-menu-font-size);
    padding: 11px 0px;
    display: block;
}

.secondary-navigation .menu-item a:hover {
    color: var(--color-science-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.secondary-menu-items li:last-child {
    margin-right: 0;
    display: block;
}
/* ==========================================================================
   3. Primary Navigation
   ========================================================================== */
.primary-nav-container {
    width: 100%;
    background: linear-gradient(to right, #111137, #23408b);
    height: var(--primary-menu-height);
    display: flex;
    justify-content: center;
}

.primary-nav-inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 var(--container-margin-inline);
    width: var(--container-max-width);
    height: 100%;
}

.primary-navigation {
    display: flex;
    /* Take the space between the logo and the right edge so wrapping is
       bounded by the available width. */
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
}

.menu-items {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    list-style: none;
    justify-content: flex-end;
    align-items: stretch;
    align-content: stretch;
    margin: 0;
    padding: 0;
    height: 100%;
}

.menu-items > li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Allow the item to shrink so its label can wrap as the final fallback. */
    min-width: 0;
    /* flex: 1; */
}

.primary-navigation.desktop-only
    #main-menu
    > .menu-item:not(.menu-item-has-children) {
    padding-left: var(--nav-item-gap);
}

.primary-navigation.desktop-only #main-menu > .menu-item {
    flex-direction: row;
    /* max-width: min-content; */
}

/* .primary-navigation.desktop-only #main-menu > .menu-item a {
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
} */
.menu-items > li a {
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--primary-menu-font-size);
}
.menu-items > li > a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No fixed width cap: the label stays on one line until the row runs out
       of room (after the logo has shrunk), then wraps into balanced lines as
       the last resort. Words break at spaces; overflow-wrap is a safety net
       for a single word too long to fit. */
    min-width: 0;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: break-word;
    font-weight: 500;
    padding-left: var(--nav-item-gap);
}

.menu-items > li:hover,
.menu-items > li.is-hover-open {
    background-color: #f1f2f3;
}

.menu-items > li:hover a,
.menu-items > li.is-hover-open > a {
    color: var(--color-black);
}

.menu-items > li:last-child {
    margin-right: 0;
}

.menu-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #0066cc;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}

.menu-button:hover,
.menu-button:focus {
    background-color: #0052a3;
}

@media (max-width: 1023px) {
    .primary-nav-container {
        max-height: 66.3px;
        padding: 20px 20px 20px var(--mobile-horizontal-padding);
    }
    .primary-nav-inner-container {
        margin: 0 !important;
    }
}

/* ==========================================================================
   4. Dropdown Menus
   ========================================================================== */
li.menu-item-has-children {
    display: flex;
}

.primary-navigation > ul > .menu-item:not(.menu-item-has-children) {
    padding-right: var(--nav-item-gap);
}

.primary-navigation > ul > .menu-item:not(.menu-item-has-children) a {
    padding-left: 0px;
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 200px;
    max-width: 300px;
    background-color: #f3f1f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: opacity 0.25s ease, visibility 0.25s ease,
        -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.25s ease, visibility 0.25s ease,
        transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sub-menu.is-active {
    opacity: 1;
    visibility: visible;
    background: #f3f2f2;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--color-black) !important;
    width: 100% !important;
    text-decoration: none;
    font-size: var(--primary-menu-font-size) !important;
    font-weight: 500 !important;
}

.sub-menu a:hover,
.sub-menu a:focus {
    background-color: white;
}

.dropdown-toggle {
    background: none;
    border: none;
    padding: 1rem var(--nav-item-gap) 1rem 0.75rem;
    margin-left: 0.25rem;
    cursor: pointer;
    color: var(--color-california-gold);
    margin-top: 3px;
    pointer-events: none;
}

.sub-menu .dropdown-toggle {
    color: var(--color-blue-medium);
    margin-right: 15px;
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
}

.dropdown-icon {
    display: block;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 5px;
}

.sub-menu .dropdown-toggle[aria-expanded="true"] .dropdown-icon {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sub-menu li.menu-item-has-children.open-to-left > .dropdown-toggle[aria-expanded="true"] .dropdown-icon {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.dropdown-toggle[aria-expanded="true"] .dropdown-icon {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-top: 5px;
}

/* ==========================================================================
   5. Search Functionality
   ========================================================================== */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 36px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-container::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 24px;
    background-color: var(--color-black);
    opacity: 0.5;
}

/* Search Toggle Button - Hide when search is active */
.search-toggle {
    background: none;
    border: none;
    /* padding: 0.5rem; */
    /* margin: 0; */
    cursor: pointer;
    color: #333;
    /* transition: color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; */
    z-index: 2;
    position: relative;
    flex-shrink: 0;
    margin-left: 12px;
}

.search-toggle:hover,
.search-toggle:focus {
    color: var(--color-berkeley-blue);
}

/* Hide toggle button when search is active */
.search-container.is-active .search-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.search-icon {
    width: 20px;
    height: 20px;
}
.search-icon path {
    stroke-width: 0.1;
}

/* Inline search form container */
.search-form-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.search-container {
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-form-container.is-active {
    width: 320px;
}

.search-container.is-active {
    width: 320px;
}

.search-form {
    width: 320px;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-field {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: none;
    border-bottom: 2px solid var(--color-blue-medium);
    background-color: transparent;
    font-size: 1rem;
    font-family: var(--font-family-primary);
    color: var(--color-black);
    outline: none;
    transition: border-color 0.3s ease;
}

.search-field::placeholder {
    color: black;
    opacity: 0.8;
}

.search-submit {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem; /* Match toggle button padding */
    margin: 0;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* Match toggle button color */
    transition: color 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    /* Initially hidden */
    opacity: 0;
    visibility: hidden;
}

/* Show submit button when search is active */
.search-container.is-active .search-submit {
    opacity: 1;
    visibility: visible;
}

.search-submit:hover,
.search-submit:focus {
    color: var(--color-berkeley-blue);
    border-radius: 4px;
}

.search-icon:hover {
    outline: var(--color-berkeley-blue);
    border: var(--color-berkeley-blue);
}
.search-toggle:focus {
    outline: 2px solid var(--color-blue-medium);
    outline-offset: 2px;
}

.search-submit svg {
    width: 20px; /* Match toggle button icon size */
    height: 20px;
}

/* Animation states */
.search-container.search-opening {
    width: 320px;
}

.search-container.search-opening .search-form-container {
    /* width: 280px; */
    width: 320px;
}

.search-container.search-closing {
    width: 36px;
}

.search-container.search-closing .search-form-container {
    width: 0;
}

/* Ensure smooth transitions during state changes */
.search-container.search-opening .search-toggle {
    opacity: 0;
    visibility: hidden;
}

.search-container.search-opening .search-submit {
    opacity: 1;
    visibility: visible;
}

.search-container.search-closing .search-toggle {
    opacity: 1;
    visibility: visible;
}

.search-container.search-closing .search-submit {
    opacity: 0;
    visibility: hidden;
}

/* Desktop-only styles - this entire section only applies to desktop */
@media (min-width: 1024px) {
    /* All the above styles are already wrapped in this media query context via the parent elements */
}

/* On mobile, keep the original dropdown behavior */
@media (max-width: 1023px) {


    /* Ancestor items: lower-intensity path indicator */
    .mobile-menu-container .current-menu-ancestor > a,
    .mobile-navigation .current-menu-ancestor > a {
        border-left: 3px solid var(--color-blue-medium);
        padding-left: calc(var(--mobile-horizontal-padding) - 3px);
    }

    /* Current page item: stronger indicator — exact active page
       White background + science-blue text mirrors what the expanded-parent
       rule used to do, but anchored to the actual current page instead. */
    .mobile-menu-container .current-menu-item > a,
    .mobile-navigation .current-menu-item > a {
        border-left: 3px solid var(--color-berkeley-blue);
        padding-left: calc(var(--mobile-horizontal-padding) - 3px);
        background-color: white;
        color: var(--color-blue-medium) !important;
        font-weight: 500;
    }

    .search-submit {
        opacity: 1 !important;
        visibility: visible !important;
        padding-right: calc(var(--mobile-horizontal-padding) - 4px);
    }
    .search-form {
        width: 100%;
    }

    .search-form-container {
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        padding: 1rem;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 1001;
        transform: none;
        overflow: visible;
        transition: none;
    }

    .search-form-container.is-active {
        width: 100% !important;
    }

    .search-field {
        border: none;
        border-radius: 4px;
        background-color: white;
        padding: 1rem var(--mobile-horizontal-padding);
    }
    .search-icon {
        fill: var(--color-blue-medium);
    }
}

/* ==========================================================================
   6. Mobile Menu
   ========================================================================== */
/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 40px;
}

/* Image icons for menu toggle */
.menu-toggle .icon-hamburger,
.menu-toggle .icon-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 45px;
    height: 45px;
}

/* Show hamburger by default */
.menu-toggle .icon-hamburger {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Hide close icon by default */
.menu-toggle .icon-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

/* When mobile menu is open */
.mobile-menu-open .menu-toggle .icon-hamburger {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.mobile-menu-open .menu-toggle .icon-close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Mobile menu container */
.mobile-menu-container {
    position: fixed;
    top: 66px;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: #f2f2f2;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    overflow-y: auto;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Adjust mobile menu position when emergency banner is present */
body:has(.emergency-text) .mobile-menu-container {
    top: calc(66px + 56px);
}

.mobile-menu-container:not([hidden]) {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.mobile-menu-inner {
    padding-top: 1.5rem;
    background-color: #f2f2f2;
}

.mobile-search {
    padding-top: 0;
}

.mobile-search svg {
    width: 1rem;
    height: 1rem;
}

.mobile-search svg path {
    stroke: var(--color-blue-medium);
}

.mobile-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-navigation li {
    position: relative;
    border-bottom: 1px solid #adadad;
}

.mobile-navigation li:last-of-type {
    border-bottom: none;
}

.mobile-navigation li:nth-last-of-type(2):has(+ li select) {
    border-bottom: none;
}

.mobile-navigation .menu-item-gtranslate {
    display: flex;
    justify-content: center;
    margin: 1rem var(--mobile-horizontal-padding);
}

.nav-separator {
    height: 10px;
    background: linear-gradient(to right, #111137, #23408b);
    margin: 0.5rem 0;
}

/* Section labels above each mobile nav list */
.mobile-nav-label {
    margin: 0;
    padding: 0.5rem var(--mobile-horizontal-padding);
    font-family: var(--font-family-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-berkeley-blue);
}

/* Tighten the gap the separator leaves before the secondary label */
.mobile-navigation.secondary-nav .mobile-nav-label {
    padding-top: 0.25rem;
}

.mobile-navigation a {
    display: block;
    padding: 0.75rem 45px 0.75rem var(--mobile-horizontal-padding);
    color: var(--color-black);
    text-decoration: none;
    font-size: var(--primary-menu-font-size);
    font-weight: 500;
}

/* Mobile menu dropdown styles */
.mobile-navigation .sub-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    padding-left: 1rem;
    max-height: 0;
    overflow: hidden; 
    opacity: 1;
    visibility: visible;
    -webkit-transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    background-color: #f2f1f2;
}

.mobile-navigation .sub-menu.is-active {
    max-height: 1000px;
}

/* Body class when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   7. Accessibility
   ========================================================================== */

.site-header a:focus-visible,
.site-header button:focus-visible {
 /* inner indicator */
    outline: 2px var(--color-california-gold) solid;
    outline-offset: 0;
    /* outer indicator */
    box-shadow: 0 0 0 4px var(--color-berkeley-blue); 
}

/* ==========================================================================
   8. Responsive Styles
   ========================================================================== */
/* Mobile styles */
@media (max-width: 1023px) {
    .primary-nav-inner-container {
        margin: 0 !important;
    }

    /* Reset any horizontal positioning for mobile */
    .mobile-navigation .sub-menu,
    .mobile-menu-container .sub-menu,
    .mobile-menu-container .sub-menu .sub-menu {
        position: static !important; /* Override any absolute positioning */
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        box-shadow: none;
        transform: none !important;
        -webkit-transform: none !important;
        min-width: 0;
        opacity: 1;
        /* Closed submenus stay out of the keyboard tab order. overflow/max-height
           only clip visually, so their links AND nested dropdown-toggle buttons
           would remain tabbable; visibility:hidden removes every descendant.
           The delayed visibility transition lets the collapse animation finish
           before the content is hidden. */
        visibility: hidden;
        -webkit-transition: max-height 0.3s, visibility 0s linear 0.3s;
        transition: max-height 0.3s, visibility 0s linear 0.3s;
        max-height: 0;
        overflow: hidden;
        background-color: #f2f1f2;

        width: 100%;
        min-width: initial;
        max-width: initial;
    }

    /* Active state for mobile submenus */
    .mobile-navigation .sub-menu.is-active,
    .mobile-menu-container .sub-menu.is-active {
        max-height: 2000px; /* Increased to accommodate larger submenus */
        /* Reveal immediately (no delay) so links/buttons enter the tab order
           as the submenu opens. */
        visibility: visible;
        -webkit-transition: max-height 0.3s, visibility 0s linear 0s;
        transition: max-height 0.3s, visibility 0s linear 0s;
    }

    /* Create vertical indentation for child menu items */
    .mobile-navigation .sub-menu,
    .mobile-menu-container .sub-menu {
        padding-left: 1rem;
        margin-left: 0;
    }

    /* Style for menu items with children on mobile */
    .mobile-navigation .menu-item-has-children,
    .mobile-menu-container .menu-item-has-children {
        position: relative;
        display: block;
    }

    /* Position dropdown toggle button for mobile */
    .mobile-navigation .dropdown-toggle,
    .mobile-menu-container .dropdown-toggle {
        position: absolute;
        right: 0;
        top: 0.25rem;
        padding: 1rem calc(var(--mobile-horizontal-padding) + 8px) 1rem 1rem;
        margin: 0 !important;
        pointer-events: initial !important;
    }

    .mobile-navigation .dropdown-toggle .dropdown-icon {
        color: var(--color-blue-medium) !important;
        width: 9px;
        height: 9px;
    }

    /* Change dropdown icon orientation for mobile */
    .mobile-navigation .dropdown-icon,
    .mobile-menu-container .dropdown-icon {
        -webkit-transform: rotate(45deg); /* Point down instead of right */
        transform: rotate(45deg);
    }

    .mobile-navigation .dropdown-toggle[aria-expanded="true"] .dropdown-icon,
    .mobile-menu-container
        .dropdown-toggle[aria-expanded="true"]
        .dropdown-icon {
        -webkit-transform: rotate(-135deg); /* Point up when expanded */
        transform: rotate(-135deg);
    }


    .mobile-navigation .menu-item:has(button[aria-expanded="true"]) > a {
        color: black !important;
        font-weight: 500;
        -webkit-transition: color 0.2s ease;
        transition: color 0.2s ease;
    }

    /* Remove any right-arrow indicators for mobile submenus */
    .mobile-navigation .sub-menu li.menu-item-has-children > a:after,
    .mobile-menu-container .sub-menu li.menu-item-has-children > a:after {
        content: none;
    }

    .mobile-navigation .sub-menu {
        position: static;
        width: 100%;
        left: auto;
        box-shadow: none;
    }

    /* Hide desktop navigation elements */
    .desktop-only {
        display: none;
    }

    /* Show mobile navigation elements */
    .mobile-only {
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    .primary-nav-container {
        max-height: 66.3px;
        padding: 20px 20px 20px var(--mobile-horizontal-padding);
    }
}

@media (max-width: 1023px) {
    .site-branding {
        display: flex;
        align-self: center;
        /* No max-height: on inner pages the link is a direct child of the
           fixed-height nav row, so 100% would clamp it and object-fit would
           shrink the logo. On the front page the <h1> wrapper hides this. */
        max-height: none;
        margin-left: -5px;
    }

    .site-branding img {
        max-height: auto;
        width: 192px;
        object-fit: contain;
        display: block;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .site-header {
        background-color: #e7e8e9;
    }
    /* Dropdowns are opened by the hover-intent logic in navigation.js, not
       by :hover directly — a plain :hover rule would fire instantly and
       defeat the open/close delays that keep the menu from flickering as the
       pointer crosses the bar. */
    .menu-items > li.menu-item-has-children.is-hover-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        background: #F4F3F3;
    }

    /* Nested dropdowns (second level and deeper) */
    .sub-menu li.menu-item-has-children {
        position: relative;
    }

    .sub-menu li.menu-item-has-children:hover,
    .sub-menu li.menu-item-has-children.is-hover-open {
        background: white;
    }

    .menu-item li:hover > a {
        color: var(--color-blue-medium) !important;
        font-weight: 400;
    }

    /* Position child submenus horizontally */
    .sub-menu .sub-menu {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 200px;
    }

    .sub-menu.open-to-left {
        left: auto;
        right: 0;
    }

    /* Alternative position for edge cases (to the left) */
    .sub-menu .sub-menu.open-to-left {
        left: auto;
        right: 100%;
        margin-left: 0;
    }

    /* Show nested submenus once hover intent has confirmed (see above) */
    .sub-menu li.menu-item-has-children.is-hover-open > .sub-menu {
        opacity: 1;
        visibility: visible;
        background: #F4F3F3;
    }

    /* No-JS fallback: without navigation.js there is nothing to add
       .is-hover-open, so fall back to plain :hover. The body keeps its
       no-js class only when the script never runs. */
    body.no-js .menu-items > li.menu-item-has-children:hover > .sub-menu,
    body.no-js .sub-menu li.menu-item-has-children:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        background: #F4F3F3;
    }

    /* Hide mobile navigation elements */
    .mobile-only {
        display: none;
    }

    /* Show desktop navigation elements */
    .desktop-only {
        display: flex;
    }

    .primary-navigation {
        display: flex;
    }

    /* The header keeps the primary nav on a single row and gives up space in
       priority order as it gets tight: (1) the inner row uses more width,
       (2) item spacing shrinks (--nav-item-gap), (3) the logo shrinks toward
       --primary-logo-min-width, and only then (4) a label wraps to a second
       line — the last-resort step that makes the bar taller. */
    .primary-nav-container {
        height: auto;
        min-height: var(--primary-menu-height);
    }

    .primary-nav-inner-container {
        /* (1) Size the row to its content: it stays at the baseline content
           width while items fit, and only grows (up to --header-inner-max-width)
           when the items actually need the extra room. Both bounds stay within
           a gutter on narrower desktop widths. */
        width: fit-content;
        min-width: min(
            var(--container-max-width),
            calc(100% - 2 * var(--container-margin-inline))
        );
        max-width: min(
            var(--header-inner-max-width),
            calc(100% - 2 * var(--container-margin-inline))
        );
        margin-inline: auto;
        height: auto;
        min-height: 100%;
        align-items: stretch;
        gap: var(--nav-item-gap);
    }


    /* Narrow desktop: tighten to a single gutter so the inner row can use a
       little more width before items start giving up space. */
    @media (max-width: 1090px) {
        .primary-nav-inner-container {
            max-width: min(
                var(--header-inner-max-width),
                calc(100% - 1 * var(--container-margin-inline))
            );
        }
    }

    /* (3) Logo column: full size by default, but with a large shrink factor so
       it yields space to the nav first, down to its min-width — only when the
       nav actually needs the room. Covers both the plain link and the
       front-page <h1> wrapper. */
    .primary-nav-inner-container > h1,
    .primary-nav-inner-container > .site-branding {
        margin: 0;
        align-self: center;
        flex: 0 100 var(--primary-logo-width);
        min-width: var(--primary-logo-min-width);
        max-width: var(--primary-logo-width);
    }

    .primary-nav-inner-container > h1 {
        display: flex;
        align-items: center;
    }

    .primary-nav-inner-container > h1 > .site-branding {
        width: 100%;
    }

    /* Let the logo image scale down with its (shrinking) column. */
    .site-branding img {
        width: 100%;
    }

    /* Desktop navigation styles */
    .primary-navigation .sub-menu {
        display: block;
    }

    .secondary-nav-container {
        transition: transform 0.28s ease, height 0.28s ease, opacity 0.2s ease;
        will-change: transform, height;
        overflow: hidden;
    }

    .secondary-nav-container.is-hidden {
        transform: translateY(-100%);
        height: 0;
        opacity: 0;
        pointer-events: none;
    }

    /* Set by sticky-header.js on anchor jumps so the nav snaps to its final
       state before the jump is measured, instead of animating under it. */
    .secondary-nav-container.is-instant {
        transition: none;
    }
}