/* =====================================================================
   Header
   Simple fixed header: solid #001130 background at all times, no
   scroll-triggered state change. Previously this had a transparent-
   over-hero → frosted-glass-on-scroll transition (toggled by
   header.js adding `.is-scrolled`); that's been removed in favor of
   one constant appearance everywhere the header appears (homepage,
   services.php, service-details.php, contact.php), including over
   the homepage hero — see hero.css for how the hero's own top scrim
   already smooths that transition without needing a transparent
   header.
   ===================================================================== */

.site-header {
    /* Fixed, not sticky — sticky keeps the header in normal document
       flow, which reserves its own box and pushes page content down
       below it rather than letting the header float over it. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--color-header-bg);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    /* 1.375rem (22px), up from 1.125rem — the full logo (with its
       tagline line) is now the tallest element in the row instead of
       the CTA button, so the header grew to give it room rather than
       being capped to match the button's height. */
    padding-block: 1.375rem;
}

.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo-img {
    display: block;
    width: auto;
    /* Full logo (1554x488, includes the "SOUND IDEAS, SMART
       SOLUTIONS" tagline) — no object-fit/cropping involved, so this
       height just scales the whole file proportionally; nothing is
       ever clipped regardless of the value. 70px was picked so the
       tagline line stays legible rather than shrinking to a blur, and
       is now the tallest sibling in the row (was previously sized to
       stay just under the CTA button; that relationship flipped once
       the logo gained its taller true aspect ratio). */
    height: 70px;
}

/* ---- Nav toggle input (checkbox-hack, no JS required) ----------------- */

.site-header__nav-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---- Nav ---------------------------------------------------------------- */

.site-nav {
    order: 2;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

.site-nav__link {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    /* White by default — the header background is always the solid
       dark #001130 now, never the light frosted-glass state this
       used to need to contrast against. */
    color: var(--color-white);
    transition: color var(--duration-fast) var(--ease-base);
}

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

.site-header__cta {
    order: 3;
    flex-shrink: 0;
}

/* ---- Mobile menu toggle -------------------------------------------------- */

.site-header__menu-toggle {
    display: none;
    order: 4;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    /* White — always sits on the solid dark header bar itself, never
       on the light mobile-panel background below it. */
    background-color: var(--color-white);
    border-radius: 2px;
    transition: transform var(--duration-fast) var(--ease-base),
                opacity var(--duration-fast) var(--ease-base),
                background-color var(--duration-base) var(--ease-base);
}

.site-header__menu-icon {
    position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
    content: '';
    position: absolute;
    left: 0;
}

.site-header__menu-icon::before {
    top: -7px;
}

.site-header__menu-icon::after {
    top: 7px;
}

.site-header__nav-toggle-input:checked ~ .site-header__menu-toggle .site-header__menu-icon {
    background-color: transparent;
}

.site-header__nav-toggle-input:checked ~ .site-header__menu-toggle .site-header__menu-icon::before {
    transform: translateY(7px) rotate(45deg);
}

.site-header__nav-toggle-input:checked ~ .site-header__menu-toggle .site-header__menu-icon::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Responsive: collapse nav into a toggled panel below ~1024px ------- */

@media (max-width: 1023px) {
    .site-nav {
        order: 5;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-base) var(--ease-base);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
        padding-block: var(--space-lg) var(--space-xl);
    }

    /* The open panel gets its own solid white background with dark
       text — a deliberate contrast against the header's own dark
       #001130 bar, rather than matching it, so the open state reads
       clearly as a distinct dropdown surface. */
    .site-header__nav-toggle-input:checked ~ .site-nav {
        max-height: 400px;
        background-color: var(--color-white);
        border-top: 1px solid var(--color-border);
    }

    .site-header__nav-toggle-input:checked ~ .site-nav .site-nav__link {
        color: var(--color-text-dark);
    }

    .site-header__inner {
        flex-wrap: wrap;
    }

    .site-header__menu-toggle {
        display: flex;
    }

    .site-header__cta {
        order: 3;
    }
}

@media (max-width: 480px) {
    .site-header__cta {
        display: none;
    }
}