/* ==========================================================================
   HEADER — mobile-first
   Mobile + Tablet (< 1025px): hamburger toggle, dropdown menu.
   Desktop (>= 1025px, matches _layout.css's container breakpoint): 3-column
   grid — logo (left) | Primary Menu (centered) | Login + Start Assessment
   (right).

   NOTE ON BREAKPOINT: DESIGN.md's own "tablet" range is 768-1024px, and it
   would be tempting to switch to the full inline nav at 768px. But the
   actual content — logo + 4 nav links + "Login" + a "Start Assessment"
   button with 16px/32px padding — needs roughly 800-850px just for itself,
   before any container padding. At 768-1023px that overflowed the header
   and forced a page-wide horizontal scrollbar. Using 1025px (this system's
   existing desktop threshold, see _layout.css) is the first point with
   enough room to spare.
   ========================================================================== */

.du-header {
    background-color: var(--surface);
    border-bottom: var(--border-width) solid var(--border);
    position: sticky;
    top: 0;
    /* Was 50. Raised just above _article-layout.css's sticky Table of
       Contents (documented z-index: 60), which otherwise renders on top
       of the open mobile menu on article pages — the underlying cause
       of a stacking conflict, not a reason to stack more z-index values
       on the nav itself. */
    z-index: 70;
}

.du-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-md);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    position: relative;
}

/* ---- Site branding: logo image stacked above the wordmark ---- */
.du-site-branding__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-base);
    text-decoration: none;
    min-width: 0; /* lets the wordmark truncate/wrap instead of forcing overflow */
}

.du-site-branding__image-wrap {
    display: block;
    line-height: 0;
}

.du-site-branding__image {
    display: block;
    height: 32px;
    width: auto;
}

/* NOTE: DESIGN.md's type scale doesn't define a dedicated "logo" size
   (its smallest heading token is headline-lg at 32px, too large here).
   1.25rem/500 is a conservative in-between value, not a spec token —
   flag if you have an exact logo size to lock this to. */
.du-site-branding__logo {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: var(--headline-lg-weight);
    color: var(--on-background);
    white-space: nowrap;
}

/* ---- Mobile toggle ---- */
.du-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    padding: var(--space-xs);
    color: var(--on-background);
    cursor: pointer;
    flex-shrink: 0;
}

.du-nav__icon--close {
    display: none;
}

.du-nav__toggle[aria-expanded="true"] .du-nav__icon--open {
    display: none;
}

.du-nav__toggle[aria-expanded="true"] .du-nav__icon--close {
    display: block;
}

/* ---- Nav wrapper ----
   display: contents at every width (not just desktop, see the old
   min-width: 1025px override below) so the empty <nav> element itself
   never becomes a flex item of .du-header__inner. Previously .du-nav
   was display: block on mobile, which meant .du-header__inner had THREE
   flex children (branding, toggle, nav) instead of two even when the
   dropdown was closed and had nothing visible in it — the invisible
   0-size <nav> box was still a participant in justify-content:
   space-between's math, which pushed the toggle away from the true
   right edge instead of sitting flush against it. With display:
   contents, only .du-nav__menu (its child) participates in layout, and
   that child is display: none when closed and position: fixed when
   open (see .is-open below) — either way it's removed from
   .du-header__inner's flex flow, so branding/toggle are reliably the
   only two flex items at every width. */
.du-nav {
    display: contents;
}

.du-nav__menu {
    display: none;
}

.du-nav__menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    position: fixed;
    top: var(--du-header-height, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface);
    border-bottom: var(--border-width) solid var(--border);
    padding: var(--space-md) var(--space-margin-mobile) var(--space-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.du-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.du-nav__list a {
    font-family: var(--font-sans);
    font-size: var(--body-md-size);
    color: var(--text-body);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.du-nav__list a:hover,
.du-nav__list a:focus-visible {
    color: var(--primary-container);
}

.du-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
}

.du-nav__login {
    font-family: var(--font-sans);
    font-size: var(--body-md-size);
    color: var(--text-body);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.du-nav__login:hover,
.du-nav__login:focus-visible {
    color: var(--primary-container);
}

.du-nav__cta {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   DESKTOP — >= 1025px
   ========================================================================== */
@media (min-width: 1025px) {
    .du-header__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-content: initial;
    }

    .du-nav__toggle {
        display: none;
    }

    /* .du-nav is already display: contents unconditionally (see base
       rule above). .du-nav__menu still needs its own desktop override
       so it becomes contents too, promoting the link list and actions
       to be direct items of the header grid — list centered in column
       2, actions pinned to column 3. */
    .du-nav__menu {
        display: contents;
    }

    .du-nav__list {
        grid-column: 2;
        justify-self: center;
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
        width: auto;
    }

    .du-nav__actions {
        grid-column: 3;
        justify-self: end;
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
        width: auto;
    }

    .du-nav__cta {
        width: auto;
    }
}

/* ==========================================================================
   SCROLL LOCK — applied to <html> and <body> by navigation.js while the
   mobile menu is open, so the page behind the fixed .du-nav__menu.is-open
   overlay can't be scrolled or interacted with. Both elements are locked
   (not just body) since some mobile browsers still rubber-band/scroll the
   viewport via <html> even when only body has overflow: hidden.
   ========================================================================== */
html.du-menu-open,
body.du-menu-open {
    overflow: hidden;
    height: 100%;
}