/* ═══════════════════════════════════════════════════════════════════════════
   AURELIELLE CUSTOM HEADER — v2.0
   Uploaded: 2026-08-27
   ────────────────────────────────
   Replaces the Kadence default site-header on every front-facing page.

   Architecture
   ────────────
   • Position: fixed at top:0 on every page (consistent behavior).
   • Two visual states, switched by class:
       — `.aur-header--transparent` — sits over a dark hero / video.
         White text, dark vertical gradient + backdrop-filter blur so the
         header stays readable on any background (light or dark video).
       — `.aur-header--solid`      — sits over a regular page (cream
         background, dark text). Becomes this once the user scrolls past
         the hero on the home page, and is the default on every other
         page from page load.
   • The hero on the home page extends UP under the header (`margin-top:
     calc(-1 * var(--aur-header-h))` + matching extra `padding-top`) so
     the body's cream background never shows behind the transparent
     header. This is what the previous version was missing, and is the
     root cause of the "mobile shows cream strip / black-font sticky"
     symptoms the merchant reported.

   Tokens
   ──────
   --aur-header-h   header height (76px desktop, 64px mobile).
   --aur-brand      gold accent color used for hover + active underline.

   The header JS in /assets/aur-header.js swaps the `--transparent` /
   `--solid` classes based on scroll position and viewport size, manages
   body classes so the hero can extend under the header, and runs the
   slide-in mobile drawer.
   ═════════════════════════════════════════════════════════════════════ */

:root {
    --aur-header-h: 76px;
    --aur-brand: #c9a96e;
    --aur-header-solid-bg: rgba(255, 255, 255, 0.96);
    --aur-header-solid-fg: #1a1a1a;
    --aur-header-trans-fg: #ffffff;
    --aur-header-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    --aur-header-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) {
    :root { --aur-header-h: 64px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BASE — fixed, full width, sits above every page element
   ───────────────────────────────────────────────────────────────────── */
.aur-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    /* Header is its own height so flex children lay out predictably on
       every viewport. */
    min-height: var(--aur-header-h);
    display: flex;
    align-items: center;

    /* Background, color and shadow all animate together so the
       transparent→solid transition feels like one motion, not three. */
    background-color: var(--aur-header-solid-bg);
    color: var(--aur-header-solid-fg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        background-color 0.4s var(--aur-header-ease),
        color            0.4s var(--aur-header-ease),
        box-shadow       0.4s var(--aur-header-ease),
        backdrop-filter  0.4s var(--aur-header-ease),
        -webkit-backdrop-filter 0.4s var(--aur-header-ease);

    font-family: var(--global-body-font-family, 'DM Sans', sans-serif);
}

/* On the home page we slide the hero up under the header so the body's
   cream background never shows behind the transparent header. The hero
   already has padding-top:110px which is enough to push its content
   below the fixed header — so we only need the negative margin, not
   extra padding.

   We apply this via the .home body class (set by WordPress) so it
   takes effect from first paint — no JS-dependent FOUC where the
   body's cream strip flashes under the transparent header. */
body.home.aur-has-custom-header .aur-hero,
body.aur-header--hero-under .aur-hero {
    margin-top: calc(-1 * var(--aur-header-h));
}

/* ─────────────────────────────────────────────────────────────────────────
   TRANSPARENT VARIANT — over the home-page hero (light/bright video)
   ─────────────────────────────────────────────────────────────────────
   The Aurelielle hero runs a sample video that's mostly bright sky +
   green grass, so white text against it is unreadable. We use DARK
   text on transparent instead, with a faint light backdrop so the
   header still has definition when the video goes dark for a frame. */
.aur-header--transparent {
    background-color: transparent;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.00) 100%
    );
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--aur-header-solid-fg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Fallback for browsers without backdrop-filter: a stronger light tint
   so the dark text is always readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aur-header--transparent {
        background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.35) 100%
        );
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLLED — when the user has moved past the hero on the home page
   ───────────────────────────────────────────────────────────────────── */
.aur-header--scrolled,
.aur-header--solid.aur-header--scrolled {
    background-color: var(--aur-header-solid-bg);
    background-image: none;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--aur-header-solid-fg);
    box-shadow: var(--aur-header-shadow);
    /* Lift the header slightly so the shadow doesn't feel glued on. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* On solid (non-home) pages, scrolled class is irrelevant — the header
   already looks solid. Keep the rule above just in case the JS adds it
   anyway. */

/* ─────────────────────────────────────────────────────────────────────────
   INNER — holds brand + nav + actions, centred max-width
   ───────────────────────────────────────────────────────────────────── */
.aur-header__inner {
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 900px) {
    .aur-header__inner {
        /* 11+11 = 22px padding so the 42px burger + 22 = 64px exactly
           matches --aur-header-h on mobile. */
        padding: 11px 18px;
        gap: 14px;
        /* Guarantee the brand sits hard-left and the burger sits hard-right
           on every mobile width — no "burger next to Aurelielle" surprises. */
        justify-content: space-between;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   BRAND
   ───────────────────────────────────────────────────────────────────── */
.aur-header__brand {
    text-decoration: none;
    color: inherit;
    font-family: var(--global-heading-font-family, inherit);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.015em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    transition: color 0.25s var(--aur-header-ease), transform 0.25s var(--aur-header-ease);
}
.aur-header__brand:hover { color: var(--aur-brand); }
.aur-header__brand:active { transform: scale(0.98); }

.aur-header__brand-text {
    transition: text-shadow 0.4s var(--aur-header-ease);
}
/* No text-shadow on the brand in any state — the dark text reads fine
   on the bright video (transparent mode) and on the cream header
   (solid mode) without it. */

@media (max-width: 900px) {
    .aur-header__brand { font-size: 21px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────────────── */
.aur-header__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 900px) {
    /* On mobile/tablet we hide the inline nav — the drawer carries it. */
    .aur-header__nav { display: none; }
}

.aur-header__link {
    color: inherit;
    text-decoration: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 4px;
    transition: color 0.25s var(--aur-header-ease), background 0.25s var(--aur-header-ease);
    position: relative;
}
/* No text-shadow on links either — dark text reads cleanly on both the
   bright video and the cream header without it. */

.aur-header__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1px;
    background: var(--aur-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--aur-header-ease);
}
.aur-header__link:hover { color: var(--aur-brand); }
.aur-header__link:hover::after { transform: scaleX(1); }

.aur-header__link.is-active {
    color: var(--aur-brand);
}
.aur-header__link.is-active::after { transform: scaleX(1); }

/* ─────────────────────────────────────────────────────────────────────────
   ACTIONS — burger lives here
   ───────────────────────────────────────────────────────────────────── */
.aur-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
@media (min-width: 901px) {
    /* On desktop the burger is hidden; only the drawer uses it. */
    .aur-header__actions .aur-header__burger { display: none; }
    .aur-header__actions { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BURGER (mobile) — animated three-bar → X
   ───────────────────────────────────────────────────────────────────── */
.aur-header__burger {
    display: inline-flex;
    background: none;
    border: none;
    color: inherit;
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    position: relative;
    transition: background 0.25s var(--aur-header-ease);
}
.aur-header__burger:hover {
    background: rgba(201, 169, 110, 0.14);
}
.aur-header__burger:focus-visible {
    outline: 2px solid var(--aur-brand);
    outline-offset: 2px;
}
.aur-header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.35s var(--aur-header-ease), opacity 0.25s ease;
    transform-origin: center;
}
/* When the drawer is open the burger morphs into an X. */
.aur-drawer--open ~ * .aur-header__burger span:nth-child(1),
body.aur-drawer-open .aur-header__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.aur-drawer-open .aur-header__burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
body.aur-drawer-open .aur-header__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────────────────
   PAGE PADDING — always reserve space for the fixed header
   ───────────────────────────────────────────────────────────────────── */
body { padding-top: var(--aur-header-h); }

/* On the home page the hero covers the reserved space, so we don't need
   the padding-top to actually show — but we still need it for the
   layout below the hero. The negative margin on .aur-hero (set above)
   is what visually pulls the hero under the header. */

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE DRAWER (slide-in from right)
   ───────────────────────────────────────────────────────────────────── */
.aur-drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.4s;
}
.aur-drawer--open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.aur-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.4s var(--aur-header-ease);
}
.aur-drawer--open .aur-drawer__overlay { opacity: 1; }

.aur-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: #ffffff;
    padding: 28px 24px 36px;
    transform: translateX(100%);
    transition: transform 0.45s var(--aur-header-ease);
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}
.aur-drawer--open .aur-drawer__panel { transform: translateX(0); }

.aur-drawer__close {
    background: none;
    border: none;
    color: var(--aur-header-solid-fg);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 14px;
    transition: background 0.2s ease, transform 0.3s var(--aur-header-ease);
}
.aur-drawer__close:hover { background: rgba(0, 0, 0, 0.06); }
.aur-drawer__close:active { transform: scale(0.92); }
.aur-drawer__close:focus-visible {
    outline: 2px solid var(--aur-brand);
    outline-offset: 2px;
}

.aur-drawer__eyebrow {
    color: var(--aur-brand);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    margin: 36px 0 18px;
}

.aur-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 28px;
}
.aur-drawer__nav a {
    color: var(--aur-header-solid-fg);
    text-decoration: none;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 500;
    border-bottom: 1px solid #ececec;
    transition: color 0.2s ease, padding-left 0.3s var(--aur-header-ease);
    display: block;
}
.aur-drawer__nav a:hover {
    color: var(--aur-brand);
    padding-left: 6px;
}
.aur-drawer__nav a.is-active { color: var(--aur-brand); }

.aur-drawer__contact {
    margin-top: auto;
    padding: 18px 16px;
    background: #faf8f4;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}
.aur-drawer__contact-label {
    color: #888;
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
.aur-drawer__contact a {
    color: var(--aur-brand);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
}
.aur-drawer__contact a:hover { color: var(--aur-header-solid-fg); }

/* When the drawer is open we lock page scroll. JS adds the class to
   <html> so iOS Safari respects it. */
html.aur-drawer-open,
html.aur-drawer-open body { overflow: hidden; }

/* Reduced motion: skip the long transitions. */
@media (prefers-reduced-motion: reduce) {
    .aur-header,
    .aur-header__brand,
    .aur-header__brand-text,
    .aur-header__link,
    .aur-header__link::after,
    .aur-header__burger,
    .aur-header__burger span,
    .aur-drawer,
    .aur-drawer__overlay,
    .aur-drawer__panel,
    .aur-drawer__close,
    .aur-drawer__nav a {
        transition: none !important;
    }
}

/* Small mobile tweaks */
@media (max-width: 480px) {
    .aur-drawer__panel {
        padding: 24px 18px 28px;
    }
    .aur-drawer__nav a { font-size: 16px; padding: 12px 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v4 — WORDPRESS ADMIN BAR OFFSET
   ═══════════════════════════════════════════════════════════════════════════

   The cream strip under the header that logged-in users saw on every page.

   When someone is logged in, WordPress pins #wpadminbar to the viewport and
   pushes the document down with `html { margin-top: 32px !important }`. A
   position:fixed element is laid out against the viewport, not the html box,
   so `.aur-header { top: 0 }` kept the header at viewport y=0 — tucked behind
   the admin bar. The body, though, started 32px lower, so its
   `padding-top: var(--aur-header-h)` reserved space from y=32 to y=108 while
   the header only painted down to y=76. The uncovered 32px in between showed
   the body's own background (#faf8f4), which is the cream band.

   Pushing the header down by the admin bar's height closes the gap: the
   header then occupies 32→108, exactly the space the body already reserves.
   Logged-out visitors have no .admin-bar class and are unaffected.

   Heights are WordPress's own: 32px normally, 46px below 783px where the
   admin bar gets taller. Above 600px wide the bar scrolls away with the page
   rather than staying fixed, so the offset is dropped there to avoid leaving
   a gap at the top once the user scrolls. */

body.admin-bar .aur-header { top: 32px; }
body.admin-bar .aur-drawer { top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar .aur-header { top: 46px; }
    body.admin-bar .aur-drawer { top: 46px; }
}

@media screen and (max-width: 600px) {
    /* WordPress unpins the admin bar at this width (position: absolute), so
       it scrolls out of view. Keeping a fixed offset here would strand the
       header 46px down the viewport after scrolling. */
    body.admin-bar .aur-header { top: 0; }
    body.admin-bar .aur-drawer { top: 0; }
}

/* The transparent home-page header pulls the hero up under itself by the
   header height. With the admin bar present the hero must clear the bar too,
   otherwise the top of the video sits behind it. */
body.admin-bar.home.aur-has-custom-header .aur-hero,
body.admin-bar.aur-header--hero-under .aur-hero {
    margin-top: calc(-1 * var(--aur-header-h));
}