/*
  De publieke lespagina's. Zie src/lespagina.js.

  Een apart bestand en geen <style> in die pagina, en dat is geen smaakkwestie:
  de Content-Security-Policy in src/app.js staat alleen bronnen van deze server
  toe, en inline stijl valt daarbuiten. Die wordt geblokkeerd zonder dat er iets
  op het scherm komt — je ziet alleen een kale pagina en geen enkele
  foutmelding. Zelfde verhaal als public/betaald.css.

  De kleuren zijn met de hand overgenomen uit frontend/stijl.js. Dat is een
  kopie, en dat weet je liever: die stijl komt uit de React-app en die kan hier
  niet bij. Wijzigt het palet daar, dan moet het hier mee.

  Geen webfonts. Die zouden van deze server moeten komen (de CSP laat Google
  Fonts niet toe), en twee bestanden van veertig kilobyte voor een pagina die
  iemand één keer bezoekt is die tijd niet waard. De schreefletter hieronder
  staat op elk toestel.

  Telefoon eerst: dit is een pagina waar iemand op staat terwijl hij zijn paard
  vasthoudt.
*/

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

html {
  background: #0c0a08; /* BLACK */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0c0a08;
  color: #f3ead6; /* CREAM */
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0);
}

h1,
h2,
h3,
.merk .n1,
.wanneer .d,
.prijs,
.lesnaam strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
}

a {
  color: #e7c67e; /* GOLD_SOFT */
}

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

/* ---- kop en voet ---- */

.kop {
  border-bottom: 1px solid #3a3126; /* LINE */
  padding: 14px 20px;
}

.merk {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.merk .n1 {
  display: block;
  font-size: 17px;
  letter-spacing: 0.14em;
}

.merk .n2 {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: 0.3em;
  color: #c9bda6;
}

.voet {
  margin-top: auto;
  border-top: 1px solid #3a3126;
  padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0));
  text-align: center;
  font-size: 13px;
  color: #c9bda6;
}

.voet p {
  margin: 4px 0;
}

/* ---- de pagina zelf ---- */

.blad {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

.bovenkop {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d9a441; /* GOLD */
}

h1 {
  margin: 10px 0 0;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.15;
}

.ruit {
  display: block;
  margin: 18px 0;
  color: #d9a441;
}

.uitleg {
  color: #c9bda6;
}

.intro {
  margin-bottom: 30px;
}

.terug {
  margin: 0 0 18px;
  font-size: 14px;
}

.terug a {
  text-decoration: none;
}

.leeg {
  border: 1px dashed #3a3126;
  padding: 26px 22px;
  text-align: center;
  color: #c9bda6;
}

.prive {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #3a3126;
  font-size: 14px;
  color: #c9bda6;
}

/* ---- de lijst met lessen ---- */

.lijst {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.les {
  border: 1px solid #3a3126;
  background: #141210; /* PANEL */
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wanneer {
  border-left: 2px solid #d9a441;
  padding-left: 12px;
}

.wanneer .d {
  display: block;
  font-size: 19px;
  color: #e7c67e;
}

.wanneer .u {
  display: block;
  font-size: 14px;
  color: #c9bda6;
}

.wat h2 {
  margin: 0;
  font-size: 20px;
}

.bij {
  margin: 4px 0 0;
  font-size: 14px;
  color: #c9bda6;
}

.staat {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vrij {
  color: #8fae7a;
}

.bijna {
  color: #d9a441;
}

.vol {
  color: #c2705b;
}

.doen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #3a3126;
  padding-top: 14px;
}

.prijs {
  font-size: 22px;
  color: #e7c67e;
}

@media (min-width: 620px) {
  .les {
    display: grid;
    grid-template-columns: 170px 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
  }

  .doen {
    border-top: none;
    padding-top: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* ---- knoppen ---- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.knop-goud {
  background: #d9a441;
  color: #0c0a08;
}

.knop-rand {
  background: transparent;
  border-color: #6b5c3f;
  color: #e7c67e;
}

.breed {
  width: 100%;
  margin-top: 8px;
}

/* Een zichtbare focusring. Zonder deze regel valt op een donkere achtergrond
   nauwelijks te zien waar je met de toetsenbord bent. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #e7c67e;
  outline-offset: 3px;
}

/* ---- de leskop op de detailpagina ---- */

.leskop {
  border-bottom: 1px solid #3a3126;
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 20px 0 0;
}

.feiten div {
  min-width: 0;
}

.feiten dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9a441;
}

.feiten dd {
  margin: 3px 0 0;
  font-size: 17px;
}

/* ---- meldingen ---- */

.melding {
  border: 1px solid #3a3126;
  background: #141210;
  padding: 16px 18px;
  margin-bottom: 22px;
}

.melding p {
  margin: 0;
  font-size: 15px;
}

.melding-fout {
  border-color: #c2705b;
}

.melding-let-op {
  border-color: #6b5c3f;
}

/* ---- formulier ---- */

.formulier {
  border: 1px solid #3a3126;
  background: #141210;
  padding: 22px 20px 26px;
}

.formulier h2 {
  margin: 0 0 18px;
  font-size: 22px;
}

.formulier label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d9a441;
}

.optioneel {
  text-transform: none;
  letter-spacing: normal;
  color: #c9bda6;
}

.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  background: #0c0a08;
  border: 1px solid #3a3126;
  color: #f3ead6;
  font-family: inherit;
  font-size: 16px; /* onder de 16px zoomt iOS bij het focussen */
}

.hint,
.klein {
  margin: 6px 0 0;
  font-size: 13px;
  color: #c9bda6;
}

.klein {
  margin-top: 14px;
}

.keuze {
  margin: 20px 0 0;
  border: 1px solid #3a3126;
  padding: 14px 16px 16px;
}

.keuze legend {
  padding: 0 6px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d9a441;
}

.radio {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 16px !important;
  color: #f3ead6 !important;
}

.radio:last-child {
  margin-bottom: 0 !important;
}

.radio input {
  width: 20px;
  height: 20px;
  accent-color: #d9a441;
  flex-shrink: 0;
}

/* ---- de kaart voor korte mededelingen ---- */

.kaart {
  border: 1px solid #3a3126;
  background: #141210;
  padding: 32px 24px;
  text-align: center;
}

.kaart h1 {
  margin: 0 0 12px;
}

.kaart form {
  margin-top: 22px;
}

.teken {
  margin: 0 0 8px;
  font-size: 44px;
  line-height: 1;
  color: #d9a441;
}

.lesnaam {
  margin: 14px 0;
  font-size: 18px;
}

/* ---- akkoord met de voorwaarden ---- */

/* Een ruim aanklikgebied. Dit vinkje staat tussen iemand en zijn les, dus het
   hoort niet te vragen om een precieze tik op een vakje van dertien pixels. */
.akkoord {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 0 !important;
  padding: 14px 16px;
  border: 1px solid #3a3126;
  background: #0c0a08;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 15px !important;
  color: #f3ead6 !important;
  line-height: 1.5;
  cursor: pointer;
}

.akkoord input {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: #d9a441;
  flex-shrink: 0;
}

/* ---- de voorwaardenpagina ---- */

.tekst h1 {
  margin: 0 0 6px;
}

.tekst h2 {
  margin: 28px 0 6px;
  font-size: 19px;
  color: #e7c67e;
}

.tekst p {
  margin: 0;
  color: #c9bda6;
}

.tekst strong {
  color: #f3ead6;
}