/**
 * Editorial Theme — Eniuche Aperture for public pages
 *
 * Ports the approved homepage identity (home-cinematic.css) to every
 * public content page so the whole site reads as one design system:
 * warm espresso + cocoa ink, ivory + veil surfaces, and rose-gold /
 * peach / salmon accents (no yellow gold, no cold black, no oxblood,
 * no forest, no navy).
 *
 * Load AFTER variables.css. Homepage (home-cinematic-page), portal,
 * admin, planner, and wedding-OS mode pages keep their own themes.
 */

body.editorial-page {
  /* ── Palette: Eniuche Aperture ─────────────────────────────────────── */
  --color-white: #fff8f2;        /* ivory-050  */
  --color-white-soft: #fff8f2;
  --color-cream: #f5e9e1;        /* veil-100   */
  --color-ivory: #faf0e9;

  --color-forest-950: #120b09;   /* legacy name, now espresso-deep     */
  --color-forest-900: #1b1210;   /* legacy name, now espresso          */
  --color-forest-700: #2a1b17;   /* legacy name, now cocoa-900         */
  --color-cream-050: #fff8f2;
  --color-cream-200: #e8cec1;    /* nude-200   */
  --color-ink-900: #241815;

  --color-gold-light: #dcaa91;   /* peach-300  */
  --color-gold: #bc826d;         /* rose-gold-500 */
  /* salmon-700 (#9b5f53) reads 4.24:1 on veil-100 — fails AA for small text.
     Deeper brick-salmon keeps the hue and passes (~4.8:1). axe-verified. */
  --color-gold-rich: #8f574c;
  --color-gold-dark: #4a342d;    /* cocoa-700  */

  --color-champagne: #e8cec1;
  --color-bronze: #9b5f53;
  --color-oxblood: #9b5f53;
  --color-emerald: #4a342d;

  --color-text-primary: #241815;
  --color-text-secondary: #4a342d;
  --color-text-muted: #6d574d;

  --color-bg-primary: var(--color-white);
  --color-bg-soft: var(--color-cream);
  --color-bg-card: rgba(255, 248, 242, 0.78);
  --color-bg-card-solid: var(--color-white);
  --color-bg-overlay: rgba(245, 233, 225, 0.82);
  --color-bg-glass: rgba(255, 248, 242, 0.6);

  --color-border-light: rgba(188, 130, 109, 0.22);
  --color-border-medium: rgba(188, 130, 109, 0.38);
  --color-border-soft: rgba(36, 24, 21, 0.08);

  --gradient-header: linear-gradient(to bottom, rgba(27, 18, 16, 0.96), rgba(42, 27, 23, 0.92));

  --shadow-soft: 0 4px 20px rgba(36, 24, 21, 0.08);
  --shadow-medium: 0 8px 32px rgba(36, 24, 21, 0.12);
  --shadow-strong: 0 12px 48px rgba(36, 24, 21, 0.16);
  --shadow-gold: 0 4px 24px rgba(188, 130, 109, 0.3);
  --shadow-text: 0 2px 4px rgba(36, 24, 21, 0.1);
  --surface-paper: #fff8f2;
  --shadow-paper: 0 14px 40px rgba(36, 24, 21, 0.12);

  /* ── Page surface: veil, like the homepage body ────────────────────── */
  background-color: var(--color-cream);
  color: var(--color-text-primary);
}

/* ── Selection + focus ─────────────────────────────────────────────────── */
body.editorial-page ::selection {
  background: var(--color-gold-light);
  color: var(--color-text-primary);
}

body.editorial-page :focus-visible {
  outline-color: var(--color-gold);
}

/* ── Header: warm espresso with rose-gold accents (homepage pattern) ──── */
body.editorial-page .header,
body.editorial-page .site-header,
body.editorial-page .header--compact,
body.editorial-page .site-header.header--compact,
body.editorial-page.has-hero .header--compact,
body.editorial-page.has-hero .site-header.header--compact {
  /* Solid base under the gradient so the bar still paints when the
     compositor drops the gradient layer (fixed + backdrop-filter quirk). */
  background-color: #1b1210;
  background-image:
    linear-gradient(90deg, rgba(27, 18, 16, 0.96), rgba(42, 27, 23, 0.91));
  border-bottom-color: rgba(220, 170, 145, 0.22);
}

body.editorial-page .brand-monogram-only {
  border-color: rgba(220, 170, 145, 0.42);
}

body.editorial-page .brand:hover .brand-monogram-only,
body.editorial-page.has-hero .brand-monogram-only {
  border-color: rgba(220, 170, 145, 0.42);
}

body.editorial-page .brand:hover .brand-monogram-only {
  background: rgba(188, 130, 109, 0.16);
  border-color: var(--color-gold-light);
}

body.editorial-page .brand-monogram-only .mono-letter {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.editorial-page .brand-monogram-only .mono-amp {
  color: var(--color-gold-light);
}

body.editorial-page .nav-links a::after {
  background: var(--color-gold);
}

body.editorial-page .nav-links a,
body.editorial-page.has-hero .nav-links a {
  color: rgba(255, 248, 242, 0.72);
  text-shadow: none;
}

body.editorial-page .nav-links a:is(:hover, :focus-visible, .active) {
  color: var(--color-white);
}

body.editorial-page .nav-rsvp {
  color: #1b1210 !important;
  background: var(--color-gold);
}

body.editorial-page .nav-rsvp:hover,
body.editorial-page .nav-rsvp:focus-visible {
  color: #1b1210 !important;
  background: var(--color-gold-light);
  box-shadow: 0 4px 15px rgba(188, 130, 109, 0.3);
}

body.editorial-page .nav-toggle:hover,
body.editorial-page .nav-toggle:focus-visible {
  background: rgba(188, 130, 109, 0.18);
}

body.editorial-page .nav-toggle span,
body.editorial-page.has-hero .nav-toggle span {
  background: rgba(255, 248, 242, 0.86);
}

@media (max-width: 900px) {
  body.editorial-page .nav-links a {
    border-bottom-color: rgba(220, 170, 145, 0.14);
    color: rgba(255, 248, 242, 0.82);
  }

  body.editorial-page .nav-links a:hover,
  body.editorial-page .nav-links a.active {
    background: rgba(188, 130, 109, 0.16);
    color: var(--color-white);
  }
}

/* ── Footer: veil glass with rose-gold accents ─────────────────────────── */
body.editorial-page .site-footer {
  background: linear-gradient(
    180deg,
    rgba(255, 248, 242, 0.72) 0%,
    rgba(245, 233, 225, 0.88) 100%
  );
  border-top-color: rgba(188, 130, 109, 0.24);
}

body.editorial-page .footer-container {
  background: linear-gradient(
    180deg,
    rgba(255, 248, 242, 0.62) 0%,
    rgba(250, 240, 233, 0.5) 100%
  );
  border-color: rgba(188, 130, 109, 0.14);
}

body.editorial-page .footer-brand {
  border-color: rgba(188, 130, 109, 0.26);
}

body.editorial-page .footer-mono-letter {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold) 58%, var(--color-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Accessibility launcher chrome lives in css/accessibility/toolbar.css so
   editorial pages inherit the Celebrations standard without rebinding tokens.
   Avoid circular custom-property self-references on .a11y-toolbar; those
   invalidate the token and revive the mustard launcher fallback. */

/* ── Skip link ─────────────────────────────────────────────────────────── */
body.editorial-page .skip-link {
  color: #1b1210;
  background: var(--color-gold);
  box-shadow: 0 12px 30px rgba(27, 18, 16, 0.28);
}

/* ── Footer link accents (hardcoded in components.css) ─────────────────── */
body.editorial-page .footer-links a {
  color: var(--color-gold-rich);
}

body.editorial-page .footer-links a:hover,
body.editorial-page .footer-links a:focus-visible {
  color: var(--color-gold-dark);
}

body.editorial-page .footer-legal-links a {
  border-color: rgba(155, 95, 83, 0.24);
}

body.editorial-page .footer-legal-links a:hover,
body.editorial-page .footer-legal-links a:focus-visible {
  background: rgba(188, 130, 109, 0.16);
  border-color: rgba(155, 95, 83, 0.44);
}

body.editorial-page .footer-admin,
body.editorial-page .footer-business,
body.editorial-page .footer-dates {
  color: var(--color-text-muted);
}

/* ── Legacy hero title gradient (hardcoded in layout.css) ──────────────── */
body.editorial-page .hero-title .script-name-lg {
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-rich));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(155, 95, 83, 0.2));
}
/* ══════════════════════════════════════════════════════════════════════════
   CELEBRATION THEME: WHITE WEDDING (HOUSTON)
   ══════════════════════════════════════════════════════════════════════════
   When the server stamps data-celebration-theme="white" on <html>, editorial
   pages move from the Eniuche Aperture (espresso + rose-gold) to the Houston
   identity: evening-navy ink, champagne-gold accents, pearl surfaces — the
   couple's white-wedding palette. Mirrors every trad override above so the
   flip is one attribute, not a per-page exercise.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-celebration-theme="white"] body.editorial-page {
  /* ── Palette: Houston Aperture ─────────────────────────────────────── */
  --color-white: #fcfbf8;        /* pearl-050  */
  --color-white-soft: #fcfbf8;
  --color-cream: #f6f4ef;        /* pearl-100  */
  --color-ivory: #f8f6f2;

  --color-forest-950: #0e0e1f;   /* legacy name, now evening-deep      */
  --color-forest-900: #16162b;   /* legacy name, now evening navy      */
  --color-forest-700: #2c2c4e;   /* legacy name, now navy-700          */
  --color-cream-050: #fcfbf8;
  --color-cream-200: #e7dfd0;    /* champagne-200 */
  --color-ink-900: #1c1c2e;

  --color-gold-light: #d9c48d;   /* champagne-300 */
  --color-gold: #c9a227;         /* muted gold (Houston event accent)  */
  /* Deep champagne-bronze keeps accent text AA on pearl (~5.2:1). */
  --color-gold-rich: #7c6414;
  --color-gold-dark: #34345c;    /* navy-700 */

  --color-champagne: #f7e7ce;    /* the couple's champagne swatch      */
  --color-bronze: #7c6414;
  --color-oxblood: #3a3a66;
  --color-emerald: #34345c;

  --color-text-primary: #1c1c2e;
  --color-text-secondary: #46465e;
  --color-text-muted: #6b6b80;

  --color-bg-primary: var(--color-white);
  --color-bg-soft: var(--color-cream);
  --color-bg-card: rgba(252, 251, 248, 0.78);
  --color-bg-card-solid: var(--color-white);
  --color-bg-overlay: rgba(246, 244, 239, 0.82);
  --color-bg-glass: rgba(252, 251, 248, 0.6);

  --color-border-light: rgba(178, 148, 60, 0.24);
  --color-border-medium: rgba(178, 148, 60, 0.4);
  --color-border-soft: rgba(28, 28, 46, 0.08);

  --gradient-header: linear-gradient(to bottom, rgba(22, 22, 43, 0.96), rgba(44, 44, 78, 0.92));

  --shadow-soft: 0 4px 20px rgba(28, 28, 46, 0.08);
  --shadow-medium: 0 8px 32px rgba(28, 28, 46, 0.12);
  --shadow-strong: 0 12px 48px rgba(28, 28, 46, 0.16);
  --shadow-gold: 0 4px 24px rgba(201, 162, 39, 0.3);
  --shadow-text: 0 2px 4px rgba(28, 28, 46, 0.1);
  --surface-paper: #fcfbf8;
  --shadow-paper: 0 14px 40px rgba(28, 28, 46, 0.12);
}

/* ── Header: evening navy with champagne accents ─────────────────────── */
:root[data-celebration-theme="white"] body.editorial-page .header,
:root[data-celebration-theme="white"] body.editorial-page .site-header,
:root[data-celebration-theme="white"] body.editorial-page .header--compact,
:root[data-celebration-theme="white"] body.editorial-page .site-header.header--compact,
:root[data-celebration-theme="white"] body.editorial-page.has-hero .header--compact,
:root[data-celebration-theme="white"] body.editorial-page.has-hero .site-header.header--compact {
  background-color: #16162b;
  background-image:
    linear-gradient(90deg, rgba(22, 22, 43, 0.96), rgba(44, 44, 78, 0.91));
  border-bottom-color: rgba(217, 196, 141, 0.24);
}

:root[data-celebration-theme="white"] body.editorial-page .brand-monogram-only {
  border-color: rgba(217, 196, 141, 0.46);
}

:root[data-celebration-theme="white"] body.editorial-page .brand:hover .brand-monogram-only,
:root[data-celebration-theme="white"] body.editorial-page.has-hero .brand-monogram-only {
  border-color: rgba(217, 196, 141, 0.46);
}

:root[data-celebration-theme="white"] body.editorial-page .brand:hover .brand-monogram-only {
  background: rgba(201, 162, 39, 0.18);
  border-color: var(--color-gold-light);
}

:root[data-celebration-theme="white"] body.editorial-page .nav-links a,
:root[data-celebration-theme="white"] body.editorial-page.has-hero .nav-links a {
  color: rgba(252, 251, 248, 0.74);
}

:root[data-celebration-theme="white"] body.editorial-page .nav-rsvp {
  color: #16162b !important;
}

:root[data-celebration-theme="white"] body.editorial-page .nav-rsvp:hover,
:root[data-celebration-theme="white"] body.editorial-page .nav-rsvp:focus-visible {
  color: #16162b !important;
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.32);
}

:root[data-celebration-theme="white"] body.editorial-page .nav-toggle:hover,
:root[data-celebration-theme="white"] body.editorial-page .nav-toggle:focus-visible {
  background: rgba(201, 162, 39, 0.2);
}

:root[data-celebration-theme="white"] body.editorial-page .nav-toggle span,
:root[data-celebration-theme="white"] body.editorial-page.has-hero .nav-toggle span {
  background: rgba(252, 251, 248, 0.88);
}

@media (max-width: 900px) {
  :root[data-celebration-theme="white"] body.editorial-page .nav-links a {
    border-bottom-color: rgba(217, 196, 141, 0.16);
    color: rgba(252, 251, 248, 0.84);
  }

  :root[data-celebration-theme="white"] body.editorial-page .nav-links a:hover,
  :root[data-celebration-theme="white"] body.editorial-page .nav-links a.active {
    background: rgba(201, 162, 39, 0.18);
  }
}

/* ── Footer: pearl glass with champagne accents ──────────────────────── */
:root[data-celebration-theme="white"] body.editorial-page .site-footer {
  background: linear-gradient(
    180deg,
    rgba(252, 251, 248, 0.72) 0%,
    rgba(246, 244, 239, 0.88) 100%
  );
  border-top-color: rgba(178, 148, 60, 0.26);
}

:root[data-celebration-theme="white"] body.editorial-page .footer-container {
  background: linear-gradient(
    180deg,
    rgba(252, 251, 248, 0.62) 0%,
    rgba(248, 246, 242, 0.5) 100%
  );
  border-color: rgba(178, 148, 60, 0.16);
}

:root[data-celebration-theme="white"] body.editorial-page .footer-brand {
  border-color: rgba(178, 148, 60, 0.28);
}

/* ── Skip link ─────────────────────────────────────────────────────────── */
:root[data-celebration-theme="white"] body.editorial-page .skip-link {
  color: #16162b;
  box-shadow: 0 12px 30px rgba(22, 22, 43, 0.3);
}

/* ── Footer legal link accents ─────────────────────────────────────────── */
:root[data-celebration-theme="white"] body.editorial-page .footer-legal-links a {
  border-color: rgba(124, 100, 20, 0.26);
}

:root[data-celebration-theme="white"] body.editorial-page .footer-legal-links a:hover,
:root[data-celebration-theme="white"] body.editorial-page .footer-legal-links a:focus-visible {
  background: rgba(201, 162, 39, 0.16);
  border-color: rgba(124, 100, 20, 0.44);
}

/* ── Legacy hero title gradient shadow ───────────────────────────────── */
:root[data-celebration-theme="white"] body.editorial-page .hero-title .script-name-lg {
  filter: drop-shadow(0 2px 4px rgba(124, 100, 20, 0.22));
}