/**
 * Coemans Starter - site header styles
 *
 * Depends on the design tokens defined in main.css (`:root`).
 * Enqueued in functions.php after main.css.
 *
 * The header is absolutely positioned so it overlays any hero / page
 * media that sits at the top of the document. Page templates without
 * a hero should add their own `padding-top` to push content below.
 */

/* The header overlays page content - any .site-main rendered after
   it is pulled up by --header-height so its first section starts
   flush with the top of the viewport (the absolute header floats over). */
.site-main {
    margin-top: calc(-1 * var(--header-height));
}

/* Banner: in-flow gold strip at the top of every page (toggled via ACF). */
.site-banner {
    display: block;
    position: relative;
    z-index: 12;
    background: var(--color-accent-dark);
    color: var(--color-text-white);
    text-align: center;
    padding: var(--space-3) var(--container-pad);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.5;
}

.site-banner__text {
    display: inline-block;
}

a.site-banner--link {
    text-decoration: none;
    transition: background-color var(--transition-base);
}

a.site-banner--link:hover {
    background: var(--color-accent-light);
    color: var(--color-text-white);
    text-decoration: none;
}

.site-header {
    position: absolute;
    /* Offset by banner height when banner is present (set via JS in main.js). */
    top: var(--banner-height, 0);
    left: 0;
    right: 0;
    z-index: 10;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-5);
}

.site-header__logo {
    display: inline-flex;
    line-height: 0;
}

.site-header__logo img {
    display: block;
    width: auto;
}

.site-header__nav {
    margin-left: auto;
}

.site-header__nav ul,
.site-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
}

.site-header__menu a {
    color: var(--color-text-white);
    font-family: var(--font-heading);
    font-size: 1.125rem; /* 18px */
    transition: color var(--transition-base);
}

.site-header__menu a:hover,
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a {
    color: var(--color-accent-light);
    text-decoration: none;
}

/* CTA: pill button using .btn .btn--light-outline + icon */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.site-header__cta-icon {
    display: inline-flex;
    color: inherit;
}

.site-header__cta-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: filter var(--transition-base);
}

/* SVG has a hardcoded white fill - invert it on hover so the icon
   stays visible when the button background fills white. */
.site-header__cta:hover .site-header__cta-icon svg,
.site-header__cta:focus-visible .site-header__cta-icon svg {
    filter: invert(1);
}

/* Mobile-only elements: hidden by default, shown at <= 1024px */
.site-header__toggle,
.site-header__overlay,
.site-header__drawer {
    display: none;
}

/* Lock page scroll while drawer is open */
body.is-menu-open {
    overflow: hidden;
}

@media (max-width: 1023px) {
    .site-header__inner {
        gap: var(--space-3);
        padding-block: var(--space-4);
    }

    .site-header__logo img {
        height: 56px;
    }

    .site-header__nav {
        display: none;
    }

    /* Push CTA + hamburger to the right (the nav with margin-left:auto
       is hidden at this breakpoint). */
    .site-header__cta {
        margin-left: auto;
    }

    /* Hamburger toggle ----------------------------------------------- */
    .site-header__toggle {
        display: inline-flex;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        width: 32px;
        height: 24px;
        position: relative;
        color: var(--color-text-white);
        flex-shrink: 0;
    }

    .site-header__toggle-bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        transition: transform var(--transition-base),
                    opacity var(--transition-base),
                    top var(--transition-base);
    }

    .site-header__toggle-bar:nth-child(1) { top: 4px; }
    .site-header__toggle-bar:nth-child(2) { top: 11px; }
    .site-header__toggle-bar:nth-child(3) { top: 18px; }

    /* Overlay backdrop ----------------------------------------------- */
    .site-header__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-base),
                    visibility 0s linear var(--transition-base);
        z-index: 50;
    }

    .site-header__overlay.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--transition-base),
                    visibility 0s linear 0s;
    }

    /* Off-canvas drawer ---------------------------------------------- */
    .site-header__drawer {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 70%;
        max-width: 420px;
        background: var(--color-primary);
        z-index: 60;
        transform: translateX(100%);
        transition: transform var(--transition-base);
        padding: var(--space-10) var(--space-6) var(--space-6);
        overflow-y: auto;
    }

    .site-header__drawer.is-open {
        transform: translateX(0);
    }

    .site-header__drawer-close {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        width: 32px;
        height: 32px;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: var(--color-text-white);
    }

    .site-header__drawer-close-bar {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        background: currentColor;
        transform-origin: center;
    }

    .site-header__drawer-close-bar:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .site-header__drawer-close-bar:nth-child(2) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .site-header__drawer-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .site-header__drawer-menu a {
        color: var(--color-text-white);
        font-family: var(--font-heading);
        font-size: var(--fs-h3);
        transition: color var(--transition-base);
    }

    .site-header__drawer-menu a:hover,
    .site-header__drawer-menu .current-menu-item > a,
    .site-header__drawer-menu .current_page_item > a {
        color: var(--color-accent-light);
        text-decoration: none;
    }
}

/* Compact CTA on small phones */
@media (max-width: 767px) {
    .site-header__cta {
        padding: var(--space-2) var(--space-4);
        font-size: 1rem; /* 16px */
        gap: var(--space-1);
    }

    .site-header__cta-icon svg {
        width: 15px;
        height: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header__drawer,
    .site-header__overlay,
    .site-header__toggle-bar {
        transition: none;
    }
}