/* header.css — utility bar, sticky main bar, primary nav, dropdown panels, mobile drawer
   The whole header is sticky with a negative offset equal to the utility bar,
   so the utility bar scrolls away and the main bar stays pinned. */

.site-header {
    position: sticky;
    inset-block-start: calc(var(--utility-bar-height) * -1);
    z-index: var(--z-header);
}

/* ---------------------------------------------------------------------
   Utility bar
   --------------------------------------------------------------------- */
.utility-bar {
    background-color: var(--color-bg);
    border-block-end: var(--hairline) solid var(--color-border-subtle);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    block-size: var(--utility-bar-height);
}
.utility-bar__contacts {
    display: flex;
    align-items: center;
    min-inline-size: 0;
}
.utility-bar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    padding-inline-end: var(--space-md);
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color var(--transition-fast);
}
.utility-bar__icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    margin-inline: auto;
    color: var(--color-accent);
}
.utility-bar__label { display: none; }
.utility-bar__social { flex-wrap: nowrap; }
.utility-bar__social-extra { display: none; }

@media (min-width: 576px) {
    .utility-bar__social-extra { display: list-item; }
}

@media (hover: hover) {
    .utility-bar__link:hover { color: var(--color-text); }
}

@media (min-width: 360px) {
    .utility-bar__link--phone .utility-bar__label { display: inline; }
    .utility-bar__link--phone .utility-bar__icon { margin-inline: 0; }
}

@media (min-width: 768px) {
    .utility-bar__link .utility-bar__label { display: inline; }
    .utility-bar__link .utility-bar__icon { margin-inline: 0; }
    .utility-bar__contacts { gap: var(--space-md); }
}

/* ---------------------------------------------------------------------
   Main bar — the layout box keeps a constant height so compaction never
   shifts page content (no scroll-driven layout shift); only the painted
   background (::before) and the inner row shrink.
   --------------------------------------------------------------------- */
.site-header__bar {
    --bar-height: var(--header-height-compact);
    position: relative;
    block-size: var(--bar-height);
    pointer-events: none;
}
.site-header__bar::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: var(--bar-height);
    background-color: var(--color-header);
    border-block-end: var(--hairline) solid var(--color-border-subtle);
    transition: block-size var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    block-size: var(--bar-height);
    pointer-events: auto;
    transition: block-size var(--transition-base);
}
.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-block-size: var(--touch-target);
}
.site-header__logo-image {
    inline-size: auto;
    block-size: var(--logo-height-compact);
    transition: block-size var(--transition-base);
}

.site-header.is-compact .site-header__bar::before {
    border-block-end-color: var(--color-border);
    box-shadow: var(--shadow-deep);
}

@media (min-width: 768px) {
    .site-header__bar { --bar-height: var(--header-height); }
    .site-header__logo-image { block-size: var(--logo-height); }
    .site-header.is-compact .site-header__bar::before,
    .site-header.is-compact .site-header__inner { block-size: var(--header-height-compact); }
    .site-header.is-compact .site-header__logo-image { block-size: var(--logo-height-compact); }
}

/* ---------------------------------------------------------------------
   Primary nav — shared pieces
   --------------------------------------------------------------------- */
.nav-primary { display: flex; align-items: center; }

.nav-primary__link,
.nav-primary__trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--touch-target);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    transition: color var(--transition-fast);
}
.nav-primary__chevron {
    inline-size: var(--icon-xs);
    block-size: var(--icon-xs);
    color: var(--color-accent);
    transition: transform var(--transition-base);
}
.nav-primary__trigger[aria-expanded="true"] .nav-primary__chevron { transform: rotate(180deg); }
.nav-primary__link[aria-current="page"],
.nav-primary__trigger[aria-expanded="true"] { color: var(--color-accent); }

@media (hover: hover) {
    .nav-primary__link:hover,
    .nav-primary__trigger:hover { color: var(--color-accent-highlight); }
}

/* Hamburger — three bars that animate to an X (html standard §5) */
.nav-primary__toggle {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-accent);
}
.nav-primary__toggle-bar {
    grid-area: 1 / 1;
    inline-size: var(--space-lg);
    block-size: var(--rule);
    background-color: currentColor;
    transition: transform var(--transition-base), opacity var(--transition-fast);
}
.nav-primary__toggle-bar:nth-child(1) { transform: translateY(calc(var(--space-sm) * -1)); }
.nav-primary__toggle-bar:nth-child(3) { transform: translateY(var(--space-sm)); }
.nav-primary__toggle[aria-expanded="true"] .nav-primary__toggle-bar:nth-child(1) { transform: rotate(45deg); }
.nav-primary__toggle[aria-expanded="true"] .nav-primary__toggle-bar:nth-child(2) { opacity: 0; }
.nav-primary__toggle[aria-expanded="true"] .nav-primary__toggle-bar:nth-child(3) { transform: rotate(-45deg); }

.nav-primary__close {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-accent);
}
.nav-primary__close-icon { inline-size: var(--icon-md); block-size: var(--icon-md); }

/* Dropdown panel content (shared by desktop panel and mobile accordion) */
.nav-panel__title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-display);
    color: var(--color-text);
}
.nav-panel__group-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
}
.nav-panel__link {
    display: flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--color-text-muted);
    transition: color var(--transition-fast), transform var(--transition-base);
}

@media (hover: hover) {
    .nav-panel__link:hover { color: var(--color-accent-highlight); transform: translateX(calc(var(--space-xs) * var(--dir-sign))); }
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: var(--color-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-drawer) var(--ease-out), visibility 0s var(--duration-drawer);
}
.nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-drawer) var(--ease-out), visibility 0s;
}

/* ---------------------------------------------------------------------
   Below 1200px — off-canvas drawer from the inline-end edge
   (a 9-item nav cannot fit at 992px without compressing — engineering Fix 8)
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .nav-primary__menu {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        inline-size: min(88vw, var(--drawer-width));
        background-color: var(--color-surface);
        border-inline-start: var(--hairline) solid var(--color-border);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(calc(100% * var(--dir-sign)));
        visibility: hidden;
        transition: transform var(--duration-drawer) var(--ease-out), visibility 0s var(--duration-drawer);
    }
    .nav-primary__menu.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--duration-drawer) var(--ease-out), visibility 0s;
    }

    .nav-primary__menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        min-block-size: var(--header-height-compact);
        padding-inline: var(--space-lg);
        border-block-end: var(--hairline) solid var(--color-border-subtle);
    }
    .nav-primary__menu-logo { inline-size: auto; block-size: var(--logo-height-compact); }

    .nav-primary__list { padding-inline: var(--space-lg); padding-block: var(--space-sm); }
    .nav-primary__item { border-block-end: var(--hairline) solid var(--color-border-subtle); }
    .nav-primary__item--cta { border-block-end: none; padding-block: var(--space-lg); }
    .nav-primary__item--cta .btn { inline-size: 100%; min-block-size: var(--btn-height-lg); font-size: var(--fs-md); }

    .nav-primary__link,
    .nav-primary__trigger {
        justify-content: space-between;
        inline-size: 100%;
        min-block-size: var(--btn-height-lg);
        font-size: var(--fs-lg);
    }

    /* Accordion: panels collapse to zero height until their trigger expands */
    .nav-panel {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows var(--transition-base), visibility 0s var(--transition-base);
    }
    .nav-primary__trigger[aria-expanded="true"] + .nav-panel {
        grid-template-rows: 1fr;
        visibility: visible;
        transition: grid-template-rows var(--transition-base), visibility 0s;
    }
    .nav-panel__inner { min-block-size: 0; overflow: hidden; }
    .nav-panel__intro .eyebrow,
    .nav-panel__title { display: none; }
    .nav-panel__intro,
    .nav-panel__group { padding-inline-start: var(--space-md); }
    .nav-panel__group-title { padding-block: var(--space-sm) var(--space-xs); }
    .nav-panel__links { padding-block-end: var(--space-sm); }
    .nav-panel__intro { order: 2; padding-block-end: var(--space-sm); }
    .nav-panel__inner { display: flex; flex-direction: column; }

    .nav-primary__menu-foot {
        display: grid;
        gap: var(--space-xs);
        margin-block-start: auto;
        padding: var(--space-lg);
        border-block-start: var(--hairline) solid var(--color-border-subtle);
        font-size: var(--fs-sm);
    }
    .nav-primary__menu-foot .utility-bar__label { display: inline; }
    .nav-primary__menu-foot .utility-bar__icon { margin-inline: 0; }
}

/* ---------------------------------------------------------------------
   1200px and up — horizontal nav with full-width dropdown panels
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .nav-primary__toggle,
    .nav-primary__menu-head,
    .nav-primary__menu-foot,
    .nav-backdrop { display: none; }

    .nav-primary__list {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }
    .nav-primary__link,
    .nav-primary__trigger {
        padding-inline: var(--space-sm);
        font-size: var(--fs-md);
    }
    /* gold underline for the current page and the open panel */
    .nav-primary__link::after,
    .nav-primary__trigger::after {
        content: "";
        position: absolute;
        inset-inline: var(--space-sm);
        inset-block-end: var(--space-xs);
        block-size: var(--rule);
        background: var(--gradient-gold);
        transform: scaleX(0);
        transition: transform var(--transition-base);
    }
    .nav-primary__link[aria-current="page"]::after,
    .nav-primary__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

    .nav-primary__item--cta { margin-inline-start: var(--space-md); }

    .nav-panel {
        position: absolute;
        inset-inline: 0;
        inset-block-start: var(--header-height);
        z-index: var(--z-dropdown);
        background-color: var(--color-surface-2);
        border-block: var(--hairline) solid var(--color-border);
        box-shadow: var(--shadow-deep);
        opacity: 0;
        visibility: hidden;
        transform: translateY(calc(var(--space-sm) * -1));
        transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s var(--transition-base);
    }
    .nav-primary__trigger[aria-expanded="true"] + .nav-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s;
    }
    .site-header.is-compact .nav-panel { inset-block-start: var(--header-height-compact); }
    .nav-panel::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(var(--hairline) * -1);
        block-size: var(--hairline);
        background: var(--gradient-gold-rule);
    }
    .nav-panel__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        gap: var(--space-2xl);
        padding-block: var(--space-2xl);
    }
    .nav-panel__intro {
        display: grid;
        align-content: start;
        justify-items: start;
        gap: var(--space-md);
        padding-inline-end: var(--space-2xl);
        border-inline-end: var(--hairline) solid var(--color-border-subtle);
    }
    .nav-panel__groups {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-xl);
    }
    .nav-panel__group { display: grid; align-content: start; gap: var(--space-sm); }
    .nav-panel__links--2col { column-count: 2; column-gap: var(--space-xl); }
    .nav-panel__links--3col { column-count: 3; column-gap: var(--space-xl); }
    .nav-panel__links li { break-inside: avoid; }
    .nav-panel__groups--single { grid-template-columns: minmax(0, 1fr); }
}

/* Section-active nav state (Phase 2) — `is-active` marks the section the page belongs to
   (set per page by _build/inject.cjs); `aria-current="page"` marks the exact page and is
   carried by the link itself. Dropdown parents have no link of their own, so the class is
   what makes Solutions / Industries / Brands read as current on their detail pages. */
.nav-primary__item.is-active > .nav-primary__link,
.nav-primary__item.is-active .nav-primary__trigger { color: var(--color-accent); }

/* the active item still answers the pointer: hover lifts it to the highlight gold
   (the is-active rule outranks .nav-primary__link:hover on its own) */
@media (hover: hover) {
    .nav-primary__item.is-active > .nav-primary__link:hover,
    .nav-primary__item.is-active .nav-primary__trigger:hover { color: var(--color-accent-highlight); }
}

@media (min-width: 1200px) {
    .nav-primary__item.is-active > .nav-primary__link::after,
    .nav-primary__item.is-active .nav-primary__trigger::after { transform: scaleX(1); }
}