/* Hallmark · redesign (in-place) · macrostructure: Long Document · genre: modern-minimal
 * theme: "Coastal Minimal" — cool near-white paper · cobalt primary (also used for headings) · Bricolage Grotesque (site font)
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 * SITEWIDE skin layer — loaded AFTER audit-ui.css (by audit-head.php). Recolours the .f2g-* components to a cool
 * minimal palette, sets headings to the primary colour, keeps Bricolage Grotesque. Mobile-safe 320/375/414/768. */

:root {
  /* Redefine the audit-ui.css tokens so every .f2g-* component recolours (font stays Bricolage from audit-ui.css) */
  --f2g-sky: oklch(0.510 0.155 260);        /* refined cobalt (== --color-primary) */
  --f2g-ink: oklch(0.215 0.020 262);         /* slate ink */
  --f2g-line: oklch(0.922 0.005 255);        /* cool hairline */
  --f2g-shadow: 0 1px 2px oklch(0.2 0.03 262 / 0.05), 0 12px 28px -18px oklch(0.2 0.03 262 / 0.22);
  --f2g-shadow-sm: 0 1px 2px oklch(0.2 0.03 262 / 0.05);
}

/* ============ HEADINGS — primary colour, Bricolage (from audit-ui.css) ============ */
.f2g-page h1, .f2g-page h2, .f2g-page h3 { color: var(--f2g-sky); }
.f2g-page h1 { line-height: 1.1; }
.f2g-page main > p.text-lg { max-width: 46rem; }

/* ============ HERO FIGURE — crisp, subtle ============ */
.f2g-page figure > .rounded-xl {
  border-radius: 0.75rem;
  border-color: var(--f2g-line);
  box-shadow: var(--f2g-shadow);
}

/* ============ QUICK-FACTS STAT CARDS — flat, hairline, white ============ */
.f2g-page dl .card {
  border-radius: var(--radius, 0.5rem);
  border-color: var(--f2g-line);
  background: var(--color-card, #fff);
  box-shadow: none;
}
.f2g-page dl .card dt {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.66rem; color: var(--color-muted-foreground, #666);
}
.f2g-page dl .card dd { color: var(--f2g-ink); }   /* stat values stay ink, not primary */

/* ============ TABLE OF CONTENTS — thin border, no rail ============ */
.f2g-page .f2g-toc {
  border-color: var(--f2g-line);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-card, #fff);
  box-shadow: none;
}
.f2g-page .f2g-toc > p { color: var(--color-muted-foreground); }   /* quiet eyebrow */

/* ============ TABLES (beaches spec / hotels comparison) — clean lines ============ */
.f2g-page table { border-color: var(--f2g-line); }
.f2g-page thead tr { border-bottom: 1px solid var(--f2g-ink); }
.f2g-page tbody tr { border-color: var(--f2g-line); }
.f2g-page thead th, .f2g-page tbody td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.f2g-page thead th { color: var(--f2g-ink); }   /* header cells stay ink, headings-colour rule only targets h1-h3 */

/* ============ FAQ (details.card) — plain, hairline ============ */
.f2g-page details.card {
  border-color: var(--f2g-line);
  border-radius: var(--radius, 0.5rem);
  box-shadow: none;
}

/* ============ DESTINATION QUIZ / CLUSTER-NAV — match tokens ============ */
.f2g-page .greece-quiz { border-radius: var(--radius, 0.5rem); }
.f2g-page nav[aria-label^="Explore"] { border-color: var(--f2g-line); }