/* ==========================================================================
   truffelceremonie-limburg.nl
   Design-systeem 1:1 overgenomen van coachingheuvelland.nl (project:
   "Coaching Heuvelland Website", src/styles.css + docs/stijlgids.md).
   Losse, kale HTML/CSS-pagina. Geen framework, geen build-stap.
   ========================================================================== */

:root {
  /* Merkkleuren, exact overgenomen uit coachingheuvelland.nl / src/styles.css */
  --gold: oklch(0.78 0.14 85);
  --gold-muted: oklch(0.62 0.11 82);
  --obsidian: oklch(0.13 0.005 60);
  --earth: oklch(0.18 0.008 55);
  --stone-line: oklch(0.28 0.008 60);

  /* Neutrale tekstkleuren, Tailwind stone-schaal (zoals gebruikt in text-stone-*) */
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;

  --font-serif: "Playfair Display", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --radius: 0.25rem;
}

* {
  box-sizing: border-box;
  border-color: var(--stone-line);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--obsidian);
  color: var(--stone-200);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

::selection {
  background-color: color-mix(in oklab, var(--gold) 40%, transparent);
  color: var(--stone-100);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.font-display {
  font-family: var(--font-serif);
  font-feature-settings: "liga", "dlig";
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.section {
  padding: 3.5rem 1.5rem;
}

.section-sm {
  padding: 2.5rem 1.5rem;
}

.section-lg {
  padding: 3.5rem 1.5rem;
}

@media (min-width: 768px) {
  .section { padding: 6rem 2rem; }
  .section-sm { padding: 3.5rem 2rem; }
  .section-lg { padding: 6rem 2rem; }
}

.tone-obsidian { background-color: var(--obsidian); }
.tone-earth { background-color: var(--earth); }

.container {
  max-width: 80rem;
  margin: 0 auto;
}

.container-narrow { max-width: 48rem; margin: 0 auto; }   /* max-w-3xl: lopende tekst */
.container-medium { max-width: 56rem; margin: 0 auto; }   /* max-w-4xl */
.container-wide { max-width: 64rem; margin: 0 auto; }     /* max-w-5xl */
.container-xwide { max-width: 72rem; margin: 0 auto; }    /* max-w-6xl */

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

.eyebrow.center { text-align: center; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--stone-100);
}

h1 {
  font-size: 2.25rem;
  line-height: 1.05;
  text-wrap: balance;
}

h2 {
  font-size: 1.875rem;
  line-height: 1.15;
  text-wrap: balance;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  h1 { font-size: 3.75rem; }
  h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 4.5rem; }
}

p {
  margin: 0 0 1.25rem;
  color: var(--stone-400);
  line-height: 1.7;
}

p:last-child { margin-bottom: 0; }

.lead {
  font-size: 1.125rem;
  color: var(--stone-300);
  line-height: 1.7;
}

.lead.center { text-align: center; margin-left: auto; margin-right: auto; }

.text-gold { color: var(--gold); }
.text-stone-100 { color: var(--stone-100); }
.text-stone-200 { color: var(--stone-200); }
.text-stone-300 { color: var(--stone-300); }

.section-head {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 2.5rem;
}

@media (min-width: 768px) {
  .section-head { margin-bottom: 3.5rem; }
}

/* --------------------------------------------------------------------------
   Knoppen (1:1 overgenomen uit CTABlock.tsx / HeroHub.tsx)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  cursor: pointer;
  transition: all 300ms ease;
  border-radius: 0;
  text-align: center;
}

.btn-primary {
  background-color: var(--gold);
  color: var(--obsidian);
  border: 1px solid var(--gold);
}

.btn-primary:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.btn-secondary {
  background-color: transparent;
  color: var(--stone-200);
  border: 1px solid var(--stone-line);
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--stone-100);
}

.btn-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-family: var(--font-sans);
}

.btn-link:hover { color: #ffffff; }

.btn-dark {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background-color: var(--obsidian);
  color: var(--gold-muted);
  border: 1px solid color-mix(in oklab, var(--gold-muted) 45%, transparent);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: all 300ms ease;
  text-align: center;
}

.btn-dark:hover {
  border-color: var(--gold-muted);
  color: var(--stone-100);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 8rem 1.5rem 3.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { padding: 10rem 2rem 6rem; }
}

.hero-media {
  position: absolute;
  inset: 0;
  opacity: 0.45;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--obsidian) 0%,
    color-mix(in oklab, var(--obsidian) 60%, transparent) 50%,
    var(--obsidian) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.hero-inner .lead {
  margin-top: 2rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Tags / pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  background-color: color-mix(in oklab, var(--gold) 5%, transparent);
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* --------------------------------------------------------------------------
   Foto's (photo-hover uit src/styles.css)
   -------------------------------------------------------------------------- */

.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 700ms ease, transform 700ms ease;
}

/* Grijs-met-hover geldt uitsluitend voor foto's die ook echt klikbaar zijn
   (een <a class="photo-group">). Overige foto's staan gewoon in kleur. */
a.photo-group .photo {
  filter: grayscale(1);
}

a.photo-group:hover .photo {
  filter: grayscale(0);
  transform: scale(1.03);
}

/* Touch-apparaten kennen geen hover: daar tonen klikbare foto's ook meteen kleur. */
@media (hover: none) {
  a.photo-group .photo {
    filter: grayscale(0);
    transform: none;
  }
}

.photo-group {
  overflow: hidden;
}

.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

figcaption {
  margin-top: 0.75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone-500);
}

/* --------------------------------------------------------------------------
   Kaarten (border border-stone-line bg-obsidian/60 patroon)
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--stone-line);
  background-color: color-mix(in oklab, var(--obsidian) 60%, transparent);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 768px) {
  .card { padding: 2rem; }
}

.card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--stone-500);
  margin-bottom: 0.75rem;
}

.card p { flex: 1; }

.card-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .card-grid-2 { grid-template-columns: 1fr 1fr; }
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Body-secties met tekstblokken
   -------------------------------------------------------------------------- */

.prose { max-width: 48rem; margin: 0 auto; }
.prose > * + * { margin-top: 1.25rem; }

.steps {
  display: grid;
  gap: 2rem;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.step {
  border-top: 1px solid var(--stone-line);
  padding-top: 1.25rem;
}

.step-number {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.step h3 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.step p { font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Waarschuwing / contra-indicaties (nieuw t.o.v. ijsbad-limburg.nl:
   zelfde kaartstijl, maar met een subtiele goudrand-accent links,
   voor de "voor wie dit niet geschikt is"-sectie)
   -------------------------------------------------------------------------- */

.notice {
  border: 1px solid var(--stone-line);
  border-left: 3px solid var(--gold);
  background-color: color-mix(in oklab, var(--obsidian) 60%, transparent);
  padding: 1.5rem 1.75rem;
}

@media (min-width: 768px) {
  .notice { padding: 2rem 2.25rem; }
}

.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--stone-300);
  line-height: 1.7;
}

.notice-list li + li { margin-top: 0.9rem; }

.notice-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   FAQ (native details/summary, zelfde patroon als FAQAccordion.tsx)
   -------------------------------------------------------------------------- */

.faq-list {
  max-width: 48rem;
  margin: 0 auto;
  border-top: 1px solid color-mix(in oklab, var(--stone-line) 50%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--stone-line) 50%, transparent);
}

.faq-item {
  border-bottom: 1px solid color-mix(in oklab, var(--stone-line) 50%, transparent);
  padding: 1.25rem 0.25rem;
}

.faq-item:last-child { border-bottom: none; }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--stone-100);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  margin-top: 1rem;
  color: var(--stone-400);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Header / Footer
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .site-header { padding: 2rem; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--stone-100);
}

.brand svg {
  height: 1.75rem;
  width: 1.75rem;
  color: var(--gold);
}

.brand-word {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.site-footer {
  border-top: 1px solid var(--stone-line);
  padding: 3rem 1.5rem;
  background-color: var(--obsidian);
}

@media (min-width: 768px) {
  .site-footer { padding: 3.5rem 2rem; }
}

.footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.footer-meta {
  font-size: 0.8rem;
  color: var(--stone-500);
  line-height: 1.6;
}

.footer-meta a {
  color: var(--stone-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-meta a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Slotblok (CTABlock-patroon)
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  padding: 3.5rem 1.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .closing { padding: 6rem 2rem; }
}

.closing-inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
}

.closing-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .closing-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.closing-portrait {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Accreditatie-logo (losse badge, geen kaart), naast de Bart-tekst in het
   slotblok. Transparante PNG, dus geen photo-hover/grayscale-behandeling.
   -------------------------------------------------------------------------- */

.badge-logo {
  display: inline-block;
  width: 8rem;
  height: auto;
  object-fit: contain;
  transition: opacity 200ms ease;
}

.badge-logo:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Cookiebanner (vanilla JS, Consent Mode v2 Advanced mode; zie cookie-consent.js)
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  border-top: 1px solid var(--stone-line);
  background-color: color-mix(in oklab, var(--earth) 98%, transparent);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .cookie-banner { padding: 1.5rem 2rem; }
}

.cookie-banner-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.cookie-banner-text {
  font-size: 0.875rem;
  color: var(--stone-300);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) {
  .cookie-banner-text { max-width: 34rem; }
}

.cookie-banner-text a { color: var(--gold); }

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: color-mix(in oklab, black 60%, transparent);
}

.cookie-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  width: calc(100% - 3rem);
  max-width: 30rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  border: 1px solid var(--stone-line);
  background-color: var(--earth);
  padding: 2rem;
}

.cookie-panel h2 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.cookie-panel-desc {
  font-size: 0.875rem;
  color: var(--stone-400);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.cookie-panel-desc a { color: var(--gold); }

.cookie-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--stone-line) 60%, transparent);
}

.cookie-category:last-of-type { border-bottom: none; }

.cookie-category-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--stone-100);
  margin: 0 0 0.25rem;
}

.cookie-category-desc {
  font-size: 0.75rem;
  color: var(--stone-400);
  line-height: 1.5;
  margin: 0;
}

.cookie-always-on {
  flex-shrink: 0;
  margin-top: 0.125rem;
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  padding: 0.25rem 0.5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold);
}

.cookie-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 2.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-switch span {
  position: absolute;
  inset: 0;
  background-color: var(--stone-500);
  cursor: pointer;
  transition: background-color 200ms ease;
}

.cookie-switch span::before {
  content: "";
  position: absolute;
  height: 1.1rem;
  width: 1.1rem;
  left: 0.2rem;
  top: 0.2rem;
  background-color: var(--stone-100);
  transition: transform 200ms ease;
}

.cookie-switch input:checked + span { background-color: var(--gold); }
.cookie-switch input:checked + span::before { transform: translateX(1rem); }

.cookie-panel-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

@media (min-width: 480px) {
  .cookie-panel-actions { flex-direction: row; justify-content: space-between; }
}


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}