/* De vormgeving van klapekster.be. Kleuren letterlijk uit de app
   (lib/ui/thema.dart, Palet.licht): verandert het palet daar, dan verandert
   het hier mee. Dit is de enige plek. Alleen licht: de app schakelt mee met
   dag en nacht, de site niet (Olivier, 9 oktober 2026). */

@font-face {
  font-family: "Source Sans 3";
  src: url("lettertypen/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("lettertypen/SourceSans3-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("lettertypen/Newsreader.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("lettertypen/Newsreader-Italic.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --scherm: #FAF9F3;
  --kaart: #FFFEFA;
  --verhoogd: #F0F3ED;
  --inkt: #293E35;
  --grijs: #526159;
  --flauw: #899790;
  --lijn: #CCD3C9;
  --petrol: #175D60;
  --petrol-vol: #175D60;
  --op-petrol: #FFFFFF;
  --petrol-vlak: #E2EEEA;
  --oker: #9B570D;
  --roest: #A04431;

  --schreef: "Newsreader", Georgia, serif;
  --schreefloos: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--scherm);
  color: var(--inkt);
  font-family: var(--schreefloos);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* Eén kolom, telefoon eerst: 16 punten zijrand, hoogstens 720 breed. */
.kolom {
  max-width: calc(720px + 2 * 16px);
  margin: 0 auto;
  padding: 0 16px;
}

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

a { color: var(--petrol); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .knop:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--schreef);
  font-weight: 600;
  line-height: 1.2;
  color: var(--inkt);
}
h1 { font-size: 2.1rem; margin: 0.4em 0 0.5em; }
h2 { font-size: 1.6rem; margin: 2.2em 0 0.5em; }
h3 { font-size: 1.25rem; margin: 1.6em 0 0.4em; }

/* Wat een spreker zegt: schuin, in de schreefletter. */
.zin, blockquote {
  font-family: var(--schreef);
  font-style: italic;
  font-size: 1.3rem;
  margin: 1em 0;
  padding: 0.6em 0 0.6em 1em;
  border-left: 3px solid var(--petrol);
}

.flauw { color: var(--grijs); }

/* Kop */
.kop { padding-top: 24px; padding-bottom: 8px; }
.woordmerk { display: inline-block; }
.woordmerk img { width: 220px; }
.voorpagina .woordmerk img { width: min(360px, 100%); }

/* De opening van de voorpagina. */
.opening { padding: 8px 0 16px; }
.opening .slogan {
  font-family: var(--schreef);
  /* Op een telefoon iets kleiner, zodat "KLAPekster schrijft het op." op
     één regel past. */
  font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  line-height: 1.2;
  font-weight: 500;
  margin: 0.3em 0 0.9em;
  text-wrap: balance;
}

/* De korte inleiding onder de titel: opvallend, maar kleiner dan de titel. */
.opening .kernzin {
  color: var(--petrol);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 0.4em;
}
.opening .inleiding {
  color: var(--grijs);
  margin: 0 0 0.8em;
  max-width: 34em;
}
.opening .kenmerken {
  color: var(--grijs);
  font-size: 0.95rem;
  margin: 0 0 1.4em;
}

/* Zo werkt het: drie genummerde stappen. */
.stappen {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: 1em 0;
  display: grid;
  gap: 16px;
}
.stappen li {
  counter-increment: stap;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 16px 20px 16px 64px;
  position: relative;
}
.stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--petrol-vlak);
  color: var(--petrol);
  font-family: var(--schreef);
  font-weight: 600;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
}
.stappen h3 { margin: 0 0 0.2em; }
.stappen p { margin: 0 0 16px; }
/* Het scherm van de app onderaan elke stap, zodat de drie op een breed
   scherm op één lijn staan. */
.stappen li {
  display: flex;
  flex-direction: column;
}
.stappen .stapbeeld {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: auto auto 0;
}
.zin-kort {
  font-family: var(--schreef);
  font-style: italic;
  white-space: nowrap;
}

/* Het grote voorbeeld bovenaan: het luisterscherm met de zin in de wolk van
   de klapekster, en de fiche die de app ervan maakt. Op een telefoon onder
   elkaar, breed naast elkaar. */
.toonbeeld {
  display: grid;
  gap: 16px 32px;
  align-items: start;
  margin: 8px 0 0;
}
@media (min-width: 700px) {
  .toonbeeld { grid-template-columns: 1fr 1fr; }
}
.toonbeeld figure { margin: 0; }
.toonbeeld .wie {
  color: var(--grijs);
  font-size: 0.95rem;
  margin: 0 0 8px;
}
.scherm,
.fiche {
  width: 100%;
  max-width: 360px;
}
.scherm {
  border-radius: 20px;
  border: 1px solid var(--lijn);
  box-shadow: 0 6px 18px rgb(41 62 53 / 0.10);
}
.fiche { filter: drop-shadow(0 6px 18px rgb(41 62 53 / 0.10)); }

/* De reeks voorbeelden: op een telefoon vegen, breed in twee kolommen. */
.voorbeelden {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Tot aan de schermrand vegen, en de eerste toch netjes in de kolom. */
  margin: 1em -16px;
  padding: 4px 16px 16px;
  scroll-padding: 0 16px;
}
@media (min-width: 700px) {
  .voorbeelden {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    overflow: visible;
    margin: 1em 0;
    padding: 0;
    gap: 32px 24px;
  }
}
@media (min-width: 700px) {
  .alleen-telefoon { display: none; }
}
.voorbeeld {
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.voorbeeld figcaption { display: flex; flex-direction: column; gap: 4px; }
.opschrift {
  color: var(--petrol);
  font-weight: 600;
  font-size: 0.95rem;
}
.voorbeeldzin {
  font-family: var(--schreef);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.35;
}
/* De knop "Bekijk alle voorbeelden": klapt de rest open, zonder script.
   Open verdwijnt de knop, de voorbeelden staan dan gewoon onder de eerste
   drie. */
.meer-voorbeelden > summary {
  list-style: none;
  display: inline-block;
  cursor: pointer;
  color: var(--petrol);
  font-weight: 600;
  border: 2px solid var(--petrol);
  border-radius: 999px;
  padding: 11px 22px;
  min-height: 48px;
}
.meer-voorbeelden > summary::-webkit-details-marker { display: none; }
.meer-voorbeelden > summary:hover { background: var(--petrol-vlak); }
.meer-voorbeelden > summary:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
}
.meer-voorbeelden[open] > summary { display: none; }

/* Bij de verhaspeling: wat de spraakherkenning verstond, en wat je zei. */
.verstaan { color: var(--grijs); font-size: 0.95rem; }
.voorbeeld img {
  width: 100%;
  max-width: 360px;
  filter: drop-shadow(0 4px 12px rgb(41 62 53 / 0.08));
}

.slotknop { margin-top: 48px; text-align: center; }

/* Het aanmeldformulier op Proberen. */
.formulier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 34em;
}
.formulier label:not(.keuze),
.formulier legend {
  font-weight: 600;
  margin-top: 14px;
  padding: 0;
}
.formulier fieldset { border: 0; margin: 0; padding: 0; }
/* Eén vraag met zijn label en uitleg; dezelfde tussenruimte als het
   formulier zelf, zodat een telefoon geen verschil ziet. */
.veld { display: flex; flex-direction: column; gap: 6px; }
.veldnoot { font-weight: 400; color: var(--grijs); font-size: 0.9rem; }
.formulier input[type="text"],
.formulier input[type="email"],
.formulier select,
.formulier textarea {
  font: inherit;
  color: var(--inkt);
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
.formulier input:focus-visible,
.formulier select:focus-visible,
.formulier textarea:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 1px;
}
.keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}
.keuze input { width: 20px; height: 20px; accent-color: var(--petrol); margin: 0; }
.keuze input { flex: none; }
.vinkjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Een verplichte vraag die nog leeg is, na een klik op Aanmelden. */
label.ontbreekt,
.ontbreekt legend { color: var(--roest); }
.hint { color: var(--grijs); font-size: 0.9rem; margin: 2px 0 0; }
.melding { color: var(--oker); }
.fout { color: var(--roest); font-weight: 600; margin: 12px 0 0; }
.formulier .knop {
  align-self: flex-start;
  margin-top: 18px;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.formulier .knop:disabled { opacity: 0.6; cursor: default; }

.knop {
  display: inline-block;
  background: var(--petrol-vol);
  color: var(--op-petrol);
  font-weight: 600;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  min-height: 48px;
}
.knop:hover { filter: brightness(1.08); }

.kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 1em 0;
}

/* Breed scherm, alleen de voorpagina (Olivier, 9 oktober 2026: "op mijn
   desktop wel wat smal"). Onder de 1200 punten blijft alles zoals hierboven,
   dus de telefoon merkt hier niets van. De kolom wordt 1160 breed; lopende
   tekst blijft hoogstens 720, zodat de regels leesbaar blijven, en wat breed
   mag (de opening, de voorbeelden, de stappen) gebruikt de hele breedte. De
   andere pagina's (privacy, proberen) blijven één smalle kolom: dat is tekst
   om te lezen. */
@media (min-width: 1200px) {
  .voorpagina .kolom { max-width: calc(1160px + 2 * 16px); }
  .voorpagina main > p,
  .voorpagina main > ul { max-width: 720px; }

  /* De opening naast het luisterscherm en de fiche. */
  .held {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    margin-top: 16px;
  }
  .held .opening { padding: 0; }
  .held .slogan { font-size: 2.2rem; }
  .held .toonbeeld {
    grid-template-columns: 300px 340px;
    gap: 16px 24px;
    margin: 0;
  }

  /* Drie voorbeelden en drie stappen naast elkaar. */
  .voorbeelden { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  .voorpagina .stappen { grid-template-columns: repeat(3, 1fr); }

  .voorpagina h2 { margin-top: 2.6em; }

  /* Het formulier op Proberen: gewoon onder elkaar, maar zo breed als de
     kolom in plaats van 34em. (Twee kolommen naast elkaar is geprobeerd en
     teruggedraaid, Olivier, 9 oktober 2026.) */
  .formulier { max-width: none; }
}

/* Voet */
.voet {
  margin-top: 64px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--lijn);
  background: var(--verhoogd);
  font-size: 0.95rem;
  color: var(--grijs);
}
.voet p { margin: 0.4em 0; }
.voetlinks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 12px; }
.voetlinks a { font-weight: 600; }