/* ============================================================
   LP THEME OVERRIDE  (demo, v2)
   Re-skins the SEO "ink-" pages to the Apollo landing-page look:
   Roboto Slab headings, clean WHITE surfaces (no beige), gold-
   bordered tiles, a collapsing header whose "Book" turns into a
   gold button on scroll. Loaded AFTER page CSS so these win.
   ============================================================ */
:root, .ink-page {   /* .ink-page included: the original defines these tokens there, shadowing :root */
  --serif: 'Roboto Slab', Georgia, serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --micro: 'Mulish', -apple-system, sans-serif;

  /* Surfaces → LP white / cool light-gray (kill the warm cream) */
  --canvas: #FFFFFF;  --canvas-lift: #FFFFFF;  --canvas-deep: #F6F7F9;
  --linen: #F6F7F9;   --linen-deep: #EEF0F3;
  --warm-white: #FFFFFF;  --mist: #F6F7F9;
  --blue-haze: #F6F8FC;   --blue-haze-deep: #EDF1F8;
  --cream: #FFFFFF;       --cream-light: #FFFFFF;

  --line: rgba(0,22,58,.10);  --line-strong: rgba(0,22,58,.16);
  --gold-line: rgba(255,184,0,.55);
  --shadow-soft: 0 8px 24px rgba(0,22,58,.05);
  --shadow-lift: 0 14px 36px rgba(0,22,58,.09);

  --radius-xl: 14px;  --radius-lg: 12px;  --radius-md: 10px;
  --content-width: 1140px;
  --gold: #FFB800;  --ink: #00163A;
  /* darker bronze so kicker/eyebrow text clears WCAG AA on white AND on slate bands (#D6E0ED) */
  --gold-bronze: #6f521f;
}

/* ---- lighter base: everything white ---- */
html, body, .ink-page { background:#FFFFFF !important; }

/* kill the remaining hardcoded beige surfaces */
.ink-page .faq-item,
.ink-page .subject-media,
.ink-page .primary-nav-flyout,
.ink-page [class*="-band"],
.ink-page [class*="-strip"] { background:#FFFFFF !important; }

/* flatten the warm section/component GRADIENTS that still read beige.
   background-image:none reveals white; alternate sections get a faint
   cool tint (not warm) for separation. Semantic color blocks
   (flag-col green/red, gold hero-plate) are intentionally excluded. */
.ink-page .section, .ink-page [class*="section-"],
.ink-page .rule-row, .ink-page .timeline-entry,
.ink-page .matrix, .ink-page .matrix-head, .ink-page .realism-matrix,
.ink-page .placement-col, .ink-page .questions-block,
.ink-page .lane, .ink-page .editorial-stack {
  background-image: none !important;
  background-color: #FFFFFF !important;
}
/* gentle cool-gray alternation so it isn't flat — lighter than the LP cream */
.ink-page .section:nth-of-type(even) { background-color:#F7F8FA !important; }

/* ---- typography: LP slab serif (font only — DON'T force colors,
   the original already has correct light/dark text per section) ---- */
.ink-page h1, .ink-page h2, .ink-page h3, .ink-page h4, .ink-page h5 {
  font-family:var(--serif); font-weight:600; letter-spacing:-0.005em;
}
.ink-page, .ink-page p, .ink-page li, .ink-page a { font-family:var(--sans); }

/* ---- gold-bordered tiles (LP look) ---- */
.ink-page [class$="-card"], .ink-page [class*="-card "],
.ink-page .page-shell, .ink-page .page-map-shell,
.ink-page .faq-item, .ink-page .subject-media,
.ink-page [class*="-tile"],
.ink-page [class*="-panel"]:not(.header-panel):not(.submenu-panel):not(.primary-nav-flyout) {
  background:#FFFFFF !important;
  border:1px solid var(--gold-line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-soft) !important;
}

/* ---- primary buttons: solid gold, navy text ---- */
.ink-page .btn, .ink-page .button, .ink-page .pill-cta,
.ink-page .header-cta, .ink-page [class*="cta"] a, .ink-page a[class*="btn"] {
  background:var(--gold) !important; color:var(--ink) !important;
  border-radius:8px !important; font-family:var(--micro); font-weight:700; letter-spacing:.02em;
}

/* ============================================================
   HEADER — white background (kill beige), keep the site's native
   scroll/collapse behavior, and turn the trailing "Book" link into
   a gold button on scroll (style only — no layout-changing rules,
   which previously collapsed the flex row).
   ============================================================ */
.ink-header, .ink-header .header-shell, .ink-header .crest-rail,
.ink-header .header-panel, .ink-header .header-topline { background:#FFFFFF !important; }
.ink-header.scrolled { box-shadow:0 6px 20px rgba(0,22,58,.10) !important; }
/* collapse on scroll: drop the big secondary CTA row + the shop name,
   keep just the menu line, and shrink the logo to match it.
   (We shrink the crest-rail's logo rather than display:none the grid
   column, which previously collapsed the header layout.) */
.ink-header.scrolled .hero-action-row { display:none !important; }
.ink-header.scrolled .header-shell { align-items:center !important; }
/* collapse the panel from a tall stack into ONE tight centered row:
   [hamburger] [menu] — and drop the redundant actions block */
.ink-header.scrolled .header-panel {
  flex-direction:row !important; align-items:center !important;
  gap:16px !important; padding:2px 0 !important;
}
.ink-header.scrolled .header-actions { display:none !important; }
/* hide the shop name + subtitle; keep the hamburger inline on the side */
.ink-header.scrolled .brand-block { display:none !important; }
.ink-header.scrolled .header-topline {
  min-height:0 !important; padding:0 !important; flex:0 0 auto !important;
  order:2 !important; margin-left:auto !important;   /* push hamburger to the right */
}
.ink-header.scrolled .primary-nav { flex:1 1 auto !important; order:1 !important; }
/* trim the menu line's own vertical padding to open up screen space */
.ink-header.scrolled .primary-nav, .ink-header.scrolled .primary-nav-list,
.ink-header.scrolled .primary-nav ul { padding-top:0 !important; padding-bottom:0 !important; }
/* shrink the crest/logo down to the menu-line height (~52px) */
.ink-header.scrolled .crest-rail { height:auto !important; align-self:center !important; padding:0 !important; }
.ink-header.scrolled .crest-rail img { height:52px !important; width:auto !important; }
/* "Book" (last nav item) → gold button on scroll */
.ink-header.scrolled .primary-nav-item:last-child .primary-nav-link {
  background:var(--gold); color:var(--ink); border-radius:8px; padding:.45rem 1.05rem;
  font-family:var(--micro); font-weight:700; letter-spacing:.02em;
}
.ink-header.scrolled .primary-nav-item:last-child .primary-nav-link:hover { background:#F1B722; }

/* auto-injected internal links (interlinking) */
.ink-page a.ink-link { color: var(--ink, #00163A); text-decoration: underline; text-decoration-color: rgba(255,184,0,.6); text-underline-offset: 2px; font-weight: 600; transition: color .15s, text-decoration-color .15s; }
.ink-page a.ink-link:hover { color: var(--gold-bronze, #8e6a2a); text-decoration-color: var(--gold, #FFB800); }