/* Gouden Creatiewiel — Rise by Eva
   Gebaseerd op het bestaande ontwerp: crèmegoud, pruim, oudroze, gouden glitter,
   met de lettertypes Belleza en Bree Serif. */
@font-face {
  font-family: "Belleza";
  src: url("assets/fonts/Belleza-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Bree Serif";
  src: url("assets/fonts/BreeSerif-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --pruim: #3e0e26;
  --pruim-2: #6a2b38;
  --roze: #c38892;
  --roze-zacht: #ead3d6;
  --goud: #ceb960;
  --goud-licht: #eadca3;
  --creme: #fbf7ec;
  --creme-goud: #f3e7c0;
  --tekst: #3e0e26;
  --tekst-zacht: #74505a;
  --lijn: rgba(62, 14, 38, 0.12);
  --kop: "Belleza", Georgia, serif;
  --accent: "Bree Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rond: 20px;
  --rond-klein: 12px;
  --schaduw: 0 22px 60px rgba(62, 14, 38, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--kop); font-weight: 400; line-height: 1.1; margin: 0; color: var(--pruim); }
p { margin: 0; }

.bovenkop {
  font-family: var(--accent);
  color: var(--roze);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.klein { font-size: 0.9rem; color: var(--tekst-zacht); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  font: 600 1rem var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.knop:active { transform: scale(0.98); }
.knop:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--goud);
  outline-offset: 3px;
}
.knop-pruim { background: var(--pruim); color: var(--goud-licht); box-shadow: 0 10px 24px rgba(62, 14, 38, 0.22); }
.knop-pruim:hover { background: #551636; }
.knop-lijn { background: transparent; color: var(--pruim); box-shadow: inset 0 0 0 1.5px rgba(62, 14, 38, 0.55); }
.knop-lijn:hover { background: rgba(62, 14, 38, 0.05); }
.knop-tekst { background: none; color: var(--pruim-2); text-decoration: underline; text-underline-offset: 4px; padding-inline: 8px; }
.knop-breed { width: 100%; margin-top: 10px; }

/* ---------- Bovenbalk ---------- */
.topbalk {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(251, 247, 236, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn);
}
.merk { display: flex; align-items: center; gap: 10px; color: var(--pruim); text-decoration: none; font-family: var(--accent); font-size: 1.2rem; }
.merk img { border-radius: 8px; }
.topbalk-knop {
  color: var(--pruim);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(195, 136, 146, 0.9);
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) max(16px, calc((100vw - 1100px) / 2)) clamp(64px, 8vw, 110px);
  background: linear-gradient(170deg, #ead9a0 0%, var(--creme-goud) 38%, var(--creme) 100%);
}
.hero h1 { font-size: clamp(2.7rem, 6.5vw, 4.6rem); margin-top: 10px; }
.hero-by { font-family: var(--accent); color: var(--pruim-2); font-size: clamp(1.4rem, 3vw, 2rem); margin: 4px 0 22px; }
.intro { font-size: 1.15rem; color: var(--tekst-zacht); max-width: 32em; margin-bottom: 28px; }
.hero .klein { margin-top: 14px; }
.hero-kaart { margin: 0; justify-self: center; width: min(100%, 400px); }
.hero-kaart .kaart-afbeelding { transform: rotate(2.5deg); }
.hero-kaart figcaption { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--tekst-zacht); }

/* De kaart zelf (artwork van Eva) */
.kaart-afbeelding svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--schaduw), 0 0 0 1px rgba(62, 14, 38, 0.06);
  background: var(--creme);
}

/* ---------- Secties ---------- */
.sectie { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: clamp(48px, 7vw, 88px) 0; }
.paneel {
  background: #fffdf7;
  border: 1px solid rgba(206, 185, 96, 0.45);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  padding: clamp(24px, 4vw, 44px);
}
.formulier-paneel { max-width: 520px; margin: 0 auto; }
.formulier-paneel h2 { font-size: 2rem; margin-bottom: 16px; }
label { display: block; font-family: var(--accent); font-size: 1rem; margin: 14px 0 6px; color: var(--pruim); }
input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid rgba(62, 14, 38, 0.18);
  border-radius: var(--rond-klein);
  background: var(--creme);
  font: 1rem var(--sans);
  color: var(--tekst);
}
input:focus { border-color: var(--roze); }
.fout { margin-top: 12px; color: #9b1c3a; font-weight: 600; }

/* ---------- Resultaat ---------- */
.resultaat-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.resultaat-kaart { position: sticky; top: 84px; }
.resultaat-uitleg h2 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 2px 0 2px; }
.datum { color: var(--tekst-zacht); margin-bottom: 22px; }
.thema-lijst { display: grid; gap: 10px; }
.thema {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: #fffdf7;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
}
.thema-getal {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pruim);
  color: var(--goud-licht);
  font: 1.7rem var(--accent);
}
.thema-plek { font-family: var(--accent); color: var(--roze); font-size: 0.95rem; text-transform: lowercase; }
.thema h3 { font-size: 1.35rem; margin: 0 0 2px; }
.thema-polen { color: var(--tekst-zacht); font-size: 0.95rem; }
.toelichting { margin-top: 22px; color: var(--tekst-zacht); }
.acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.melding { margin-top: 12px; color: var(--pruim-2); font-weight: 600; min-height: 1.6em; }

/* ---------- Sessie ---------- */
.sessie { text-align: center; }
.sessie-inhoud { position: relative; max-width: 760px; margin: 0 auto; padding: 32px 0 0; }
.sessie-streek { position: absolute; left: 50%; top: 0; width: min(560px, 92%); transform: translateX(-50%); opacity: 0.55; z-index: -1; }
.sessie h2 { font-size: clamp(2rem, 4.4vw, 2.8rem); margin-bottom: 14px; }
.sessie p { color: var(--tekst-zacht); max-width: 34em; margin: 0 auto 24px; }
.sessie-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Over mij ---------- */
.over-paneel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.over-paneel img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px var(--goud-licht); }
.over-paneel h2 { font-size: 2rem; margin: 6px 0 12px; }
.over-paneel img[hidden] + div { grid-column: 1 / -1; }

/* ---------- Bewaard ---------- */
.bewaard h2 { font-size: 1.7rem; margin-bottom: 6px; }
.bewaard-lijst { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.bewaard-lijst li { display: flex; background: #fffdf7; border: 1px solid var(--lijn); border-radius: var(--rond-klein); overflow: hidden; }
.bewaard-open { flex: 1; display: grid; text-align: left; gap: 2px; padding: 12px 16px; border: 0; background: none; font: inherit; color: var(--tekst); cursor: pointer; }
.bewaard-open strong { font-family: var(--kop); font-weight: 400; font-size: 1.15rem; }
.bewaard-open span { font-size: 0.88rem; color: var(--tekst-zacht); }
.bewaard-open:hover { background: var(--creme-goud); }
.bewaard-weg { width: 44px; border: 0; background: none; font-size: 1.4rem; color: var(--tekst-zacht); cursor: pointer; }
.bewaard-weg:hover { color: #9b1c3a; }

/* ---------- Voet ---------- */
.voet { text-align: center; padding: 48px 16px 56px; background: var(--pruim); color: var(--roze-zacht); }
.voet img { border-radius: 10px; margin-bottom: 10px; }
.voet-naam { font-family: var(--accent); color: var(--goud-licht); font-size: 1.1rem; }
.voet .klein { color: var(--roze-zacht); opacity: 0.85; margin-top: 6px; }
.voet-links { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.voet-links a { color: var(--goud-licht); }

/* ---------- Mobiel ---------- */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .hero { grid-template-columns: 1fr; text-align: left; }
  .hero-kaart { width: min(78%, 340px); }
  .resultaat-raster { grid-template-columns: 1fr; }
  .resultaat-kaart { position: static; max-width: 460px; margin: 0 auto; width: 100%; }
  .over-paneel { grid-template-columns: 1fr; text-align: center; }
  .over-paneel img { margin: 0 auto; }
  .topbalk-knop { display: none; }
  .acties .knop { width: 100%; }
}

/* ---------- Printen / PDF: alleen de kaart op A4 ---------- */
.print-versie { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  body { background: #fff; }
  .topbalk, main, .voet { display: none !important; }
  .print-versie { display: block; }
  .print-versie svg { width: 210mm; height: 297mm; display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}