/* ==================================================================
   Het verlanglijstje voor Sinterklaas

   Twee pagina's: het invullen (.vl) en het lijstje zelf (.vlb). Het
   lijstje moet er op papier net zo goed uitzien als op het scherm;
   onderaan staat daarom de printopmaak.

   Kinderen vullen dit in, soms op een tablet. Daarom overal grote
   vakken, dikke randen en knoppen waar je makkelijk op tikt.
   ================================================================== */

/* ------------------------------------------------- de chocoladeletter
   Echte chocoladeletters zijn gezet in een stevige schrijfmachineletter;
   die sfeer halen we hier na. De kleur volgt wat het kind kiest: melk,
   puur of wit. De kleuren zitten in variabelen, zodat het invulvak en de
   letter op de brief er precies hetzelfde uitzien.

   Standaard melk, want zolang er nog niets gekozen is moet de letter wel
   te zien zijn. */
.vl-choco,
.vl-choco--melk {
  --choco-font: "Courier New", "Nimbus Mono PS", Courier, ui-monospace, monospace;
  --choco-licht: #A4693A; --choco: #7A4522; --choco-diep: #4E2B13; --choco-op: #FFF3E2;
}
.vl-choco--puur { --choco-licht: #4A2A1C; --choco: #32190F; --choco-diep: #1A0C05; --choco-op: #EBD9C4; }
.vl-choco--wit  { --choco-licht: #FDF3E1; --choco: #F0DCB6; --choco-diep: #D5B686; --choco-op: #6B4A22; }

/* De letter zelf: een stukje chocola met glans erop en een donkere
   onderrand, zodat hij van het papier af komt. */
.vl-choco__letter {
  font-family: var(--choco-font);
  font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase;
  color: var(--choco-op);
  background: linear-gradient(155deg, var(--choco-licht) 0%, var(--choco) 55%, var(--choco-diep) 100%);
  border: 0; border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .32),
              inset 0 -4px 0 rgba(0, 0, 0, .22),
              0 6px 14px rgba(43, 16, 9, .28);
  /* Ook op papier blijft de chocola bruin. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ------------------------------------------------------- het formulier */
.vl { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }

.vl-stuk { display: grid; gap: .7rem; }
.vl-stuk__kop {
  display: flex; align-items: center; gap: .7rem;
  margin: 0; font-size: clamp(1.15rem, 3vw, 1.5rem);
}
.vl-stuk__nr {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--pk-rood); color: var(--pk-wit);
  font-size: 1rem; font-weight: 800;
}
.vl-sub { margin: .8rem 0 0; font-size: 1.05rem; }

.vl-veld {
  width: 100%; padding: .8rem 1rem;
  font: inherit; font-size: 1.05rem;
  color: var(--pk-zwart); background: var(--pk-wit);
  border: 2px solid var(--pk-lijn); border-radius: 14px;
}
.vl-veld:focus-visible { outline: 3px solid var(--pk-goud); outline-offset: 2px; border-color: var(--pk-rood); }
.vl-veld--naam { max-width: 22rem; font-size: 1.2rem; }
.vl-veld--anders { max-width: 20rem; margin-top: .6rem; }

.vl-label { display: block; margin-bottom: .3rem; font-weight: 700; }
.vl-hint { margin: 0; color: var(--pk-grijs); font-size: .9rem; }

.vl-melding {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: 14px;
  font-weight: 600;
}
.vl-melding svg { width: 20px; height: 20px; flex: none; }
.vl-melding--goed { background: #E8F6EC; color: #16603A; }
.vl-melding--fout { background: #FDECEC; color: #9B1C1C; }

/* ---- de wensen ---- */
.vl-wensen { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vl-wens { display: flex; align-items: center; gap: .6rem; }
.vl-wens__nr {
  display: grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--pk-licht); color: var(--pk-grijs);
  font-weight: 800; font-size: .95rem;
}

/* De foto bij een wens: het invoerveld zelf is onzichtbaar, je klikt op
   de knop ernaast. Zo ziet hij er overal hetzelfde uit. */
.vl-foto { position: relative; flex: none; cursor: pointer; }
.vl-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vl-foto__knop {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .8rem; border-radius: 12px;
  background: var(--pk-licht); color: var(--pk-grijs);
  font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.vl-foto__knop svg { width: 17px; height: 17px; }
.vl-foto:hover .vl-foto__knop { background: var(--pk-lijn); }
/* display:block wint het van het hidden-attribuut; daarom hier expliciet. */
.vl-foto__beeld { display: block; }
.vl-foto__beeld[hidden] { display: none; }
.vl-foto__knop[hidden] { display: none; }
.vl-foto__beeld img {
  width: 3.2rem; height: 3.2rem; object-fit: cover;
  border-radius: 12px; border: 2px solid var(--pk-lijn); display: block;
}

.vl-meer {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem; border: 2px dashed var(--pk-lijn); border-radius: 14px;
  background: none; color: var(--pk-rood); font: inherit; font-weight: 700;
  cursor: pointer;
}
.vl-meer:hover { background: var(--pk-licht); }
.vl-meer svg { width: 17px; height: 17px; }

/* ---- keuzevakjes voor het lekkers ---- */
.vl-snoep { display: flex; flex-wrap: wrap; gap: .5rem; }
.vl-kies { cursor: pointer; }
.vl-kies input { position: absolute; opacity: 0; width: 0; height: 0; }
.vl-kies span {
  display: inline-block; padding: .55rem .9rem;
  border: 2px solid var(--pk-lijn); border-radius: 99px;
  font-weight: 600; font-size: .95rem; background: var(--pk-wit);
}
.vl-kies:hover span { border-color: var(--pk-rood); }
.vl-kies input:checked + span {
  background: var(--pk-rood); border-color: var(--pk-rood); color: var(--pk-wit);
}
.vl-kies input:focus-visible + span { outline: 3px solid var(--pk-goud); outline-offset: 2px; }

.vl-letterkies { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; font-weight: 700; }
.vl-letter {
  width: 4.6rem; height: 4.6rem; padding: 0;
  font-size: 2.4rem;
  transition: background .25s ease, color .25s ease;
}
.vl-letter:focus-visible { outline: 3px solid var(--pk-goud); outline-offset: 3px; }

/* ---- tekenen ---- */
.vl-tekenen { display: grid; gap: .7rem; }
.vl-doek {
  /* Een tekenvlak dat de hele breedte pakt wordt op een breed scherm
     onwerkbaar hoog; dit is ongeveer een half A4 liggend. */
  width: 100%; max-width: 34rem; height: auto; aspect-ratio: 9 / 5.6;
  background: var(--pk-wit);
  border: 3px dashed var(--pk-lijn); border-radius: 18px;
  cursor: crosshair; touch-action: none;
}
.vl-stiften { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vl-stift {
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 3px solid var(--pk-wit); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--pk-lijn);
  cursor: pointer;
}
.vl-stift.is-aan { box-shadow: 0 0 0 3px var(--pk-zwart); }
.vl-stift--zwart  { background: #2B1009; }
.vl-stift--rood   { background: #C11617; }
.vl-stift--geel   { background: #FFCD00; }
.vl-stift--paars  { background: #832883; }
.vl-stift--groen  { background: #1B7A3D; }
.vl-stift--bruin  { background: #6B3F26; }
.vl-stift--gum    { background: var(--pk-wit); display: grid; place-items: center; }
.vl-stift--gum svg { width: 16px; height: 16px; color: var(--pk-grijs); }

.vl-wissen {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: auto; padding: .5rem .9rem;
  border: 2px solid var(--pk-lijn); border-radius: 99px;
  background: none; color: var(--pk-grijs); font: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
}
.vl-wissen:hover { color: var(--pk-rood); border-color: var(--pk-rood); }
.vl-wissen svg { width: 15px; height: 15px; }

/* ---- de kleur van het lijstje ---- */
.vl-themas { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.vl-thema { cursor: pointer; display: grid; gap: .4rem; }
.vl-thema input { position: absolute; opacity: 0; width: 0; height: 0; }
.vl-thema__vlak {
  display: block; height: 4.5rem; border-radius: 16px;
  border: 3px solid transparent; box-shadow: 0 0 0 2px var(--pk-lijn);
}
.vl-thema--rood  .vl-thema__vlak { background: linear-gradient(135deg, #C11617, #8C1410); }
.vl-thema--paars .vl-thema__vlak { background: linear-gradient(135deg, #832883, #4A1047); }
.vl-thema--nacht .vl-thema__vlak { background: linear-gradient(135deg, #1B2A6B, #071A43); }
.vl-thema__naam { font-size: .9rem; font-weight: 600; }
.vl-thema input:checked + .vl-thema__vlak { box-shadow: 0 0 0 4px var(--pk-zwart); }
.vl-thema input:focus-visible + .vl-thema__vlak { outline: 3px solid var(--pk-goud); outline-offset: 3px; }

/* ---- afronden ---- */
.vl-stuk--bewaren {
  padding: clamp(1rem, 3vw, 1.6rem);
  background: var(--pk-licht); border-radius: 18px;
}
.vl-klaar { margin: 0; }
.vl-knoppen { display: flex; flex-wrap: wrap; gap: .7rem; }

.vl-geheim { border-top: 1px solid var(--pk-lijn); padding-top: .9rem; }
.vl-geheim summary {
  display: flex; align-items: center; gap: .45rem;
  cursor: pointer; font-weight: 700;
}
.vl-geheim summary svg { width: 17px; height: 17px; }
.vl-geheim summary span { color: var(--pk-grijs); font-weight: 400; }
.vl-geheim__lijf { padding-top: .8rem; display: grid; gap: .4rem; max-width: 26rem; }

.vl-afspraak {
  display: flex; gap: .7rem; margin: 0;
  font-size: .92rem; line-height: 1.55; color: var(--pk-grijs);
}
.vl-afspraak svg { width: 20px; height: 20px; flex: none; color: var(--pk-rood); margin-top: .15rem; }

/* ---- het slotje ---- */
.vl-slot { display: grid; gap: .6rem; max-width: 22rem; }
.vl-slot__uitleg { margin: 0 0 1rem; }

/* ==================================================================
   Het lijstje zelf
   ================================================================== */
/* Deze pagina heeft geen hero, dus moet hij zelf onder de vaste balk
   vandaan blijven. */
.vlb { --vlb-kleur: #C11617; --vlb-diep: #8C1410; padding-top: var(--pk-kophoogte); }
.vlb--paars { --vlb-kleur: #832883; --vlb-diep: #4A1047; }
.vlb--nacht { --vlb-kleur: #1B2A6B; --vlb-diep: #071A43; }

.vlb-gelukt {
  margin-block: clamp(1.2rem, 4vh, 2.2rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: #E8F6EC; border-radius: 18px;
}
.vlb-gelukt__kop {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; color: #16603A;
}
.vlb-gelukt__kop svg { width: 22px; height: 22px; }
.vlb-gelukt p { margin: 0 0 .8rem; }
.vlb-adres { display: flex; flex-wrap: wrap; gap: .5rem; }
.vlb-adres__veld {
  flex: 1 1 16rem; min-width: 0; padding: .7rem .9rem;
  font: inherit; font-size: .92rem;
  border: 2px solid #BFE3C9; border-radius: 12px; background: var(--pk-wit);
}

/* Het blad zelf: wit papier met een gekleurde rand eromheen. */
.vlb-blad {
  margin-block: clamp(1rem, 3vh, 2rem);
  padding: clamp(1.4rem, 5vw, 3rem);
  background: var(--pk-wit);
  border: 6px solid var(--vlb-kleur);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(7, 26, 67, .16);
}

.vlb-kop { text-align: center; margin-bottom: clamp(1.4rem, 4vw, 2.2rem); }
.vlb-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .4rem; color: var(--vlb-kleur);
  font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .14em;
}
.vlb-eyebrow svg { width: 16px; height: 16px; }
.vlb-titel {
  margin: 0 0 .5rem; color: var(--vlb-diep);
  font-size: clamp(1.7rem, 5.5vw, 2.8rem); line-height: 1.1;
}
.vlb-aanhef { margin: 0; font-size: clamp(1rem, 2.6vw, 1.2rem); color: var(--pk-grijs); }

.vlb-wensen { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.vlb-wens {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem 1rem;
  background: var(--pk-licht); border-radius: 16px;
}
.vlb-wens__nr {
  display: grid; place-items: center; flex: none;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--vlb-kleur); color: var(--pk-wit);
  font-weight: 800; font-size: 1.05rem;
}
.vlb-wens__foto { flex: none; }
.vlb-wens__foto img {
  width: 4rem; height: 4rem; object-fit: cover;
  border-radius: 12px; border: 3px solid var(--pk-wit); display: block;
  box-shadow: 0 4px 12px rgba(7, 26, 67, .15);
}
.vlb-wens__tekst { font-size: clamp(1.05rem, 2.6vw, 1.25rem); font-weight: 700; }

.vlb-ander {
  display: flex; gap: .7rem; align-items: flex-start;
  margin: 1.2rem 0 0; padding: 1rem 1.1rem;
  background: #FFF6E5; border-radius: 16px;
}
.vlb-ander svg { width: 22px; height: 22px; flex: none; color: var(--vlb-kleur); margin-top: .1rem; }

.vlb-lekkers {
  display: grid; gap: .8rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.vlb-lekkers__stuk {
  margin: 0; padding: .9rem 1.1rem;
  background: var(--pk-licht); border-radius: 16px;
  display: grid; gap: .2rem;
}
.vlb-lekkers__kop {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pk-grijs);
}
.vlb-lekkers__stuk strong {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.15rem;
}
.vlb-letter {
  display: inline-grid; place-items: center; flex: none;
  width: 2.9rem; height: 2.9rem; font-size: 1.6rem;
}

.vlb-tekening { margin: 1.4rem 0 0; text-align: center; }
.vlb-tekening img {
  width: 100%; max-width: 32rem; height: auto; margin-inline: auto;
  border: 3px solid var(--pk-lijn); border-radius: 16px; background: var(--pk-wit);
}
.vlb-tekening figcaption { margin-top: .5rem; color: var(--pk-grijs); font-size: .9rem; }

.vlb-groet {
  margin: 1.6rem 0 0; text-align: center;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem); line-height: 1.6;
}

.vlb-acties {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-bottom: clamp(1.4rem, 4vh, 2.4rem);
}

.vlb-ouder {
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--pk-licht); border-radius: 18px;
  font-size: .94rem; line-height: 1.6;
}
.vlb-ouder__kop {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .5rem; font-size: 1.05rem;
}
.vlb-ouder__kop svg { width: 19px; height: 19px; color: var(--pk-rood); }
.vlb-ouder p { margin: 0 0 1rem; }
.vlb-weg { display: grid; gap: .4rem; justify-items: start; max-width: 20rem; }

/* ==================================================================
   Op papier

   Alleen het blad zelf. Geen menu, geen knoppen, geen uitleg voor de
   ouders: die hoeven niet mee de printer in.
   ================================================================== */
@media print {
  .pk-header, .pk-footer, .pk-nav-overlay,
  .vlb-gelukt, .vlb-acties, .vlb-ouder { display: none !important; }

  .vlb-blad {
    margin: 0; padding: 1.2cm;
    border: 4px solid var(--vlb-kleur);
    border-radius: 0; box-shadow: none;
    max-width: none; width: auto;
  }
  .vlb-wens, .vlb-lekkers__stuk { background: #F4F4F6 !important; }
  .vlb-ander { background: #FFF6E5 !important; }

  /* Een wens of de tekening mag niet over twee bladen vallen. */
  .vlb-wens, .vlb-tekening, .vlb-lekkers { break-inside: avoid; }

  a[href]::after { content: none !important; }
}