/* ============================================================
   Het reserveer- en berichtformulier.

   Bouwt voort op .formulier, .veldrij en .veld uit stijl.css van het thema — die
   staan er al en zijn goedgekeurd. Hier staat alleen wat er nieuw bij komt: de
   foutmeldingen, de bevestiging en het lokveld.

   De kleurnamen (--wijn, --perzik, ...) komen uit het thema. Staat het thema er om
   wat voor reden dan ook niet, dan vallen ze terug op de waarden hieronder, zodat
   het formulier nooit onleesbaar wordt.
   ============================================================ */

.resformulier{
  --r-wijn:var(--wijn,#5E1A1C);
  --r-inkt:var(--inkt,#2B211D);
  --r-zacht:var(--inkt-zacht,#5C4C44);
  --r-koper:var(--koper,#B9713C);
  --r-creme:var(--creme,#F7EFE4);
  --r-zand:var(--zand,#E2CFB8);
  --r-groen:var(--rozemarijn,#56684C);
}

/* ---------- het lokveld ----------
   Buiten beeld, maar niet met display:none of hidden — een deel van de invulrobots
   slaat velden over die zo zijn weggezet, en juist die wil je vangen. Wel netjes uit
   de voorleesvolgorde en uit de tabvolgorde gehaald. */
.resval{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- het datumveld loopt op de iPhone het scherm uit ----------
   Gemeten 11-08 op een echte iPhone (op de laptop is het onzichtbaar, want Chromium
   tekent dat veld smal en Safari breed).

   De schuld ligt niet bij het veld maar bij de rasterkolom eromheen. Een onderdeel van
   een raster of flexrij heeft standaard `min-width:auto`: het weigert te krimpen onder
   de minimummaat van zijn eigen inhoud. Bij een `<input type="date">` bepaalt Safari die
   maat aan de hand van de volledige datumtekst plus de kalenderknop, en dat is breder
   dan een telefoonscherm. Dus duwde het veld zijn eigen kolom voorbij de rechterrand.

   `min-width:0` alleen bleek niet genoeg — nagemeten met een veld dat om 620px vroeg,
   en het liep er nog steeds 265px uit. `.veld` is namelijk zelf ook een raster, en een
   raster zonder opgegeven kolommen krijgt één `auto`-kolom. De ondergrens daarvan is de
   minimummaat van de inhoud, dus het veld duwt vervolgens zijn eigen kolom net zo hard
   uit elkaar. `minmax(0,1fr)` zegt met zoveel woorden: deze kolom mág tot nul krimpen,
   kijk niet naar wat de inhoud wil. Dáár hoort dit soort uitblazing te stoppen.

   De rest zet het veld in de pas met de andere: geen eigen Safari-uitdossing, en de datum
   links uitgelijnd — Safari zet hem standaard in het midden, wat naast de andere velden
   scheef staat. */
.resformulier .veld{min-width:0;grid-template-columns:minmax(0,1fr)}
.resformulier .veldrij{min-width:0}
.resformulier input,
.resformulier select,
.resformulier textarea{
  min-width:0;max-width:100%;box-sizing:border-box;
}
.resformulier input[type="date"]{
  -webkit-appearance:none;appearance:none;
}
.resformulier input[type="date"]::-webkit-date-and-time-value{
  text-align:left;margin:0;
}

/* ---------- en dan klapte het lege datumveld in elkaar ----------
   Nagelaten door de reparatie hierboven, gezien op de iPhone: mét een datum erin stond
   het veld netjes op maat, maar zolang het leeg was werd het merkbaar lager dan de
   velden eromheen.

   Dat is het gevolg van `appearance:none`. Safari tekent de gekozen datum niet als
   gewone tekst maar in een eigen binnenelement, en dat element heeft geen regelhoogte
   zolang er niets in staat. Bij een leeg veld blijft er dus alleen de binnenmarge over
   en zakt de hoogte in.

   Twee keer dichtgezet. De onderste regel is de eigenlijke reparatie: geef dat
   binnenelement een lege regel om op te staan. De min-height erboven is het vangnet
   voor browsers die dat binnenelement niet kennen — regelhoogte (1.5em) plus de
   binnenmarge uit stijl.css (2 x .78rem) plus de twee randen. Daarmee is het veld per
   definitie even hoog als een tekstveld ernaast, vol of leeg. */
.resformulier input[type="date"]::-webkit-date-and-time-value{
  min-height:1.5em;
}

/* ---------- en alle velden even hoog ----------
   Bij het nameten van het datumveld bleek dat de drie soorten van nature niet gelijk
   uitkwamen: tekstvelden 51px, keuzelijsten 48px, datum 53px. Elk voor zich niet te
   benoemen, samen precies waarom een formulier er onaf uitziet — de linkerrand klopt
   wel, maar de hoogtes hobbelen.

   De datum is de hoogste, want die heeft de kalenderknop erbij; daar lijnt de rest op
   uit. De maat komt uit het ontwerp zelf en niet uit een afgerond getal: de regelhoogte
   (1.5em) plus de binnenmarge uit stijl.css (2 x .78rem) plus de randen. */
.resformulier input:not([type="hidden"]),
.resformulier select{
  min-height:calc(1.5em + 1.56rem + 4px);
}
/* de kalenderknop netjes rechts, niet tegen de datum aan */
.resformulier input[type="date"]::-webkit-calendar-picker-indicator{
  margin-inline-start:auto;
}

/* ---------- de zin boven het formulier ----------
   Dit is de belangrijkste regel van de hele pagina: het is een aanvraag, geen tafel. */
.resuitleg{
  margin:0 0 .3rem;padding:.85rem 1.05rem;
  background:var(--creme,#F7EFE4);border-left:3px solid var(--koper,#B9713C);
  border-radius:0 8px 8px 0;
  font:400 .96rem/1.55 var(--body,system-ui,sans-serif);color:var(--inkt-zacht,#5C4C44);
}

/* ---------- meldingen ---------- */
.resmelding{
  margin:0;padding:1.15rem 1.3rem;border-radius:12px;border:1px solid var(--zand,#E2CFB8);
  background:var(--papier,#FFFCF8);
  font:400 1rem/1.6 var(--body,system-ui,sans-serif);color:var(--inkt,#2B211D);
}
.resmelding__kop{
  margin:0 0 .5rem;font:700 1.2rem/1.3 var(--kop,Georgia,serif);color:var(--wijn,#5E1A1C);
}
.resmelding p{margin:0 0 .6rem}
.resmelding p:last-child{margin-bottom:0}
.resmelding ul{margin:.3rem 0 0;padding-left:1.15rem}
.resmelding li{margin-bottom:.25rem}
.resmelding a{color:var(--wijn,#5E1A1C)}

.resmelding--goed{
  border-left:4px solid var(--rozemarijn,#56684C);
  background:var(--creme,#F7EFE4);
}
.resmelding--fout{
  border-left:4px solid #B3422A;background:#FBE9E3;border-color:#E3B8AA;
}
.resmelding__nummer{
  margin-top:.8rem!important;font-size:.9rem;color:var(--inkt-zacht,#5C4C44);
}

/* een melding krijgt de aandacht zonder dat er een rand omheen springt */
.resmelding:focus{outline:none}
.resmelding:focus-visible{outline:2px solid var(--koper,#B9713C);outline-offset:3px}

/* ---------- velden met een fout ---------- */
.veld--fout input,.veld--fout select,.veld--fout textarea{
  border-color:#B3422A!important;background:#FEF7F4;
}
.veld__fout{
  display:block;margin-top:.2rem;font:400 .86rem/1.45 var(--body,system-ui,sans-serif);
  font-style:normal;color:#9B3520;
}
/* VALKUIL (11-08 gemeten): de waarschuwing bij het datumveld wordt met `hidden` weggezet,
   maar `display:block` hierboven weegt zwaarder dan de `display:none` die de browser aan
   [hidden] hangt. Gevolg: een leeg, onzichtbaar element van 4px in het raster. Op een
   telefoon zag je daar niets van, maar vanaf 768px staan datum en gasten naast elkaar —
   en dan rekte die 4px de keuzelijst ernaast mee op, van 53 naar 57px. Een verschil dat
   je niet kunt aanwijzen maar wel ziet. */
.veld__fout[hidden]{display:none}

/* ---------- kleine bijzinnen ---------- */
.resklein{
  font:400 .88rem/1.5 var(--body,system-ui,sans-serif);color:var(--inkt-zacht,#5C4C44);
}
.resklein a{color:var(--wijn,#5E1A1C);font-weight:600;white-space:nowrap}
.resklein--tel{max-width:22rem}

/* Het formulier is een raster; de knoppenrij mag daarin uitlijnen zonder dat het
   telefoonnummer onder de knop wegvalt op een smal scherm. */
.resformulier .knoppen{align-items:center;gap:.8rem 1.2rem;margin-top:.4rem}

/* ---------- tijdens het versturen ----------
   De knop wordt niet uitgeschakeld maar krijgt aria-disabled: een echt uitgeschakelde
   knop verdwijnt uit de tabvolgorde en wordt door voorleessoftware niet meer gemeld. */
.knop[aria-disabled="true"]{opacity:.62;cursor:progress}

@media (max-width:30rem){
  .resmelding{padding:1rem 1.05rem}
  .resformulier .knoppen{align-items:flex-start;flex-direction:column}
}