/* header.css — white sticky header, primary nav, mobile hamburger + slide-in drawer */

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg);
    transition: box-shadow var(--transition-base);
}

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

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-xs);
}

/* The logo sets the header height, with 8px of space above and below it (BASAM 2026-09-15):
   4px header padding + the logo's own 4px margin, so the 44px menu button still fits a 52px phone header.
   Logo width: header size less 16px (height) × aspect ratio; on phones it scales with the space beside
   the menu button, never below the height that fits the 52px header. */
.site-header__brand {
    display: block;
    flex: 0 1 auto;
    min-inline-size: 0;
}

.site-header__logo {
    inline-size: clamp((var(--tap) - 2 * var(--space-xs)) * var(--logo-ratio), 0.8 * (100vw - 2 * var(--gutter) - var(--tap) - var(--space-md)) - 2 * var(--space-xs) * var(--logo-ratio), var(--logo-width));
    block-size: auto;
    margin-block: var(--space-xs);
}

.site-header__toggle,
.site-nav__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    border-radius: var(--radius-button);
    color: var(--color-heading);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.site-header__toggle:hover,
.site-nav__close:hover {
    background-color: var(--color-surface);
    color: var(--color-accent-deep);
}

/* ----------------------------------------------- Navigation: mobile drawer (base) */
.site-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    inline-size: min(86vw, var(--drawer-size));
    padding: var(--space-lg);
    overflow-y: auto;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--duration-drawer) ease, visibility 0s linear var(--duration-drawer);
}

/* RTL: the drawer slides in from the LEFT (html-coding-standards §5) */
[dir="rtl"] .site-nav { transform: translateX(-100%); }

.site-nav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--duration-drawer) ease;
}

.site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-border);
}

.site-nav__logo {
    inline-size: var(--logo-drawer);
    block-size: auto;
}

.nav-primary__list {
    display: flex;
    flex-direction: column;
}

.nav-primary__link {
    font-family: var(--font-heading);
    display: block;
    padding-block: var(--space-md);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    transition: color var(--transition-fast);
}

.nav-primary__link:hover { color: var(--color-accent-deep); }

.nav-primary__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--color-accent-deep);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.55em;
}

.site-nav__cta { inline-size: 100%; }

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

.site-nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-drawer) ease;
}

/* ------------------------------------------------ Navigation: desktop (≥ 992px) */
@media (min-width: 992px) {
    .site-header__inner { gap: var(--space-xl); }

    .site-header__logo { inline-size: var(--logo-width-lg); }

    .site-header__toggle,
    .site-nav__head,
    .site-nav-backdrop { display: none; }

    .site-nav,
    [dir="rtl"] .site-nav {
        position: static;
        flex-shrink: 0;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xl);
        inline-size: auto;
        padding: 0;
        overflow: visible;
        background-color: transparent;
        box-shadow: none;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .nav-primary__list {
        flex-direction: row;
        gap: var(--space-lg);
    }

    .nav-primary__link {
        position: relative;
        padding-block: var(--space-sm);
        border-block-end: 0;
        font-size: var(--fs-md);
    }

    .nav-primary__link:hover { color: var(--color-heading); }

    .nav-primary__link[aria-current="page"] { text-decoration: none; }

    /* Gold underline — grows in from the inline-start edge */
    .nav-primary__link::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        block-size: 2px;
        background-color: var(--color-accent-deep);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition-base);
    }

    [dir="rtl"] .nav-primary__link::after { transform-origin: right; }

    .nav-primary__link:hover::after,
    .nav-primary__link[aria-current="page"]::after { transform: scaleX(1); }

    .site-nav__cta { inline-size: auto; }
}