/* ==========================================================================
   4SKILLS — SITE HEADER
   --------------------------------------------------------------------------
   One design, two grounds. header.php and header-black.php carry byte-
   identical markup; the ONLY difference is .site-header--dark on the outer
   wrapper, which re-grounds everything below.

   Replaces the 182-line inline <style> that used to live in
   header-black.php, and decouples the header from the legacy
   .navbar-light rules in css/style.css (which 404.php still uses).

   Loaded after style.css and main.css so it outranks
   `.nav-item { font-family: Nunito }` in scss/main.css.

   Values come from css/tokens.css. No colour or spacing literal here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHELL — CSS sticky. No JavaScript involved.
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;                      /* Bootstrap's own sticky-top layer */
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.site-header--dark {
    background-color: var(--color-navy-deep);
    border-bottom-color: var(--color-navy-soft);
}

.site-header .navbar {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   BRAND

   img/logo_transparent.png is a lockup with baked-in blocks: a black block
   holding white "4SKILLS" text, plus a white square holding a black "4".
   It cannot sit directly on navy, and a CSS invert would flip the wordmark
   to black-on-white and destroy it. So the dark ground gets a white plate.
   This is a difference of ground, not of design.

   A white-knockout SVG wordmark would remove the plate entirely and is the
   single highest-value asset fix available here.
   -------------------------------------------------------------------------- */
.site-nav__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.site-nav__brand img {
    display: block;
    height: 44px;
    width: auto;
}

.site-header--dark .site-nav__brand {
    background-color: var(--color-white);
    padding: var(--space-2) var(--space-3);
}

.site-nav__brand:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   NAV LINKS

   Heebo, already downloaded on every page and previously rendering
   nowhere. Uppercase because after Phase 4.5 body copy also becomes Heebo,
   and without a case difference the nav would be indistinguishable from
   body text.
   -------------------------------------------------------------------------- */
.site-nav .navbar-nav {
    align-items: center;
}

.site-nav .nav-link {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-navy);
    padding: var(--space-3) var(--space-4);
    transition: color var(--duration-base) var(--ease);
}

.site-header--dark .site-nav .nav-link {
    color: var(--color-white);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
    color: var(--color-gold-deep);
}

.site-header--dark .site-nav .nav-link:hover,
.site-header--dark .site-nav .nav-link:focus-visible {
    color: var(--color-gold);
}

.site-nav .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   ACTIVE PAGE

   Gold plus a persistent 2px rule, so the current page stays identifiable
   while the pointer is hovering something else. Hover is colour only.

   The rule is drawn on ::before because css/style.css already uses
   ::after on .navbar .dropdown-toggle for the Font Awesome caret.

   Colour differs by ground for contrast, not for style: --color-gold is
   2.29:1 on white and fails the 3:1 non-text requirement of WCAG 1.4.11
   for a state indicator, so light grounds use --color-gold-deep (4.90:1).
   On navy, --color-gold is 8.02:1 and is correct.

   The rule is also a non-colour indicator, so the active state does not
   depend on colour perception alone (WCAG 1.4.1).
   -------------------------------------------------------------------------- */
.site-nav .nav-link.active {
    color: var(--color-gold-deep);
}

.site-header--dark .site-nav .nav-link.active {
    color: var(--color-gold);
}

.site-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--space-3) - 2px);
    height: 2px;
    background-color: var(--color-gold-deep);
}

.site-header--dark .site-nav .nav-link.active::before {
    background-color: var(--color-gold);
}

/* Dropdown caret. css/style.css replaces Bootstrap's triangle with a Font
   Awesome glyph on ::after for any .navbar; inherit colour from the link
   so it tracks hover and active without a second rule. */
.site-nav .dropdown-toggle::after {
    color: currentColor;
}

/* --------------------------------------------------------------------------
   DROPDOWNS — identical in both headers
   -------------------------------------------------------------------------- */
.site-nav .dropdown-menu {
    margin-top: 0;
    padding: var(--space-2);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 11rem;
}

.site-header--dark .site-nav .dropdown-menu {
    background-color: var(--color-navy);
    border-color: var(--color-navy-soft);
    box-shadow: var(--shadow-on-dark);
}

.site-nav .dropdown-item {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-navy);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    transition:
        background-color var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease);
}

.site-header--dark .site-nav .dropdown-item {
    color: var(--color-white);
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
    background-color: var(--color-gold-tint);
    color: var(--color-navy);
}

.site-header--dark .site-nav .dropdown-item:hover,
.site-header--dark .site-nav .dropdown-item:focus {
    background-color: var(--color-navy-soft);
    color: var(--color-gold);
}

.site-nav .dropdown-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   TOGGLER

   Inline SVG with stroke="currentColor" rather than Bootstrap's
   .navbar-toggler-icon, whose background-image only exists under
   .navbar-light / .navbar-dark. currentColor also keeps the icon
   tokenised instead of baking hex into a data URI.
   -------------------------------------------------------------------------- */
.site-nav__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    color: var(--color-navy);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.site-header--dark .site-nav__toggler {
    color: var(--color-white);
    border-color: var(--color-navy-soft);
}

.site-nav__toggler:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.site-nav__toggler svg {
    display: block;
}

/* --------------------------------------------------------------------------
   HEADER CTA

   Secondary, not primary: the brand rule is one primary action per
   viewport, and the page hero owns it. Links to an existing URL.
   -------------------------------------------------------------------------- */
.site-nav__cta {
    flex-shrink: 0;
    margin-left: var(--space-6);
}

/* --------------------------------------------------------------------------
   MOBILE — under Bootstrap's lg breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        margin-top: var(--space-3);
        padding: var(--space-3) 0;
        border-top: 1px solid var(--color-border);
    }

    .site-header--dark .navbar-collapse {
        border-top-color: var(--color-navy-soft);
    }

    .site-nav .navbar-nav {
        align-items: stretch;
    }

    .site-nav .nav-link {
        padding: var(--space-3) var(--space-4);
    }

    /* Stacked nav: the active rule moves to the leading edge, where a
       bottom rule would read as a divider between rows. Still 2px, still
       gold, still a non-colour indicator. */
    .site-nav .nav-link.active::before {
        left: 0;
        right: auto;
        top: var(--space-2);
        bottom: var(--space-2);
        width: 2px;
        height: auto;
    }

    .site-nav .dropdown-menu {
        margin-left: var(--space-4);
        border: none;
        box-shadow: none;
        background-color: transparent;
        padding-left: 0;
    }

    .site-header--dark .site-nav .dropdown-menu {
        background-color: transparent;
        box-shadow: none;
    }

    .site-nav__cta {
        display: flex;
        margin-left: 0;
        margin-top: var(--space-3);
    }
}