/* =============================================================================
   OWW — SELF-HOSTED FONTS
   Variable WOFF2 files served from assets/fonts/
   Replaces Google Fonts external request — no round-trip, no GDPR exposure.
   unicode-range: full Latin + Latin Extended (covers all OWW copy).
   ============================================================================= */

@font-face {
    font-family:   'Cormorant Garamond';
    src:           url('../fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2-variations');
    font-weight:   200 700;
    font-style:    normal;
    font-display:  swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family:   'Cormorant Garamond';
    src:           url('../fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight:   200 700;
    font-style:    italic;
    font-display:  swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family:   'Source Sans 3';
    src:           url('../fonts/SourceSans3-VariableFont_wght.woff2') format('woff2-variations');
    font-weight:   200 900;
    font-style:    normal;
    font-display:  swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family:   'Source Sans 3';
    src:           url('../fonts/SourceSans3-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight:   200 900;
    font-style:    italic;
    font-display:  swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   OWW — DESIGN TOKENS
   assets/css/global.css | Every page
   Version: 3.6.2

   CHANGES v3.6.1 (heading colour fix)
   ─────────────────────────────────
   - Heading reset selector strengthened from h1-h6 (specificity 0-0-1) to
     body h1 - body h6 (specificity 0-0-2). Prevents Elementor kit bare
     element selectors from overriding the theme heading colour on load.
     The inline heading protection in theme-setup.php (0-1-2) is the stronger
     defence — this change closes the gap in the base layer.

   CHANGES v3.6.0 (audit cleanup)
   ──────────────────────────────
   - Merged two :root blocks into one. Previous build had a Token Bridge block
     that redefinedsix spacing tokens with different values. The bridge block's
     values won (last declaration wins). Those values are now canonical.
     Primary block spacing values were orphaned and are removed.
   - Token Bridge aliases retained where they add value (colour, font, shadow,
     easing, duration aliases). Spacing redefinitions removed — single source.
   - --oww-nav-h and --oww-nav-height consolidated: --oww-nav-h is canonical,
     --oww-nav-height is the alias (retained for backwards compat).
   - Unused --oww-max-width / --oww-max-width-narrow noted — retained as they
     may be used in future templates.
   - transition: all on .oww-btn replaced with explicit property list.
   - scroll-behavior: smooth retained (ScrollSmoother is currently disabled).
     IMPORTANT: remove this declaration when ScrollSmoother is re-enabled —
     native scroll-behavior conflicts with GSAP scroll management.

   CHANGES v3.5.2
   ──────────────
   - TOKEN BRIDGE added: maps original Additional CSS token names to child
     theme tokens.

   CHANGES v3.5.0
   ──────────────
   - --oww-bg-deep token added
   - .oww-sr-only alias added
   - ul/ol reset scoped to .oww/.oww-nav/.oww-footer
   - .oww-prose list restore added
   ============================================================================= */


/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
/*
 * Single canonical :root block. Previous architecture split tokens across two
 * :root declarations — the second (Token Bridge) overwrote spacing values from
 * the first. Merged here as a single authority. Aliases are clearly labelled.
 */
:root {

    /* ── Colour — core ──────────────────────────────────────────────────── */
    --oww-amber:       #cda564;
    --oww-amber-light: #ddb87a;
    --oww-amber-deep:  #a8804a;
    --oww-amber-faint: rgba(205,165,100,.06);
    --oww-amber-glow:  rgba(205,165,100,0.15);
    --oww-amber-20:    rgba(205,165,100,0.20);
    --oww-amber-40:    rgba(205,165,100,0.40);

    --oww-bronze-30: rgba(168,128,74,.30);
    --oww-bronze-20: rgba(168,128,74,.20);
    --oww-bronze-10: rgba(168,128,74,.10);

    --oww-bg:          #0a0806;
    --oww-bg-dark:     #120f0c;
    --oww-bg-deep:     #0a0806; /* alias — same value as --oww-bg */
    --oww-bg-mid:      #1a1613;
    --oww-bg-raised:   #1e1915;
    --oww-bg-card:     #2a2420;
    --oww-bg-card-alt: #352c25;

    --oww-cream:       #f5f0e8;
    --oww-cream-muted: rgba(245,240,232,.65);
    --oww-cream-faint: rgba(245,240,232,.35);

    /* ── Colour — aliases (bridge) ──────────────────────────────────────── */
    --oww-charcoal:       var(--oww-bg-dark);
    --oww-charcoal-light: var(--oww-bg-raised);
    --oww-espresso:       var(--oww-bg-mid);
    --oww-bronze:         var(--oww-amber-deep);

    /* ── Typography — core ──────────────────────────────────────────────── */
    --oww-ff-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --oww-ff-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Typography — aliases (bridge) ──────────────────────────────────── */
    --oww-font-heading: var(--oww-ff-display);
    --oww-font-body:    var(--oww-ff-body);
    --oww-font-serif:   var(--oww-ff-display);
    --oww-font-sans:    var(--oww-ff-body);

    /* ── Spacing — canonical ────────────────────────────────────────────────
     * These are the bridge block's values — they are what has been actively
     * rendering. The original primary block had different values and is removed.
     * xs: 8px | sm: 12px | md: 16px | lg: 24px | xl: 32px | xxl: 48px
     ────────────────────────────────────────────────────────────────────── */
    --oww-space-xs:    0.5rem;
    --oww-space-sm:    0.75rem;
    --oww-space-md:    1rem;
    --oww-space-lg:    1.5rem;
    --oww-space-xl:    2rem;
    --oww-space-xxl:   3rem;
    --oww-space-giant: clamp(4rem, 8vw, 7.5rem);

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --oww-max-width:        1400px;
    --oww-max-width-narrow: 720px;
    --oww-gutter:           clamp(1.25rem, 4vw, 3rem);

    /* ── Nav height ─────────────────────────────────────────────────────── */
    --oww-nav-h:      72px; /* canonical token — used in CSS */
    --oww-nav-height: var(--oww-nav-h); /* alias — retained for backwards compat */

    /* ── Radius ─────────────────────────────────────────────────────────── */
    --oww-radius-sm: 6px;
    --oww-radius-md: 12px;
    --oww-radius-lg: 16px;

    /* ── Easing — core ───────────────────────────────────────────────────── */
    --oww-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --oww-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Easing — aliases (bridge) ───────────────────────────────────────── */
    --oww-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
    --oww-ease-smooth: var(--oww-ease-in-out);

    /* ── Duration ────────────────────────────────────────────────────────── */
    --oww-dur-fast: 180ms;
    --oww-dur-med:  320ms;
    --oww-dur-slow: 500ms;

    /* ── Shadows — core ──────────────────────────────────────────────────── */
    --oww-shadow-card: 0 8px 32px rgba(0,0,0,.45);

    /* ── Shadows — bridge additions ──────────────────────────────────────── */
    --oww-shadow-sm: 0 4px 12px rgba(0,0,0,0.15);
    --oww-shadow-md: 0 8px 30px rgba(0,0,0,0.25);
    --oww-shadow-lg: 0 20px 60px rgba(0,0,0,0.40);

    /* ── Z-index scale ───────────────────────────────────────────────────── */
    --oww-z-cursor:  9000;
    --oww-z-drawer:  9500;
    --oww-z-nav:     10000;
    --oww-z-overlay: 99999;
}


/* ── RESET ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/*
 * scroll-behavior: smooth is active while ScrollSmoother is disabled.
 * REMOVE this declaration when ScrollSmoother is re-enabled — native
 * scroll-behavior conflicts with GSAP's scroll management and causes
 * double-easing / erratic scroll feel.
 */
html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:             var(--oww-ff-body);
    font-size:               16px;
    line-height:             1.65;
    color:                   var(--oww-cream);
    background-color:        var(--oww-bg-dark);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top:             var(--oww-nav-h);
}

body.oww-page--construction { padding-top: 0; }

/*
 * WordPress admin bar — add its height to body padding so content
 * clears both the fixed nav AND the fixed admin bar.
 * 32px at desktop, 46px at mobile (≤782px).
 * Explicit rule is more reliable than relying on Chrome's html margin-top handling.
 */
body.admin-bar {
    padding-top: calc(var(--oww-nav-h) + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-top: calc(var(--oww-nav-h) + 46px);
    }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
p   { margin: 0; }

/*
 * body prefix raises specificity to 0-0-2 so this rule beats Elementor kit's
 * h1-h6 rules (which are bare element selectors at 0-0-1). The Elementor kit
 * global heading colour is the most common cause of heading colour bleed on
 * OWW pages. A more targeted override is also added in theme-setup.php via
 * wp_add_inline_style, which loads at the same priority but wins on load order
 * when specificity is equal.
 */
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--oww-ff-display);
    font-weight: 300;
    line-height: 1.12;
    color:       var(--oww-cream);
    margin:      0;
}

/*
 * Scoped list reset — was global ul/ol which broke WooCommerce, legal pages,
 * and WordPress prose content. Scoped to OWW components only.
 */
.oww ul,
.oww ol,
.oww-nav ul,
.oww-nav ol,
.oww-footer ul,
.oww-footer ol {
    list-style: none;
    padding:    0;
    margin:     0;
}

/* Restore normal list styling inside prose content */
.oww-prose ul,
.oww-prose ol {
    list-style:   revert;
    padding-left: 1.25rem;
    margin:       1rem 0;
}


/* ── CONTAINER ────────────────────────────────────────────────────────────── */

.oww-container {
    max-width: 1160px;
    margin:    0 auto;
    padding:   0 clamp(1.25rem, 5vw, 4rem);
    position:  relative;
    z-index:   1;
}


/* ── EYEBROW ──────────────────────────────────────────────────────────────── */

.oww-eyebrow {
    display:        block;
    font-family:    var(--oww-ff-body);
    font-size:      clamp(.575rem, 1vw, .7rem);
    font-weight:    700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin:         0 0 var(--oww-space-sm);
}

.oww-eyebrow--center { text-align: center; }
.oww-eyebrow--flush  { margin-bottom: 6px; }

.oww-eyebrow--line {
    display:     flex;
    align-items: center;
    gap:         .6rem;
}

.oww-eyebrow--line::before {
    content:     '';
    display:     block;
    width:       24px;
    height:      1px;
    background:  var(--oww-amber);
    opacity:     .6;
    flex-shrink: 0;
}


/* ── DIVIDER ──────────────────────────────────────────────────────────────── */

.oww-divider {
    border:     none;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--oww-bronze-30) 20%, var(--oww-bronze-30) 80%, transparent);
    margin:     var(--oww-space-md) 0;
}

.oww-divider--left        { background: linear-gradient(90deg, var(--oww-bronze-30), transparent); max-width: 200px; }
.oww-divider--narrow      { max-width: 140px; margin-left: auto; margin-right: auto; }
.oww-divider--narrow-left { max-width: 160px; }


/* ── BUTTONS ──────────────────────────────────────────────────────────────── */

.oww-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .5em;
    font-family:     var(--oww-ff-body);
    font-size:       .875rem;
    font-weight:     600;
    letter-spacing:  .03em;
    text-decoration: none;
    padding:         .72em 1.8em;
    border-radius:   var(--oww-radius-md);
    border:          1px solid transparent;
    cursor:          pointer;
    min-height:      44px;
    white-space:     nowrap;
    /*
     * Explicit property list replaces transition: all.
     * transition: all was transitioning every animatable property on hover
     * including expensive ones, causing unnecessary style recalculations.
     */
    transition:
        border-color  0.3s var(--oww-ease-out),
        color         0.3s var(--oww-ease-out),
        box-shadow    0.3s var(--oww-ease-out),
        transform     0.3s var(--oww-ease-out),
        opacity       0.3s var(--oww-ease-out);
}

.oww-btn:focus-visible { outline: 3px solid var(--oww-amber); outline-offset: 3px; }

.oww-btn--primary {
    background: linear-gradient(135deg, var(--oww-amber), var(--oww-amber-deep));
    color:      var(--oww-bg-dark);
    box-shadow: 0 4px 20px rgba(205,165,100,.25);
}

.oww-btn--primary:hover {
    background: linear-gradient(135deg, var(--oww-amber-light), var(--oww-amber));
    box-shadow: 0 8px 30px rgba(205,165,100,.4);
    transform:  translateY(-2px);
    color:      var(--oww-bg-dark);
}

.oww-btn--secondary {
    background:   transparent;
    color:        var(--oww-cream);
    border-color: rgba(245,240,232,.3);
}

.oww-btn--secondary:hover {
    border-color: var(--oww-amber);
    color:        var(--oww-amber);
    transform:    translateY(-2px);
}

.oww-btn--outline {
    background:   transparent;
    border-color: var(--oww-amber-deep);
    color:        var(--oww-cream);
}

.oww-btn--outline:hover {
    border-color: var(--oww-amber);
    color:        var(--oww-amber);
    transform:    translateY(-2px);
}

.oww-btn--sm { font-size: .8125rem; padding: .55em 1.2em; min-height: 38px; }


/* ── TRUST BADGE ──────────────────────────────────────────────────────────── */

.oww-trust-badge {
    font-size:      .6rem;
    font-weight:    500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color:          var(--oww-cream-muted);
    padding:        .3em .9em;
    border:         1px solid var(--oww-bronze-20);
    border-radius:  100px;
}


/* ── ACCESSIBILITY ────────────────────────────────────────────────────────── */

.screen-reader-text,
.oww-sr-only {
    border:     0;
    clip:       rect(1px,1px,1px,1px);
    clip-path:  inset(50%);
    height:     1px;
    margin:     -1px;
    overflow:   hidden;
    padding:    0;
    position:   absolute;
    width:      1px;
    word-wrap:  normal !important;
}

:focus-visible { outline: 3px solid var(--oww-amber); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }


/* ── NEWSLETTER FORM MESSAGE — shared across home and footer ──────────────── */

.oww-newsletter-form__message {
    font-size:   .8rem;
    line-height: 1.5;
    margin-top:  .5rem;
    min-height:  1.2em;
}

.oww-newsletter-form__message--success { color: #7ecb92; }
.oww-newsletter-form__message--error   { color: #e57373; }


/* ── REDUCED MOTION ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:  .01ms !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}