/* =================================================================== HEADER section css =================================================================== */
.header {
    position: absolute; inset-inline: 0; top: 0;
    z-index: var(--z-sticky);
    padding-block: var(--sp25);
    transition: var(--transition);

    &.is-sticky {
        position: fixed;
        padding-block: var(--sp12);
        background: var(--ink);
        border-bottom-left-radius: var(--r-lg);
        border-bottom-right-radius: var(--r-lg);
        box-shadow: var(--shadow-lg);
    }

    /* Full-width bar (not the 1440 content width): logo + nav on the left,
       actions on the right. */
    & .header__inner {
        position: relative;
        display: flex; align-items: center;
        gap: var(--sp25);
        max-width: none;
        padding-inline: var(--sp40);
    }

    & .header__nav { margin-right: auto; }

    & .header__logo {
        display: flex; align-items: center;
        gap: var(--sp10);
        color: var(--white);
    }

    & .header__logo-img { width: 150px; }

    /* Frosted glass bar. backdrop-filter makes this list the containing block
       of the mega panels, so vendor.js sets --mega-left / --mega-width to keep
       them centred on the page rather than on the bar. */
    & .header__nav-list {
        --nav-pad: var(--sp8);
        --nav-gap: var(--sp4);

        display: grid; grid-auto-flow: column; align-items: center;
        padding: var(--nav-pad);
        background: var(--glass);
        border: 1px solid var(--glass-line);
        border-radius: var(--r-btn);
        isolation: isolate;
        -webkit-backdrop-filter: blur(15px);
                backdrop-filter: blur(15px);

        & > .header__item { grid-row: 1; }
        & > .header__item + .header__item { margin-left: var(--nav-gap); }
    }
    & .header__item {
        display: flex; align-items: center;
        border-radius: var(--r-sm);
        transition: var(--transition);
    }

    /* A mega item is one pill: the link and its arrow share the white
       background, so the arrow never sits outside on the dark bar. */
    & .header__item--mega {
        padding-right: var(--sp5);

        & > .header__link { padding-right: var(--sp4); }
        & > .header__link:hover { background: none; }
    }

    & .header__sub-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 22px; height: 30px;
        border-radius: var(--r-sm);
        color: var(--white);

        & svg { transition: var(--transition); }
    }

    /* Active section: the whole pill (link + arrow) is white, like the hover state */
    & .header__item--mega:has(> .header__link[aria-current]) {
        background: var(--white);

        & > .header__link { background: none; color: var(--ink); }
        & > .header__sub-toggle { color: var(--ink); }
    }

    & .header__item--mega:is(:hover, :focus-within, .is-open) {
        background: var(--white);

        & > .header__link { background: none; color: var(--ink); }
        & > .header__sub-toggle { color: var(--ink); }
        & > .header__sub-toggle svg { transform: rotate(180deg); }
        & > .header__mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    }

    /* ---------------- Mega panel ---------------- */
    & .header__mega {
        position: absolute; top: calc(100% + var(--sp15)); left: var(--mega-left, 50%);
        width: var(--mega-width, min(1240px, calc(100% - 2 * var(--gutter))));
        z-index: var(--z-drop);
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: var(--sp30);
        padding: var(--sp30);
        background: var(--white);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-lg);
        opacity: 0; visibility: hidden;
        transform: translate(-50%, 10px);
        /* only the open/close effect animates — never left/width, or the
           panel slides sideways when vendor.js re-centres it */
        transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;

        /* hover bridge across the gap between bar and panel */
        &::before { position: absolute; inset-inline: 0; bottom: 100%; height: var(--sp25); content: ''; }
    }

    & .header__mega-head {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--sp15);
        padding-bottom: var(--sp15);
        margin-bottom: var(--sp15);
        border-bottom: 1px solid var(--line);
    }

    & .header__mega-title { font-size: var(--f25); }

    & .header__mega-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp5) var(--sp15);
    }

    & .header__mega-link {
        display: flex; align-items: flex-start;
        gap: var(--sp15);
        padding: var(--sp12);
        border-radius: var(--r-md);
        color: var(--ink);

        &:hover, &:focus-visible {
            background: var(--surface-light);
            & .header__mega-icon { background: var(--primary); color: var(--white); }
            & .header__mega-name { color: var(--primary); }
        }
    }

    & .header__mega-icon {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 46px; height: 46px;
        background: var(--surface-light);
        border-radius: var(--r-md);
        color: var(--primary);
        transition: var(--transition);
    }

    & .header__mega-name {
        display: block;
        margin-bottom: var(--sp4);
        font-family: var(--font-mona);
        font-size: var(--f16);
        font-weight: 500;
        line-height: 1.3;
        transition: var(--transition);
    }

    & .header__mega-desc {
        display: block;
        font-size: var(--f14);
        line-height: 1.45;
        color: var(--body-text);
    }

    & .header__mega-promo {
        position: relative;
        display: flex; flex-direction: column; justify-content: flex-end;
        gap: var(--sp15);
        min-height: 300px;
        padding: var(--sp30);
        border-radius: var(--r-lg);
        overflow: hidden;
        color: var(--white);

        &::after { position: absolute; inset: 0; z-index: 0; background: var(--card-shade), var(--overlay); content: ''; }
        & > * { position: relative; z-index: 1; }
    }

    & .header__mega-promo-img {
        position: absolute; inset: 0; z-index: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }

    & .header__mega-promo-title { font-size: var(--f25); color: var(--white); }

    & .header__mega-promo-text { font-size: var(--f14); color: var(--white-muted); }

    /* ---------------- Normal dropdown (Industries, About) ----------------
       Same open/close behaviour as a mega item, but a compact list that
       hangs directly under its own menu item. */
    & .header__item--dropdown { position: relative; }

    & .header__item--dropdown > .header__mega {
        left: 0;
        display: block;
        width: 280px;
        padding: var(--sp10);
        border-radius: var(--r-lg);
        transform: translateY(10px);
    }

    & .header__item--dropdown:is(:hover, :focus-within, .is-open) > .header__mega { transform: none; }

    & .header__dropdown-list { display: grid; gap: var(--sp4); }

    & .header__dropdown-link {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp10);
        padding: var(--sp12) var(--sp15);
        border-radius: var(--r-md);
        font-family: var(--font-mona);
        font-size: var(--f16);
        font-weight: 500;
        color: var(--ink);

        & svg { flex: 0 0 auto; opacity: 0; transform: translateX(-6px); transition: var(--transition); }

        &:hover, &:focus-visible {
            background: var(--surface-light);
            color: var(--primary);
            & svg { opacity: 1; transform: none; }
        }
    }

    & .header__link {
        display: inline-block;
        padding: var(--sp12) var(--sp8);
        border-radius: var(--r-sm);
        font-family: var(--font-mona);
        font-size: var(--f14);
        font-weight: 600;
        line-height: 1;
        letter-spacing: .01em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--white);

        &:hover,
        &[aria-current="page"] { background: var(--white); color: var(--ink); }
    }

    & .header__nav-head { display: none; }

    & .header__logo,
    & .header__actions { flex: 0 0 auto; }

    & .header__actions {
        display: flex; align-items: center;
        gap: var(--sp15);
    }

    & .header__phone {
        display: flex; align-items: center;
        gap: var(--sp12);
        margin-right: var(--sp5);
        color: var(--white);
    }

    & .header__phone-icon { flex: 0 0 auto; width: 30px; height: 30px; }

    & .header__phone-label {
        display: block;
        font-size: var(--f14);
        line-height: 1.3;
        color: var(--white-muted);
    }

    & .header__phone-number {
        font-size: var(--f18);
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        color: var(--white);

        &:hover { color: var(--primary); }
    }

    & .header__square {
        display: flex; align-items: center; justify-content: center;
        width: 53px; height: 53px;
        background: var(--glass);
        border: 1px solid var(--glass-line);
        border-radius: var(--r-btn);
        color: var(--white);
        -webkit-backdrop-filter: blur(15px);
                backdrop-filter: blur(15px);

        &:hover { background: var(--primary); border-color: var(--primary); }
    }

    & .header__burger { display: none; }

    & .header__backdrop {
        position: fixed; inset: 0;
        z-index: var(--z-drop);
        background: var(--overlay);
        opacity: 0; visibility: hidden;
        transition: var(--transition);

        &.is-open { opacity: 1; visibility: visible; }
    }

    /* Off-canvas info panel opened by the square button */
    & .header__panel {
        position: fixed; inset-block: 0; right: 0;
        z-index: var(--z-modal);
        width: min(420px, 90vw);
        padding: var(--sp50) var(--sp40);
        background: var(--white);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: var(--transition);

        &.is-open { transform: none; visibility: visible; }
    }

    & .header__panel-close { position: absolute; top: var(--sp25); right: var(--sp25); }

    & .header__panel-logo { margin-bottom: var(--sp25); color: var(--ink); }

    & .header__panel-text { margin-bottom: var(--sp35); }

    & .header__panel-title { margin-bottom: var(--sp20); font-size: var(--f25); }

    & .header__panel-list { display: grid; gap: var(--sp15); margin-bottom: var(--sp35); }

    & .header__panel-item {
        display: flex; align-items: center;
        gap: var(--sp15);
        color: var(--ink);

        & svg { flex: 0 0 auto; color: var(--primary); }
        & a:hover { color: var(--primary); }
    }

    & .header__panel-social { display: flex; gap: var(--sp10); }

    & .header__panel-social-link {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: var(--surface-light);
        border-radius: var(--r-full);
        color: var(--ink);

        &:hover { background: var(--primary); color: var(--white); }
    }
}

/* =================================================================== HEADER responsive =================================================================== */
@media (max-width: 1599.98px) {
    .header {
        & .header__phone { display: none; }
        & .header__inner { gap: var(--sp25); padding-inline: var(--sp30); }
        & .header__link { padding-inline: var(--sp10); font-size: var(--f14); }
    }
}

@media (max-width: 1439.98px) {
    .header {
        & .header__inner { gap: var(--sp12); }
        & .header__nav-list { --nav-pad: var(--sp5); --nav-gap: 0px; }
        & .header__link { padding-inline: var(--sp8); }
    }
}

@media (max-width: 1365.98px) {
    .header {
        & .header__mega { grid-template-columns: 1fr 280px; }
        & .header__logo-img { width: 140px; }
        & .header__link { padding-inline: var(--sp5); }
        & .header__square:not(.header__burger) { display: none; }
    }
}

@media (max-width: 1199.98px) {
    .header {
        & .header__inner { padding-inline: var(--gutter); }
        & .header__burger { display: flex; }

        /* the nav is now an off-canvas panel, so push the actions right */
        & .header__actions { margin-left: auto; }

        & .header__nav {
            position: fixed; inset-block: 0; right: 0;
            z-index: var(--z-modal);
            width: min(320px, 85vw);
            padding: var(--sp25);
            background: var(--white);
            overflow-y: auto;
            transform: translateX(100%);
            visibility: hidden;
            transition: var(--transition);

            &.is-open { transform: none; visibility: visible; }
        }

        & .header__nav-head {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: var(--sp20);
            font-family: var(--font-mona);
            font-size: var(--f20);
            font-weight: 600;
            color: var(--ink);
        }

        & .header__nav-list {
            display: flex; flex-direction: column; align-items: stretch;
            padding: 0;
            background: none;
            border: 0;
            isolation: auto;

            -webkit-backdrop-filter: none;
                    backdrop-filter: none;

            & > .header__item + .header__item { margin-left: 0; }
        }

        & .header__item {
            flex-wrap: wrap;
            border-bottom: 1px solid var(--line);
        }

        & .header__link {
            flex: 1;
            display: block;
            padding: var(--sp15) 0;
            border-radius: 0;
            font-size: var(--f16);
            color: var(--ink);

            &:hover,
            &[aria-current="page"] { background: none; color: var(--primary); }
        }

        & .header__sub-toggle {
            width: 40px; height: 40px;
            margin-left: 0;
            background: var(--surface-light);
            color: var(--ink);
        }

        & .header__item--mega { padding-right: 0; }

        & .header__item--mega:has(> .header__link[aria-current]) {
            background: none;

            & > .header__link { color: var(--primary); }
            &.is-open > .header__sub-toggle { color: var(--white); }
        }

        & .header__item--mega:is(:hover, :focus-within, .is-open) {
            background: none;

            & > .header__link { background: none; color: var(--primary); }
            & > .header__sub-toggle { color: var(--ink); }
            & > .header__sub-toggle svg { transform: none; }
        }

        & .header__item--mega.is-open > .header__sub-toggle {
            background: var(--primary);
            color: var(--white);
            & svg { transform: rotate(180deg); }
        }

        /* Mega becomes an accordion: hidden until its item is .is-open */
        & .header__mega {
            position: static;
            display: none;
            flex-basis: 100%;
            width: auto;
            padding: 0 0 var(--sp15);
            background: none;
            border-radius: 0;
            box-shadow: none;
            opacity: 1; visibility: visible;
            transform: none;

            &::before { display: none; }
        }

        & .header__item--mega.is-open > .header__mega { display: block; }

        /* the desktop open state centres the panel with translate(-50%);
           inside the accordion it must sit flat */
        & .header__item--mega:is(:hover, :focus-within, .is-open) > .header__mega,
        & .header__item--dropdown > .header__mega { width: auto; transform: none; }

        & .header__item--dropdown > .header__mega { display: none; padding: 0 0 var(--sp15); border-radius: 0; }
        & .header__item--dropdown.is-open > .header__mega { display: block; }

        & .header__dropdown-link { padding: var(--sp10) var(--sp8); font-size: var(--f14); }

        & .header__mega-head,
        & .header__mega-promo { display: none; }

        & .header__mega-list { grid-template-columns: 1fr; gap: 0; }

        & .header__mega-link { padding: var(--sp8); }

        & .header__mega-icon { width: 36px; height: 36px; }

        & .header__mega-desc { display: none; }
    }
}

@media (max-width: 767.98px) {
    .header {
        & .header__cta { display: none; }
    }
}

@media (max-width: 575.98px) {
    .header {
        & .header__square:not(.header__burger) { display: none; }
    }
}