/*
 * Site header.
 *
 * `.header--transparent` (home page only, set by $isHomePage in
 * partials/header.php) starts see-through over the hero photo and gains a
 * solid backing + shadow once public/js/header-scroll.js adds
 * `.is-scrolled`. Text stays the normal dark palette in BOTH states - the
 * hero's scrim (03-hero.css) is a heavy white wash, not a dark photo, so
 * white nav text would be unreadable against it (that was the original bug:
 * white-on-near-white). Only background/border/shadow change on scroll.
 *
 * Mobile nav (`.header__panel`) is Bootstrap's Offcanvas component
 * (`.offcanvas-md` only - the base `.offcanvas` class is deliberately
 * omitted, public/js/header-panel.js). Base `.offcanvas` sets
 * `position: fixed; visibility: hidden` unconditionally at every width, so
 * having both classes hid the whole panel on desktop; `.offcanvas-md` alone
 * scopes that same fixed/hidden behaviour to its own `max-width: 767.98px`
 * block, which is what makes `display: contents` above that breakpoint work
 * at all. `.header__bar` (logo + burger button), `.header__panel` and its
 * required `.offcanvas-body` wrapper (without it Bootstrap's desktop reset
 * for `.offcanvas-md .offcanvas-body` never applies) are all `display:
 * contents` on desktop, so their children join `.header__wrapper`'s flex row
 * exactly as if the wrapping divs were not there - the burger button itself
 * is what's hidden via the `d-md-none` utility on desktop, not the whole bar.
 *
 * On mobile `.header__panel` becomes a real box: Bootstrap toggles
 * `.showing`/`.show`/`.hiding` on it (Escape, the focus trap and returning
 * focus to the burger on close are Bootstrap's own behaviour for a trigger
 * opened via `data-bs-toggle="offcanvas"`) and the mobile block below
 * overrides its position/size/visibility to match the original dropdown
 * look - a fixed sidebar is not what this design wants, so none of
 * Bootstrap's `offcanvas-start/end/top` direction classes are used.
 * `.offcanvas-body` stays `display: contents` on mobile too, so its children
 * (heading, nav, contact block) become the direct flex-column children of
 * `.header__panel` that the mobile block below is written against.
 *
 * Flex display/direction/alignment on `.header__wrapper`, `.nav`,
 * `.header__contact`, `.header__messengers` and `.header__phone-block` come
 * from Bootstrap utility classes in the template (`d-flex`, `flex-md-row`,
 * `align-items-md-center`, `justify-content-md-between`) - this file only
 * keeps the vw-scaled gap/padding values Bootstrap's fixed rem scale can't
 * reproduce, plus color, typography and the burger/panel state toggle.
 */

/* The mobile menu lives inside the header, so the offcanvas dimmer has to
   sit BELOW both: at Bootstrap's own 1040 it covers the header bar and the
   close button stops responding to taps. Modals keep their own backdrop
   (.modal-backdrop) and are not affected. */
body.has-open-menu::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 34, 66, 0.5);
}

.header {
    position: sticky;
    top: 0;
    /* Above Bootstrap's offcanvas backdrop (1040): the mobile panel lives
       inside the header, and under the backdrop its links are unclickable. */
    z-index: 1100;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.header--transparent:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
}

/* With the mobile panel open the header sits above the offcanvas backdrop,
   so a transparent bar would show the dimmed page through it and the logo
   would read as greyed out. */
.header--transparent:not(.is-scrolled):has(.header__panel.show),
.header--transparent:not(.is-scrolled):has(.header__panel.showing) {
    background: var(--color-surface);
    border-bottom-color: var(--color-border);
}

.header--transparent.is-scrolled {
    box-shadow: var(--shadow-bar);
}

.header__wrapper {
    gap: 1.67vw;
    padding: 1.25vw 0;
}

.header__bar,
.header__panel,
.header__panel .offcanvas-body {
    display: contents;
}

/*
 * Brand mark, raster from the client's reference lockup
 * (public/img/logo/assethr-logo-source.png, 430x118). Two derived crops:
 * `assethr-mark.png` (wordmark, black "HR" - light surfaces only) here and
 * `assethr-lockup-light.png` (wordmark + subline, white "HR") in
 * 14-footer.css for the navy footer. The header keeps the wordmark without
 * the "TRAINING COACHING CAREER" subline on purpose: the source is 118px
 * tall, so at the header's ~28px logo height that subline renders under 5px
 * and turns to mush. The transparent home-page header sits on the hero's
 * white scrim (03-hero.css), not on a dark photo, so the black-"HR" crop is
 * the right one in both header states.
 *
 * Width is capped, not the height: the source is a single 1x raster, and
 * displaying it below its natural 193px keeps the letterforms sharp.
 */
.logo {
    display: block;
    width: 8.85vw;
    transition: opacity 0.2s ease;
}

.logo:hover {
    opacity: 0.78;
}

.logo__image {
    width: 100%;
    height: auto;
}

.nav {
    gap: 1.67vw;
}

.nav__link {
    position: relative;
    color: var(--color-text);
    font-weight: 400;
    padding-bottom: 0.21vw;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--color-accent);
    transition: right 0.2s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
    color: var(--color-accent);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
    right: 0;
}

/* Promoted out of the course catalog into its own nav item - stands out as
   a pill instead of the plain underline-on-hover links (content/site.php,
   `nav[].highlight`). */
.nav__link--highlight {
    padding: 0.42vw 1.04vw;
    background: var(--color-cta);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.nav__link--highlight::after {
    display: none;
}

.nav__link--highlight:hover,
.nav__link--highlight:focus-visible {
    background: var(--color-cta-dark);
    color: #fff;
}

.header__contact {
    gap: 1.04vw;
}

.header__messengers {
    gap: 0.63vw;
}

.header__messenger {
    width: 1.98vw;
    height: 1.98vw;
    border-radius: 50%;
    background: var(--color-surface-muted);
    color: var(--color-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header__messenger:hover {
    background: var(--color-accent);
    color: #fff;
}

.header__messenger-icon {
    width: 1.04vw;
    height: 1.04vw;
}

.header__phone-block {
    gap: 0.21vw;
}

.header__phone {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.header__phone:hover {
    color: var(--color-accent);
}

.header__callback {
    padding: 0;
    font: inherit;
    font-size: 0.73vw;
    font-weight: 700;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.header__callback:hover {
    color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    .nav__link::after {
        transition: none;
    }

    .header__messenger {
        transition: none;
    }

    .header__burger-line {
        transition: none;
    }
}

@media only screen and (max-width: 767.98px) {
    /*
     * The transparent-over-hero look assumes a short, single-row header so
     * the hero's negative margin-top (03-hero.css) lines up with its real
     * height. On mobile the hero drops that pull-up entirely (03-hero.css),
     * so the header no longer overlaps it - it just stays solid instead of
     * showing plain body background through a "transparent" bar.
     */
    .header--transparent {
        background: var(--color-surface);
        border-bottom-color: var(--color-border);
    }

    .header__wrapper {
        gap: 0;
        padding: 4vw 0;
    }

    .header__bar {
        display: flex;
    }

    /* 375px reference: 150px of the 330px container, leaving the 44px
       burger and a full gap beside it. */
    .logo {
        width: 40vw;
    }

    /* Only way to open the menu on mobile, so the button carries the 44px
       minimum target (static-site-a11y.md); the three lines inside keep
       their original 24px width. */
    .header__burger {
        gap: 1.6vw;
        width: 11.73vw;
        height: 11.73vw;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    .header__burger-line {
        display: block;
        width: 6.4vw;
        height: 0.53vw;
        border-radius: 999px;
        background: var(--color-primary);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .header__burger.is-open .header__burger-line:nth-child(1) {
        transform: translateY(2.13vw) rotate(45deg);
    }

    .header__burger.is-open .header__burger-line:nth-child(2) {
        opacity: 0;
    }

    .header__burger.is-open .header__burger-line:nth-child(3) {
        transform: translateY(-2.13vw) rotate(-45deg);
    }

    /*
     * Overrides Bootstrap's own `.offcanvas-md` rules at this breakpoint
     * (position: fixed, bottom: 0, z-index, transform-based transition):
     * same selector specificity, later in the cascade wins. No transform/
     * transition here on purpose - the original dropdown had none, and
     * `visibility` alone (Bootstrap's own show/hide mechanism) is enough to
     * take it out of the tab order and off screen readers.
     */
    .header__panel {
        position: absolute;
        top: 100%;
        /* Bootstrap's .offcanvas-md pins the panel to the bottom of the
           screen as well; with our own `top` that turns the height into the
           gap between the two anchors and the menu collapses to a strip. */
        bottom: auto;
        left: 0;
        right: 0;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6.4vw;
        width: 100%;
        /* Bootstrap's own .offcanvas-md keeps a fixed height here; without
           height: auto the panel collapses to it and the menu scrolls away
           behind an empty backdrop. */
        height: auto;
        max-height: calc(100svh - var(--header-height));
        overflow-y: auto;
        padding: 6.4vw 6vw 8vw;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-drawer);
        visibility: hidden;
        transition: none;
    }

    .header__panel.show,
    .header__panel.showing {
        visibility: visible;
    }

    .nav {
        gap: 6.4vw;
    }

    .nav__link {
        font-size: 5.33vw;
    }

    .nav__link--highlight {
        padding: 1.6vw 4vw;
    }

    .header__contact {
        width: 100%;
        gap: 6.4vw;
    }

    .header__messengers {
        gap: 2.67vw;
    }

    .header__messenger {
        width: 11.73vw;
        height: 11.73vw;
    }

    .header__messenger-icon {
        width: 4.27vw;
        height: 4.27vw;
    }

    .header__phone {
        font-size: 4.8vw;
    }

    .header__callback {
        font-size: 3.47vw;
    }
}