/* ============================================================
 * John Isaacson — Heritage Noir (opt-in dark skin)
 * Loads after v10.css. EVERYTHING is scoped to html[data-theme="heritage"],
 * so the default light look is untouched. Tokens first, then the few
 * hard-coded values in components.css / v10.css that tokens can't reach.
 * Palette: ink #111713 · racing green #20382D / #16261F · tobacco #5B4333
 *          antique gold #B79A59 · bone #E9E1D2 · cream #C7BDAD
 * Type: Playfair Display (display, regular) + Inter (UI/body)
 * Contrast (checked): bone/ink 14.0 · cream/ink 9.8 · gold/ink 6.7 ·
 *   ink/gold 6.7 · gold/green 4.7 · cream/green 6.8 · muted/green 4.8
 * ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root[data-theme="heritage"] {
  color-scheme: dark;

  --bg:        #111713;
  --surface:   #16261F;   /* alternate sections */
  --surface-2: #20382D;   /* cards, panels */
  --ink:       #E9E1D2;   /* text (bone) */
  --ink-2:     #C7BDAD;   /* secondary copy */
  --muted:     #A89F90;
  --line:      #2A3A30;
  --line-2:    #455146;
  --red:       #B79A59;   /* accent slot -> antique gold */
  --red-2:     #CDB26E;   /* hover: brighter gold */
  --dark:      #20382D;   /* CTA panels -> racing green */
  --color-border-subtle: #2A3A30;

  --gold:      #B79A59;
  --gold-hi:   #CDB26E;
  --tobacco:   #5B4333;
  --ink-deep:  #090D0A;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif;
  --font-mono:    'Inter', Arial, Helvetica, sans-serif;

  /* Squared, restrained corners (brand: 0-6px) */
  --radius-sm: 3px; --radius: 4px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 6px; --radius-pill: 4px;
  --shadow:    0 28px 60px -32px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 10px 26px -14px rgba(0, 0, 0, 0.6);

  --max-width: 1200px;

  /* Hero dot-matrix canvas reads these (v10.js) */
  --dot: rgba(183, 154, 89, 0.20);
  --dot-soft: rgba(183, 154, 89, 0.10);
  --dot-rgb: 183, 154, 89;
  --dot-hot-rgb: 214, 188, 120;
  --dot-gain: 2.4;
}

[data-theme="heritage"] body { background: var(--bg); color: var(--ink); }
[data-theme="heritage"] ::selection { background: var(--gold); color: var(--bg); }
[data-theme="heritage"] :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Type ─────────────────────────────────────────────────── */
[data-theme="heritage"] h1,
[data-theme="heritage"] h2,
[data-theme="heritage"] h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.07; }
[data-theme="heritage"] h1 { letter-spacing: -0.03em; }
[data-theme="heritage"] h4,
[data-theme="heritage"] h5,
[data-theme="heritage"] h6 { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
[data-theme="heritage"] .hero--v10 .hero__title { font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: 1.07; letter-spacing: -0.03em; max-width: 16ch; }
[data-theme="heritage"] .stat b,
[data-theme="heritage"] .sp-metric__val,
[data-theme="heritage"] .res .r,
[data-theme="heritage"] .hero__chip--stat b,
[data-theme="heritage"] .chanrow .who { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
[data-theme="heritage"] .chanrow .who span { font-family: var(--font-body); }
/* Playfair defaults to old-style figures; stats and numbers read better lining */
[data-theme="heritage"] .stat b,
[data-theme="heritage"] .sp-metric__val,
[data-theme="heritage"] .res .r,
[data-theme="heritage"] .hero__chip--stat b,
[data-theme="heritage"] .card__num,
[data-theme="heritage"] .step .n,
[data-theme="heritage"] .step__num,
[data-theme="heritage"] h1, [data-theme="heritage"] h2, [data-theme="heritage"] h3 { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1; }
[data-theme="heritage"] .card__num { font-family: var(--font-display); font-weight: 400; -webkit-text-stroke: 1px rgba(183, 154, 89, 0.7); }
[data-theme="heritage"] .step .n,
[data-theme="heritage"] .step__num { font-family: var(--font-display); font-weight: 400; }
[data-theme="heritage"] .card .n,
[data-theme="heritage"] .detail-feat__num,
[data-theme="heritage"] .stat span,
[data-theme="heritage"] .sp-metric__label { letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; font-weight: 500; color: var(--gold); }
[data-theme="heritage"] .stat span,
[data-theme="heritage"] .sp-metric__label { color: var(--muted); }

/* ── Nav + wordmark ───────────────────────────────────────── */
[data-theme="heritage"] .nav { background: rgba(17, 23, 19, 0.88); border-bottom-color: var(--line); }
[data-theme="heritage"] .nav.is-scrolled { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.8); }
[data-theme="heritage"] .nav__logo,
[data-theme="heritage"] .footer__brand-name { font-family: var(--font-body); font-weight: 500; font-size: 13.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
[data-theme="heritage"] .nav__logo .play-mark,
[data-theme="heritage"] .footer__brand-name .play-mark { display: none; }
[data-theme="heritage"] .nav__links a { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
[data-theme="heritage"] .nav__links a:hover { color: var(--gold-hi); }
[data-theme="heritage"] .nav__hamburger span { background: var(--ink); }
[data-theme="heritage"] .nav__mobile { background: var(--bg); border-bottom-color: var(--line); }
[data-theme="heritage"] .nav__mobile a { color: var(--ink); border-bottom-color: var(--line); }
[data-theme="heritage"] .nav__mobile .nav__mobile-cta { background: var(--gold); color: var(--bg); }

/* ── Buttons: gold primary; outline in nav; quiet text link for ghost ── */
[data-theme="heritage"] .btn { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
[data-theme="heritage"] .btn:hover { background: #2a4639; color: var(--ink); transform: translateY(-2px); }
[data-theme="heritage"] .btn--primary,
[data-theme="heritage"] .btn--red { background: var(--gold); color: var(--bg); border-color: var(--gold); }
[data-theme="heritage"] .btn--primary:hover,
[data-theme="heritage"] .btn--red:hover { background: var(--gold-hi); color: var(--bg); border-color: var(--gold-hi); }
[data-theme="heritage"] .nav__cta.btn--primary { background: transparent; color: var(--gold); border-color: var(--gold); }
[data-theme="heritage"] .nav__cta.btn--primary:hover { background: var(--gold); color: var(--bg); }
[data-theme="heritage"] .btn--ghost,
[data-theme="heritage"] .btn--outline { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; text-decoration-thickness: 1px; }
[data-theme="heritage"] .btn--ghost:hover,
[data-theme="heritage"] .btn--outline:hover { background: transparent; color: var(--gold-hi); text-decoration-color: var(--gold); }
[data-theme="heritage"] .btn--white { background: var(--gold); color: var(--bg); border-color: var(--gold); }
[data-theme="heritage"] .btn--white:hover { background: var(--gold-hi); color: var(--bg); }
[data-theme="heritage"] .arrow,
[data-theme="heritage"] .link { color: var(--ink); border-bottom-color: var(--line-2); }
[data-theme="heritage"] .arrow:hover,
[data-theme="heritage"] .link:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }

/* ── Hero ─────────────────────────────────────────────────── */
[data-theme="heritage"] .hero__frame { background: var(--ink-deep); box-shadow: var(--shadow); }
[data-theme="heritage"] .hero__frame::before { /* controlled overlay: green-black shadows, copy side darker */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(17, 23, 19, 0.55), transparent 48%), linear-gradient(0deg, rgba(17, 23, 19, 0.4), transparent 42%);
}
[data-theme="heritage"] .hero__frame::after { border-color: rgba(183, 154, 89, 0.28); }
[data-theme="heritage"] .hero__frame img,
[data-theme="heritage"] .about__img img.bw,
[data-theme="heritage"] .bw { filter: grayscale(1) sepia(0.32) contrast(1.06) brightness(0.9); }
[data-theme="heritage"] .hero__chip { background: rgba(17, 23, 19, 0.92); border-color: var(--line-2); }
[data-theme="heritage"] .hero__chip--stat b::after { background: var(--gold); }
[data-theme="heritage"] .accent-thumb.bw { filter: grayscale(1) sepia(0.3) contrast(1.05) brightness(1.1); }

/* ── Sections, cards, panels ──────────────────────────────── */
[data-theme="heritage"] .sec--grey,
[data-theme="heritage"] .sp-features,
[data-theme="heritage"] .sp-included { background: var(--surface); }
[data-theme="heritage"] .card,
[data-theme="heritage"] .detail-feat { background: var(--surface-2); border: 1px solid var(--line-2); }
[data-theme="heritage"] .sec--grey .card { border-color: var(--line-2); }
[data-theme="heritage"] .card:hover { border-color: #6a6a4f; box-shadow: var(--shadow-sm); }
[data-theme="heritage"] .sp-pain { background: var(--surface-2); }
[data-theme="heritage"] .card ul li::before { background: var(--gold); }
[data-theme="heritage"] .card .n::before { background: var(--gold); }
[data-theme="heritage"] .card__visual { background: #0c120e; color: var(--ink); }
[data-theme="heritage"] .card__visual::after { background: radial-gradient(circle, rgba(183, 154, 89, 0.22), transparent 65%); }
[data-theme="heritage"] .card__visual::before { background-image: radial-gradient(circle, rgba(183, 154, 89, 0.28) 1.1px, transparent 1.6px); }
[data-theme="heritage"] .card__icon { color: var(--gold-hi); }
[data-theme="heritage"] .card__visual img { filter: grayscale(1) sepia(0.3) contrast(1.1); }
[data-theme="heritage"] .stats { border-top-color: var(--line-2); }

/* Videos / blog */
[data-theme="heritage"] .th__play { background: var(--gold); color: var(--bg); box-shadow: 0 10px 30px -10px rgba(183, 154, 89, 0.55); }
[data-theme="heritage"] .dur { background: rgba(9, 13, 10, 0.85); color: var(--ink); }
[data-theme="heritage"] .chanrow__mark { background: var(--surface-2); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line-2); }
[data-theme="heritage"] .post-card .th img { filter: grayscale(1) sepia(0.25) contrast(1.06); }
[data-theme="heritage"] .post-card:hover .th img { filter: none; }
[data-theme="heritage"] .post-card .th,
[data-theme="heritage"] .blog-card__img { background: var(--surface-2); }
[data-theme="heritage"] .blog__pagination .current { background: var(--gold); color: var(--bg); }

/* About + process + results */
[data-theme="heritage"] .about__img .about__inset { border-color: var(--bg); }
[data-theme="heritage"] .step .n,
[data-theme="heritage"] .step__num { background: var(--surface-2); color: var(--gold-hi); border: 1px solid var(--gold); }
[data-theme="heritage"] .step:hover .n { background: var(--gold); color: var(--bg); }
[data-theme="heritage"] .res:hover .r { color: var(--gold-hi); }

/* ── CTA panel + footer: racing green ─────────────────────── */
[data-theme="heritage"] .cta__panel { background: var(--surface-2); border: 1px solid var(--line-2); }
[data-theme="heritage"] .cta__panel::after { background: radial-gradient(circle, rgba(183, 154, 89, 0.2), transparent 65%); }
[data-theme="heritage"] .cta__title,
[data-theme="heritage"] .post__cta-inner h3 { color: var(--ink); }
[data-theme="heritage"] .cta__desc,
[data-theme="heritage"] .post__cta-inner p { color: var(--ink-2); }
[data-theme="heritage"] .cta__sub { color: var(--muted); }
[data-theme="heritage"] .cta .btn--primary,
[data-theme="heritage"] .post__cta-inner .btn--primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
[data-theme="heritage"] .cta .btn--primary:hover,
[data-theme="heritage"] .post__cta-inner .btn--primary:hover { background: var(--gold-hi); color: var(--bg); }
[data-theme="heritage"] .cta__photo { filter: grayscale(1) sepia(0.35) contrast(1.15) brightness(0.8); }
[data-theme="heritage"] .footer { background: var(--ink-deep); border-top: 1px solid var(--line-2); }
[data-theme="heritage"] .footer__social-link { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }
[data-theme="heritage"] .footer__social-link:hover { background: #2a4639; }
[data-theme="heritage"] .footer__col-title { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
[data-theme="heritage"] .footer__col-links a:hover { color: var(--gold-hi); }
[data-theme="heritage"] .footer__powered a:hover,
[data-theme="heritage"] .footer__powered a:focus-visible { color: var(--gold-hi); border-color: var(--gold); }

/* ── Book-a-call popup (Overwatch Forms) ──────────────────── */
[data-theme="heritage"] .ow-popup { --ow-popup-theme-bg: #16261F; --ow-popup-overlay: rgba(9, 13, 10, 0.82); --ow-popup-radius: 6px; }
[data-theme="heritage"] .ow-form {
  --ow-font: 'Inter', Arial, Helvetica, sans-serif;
  --ow-text: #E9E1D2; --ow-text-light: #C7BDAD; --ow-label-color: #E9E1D2;
  --ow-border: #455146; --ow-border-focus: #B79A59; --ow-focus-shadow: rgba(183, 154, 89, 0.22);
  --ow-bg-input: #111713; --ow-radius: 4px;
  --ow-btn-bg: #B79A59; --ow-btn-color: #111713; --ow-btn-radius: 4px;
}
[data-theme="heritage"] .ow-form select option { background: #111713; color: #E9E1D2; }

/* ── Theme toggle button (rendered in header.php; visible in both skins) ── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle__icon { width: 16px; height: 16px; flex: none; }
.theme-toggle__icon circle { fill: currentColor; opacity: 0.18; }
.theme-toggle__icon path { fill: currentColor; }
.theme-toggle__label--on { display: none; }
[data-theme="heritage"] .theme-toggle { color: var(--gold); border-color: var(--gold); }
[data-theme="heritage"] .theme-toggle:hover { background: var(--gold); color: var(--bg); }
[data-theme="heritage"] .theme-toggle__label--off { display: none; }
[data-theme="heritage"] .theme-toggle__label--on { display: inline; }
.nav__right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.nav__right .nav__cta.btn { justify-self: auto; }
@media (max-width: 900px) {
  .theme-toggle { padding: 8px; min-width: 44px; min-height: 44px; justify-content: center; }
  .theme-toggle__label { display: none !important; }
}