/* ==========================================================================
   PIANOMODE DESIGN SYSTEM — CANONICAL TOKENS
   --------------------------------------------------------------------------
   Centralized design tokens for the entire site. Loaded at priority 1
   (via pianomode_enqueue_design_system() in functions.php), so every
   component stylesheet can consume these variables.

   Palette (canonical 2026):
     Gold      #C59D3A
     Black     #0B0B0B
     White     #FFFFFF
   Typography: Montserrat.
   Spacing: 4px-based scale (Tailwind-aligned).
   ========================================================================== */

:root {
    /* ------------------------------------------------------------ COLOR */
    /* Canonical palette — light-gold family. Use these everywhere. */
    --pm-gold:              #D7BF81;
    --pm-gold-bright:       #E6D4A8;
    --pm-gold-dark:         #BEA86E;
    --pm-gold-deep:         #A0894A;
    --pm-gold-pale:         #F5EDD6;

    --pm-black:             #0B0B0B;
    --pm-black-soft:        #171717;
    --pm-black-muted:       #1F1F1F;
    --pm-white:             #FFFFFF;
    --pm-white-soft:        #FAFAFA;

    /* Accent — reserved for rare calls-to-action where a deeper gold reads
       better against a white background (e.g. on-white premium CTAs). */
    --pm-gold-accent:       #C59D3A;

    /* Neutrals */
    --pm-gray-50:           #FAFBFC;
    --pm-gray-100:          #F3F4F6;
    --pm-gray-200:          #E5E7EB;
    --pm-gray-300:          #D1D5DB;
    --pm-gray-400:          #9CA3AF;
    --pm-gray-500:          #6B7280;
    --pm-gray-600:          #4B5563;
    --pm-gray-700:          #374151;
    --pm-gray-800:          #1F2937;
    --pm-gray-900:          #111827;

    /* Text roles */
    --pm-text-primary:      var(--pm-black);
    --pm-text-secondary:    var(--pm-gray-600);
    --pm-text-tertiary:     var(--pm-gray-400);
    --pm-text-inverse:      var(--pm-white);
    --pm-text-gold:         var(--pm-gold);

    /* Surfaces */
    --pm-bg:                var(--pm-white);
    --pm-bg-alt:            var(--pm-gray-50);
    --pm-bg-dark:           var(--pm-black);
    --pm-bg-overlay:        rgba(11, 11, 11, .72);

    /* Semantic */
    --pm-success:           #10B981;
    --pm-error:             #DC2626;
    --pm-warning:           #F59E0B;
    --pm-info:              #3B82F6;

    /* Gold transparencies — reusable across components (base: #D7BF81) */
    --pm-gold-a08:          rgba(215, 191, 129, .08);
    --pm-gold-a15:          rgba(215, 191, 129, .15);
    --pm-gold-a25:          rgba(215, 191, 129, .25);
    --pm-gold-a35:          rgba(215, 191, 129, .35);
    --pm-gold-a50:          rgba(215, 191, 129, .50);

    /* Editorial gold — brighter / deeper variants used in hero gradient titles
       and the "concert édition" piano cabinet. Sit alongside --pm-gold so any
       component can opt into the warmer editorial palette. */
    --pm-gold-bright-2026:  #E8CF92;
    --pm-gold-deep-2026:    #B8932F;

    /* Editorial paper / ink — warm-cream backgrounds and near-black ink used
       on the redesigned Learn page and any future editorial layout. */
    --pm-paper:             #FAF7F2;
    --pm-paper-2:           #F3EEE5;
    --pm-paper-3:           #E8E0D1;
    --pm-ink:               #0A0908;
    --pm-ink-2:             #141311;
    --pm-ink-3:             #1F1D19;
    --pm-ink-4:             #2A2622;

    /* Level chord colors — desaturated, gold-adjacent hues used by the piano
       selector and any component that visually keys to a learner level. */
    --pm-level-beg:         #6FA37A;
    --pm-level-ele:         #6F90C8;
    --pm-level-int:         #C68F4E;
    --pm-level-adv:         #A668B5;
    --pm-level-exp:         #D85950;

    /* ----------------------------------------------------- TYPOGRAPHY */
    --pm-font:              'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Editorial display face — Fraunces, used for hero/section titles where an
       italic, optical-size-aware serif communicates craft. Pages that opt in
       must enqueue the Fraunces stylesheet (see PianoMode_Enqueue_Fonts). */
    --pm-font-display:      'Fraunces', 'Times New Roman', Georgia, 'Cormorant Garamond', serif;
    --pm-font-mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Fluid type scale (clamp: min, preferred, max) */
    --pm-fs-display:        clamp(2.5rem, 6vw + 1rem, 5rem);     /* Hero display */
    --pm-fs-h1:             clamp(2rem, 4vw + .8rem, 3.5rem);
    --pm-fs-h2:             clamp(1.625rem, 3vw + .6rem, 2.5rem);
    --pm-fs-h3:             clamp(1.375rem, 2vw + .5rem, 1.875rem);
    --pm-fs-h4:             clamp(1.125rem, 1.2vw + .5rem, 1.375rem);
    --pm-fs-body-lg:        clamp(1rem, .5vw + .9rem, 1.125rem);
    --pm-fs-body:           .9375rem;  /* 15px */
    --pm-fs-body-sm:        .875rem;   /* 14px */
    --pm-fs-caption:        .75rem;    /* 12px */
    --pm-fs-overline:       .6875rem;  /* 11px */

    /* Weights */
    --pm-fw-regular:        400;
    --pm-fw-medium:         500;
    --pm-fw-semibold:       600;
    --pm-fw-bold:           700;
    --pm-fw-extrabold:      800;
    --pm-fw-black:          900;

    /* Line heights */
    --pm-lh-tight:          1.1;
    --pm-lh-snug:           1.25;
    --pm-lh-normal:         1.5;
    --pm-lh-relaxed:        1.7;

    /* Tracking */
    --pm-tracking-tight:    -0.02em;
    --pm-tracking-normal:   0;
    --pm-tracking-wide:     0.04em;
    --pm-tracking-wider:    0.08em;
    --pm-tracking-widest:   0.16em;

    /* ----------------------------------------------------- SPACING (4px grid) */
    --pm-space-0:           0;
    --pm-space-1:           4px;
    --pm-space-2:           8px;
    --pm-space-3:           12px;
    --pm-space-4:           16px;
    --pm-space-5:           20px;
    --pm-space-6:           24px;
    --pm-space-8:           32px;
    --pm-space-10:          40px;
    --pm-space-12:          48px;
    --pm-space-16:          64px;
    --pm-space-20:          80px;
    --pm-space-24:          96px;
    --pm-space-32:          128px;
    --pm-space-40:          160px;

    /* ----------------------------------------------------- RADII */
    --pm-r-none:            0;
    --pm-r-xs:              2px;
    --pm-r-sm:              6px;
    --pm-r-md:              10px;
    --pm-r-lg:              14px;
    --pm-r-xl:              20px;
    --pm-r-2xl:             28px;
    --pm-r-pill:            999px;
    --pm-r-full:            9999px;

    /* ----------------------------------------------------- SHADOWS */
    --pm-shadow-xs:         0 1px 2px rgba(11, 11, 11, .06);
    --pm-shadow-sm:         0 2px 8px rgba(11, 11, 11, .08);
    --pm-shadow-md:         0 8px 24px rgba(11, 11, 11, .10);
    --pm-shadow-lg:         0 16px 48px rgba(11, 11, 11, .14);
    --pm-shadow-xl:         0 24px 64px rgba(11, 11, 11, .18);
    --pm-shadow-gold-sm:    0 4px 16px var(--pm-gold-a25);
    --pm-shadow-gold-md:    0 8px 28px var(--pm-gold-a35);
    --pm-shadow-gold-lg:    0 16px 40px var(--pm-gold-a50);
    --pm-shadow-inner:      inset 0 1px 0 rgba(255, 255, 255, .04);
    --pm-ring-gold:         0 0 0 3px var(--pm-gold-a35);

    /* ----------------------------------------------------- MOTION */
    --pm-dur-instant:       80ms;
    --pm-dur-fast:          160ms;
    --pm-dur:               240ms;
    --pm-dur-slow:          420ms;
    --pm-dur-slower:        640ms;

    --pm-ease:              cubic-bezier(.4, 0, .2, 1);          /* standard */
    --pm-ease-in:           cubic-bezier(.4, 0, 1, 1);
    --pm-ease-out:          cubic-bezier(0, 0, .2, 1);
    --pm-ease-inout:        cubic-bezier(.4, 0, .2, 1);
    --pm-ease-spring:       cubic-bezier(.34, 1.56, .64, 1);
    --pm-ease-smooth:       cubic-bezier(.22, 1, .36, 1);        /* 2026 smoothing */

    /* ----------------------------------------------------- Z-INDEX */
    --pm-z-base:            0;
    --pm-z-raised:          10;
    --pm-z-dropdown:        1000;
    --pm-z-sticky:          1010;
    --pm-z-fixed:           1020;
    --pm-z-header:          1030;
    --pm-z-newsletter:      1040;
    --pm-z-cartouche:       1060;
    --pm-z-modal-bg:        1070;
    --pm-z-modal:           1080;
    --pm-z-popover:         1090;
    --pm-z-toast:           1100;
    --pm-z-tooltip:         1110;

    /* ----------------------------------------------------- LAYOUT */
    /* Scrolling newsletter strip removed 2026-06-13 → newsletter height is 0.
       --pm-header-h is the SINGLE SOURCE OF TRUTH for the (newsbar-less)
       header height: the rendered .main-nav binds to it and every hero
       (calc(100vh - var(--pm-header-h))) and no-hero page (padding-top:
       var(--pm-header-h)) reads it, so header-height === clearance and no
       white gap can open under the header on any page. Change the header
       height HERE only. */
    --pm-newsletter-h:      0px;
    --pm-header-h:          88px;
    --pm-chrome-h:          calc(var(--pm-newsletter-h) + var(--pm-header-h));
    --pm-content-max:       1200px;
    --pm-content-wide:      1440px;
    --pm-content-gutter:    clamp(16px, 4vw, 32px);

    /* Cartouche — vertical rail on the right */
    --pm-cartouche-w:       56px;
    --pm-cartouche-inset:   clamp(12px, 2vw, 24px);
    --pm-cartouche-gap:     var(--pm-space-4);

    /* ───────────────────────── CHROME THEME TOKENS ─────────────────────────
       Single source of truth for header / footer / Musical-Staff colours.
       DARK is the default (this :root block); LIGHT (warm beige, lifted from
       the sight-reading "paper" palette) is the html[data-theme="light"]
       override below. Components reference these tokens, so flipping the
       theme is just flipping the tokens — no per-element overrides. The user
       toggle sets data-theme; default is dark regardless of the browser. */
    --pm-chrome-surface:       #0d0d0d;   /* main bar / panel background      */
    --pm-chrome-surface-2:     #161616;   /* raised band / nav-link surface   */
    --pm-chrome-elevated:      rgba(255, 255, 255, 0.05);
    --pm-chrome-text:          #F5EFE3;   /* primary title / link text        */
    --pm-chrome-text-soft:     rgba(245, 239, 227, 0.72);
    --pm-chrome-text-muted:    rgba(245, 239, 227, 0.45);
    --pm-chrome-border:        rgba(215, 191, 129, 0.18);
    --pm-chrome-border-strong: rgba(215, 191, 129, 0.42);
    --pm-chrome-accent:        #D7BF81;   /* gold accent that sits ON chrome  */
    --pm-chrome-accent-strong: #E6D4A8;
    --pm-chrome-shadow:        rgba(0, 0, 0, 0.45);
}

/* LIGHT THEME — warm beige "paper" (sight-reading palette). Default stays
   dark; this only applies when the user toggles light. */
html[data-theme="light"] {
    --pm-chrome-surface:       #F4ECD6;   /* sight-reading --srt-paper        */
    --pm-chrome-surface-2:     #ECE0BC;   /* --srt-paper-2                    */
    --pm-chrome-elevated:      rgba(27, 24, 19, 0.045);
    --pm-chrome-text:          #1B1813;   /* --srt-paper-ink (dark ink)       */
    --pm-chrome-text-soft:     rgba(27, 24, 19, 0.70);
    --pm-chrome-text-muted:    rgba(27, 24, 19, 0.50);
    --pm-chrome-border:        rgba(160, 137, 74, 0.34);
    --pm-chrome-border-strong: rgba(160, 137, 74, 0.60);
    --pm-chrome-accent:        #A0894A;   /* deeper gold for contrast on beige */
    --pm-chrome-accent-strong: #8A743C;
    --pm-chrome-shadow:        rgba(120, 96, 40, 0.20);
}

@media (max-width: 1024px) {
    :root {
        --pm-header-h:          74px;
        --pm-newsletter-h:      0px;
        --pm-cartouche-w:       52px;
    }
}

@media (max-width: 768px) {
    :root {
        --pm-header-h:          72px;
        --pm-newsletter-h:      0px;
        --pm-cartouche-w:       48px;
        --pm-cartouche-inset:   10px;
    }
}

@media (max-width: 480px) {
    :root {
        --pm-header-h:          68px;
        --pm-cartouche-w:       44px;
    }
}

/* Respect the OS-level reduce-motion preference — cuts all non-essential
   animation down to a tiny fade so nothing gets stuck in a spinning state. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --pm-dur-fast:      1ms;
        --pm-dur:           1ms;
        --pm-dur-slow:      1ms;
        --pm-dur-slower:    1ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Global typography — applied to the document root so every page inherits.
   Page-specific CSS can still override locally without touching these rules.
   ========================================================================== */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--pm-font);
    font-size: var(--pm-fs-body);
    line-height: var(--pm-lh-normal);
    color: var(--pm-text-primary);
    background: var(--pm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Header is NON-STICKY — it sits at the top of document flow and scrolls
   away with the page. No body offset is needed. The cartouche is fixed on
   the right side and doesn't affect flow. */
body:not(.pm-no-chrome) {
    padding-top: 0;
}

/* ==========================================================================
   Utility classes — consume these in page CSS / templates.
   ========================================================================== */

/* Typography utilities */
.pm-display { font-size: var(--pm-fs-display); font-weight: var(--pm-fw-extrabold); line-height: var(--pm-lh-tight); letter-spacing: var(--pm-tracking-tight); }
.pm-h1      { font-size: var(--pm-fs-h1); font-weight: var(--pm-fw-extrabold); line-height: var(--pm-lh-tight); letter-spacing: var(--pm-tracking-tight); }
.pm-h2      { font-size: var(--pm-fs-h2); font-weight: var(--pm-fw-bold); line-height: var(--pm-lh-snug); }
.pm-h3      { font-size: var(--pm-fs-h3); font-weight: var(--pm-fw-bold); line-height: var(--pm-lh-snug); }
.pm-h4      { font-size: var(--pm-fs-h4); font-weight: var(--pm-fw-semibold); line-height: var(--pm-lh-snug); }
.pm-body    { font-size: var(--pm-fs-body); font-weight: var(--pm-fw-medium); line-height: var(--pm-lh-normal); }
.pm-body-lg { font-size: var(--pm-fs-body-lg); font-weight: var(--pm-fw-medium); line-height: var(--pm-lh-relaxed); }
.pm-body-sm { font-size: var(--pm-fs-body-sm); font-weight: var(--pm-fw-medium); line-height: var(--pm-lh-normal); }
.pm-caption { font-size: var(--pm-fs-caption); font-weight: var(--pm-fw-semibold); line-height: var(--pm-lh-snug); }
.pm-overline{ font-size: var(--pm-fs-overline); font-weight: var(--pm-fw-bold); text-transform: uppercase; letter-spacing: var(--pm-tracking-widest); }

/* Focus ring — consistent across all interactive elements */
.pm-focus-ring:focus-visible,
*:focus-visible {
    outline: none;
    box-shadow: var(--pm-ring-gold);
    border-radius: var(--pm-r-sm);
}

/* View Transitions root hook — opt-in cross-page transition for browsers that
   support it (Chrome, Edge, Safari 18+). Gracefully ignored elsewhere. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--pm-dur-slow);
    animation-timing-function: var(--pm-ease-smooth);
}

/* Fixed-position widgets that span the lifetime of every page (cookie banner,
   coffee/review widget, SW update toast) MUST opt out of the root cross-fade.
   Without an explicit view-transition-name, the browser includes them in the
   root snapshot and double-renders them during the transition — visible as a
   "banner that flashes for ~300ms on every navigation". Giving each one a
   unique name makes the browser track that element across pages independently;
   since the widget is in the same fixed position on both pages, the morph is
   invisible.
   Browsers without the API ignore the property — no harm done. */
/* Renamed pm-cookie-* → pm-privacy-* in round 27 to escape Brave Shields'
   adblock filter list (EasyList Cookie), which hid every element matching
   [id*="cookie-consent"] / [class*="cookie-consent"] at browser-stylesheet
   level — uncatchable by our own !important rules. The view-transition-name
   custom-idents are kept as pm-privacy-* for parity. */
#pm-privacy-consent           { view-transition-name: pm-privacy-banner; }
#pm-privacy-settings-backdrop { view-transition-name: pm-privacy-backdrop; }
#pm-privacy-settings-panel    { view-transition-name: pm-privacy-settings; }
#pm-coffee-widget           { view-transition-name: pm-coffee-widget; }
#pm-coffee-modal            { view-transition-name: pm-coffee-modal; }
#pm-sw-toast                { view-transition-name: pm-sw-toast; }

/* ==========================================================================
   Hero offset helper — page templates should apply .pm-hero-offset on the
   first section so its top padding accounts for the fixed chrome. Using a
   class keeps the math in one place.
   ========================================================================== */
.pm-hero-offset {
    padding-top: calc(var(--pm-header-h) + var(--pm-space-16));
}

/* Full-bleed heroes (concert hall, video hero) must fill the viewport.
   Since the header is now in normal document flow, no negative margin is
   needed — the hero simply starts where the header ends. */
.pm-hero-fullbleed {
    margin-top: 0;
    min-height: 100vh;
    min-height: 100svh;
}

/* ==========================================================================
   Italic safety net.

   Fraunces in italic (and most serifs) extends ~0.08-0.18em past the
   geometric ink box on the right. Letters with rightward stems or tails
   (y, s, n, e, S, N, Y, $, .9 digits) are the worst offenders. When an
   italic span lands at a container's hard right edge — header titles
   centred at line end, prices in a flex row, last word of a heading —
   the overhang gets optically clipped or smashes into the next sibling.

   We give italic <em>/<i> ENDING the inline content of any heading or
   button-like component a small margin-inline-end. Margin (not padding)
   so any background-clip:text fill stays glyph-tight and we don't paint
   an empty padded rectangle in fallback browsers.

   Page-level CSS (learn-page.css, taxonomy-pm_*.php) keeps its own,
   stricter overrides where the visual budget is tighter. This rule is
   the universal floor for everything that doesn't opt-in by hand.
   ========================================================================== */
:where(h1, h2, h3, h4, h5, h6, .pm-cta, button, [class*="-title"], [class*="-heading"]) > em:last-child,
:where(h1, h2, h3, h4, h5, h6, .pm-cta, button, [class*="-title"], [class*="-heading"]) > i:last-child,
:where(h1, h2, h3, h4, h5, h6, .pm-cta, button, [class*="-title"], [class*="-heading"]) > span[style*="italic"]:last-child {
    margin-inline-end: 0.12em;
}

/* And ensure every heading reserves a sliver on its own right edge so a
   container-level overflow:hidden inherited from a wrapper card doesn't
   crop the italic overhang. :where() keeps specificity at 0 so any
   page-level rule overrides this without !important. */
:where(h1, h2, h3) {
    padding-inline-end: 0.05em;
}

/* ==========================================================================
   FAQ → Help Center handoff (rendered by pm_render_faq_help_cta()).

   Same component on every page that ships an FAQ accordion, so the visual
   signature stays consistent. Tokens-driven so dark/light mode swaps work
   automatically. The CTA underline uses background-position rather than
   text-decoration so it animates smoothly on hover.
   ========================================================================== */
.pm-faq-foot {
    margin: 32px auto 0;
    max-width: 720px;
    padding: 26px 28px;
    text-align: center;
    background: var(--pm-surface-2, rgba(245, 239, 227, 0.04));
    border: 1px solid var(--pm-border-soft, rgba(215, 191, 129, 0.22));
    border-radius: 16px;
    box-sizing: border-box;
}
.pm-faq-foot__lead {
    margin: 0 0 14px;
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: 17px;
    font-style: italic;
    line-height: 1.4;
    color: var(--pm-text-2, rgba(245, 239, 227, 0.7));
    /* Italic safety — same reasoning as the design-system italic rule. */
    padding-inline-end: 0.08em;
}
.pm-faq-foot__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 100px;
    border: 1px solid var(--pm-gold, #D7BF81);
    background: transparent;
    color: var(--pm-gold, #D7BF81);
    font-family: var(--sans, "Montserrat", system-ui, sans-serif);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition:
        background-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pm-faq-foot__cta svg {
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pm-faq-foot__cta:hover,
.pm-faq-foot__cta:focus-visible {
    background-color: var(--pm-gold, #D7BF81);
    color: var(--pm-ink, #0d0d0d);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(215, 191, 129, 0.18);
}
.pm-faq-foot__cta:hover svg,
.pm-faq-foot__cta:focus-visible svg {
    transform: translateX(3px);
}
.pm-faq-foot__cta:focus-visible {
    outline: 2px solid var(--pm-gold, #D7BF81);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .pm-faq-foot__cta,
    .pm-faq-foot__cta svg { transition: none; }
    .pm-faq-foot__cta:hover { transform: none; }
}