/* Self-hosted fonts (latin subset) — replaces the Google Fonts CDN (perf + GDPR).
   font-display:optional - the browser uses the web font only if it is ready by first
   paint, otherwise it shows the fallback and never swaps mid-page. This makes a
   font-caused layout shift (CLS) impossible on any device. Returning/fast visitors
   (cached fonts) see the brand fonts; a slow first load sees the metric-matched
   fallback below, which occupies the same space so nothing jumps. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:optional;src:url('/fonts/cormorant-300i.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:optional;src:url('/fonts/cormorant-400i.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:optional;src:url('/fonts/cormorant-300.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/cormorant-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:optional;src:url('/fonts/cormorant-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/cormorant-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:optional;src:url('/fonts/montserrat-300.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:optional;src:url('/fonts/montserrat-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:optional;src:url('/fonts/montserrat-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:optional;src:url('/fonts/montserrat-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Metric-matched fallbacks - size-adjust derived so the system font occupies the same
   footprint as the web font (total page height matches to the pixel). Used in the font
   stacks below, between the web font and the generic family. */
@font-face{font-family:'Cormorant Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:87%;}
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('Helvetica Neue');size-adjust:111%;}

/* ══════════════════════════════════════════════════════════
   THEME TOKENS — single source of truth for colours & fonts
   Linked on every page; the per-page inline :root blocks were
   removed, so changing a value here updates the whole site.
   (Component styles such as buttons are still defined per page
   for now — unifying those into this file is the planned next
   step. Keep this file in sync with design-styles.html.)
   ══════════════════════════════════════════════════════════ */
:root {
    /* Core palette */
    --cream: #FAF6F1;
    --warm-white: #FFFDF9;
    --taupe: #B8A99A;
    --taupe-dark: #8C7B6B;
    --gold: #C9A96E;
    --gold-light: #D4BC8B;
    --gold-deep: #8A6A2C; /* AA-contrast gold for small text/links on light backgrounds (brand --gold stays for fills) */
    --charcoal: #2C2C2C;
    --text: #3D3530;
    --text-light: #7A6E64;
    --border: #E8DFD5;

    /* Accent + state (used by admin and form UI) */
    --olive: #7C7A5B;
    --olive-light: #9B9878;
    --success: #6B8F71;
    --danger: #C47171;
    --error: #C45B5B;
    --warning: #D4A054;
    --warning-bg: #FFF8F0;
    --warning-border: #E8C89A;

    /* Typography */
    --serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
    --sans: 'Montserrat', 'Montserrat Fallback', 'Helvetica Neue', sans-serif;

    /* Misc */
    --btn-radius: 3px;
}

/* ── Canonical buttons ──
   Used by content pages (concern pages, gift vouchers, etc.) via class="btn btn-primary".
   The homepage and the treatment-card buttons are intentionally bespoke and keep their
   own per-page styles (which override these). Change a content-page button here once. */
.btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: var(--btn-radius);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.btn-primary { background: var(--gold); color: var(--warm-white); border-color: var(--gold-deep); }
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn-secondary { background: var(--warm-white); color: var(--charcoal); border-color: var(--border); }
.btn-secondary:hover { background: var(--cream); border-color: var(--taupe-dark); }

/* ── Prevent flash of unstyled nav (FOUC) ──
   Every page ships a bare placeholder <nav> that shared-nav.js upgrades to
   <nav class="site-nav" id="siteNav"> on load. Hide ONLY the bare placeholder
   (no class, no id) until that swap, so visitors never see unstyled blue links.
   Special navs (.form-nav, .navbar, #nav) are untouched. If JS is disabled the
   top nav is hidden, but the footer still carries full navigation. */
nav:not([class]):not([id]) { visibility: hidden; }

/* Related concerns cross-links (shown near the foot of each concern page) */
.related-concerns { max-width: 1000px; margin: 0 auto; padding: 2.5rem 2rem 0.5rem; text-align: center; }
.related-concerns h2 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--charcoal); margin-bottom: 1.2rem; }
.related-concerns-links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.related-concerns-links a { display: inline-block; padding: 0.6rem 1.3rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.9rem; transition: all 0.2s ease; }
.related-concerns-links a:hover { border-color: var(--gold-deep); color: var(--charcoal); background: var(--cream); }

/* FAQ accordion (treatments, dermalux, circadia; concern pages style this inline) */
.concern-faq { max-width: 1060px; margin: 3.5rem auto; padding: 0 2rem; }
.concern-faq h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--charcoal); margin-bottom: 1.2rem; text-align: left; max-width: 820px; }
.concern-faq details { border-bottom: 1px solid var(--border); padding: 1.05rem 0; max-width: 820px; }
.concern-faq summary { font-family: var(--sans); font-weight: 500; font-size: 1rem; color: var(--charcoal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.concern-faq summary::-webkit-details-marker { display: none; }
.concern-faq summary::after { content: '+'; color: var(--gold-deep); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.concern-faq details[open] summary::after { content: '\2013'; }
.concern-faq details p { font-size: 0.95rem; line-height: 1.75; color: var(--text); margin-top: 0.8rem; max-width: 820px; }
.concern-faq details p a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Treatment-card titles link to their individual treatment pages */
.treatment-name a, .consultation-option h3 a { color: inherit; text-decoration: none; }
.treatment-name a:hover, .consultation-option h3 a:hover { color: var(--gold-deep); }