.site-nav { min-inline-size: 0; max-inline-size: 100%; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
/* WordPress supplies these descendant classes; submenus remain visible without JS. */
.site-nav .sub-menu { list-style: none; padding-inline-start: var(--space-4); }
.site-nav .menu-item { min-inline-size: 0; }
.site-nav a { display: inline-flex; align-items: center; min-block-size: var(--nav-link-min-size, var(--control-min-size)); min-inline-size: var(--control-min-size); }
.site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--nav-link-min-size, var(--control-min-size));
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--line-height-control);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.site-nav__link:not(.site-nav__link--inactive):hover { background: var(--color-interaction); }
.site-nav--compact .site-nav__list { justify-content: center; flex-wrap: nowrap; gap: 0; }
.site-nav--compact .menu-item { flex: none; }
.site-nav--compact .site-nav__link { min-block-size: 2.5rem; padding-block: var(--space-1); white-space: nowrap; }
.site-nav__dropdown-toggle { display: flex; align-items: center; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: start; }
.site-nav__dropdown-toggle > .icon--chevron-down { display: block; align-self: center; translate: 0 2px; }
.site-nav--compact .menu-item-has-children { position: relative; }
.site-nav--compact .sub-menu { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-start: 0; inline-size: max-content; max-inline-size: min(22rem, 80vw); margin: 0; padding: var(--space-2); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.site-nav--compact .sub-menu .site-nav__link { white-space: normal; border-radius: var(--radius-control); }
.site-nav .sub-menu[hidden] { display: none; }
.site-nav .sub-menu .site-nav__link { display: flex; inline-size: 100%; }
/* Fullscreen variant remains independent of the header's positioning. */
.site-nav--expanded .site-nav__list { display: grid; gap: var(--space-4); }
.site-nav--expanded .site-nav__link {
    padding: 0.625rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    border-radius: var(--radius-control);
    font-family: var(--font-heading);
    font-size: clamp(var(--fs-nav-expanded-min), 3vw, var(--fs-nav-expanded-max));
    font-weight: 600;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-breadcrumb-muted);
    transition: color var(--dur-fast) var(--ease-standard);
}
.site-nav--expanded .site-nav__link:not(.site-nav__link--inactive):hover { color: var(--color-text); background: transparent; }
.site-nav--expanded .site-nav__dropdown-toggle[aria-expanded="true"],
.site-nav--expanded .site-nav__link:not(.site-nav__link--inactive):hover { color: var(--color-nav-active); }
.site-nav--expanded .sub-menu { display: grid; gap: var(--space-4); margin: var(--space-2) 0 0; }
@media (min-width: 75rem) {
    .site-nav--expanded .menu-item-has-children { position: relative; }
    .site-nav--expanded { --nav-submenu-offset: max(28%, 17rem); }
    .site-nav--expanded .site-nav__list > .menu-item > .site-nav__link { max-inline-size: var(--nav-submenu-offset); }
    .site-nav--expanded .sub-menu {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: var(--nav-submenu-offset);
        inline-size: calc(100% - var(--nav-submenu-offset));
        max-inline-size: 34rem;
        margin: 0;
        padding: 0;
    }
}

.site-nav--footer .site-nav__list { display: block; }
.site-nav--footer .site-nav__link { padding: var(--space-1) 0; color: var(--color-inverse-muted); border-radius: 0; }
.site-nav--footer .site-nav__link:not(.site-nav__link--inactive):hover { color: var(--color-on-accent); background: transparent; text-decoration: underline; }
@media (min-width: 75rem) {
    .site-nav--footer .site-nav__link { min-block-size: 2.5rem; }
}