/* toonenmarie.nl — landingspagina feest Marie-José & Toon
   Kleuren staan dubbel: hex eerst als fallback, daarna de oklch uit het ontwerp.
   Browsers zonder oklch-ondersteuning houden de hex (visueel identiek). */

/* ---------- Lettertypes ----------
   Anton en Karla staan op onze eigen server, niet bij Google. Zie
   BESLISSINGEN.md. Beide zijn SIL Open Font License; de licentieteksten
   staan in public/fonts/.

   De unicode-range zorgt dat een browser alleen de subset ophaalt die hij
   nodig heeft — voor deze pagina is dat in de praktijk alleen 'latin'. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/karla-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/karla-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/karla-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/karla-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/karla-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/karla-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:           #191512; --bg:           oklch(0.2 0.008 60);
  --card:         #25211d; --card:         oklch(0.25 0.01 60);
  --cream:        #f8f5ee; --cream:        oklch(0.97 0.01 90);
  --text:         #d0cec7; --text:         oklch(0.85 0.01 90);
  --text-strong:  #dad7d0; --text-strong:  oklch(0.88 0.01 90);
  --text-iban:    #bab7b0; --text-iban:    oklch(0.78 0.01 90);
  --muted:        #82807a; --muted:        oklch(0.6 0.01 90);
  --yellow:       #eacc56; --yellow:       oklch(0.85 0.14 95);
  --yellow-hover: #f7dd7d; --yellow-hover: oklch(0.9 0.12 95);
  --ochre:        #544627; --ochre:        oklch(0.4 0.05 85);
  --teal:         #55c2bc; --teal:         oklch(0.75 0.1 190);
  --green:        #89cc7b; --green:        oklch(0.78 0.13 140);
  --coral:        #ee8266; --coral:        oklch(0.72 0.14 35);
  --violet:       #ce9cd9; --violet:       oklch(0.76 0.1 320);
  --ink:          #1d1a17; --ink:          oklch(0.22 0.008 60);
  --ticket-cream: #f9f7f1; --ticket-cream: oklch(0.975 0.008 90);
  --ticket-text:  #403626; --ticket-text:  oklch(0.34 0.03 80);
  --field-border: #4c4742; --field-border: oklch(0.4 0.01 60);
  --field-text:   #f1eee7; --field-text:   oklch(0.95 0.01 90);
  --divider:      #37322e; --divider:      oklch(0.32 0.01 60);

  --pad: 24px;          /* pagina-zijmarge */
  --radius: 10px;       /* kaarten */
  --stub: 44px;         /* breedte afscheurstrook ticket */
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* Bewust géén `-webkit-font-smoothing: antialiased`. Dat stond niet in het
   ontwerp en maakt lichte tekst op een donkere achtergrond dunner op gewone
   (niet-retina) beeldschermen. Bij deze doelgroep wil je juist de zwaardere
   standaardweergave. Op retina maakt de instelling niets uit. */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.column {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
}

/* Moet vóór de layoutregels staan: een eigen `display` (zoals .diet { display: flex })
   wint het anders van het hidden-attribuut, waardoor verborgen elementen zichtbaar
   blijven. Dat gebeurde met het formulier na verzenden. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* ---------- 1. Hero ---------- */

.hero { position: relative; overflow: hidden; }

.hero__img {
  display: block;
  width: 100%;
  height: 400px; /* terugval voor browsers zonder aspect-ratio */
  object-fit: cover;
  object-position: 50% 58%;
}

/* De foto is staand (3:4). Bij een vaste hoogte van 400px snijdt een bredere
   kolom er juist méér vanaf: op 375px zie je 80% van de foto, op 560px nog maar
   54% — de horizon verdwijnt dus precies op het scherm waar de ruimte er wel is.
   Met een vaste verhouding blijft de uitsnede op élke breedte gelijk aan wat het
   ontwerp op mobiel laat zien (80%). Op 375px is dat exact de 400px uit de
   handoff; op 560px wordt de foto 597px hoog. */
@supports (aspect-ratio: 1) {
  .hero__img {
    height: auto;
    aspect-ratio: 375 / 400;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(25, 21, 18, 0.45) 0%,
    rgba(25, 21, 18, 0) 25%,
    rgba(25, 21, 18, 0) 45%,
    rgba(25, 21, 18, 0.9) 85%,
    rgb(25, 21, 18) 100%);
  background: linear-gradient(180deg,
    oklch(0.2 0.008 60 / 0.45) 0%,
    oklch(0.2 0.008 60 / 0) 25%,
    oklch(0.2 0.008 60 / 0) 45%,
    oklch(0.2 0.008 60 / 0.9) 85%,
    oklch(0.2 0.008 60) 100%);
}

.hero__top {
  position: absolute;
  left: var(--pad); right: var(--pad); top: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hero__kicker {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__date {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--yellow);
}

.hero__bottom {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 18px;
}

.hero__title {
  margin: 0;
  font-family: Anton, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__title-accent { color: var(--yellow); }

/* ---------- 2. Intro ---------- */

.intro {
  padding: 18px var(--pad) 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intro__names { font-weight: 700; font-size: 18px; color: var(--cream); }

.intro__sub {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.intro__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

/* ---------- 3. Ticket ---------- */

.ticket-wrap { padding: 20px var(--pad) 8px; }

.ticket {
  position: relative;
  display: flex;
  align-items: stretch;
}

.ticket__main {
  flex: 1;
  min-width: 0;
  background: var(--yellow);
  border-radius: var(--radius) 0 0 var(--radius);
  display: flex;
  flex-direction: column;
}

.ticket__head {
  padding: 12px 18px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ticket__meta {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  white-space: nowrap;
}

.ticket__meta + .ticket__meta { letter-spacing: 0.14em; }

.ticket__body {
  padding: 6px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ticket__day {
  margin: 0;
  font-family: Anton, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
}

.ticket__when {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.ticket__time { font-weight: 700; font-size: 15px; color: var(--ink); }

.ticket__hall {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
}

.ticket__foot {
  margin-top: auto;
  background: var(--ticket-cream);
  border-radius: 0 0 0 var(--radius);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket__venue {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ticket-text);
}

.ticket__logo { display: block; height: 19px; width: auto; flex: none; }

/* perforatielijn */
.ticket__perf {
  flex: none;
  width: 7px;
  margin: 0 -3.5px;
  position: relative;
  z-index: 1;
  background-image: radial-gradient(circle, #191512 2px, transparent 2.3px);
  background-image: radial-gradient(circle, oklch(0.2 0.008 60) 2px, transparent 2.3px);
  background-size: 7px 10px;
  background-repeat: repeat-y;
  background-position: center 4px;
}

.ticket__stub {
  flex: none;
  width: var(--stub);
  background: var(--yellow);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket__stub-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.ticket__notch {
  position: absolute;
  right: var(--stub);
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--bg);
  transform: translateX(50%);
}

.ticket__notch--top { top: -7px; }
.ticket__notch--bottom { bottom: -7px; }

/* ---------- Secties ---------- */

.section {
  padding: 28px var(--pad) 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section__head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.section__title {
  font-family: Anton, "Arial Black", sans-serif;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}

.section__intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.chip {
  display: block;
  padding: 4px 10px 3px;
  border-radius: 5px;
  font-family: Anton, "Arial Black", sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--bg);
  white-space: nowrap;
}

.chip--teal   { background: var(--teal); }
.chip--violet { background: var(--violet); }
.chip--coral  { background: var(--coral); }

.chip--tilt-left    { transform: rotate(-2deg); }
.chip--tilt-right   { transform: rotate(1.5deg); }
.chip--tilt-left-sm { transform: rotate(-1.5deg); }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.card--route {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-strong);
  text-wrap: pretty;
}

.btn {
  align-self: flex-start;
  display: inline-block;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.btn--yellow { background: var(--yellow); color: var(--bg); }
.btn--yellow:hover { background: var(--yellow-hover); color: var(--bg); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Tweede knop, lichter dan de gele: de plattegrond is naslag, navigeren is de
   hoofdhandeling. Zelfde stijl als de kopieerknoppen bij de rekeningnummers. */
.btn--outline {
  background: transparent;
  border: 1px solid var(--yellow);
  color: var(--yellow);
}
.btn--outline:hover { border-color: var(--yellow-hover); color: var(--yellow-hover); }

/* ---------- 4. Route ---------- */

.route-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Alleen de parkeerrij centreert. Daar is het bolletjesblok (66px) hóger dan de
   tekst, waardoor het tweede bolletje bij `flex-start` onder de tekst uit bungelt.
   Bij OV en de fiets is het omgekeerd — de tekst is hoger dan het bolletje — en
   dan schuift centreren het bolletje weg van zijn eigen label. Geprobeerd op alle
   rijen; in Chrome liep de uitlijning daardoor zichtbaar mis. Niet opnieuw doen. */
.route-row--parkeren { align-items: center; }

/* P2 en P3 delen één uitlegtekst, dus staan de bolletjes onder elkaar naast dat
   ene tekstblok in plaats van in twee aparte rijen. */
.dots {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Knoppen naast elkaar. `wrap` staat erbij als vangnet: past het paar niet naast
   elkaar op een smal scherm, dan zakt de tweede eronder in plaats van uit de kaart
   te lopen. */
/* Passen de knoppen naast elkaar, dan krimpt het blok tot precies die breedte en
   staat het links, zoals de tekst erboven. Passen ze niet, dan wordt het blok zo
   breed als de kaart en centreert `justify-content` de gestapelde knoppen.
   `fit-content` doet dat omslagpunt zelf — geen vaste pixelgrens die scheef gaat
   zodra een label verandert. */
.route-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
}

/* 15px in plaats van 18px zijmarge: daarmee passen de twee knoppen naast elkaar
   vanaf 360px in plaats van pas vanaf 412px. Het lettertype blijft 14px — kleiner
   maken zou de leesbaarheid voor deze doelgroep kosten, en dat weegt zwaarder dan
   de knopbreedte. */
.route-acties .btn { padding: 10px 15px; }

.dot {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Anton, "Arial Black", sans-serif;
  font-size: 14px;
  color: var(--bg);
}

.dot--yellow { background: var(--yellow); }
.dot--coral  { background: var(--coral); font-size: 13px; }
.dot--green  { background: var(--green); }
/* 17px in plaats van de 15px uit het ontwerp: een emoji heeft ingebouwde witruimte
   en oogt daardoor kleiner dan de letters "P2" en "OV" op dezelfde grootte. */
.dot--emoji  { font-family: inherit; font-size: 17px; line-height: 1; }

.route-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-strong);
  text-wrap: pretty;
}

.route-text strong { font-weight: 700; }
.route-lead { color: var(--cream); }

/* ---------- 5. Dieetwensen ---------- */

.diet {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--field-text);
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  outline: none;
}

.field--area { resize: vertical; }

.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { border-color: var(--yellow); }

.diet__error {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--coral);
}

.diet__done {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--green);
}

/* Stellen en gezinnen geven vaak achter elkaar door. Zonder deze knop moet de
   tweede persoon de pagina herladen of de QR opnieuw scannen — daar komt niet
   iedereen op. */
.diet__klaar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* ---------- 6. Cadeau ---------- */

.ibans {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iban {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.iban__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.iban__name { font-weight: 700; font-size: 13px; color: var(--cream); }

/* Het ontwerp gebruikt hier `word-break: break-all`. Dat breekt ook middenin een
   cijfergroep: het Franse nummer eindigde met een losse "4" op een eigen regel,
   wat op een typefout lijkt. `overflow-wrap: anywhere` breekt bij voorkeur op de
   spaties tussen de groepen en valt alleen terug op hard afbreken als het écht
   niet past — wat bij groepjes van vier nooit gebeurt. */
.iban__number {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-iban);
  overflow-wrap: anywhere;
}

.btn-copy {
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  background: transparent;
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--yellow);
  cursor: pointer;
}

.btn-copy:hover { border-color: var(--yellow-hover); color: var(--yellow-hover); }

/* ---------- 7. Footer ---------- */

/* Ontwerp had 32px boven; dat las als iets te veel lucht tussen het adressenblok
   en het gele streepje. Nu 24px — net krapper dan de 28px die de secties
   onderling houden, waardoor de voettekst dichter bij de inhoud hoort. */
.footer {
  padding: 24px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

/* Scheidingslijn tussen de afsluiter van Marie-José & Toon en de credit. Loopt
   even breed als de kaarten erboven, dus binnen de zijmarge en op dezelfde
   kolomlijnen. Met de flex-gap van 10px erbij: 20px erboven, 16px eronder — iets
   dichter bij de credit, want de lijn hoort bij dat blokje en niet bij de
   afsluiter. Stond eerst bovenaan de voettekst; daar duwde hij het gele streepje
   33px omlaag. */
.footer__divider {
  width: 100%;
  height: 1px;
  background: var(--divider);
  margin: 10px 0 6px;
}

.footer__rule { width: 48px; height: 2px; background: var(--yellow); }

.footer__rsvp {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teal);
  text-wrap: pretty;
}

.footer__sign { margin: 0; font-size: 13px; color: var(--muted); }

/* De credit hoort ná de persoonlijke afsluiter en mag daar niet mee concurreren:
   het laatste woord is van Marie-José & Toon. Rustig gehouden met formaat en
   ruimte, niet met een lichtere kleur — alles onder oklch(0.6) zakt door de
   AA-contrastgrens (4,5:1) op deze achtergrond. */
.footer__credit {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}