/* === Header — copied from HTML prototype flow-F1.html lines 164-202 === */

    /* Base: fixed, transparent over hero */
    .wc-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: transparent;
        border-bottom: 1px solid transparent;
        transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
                    border-color 200ms cubic-bezier(0.2, 0, 0, 1);
    }

    /* Inner: flex layout with padding (NOT fixed height — matches prototype) */
    .wc-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
        padding-block: var(--space-11);
    }

    /* Logo — icon + text (InterviewSeek pattern) */
    .wc-header__logo {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        height: 52px;
        flex-shrink: 0;
    }
    .wc-header__logo-icon {
        height: 44px;
        width: 44px;
        object-fit: contain;
        flex-shrink: 0;
    }
    .wc-header__logo-text {
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: -0.5px;
        color: var(--color-bg-canvas);
        text-decoration: none;
    }

    /* Desktop nav — hidden on mobile, shown at 992px+ */
    .wc-header__nav {
        display: none;
    }
    .wc-header__nav-list {
        display: flex;
        align-items: center;
        gap: var(--space-12);
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .wc-header__nav-item {
        position: relative;
    }
    .wc-header__nav-link {
        color: var(--color-bg-canvas);
        opacity: 0.9;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: opacity 200ms;
    }
    .wc-header__nav-link:hover {
        opacity: 1;
    }

    /* Sticky state — white bg, dark text */
    .wc-header.nav--sticky {
        background: var(--color-bg-canvas);
        border-bottom-color: var(--color-border-default);
    }
    .wc-header.nav--sticky .wc-header__logo-text {
        color: var(--color-text-primary);
    }
    .wc-header.nav--sticky .wc-header__nav-link {
        color: var(--color-text-primary);
        opacity: 1;
    }
    .wc-header.nav--sticky .wc-header__nav-link:hover {
        color: var(--color-primary-text);
    }

    /* Dropdown menus */
    .wc-header__dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 220px;
        background: var(--color-bg-canvas);
        border: 1px solid var(--color-border-default);
        border-radius: 4px;
        box-shadow: var(--shadow-elevation-card);
        padding: var(--space-7) 0;
        list-style: none;
        margin: 0;
        z-index: 1001;
    }
    .wc-header__nav-item:hover > .wc-header__dropdown,
    .wc-header__nav-item:focus-within > .wc-header__dropdown {
        display: block;
    }
    .wc-header__dropdown a {
        display: block;
        padding: var(--space-7) var(--space-10);
        color: var(--color-text-primary);
        text-decoration: none;
        font-size: 1rem;
        transition: background 200ms, color 200ms;
        white-space: nowrap;
    }
    .wc-header__dropdown a:hover {
        background: var(--color-bg-section);
        color: var(--color-primary-text);
    }

    /* Desktop CTA — ghost button (transparent bg, white border, arrow) */
    .wc-header__cta {
        flex-shrink: 0;
        display: none;
    }
    .wc-header__cta a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        background: transparent;
        color: var(--color-bg-canvas);
        font-size: var(--text-caption);
        font-weight: 500;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 4px;
        transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1),
                    transform 200ms cubic-bezier(0.2, 0, 0, 1);
    }
    .wc-header__cta a::after {
        content: "→";
    }
    .wc-header__cta a:hover {
        border-color: var(--color-bg-canvas);
        transform: translateX(6px);
    }
    /* Sticky: dark text + dark border */
    .wc-header.nav--sticky .wc-header__cta a {
        color: var(--color-text-primary);
        border-color: var(--color-border-default);
    }
    .wc-header.nav--sticky .wc-header__cta a:hover {
        border-color: var(--color-border-hover);
    }

    /* Hamburger button */
    .wc-header__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10;
    }
    .wc-header__hamburger-lines {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-bg-canvas);
        position: relative;
        transition: background var(--motion-default) var(--motion-easing);
    }
    .wc-header__hamburger-lines::before,
    .wc-header__hamburger-lines::after {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-bg-canvas);
        position: absolute;
        left: 0;
        transition: transform var(--motion-default) var(--motion-easing),
                    background var(--motion-default) var(--motion-easing);
    }
    .wc-header__hamburger-lines::before { top: -7px; }
    .wc-header__hamburger-lines::after  { top: 7px; }

    /* Hamburger sticky state — dark lines */
    .wc-header.nav--sticky .wc-header__hamburger-lines,
    .wc-header.nav--sticky .wc-header__hamburger-lines::before,
    .wc-header.nav--sticky .wc-header__hamburger-lines::after {
        background: var(--color-text-primary);
    }

    /* Hamburger open animation */
    .wc-header__hamburger[aria-expanded="true"] .wc-header__hamburger-lines {
        background: transparent;
    }
    .wc-header__hamburger[aria-expanded="true"] .wc-header__hamburger-lines::before {
        transform: rotate(45deg);
        top: 0;
        background: var(--color-text-primary);
    }
    .wc-header__hamburger[aria-expanded="true"] .wc-header__hamburger-lines::after {
        transform: rotate(-45deg);
        top: 0;
        background: var(--color-text-primary);
    }

    /* === Mobile Drawer === */
    .wc-mobile-drawer__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(8, 8, 8, 0.5);
        opacity: 0;
        transition: opacity var(--motion-default) var(--motion-easing);
        z-index: 1000;
    }
    .wc-mobile-drawer:not([hidden]) .wc-mobile-drawer__backdrop {
        opacity: 1;
    }

    .wc-mobile-drawer__panel {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 400px;
        height: 100dvh;
        background: var(--color-bg-canvas);
        transform: translateX(100%);
        transition: transform var(--motion-slow) var(--motion-easing);
        z-index: 1001;
        overflow-y: auto;
        padding: var(--space-13) var(--space-11);
    }
    .wc-mobile-drawer:not([hidden]) .wc-mobile-drawer__panel {
        transform: translateX(0);
    }

    .wc-mobile-drawer__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 24px;
        color: var(--color-text-primary);
        margin-left: auto;
        margin-bottom: var(--space-11);
    }

    .wc-mobile-drawer__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .wc-mobile-drawer__list > li {
        border-bottom: 1px solid var(--color-border-default);
    }
    .wc-mobile-drawer__list a {
        display: block;
        padding: var(--space-10) 0;
        color: var(--color-text-primary);
        text-decoration: none;
        font: var(--text-body);
        font-weight: 500;
    }
    .wc-mobile-drawer__list a:hover {
        color: var(--color-primary-text);
    }
    .wc-mobile-drawer__list a[aria-current="page"] {
        color: var(--color-primary-text);
        font-weight: 600;
    }

    /* Accordion toggle — full-width row tap target */
    .wc-mobile-drawer__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-10) 0;
        color: var(--color-text-primary);
        font: var(--text-body);
        font-weight: 500;
        text-align: left;
    }
    .wc-mobile-drawer__toggle:hover,
    .wc-mobile-drawer__toggle[aria-expanded="true"] {
        color: var(--color-primary-text);
    }
    .wc-mobile-drawer__chevron {
        display: inline-block;
        transition: transform var(--motion-default) var(--motion-easing);
        font-size: 18px;
        color: var(--color-text-secondary);
    }
    [aria-expanded="true"] .wc-mobile-drawer__chevron {
        transform: rotate(90deg);
        color: var(--color-primary-text);
    }

    /* Sub-menu items */
    .wc-mobile-drawer__sub {
        list-style: none;
        margin: 0;
        padding: 0 0 var(--space-7) var(--space-11);
    }
    .wc-mobile-drawer__sub a {
        padding: var(--space-7) 0;
        font-weight: 400;
    }

    /* Mobile drawer CTA */
    .wc-mobile-drawer__cta {
        margin-top: var(--space-12);
    }
    .wc-mobile-drawer__cta a {
        display: block;
        text-align: center;
        padding: var(--space-10) var(--space-11);
        background: var(--color-primary);
        color: var(--color-bg-canvas);
        font: var(--text-body);
        font-weight: 600;
        text-decoration: none;
        border-radius: var(--radius-md);
    }
    .wc-mobile-drawer__cta a:hover {
        background: var(--color-primary-hover);
    }

    /* === Desktop breakpoint (>= 992px) === */
    @media (min-width: 992px) {
        /* display:contents removes the <nav> wrapper from flex layout so
           <ul> becomes a direct flex child of .wc-header__inner — matching
           the HTML prototype where nav-links sits alongside logo and CTA
           as siblings in the flex container (space-between distributes evenly) */
        .wc-header__nav {
            display: contents;
        }
        .wc-header__nav-list {
            display: flex;
            align-items: center;
        }
        .wc-header__cta {
            display: block;
        }
        .wc-header__hamburger {
            display: none;
        }
    }

    /* === JS-disabled fallback === */
    .no-js .wc-header__hamburger { display: none; }
    .no-js .wc-header__nav {
        display: flex !important;
        flex-wrap: wrap;
    }
    .no-js .wc-header__dropdown {
        position: static;
        display: block;
        transform: none;
        border: none;
        box-shadow: none;
        min-width: auto;
        padding: 0;
    }