/* =========================================================================
   27 Moments: de persoonlijke uitnodiging (identieke kopie in elk template)
   Bron van waarheid: shared/uitnodiging/uitnodiging.css. Wijzig daar en
   kopieer naar sites/template-<n>/css/uitnodiging.css.

   DE ENIGE REGEL DIE HIER TELT: dit bestand zet GEEN eigen lettertype en
   GEEN eigen kleur. Alles erft van de sectie waarin het paneel belandt, en
   randen en achtergronden worden uit currentColor gemengd. Dat is dezelfde
   truc die maakStil() in cms.js gebruikt, en die werkt daar al voor zes
   ontwerpen tegelijk: van het serene Eternel tot het uitbundige dansfeest.

   Wat WEL van ons is: de maatvoering. Elk tikdoel is 48 pixels hoog, met
   de ene uitzondering die de huisregels toelaten: een chip in een dichte
   rij mag op 44. Onder de 44 zit een gast met natte handen in een
   feestzaal het verkeerde dagdeel aan te vinken.
   ========================================================================= */

/* --------------------------------------------- hidden moet hidden blijven

   De browserregel voor [hidden] is display:none, maar die komt uit het
   stijlblad van de BROWSER en verliest van elke regel in een stijlblad van
   de pagina. Zet een ontwerp (of dit bestand) display:flex op een element,
   dan doet hidden daar niets meer. Precies die val staat al beschreven bij
   .veld in template 2 en bij .cadeaulijst-sectie. Vandaar deze regel: elk
   element dat wij open en dicht doen, gaat hier expliciet dicht. */
.uitn-aanspreking[hidden],
.uitn-chips[hidden],
.uitn-persoonvragen[hidden],
.uitn-fout[hidden],
.uitn-notitie[hidden] {
  display: none;
}

/* ------------------------------------------------------- de aanspreking */

/* "Hey Wout en Tess, wij nodigen jullie graag uit." Geen eigen letter en
   geen eigen kleur: deze regel staat in de hero of in de introsectie van
   het ontwerp en hoort daar te klinken alsof ze er altijd al stond. Alleen
   de ruimte eromheen is van ons. */
.uitn-aanspreking {
  margin: 14px 0 0;
}

.uitn-paneel,
.uitn-formulier,
.uitn-stand,
.uitn-rustig {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 1.55;
}

/* ---------------------------------------------------------- de notitie */

/* Nieuws over een antwoord van een vorig bezoek. Bewust smal en stil: het
   is een mededeling, geen banner. */
.uitn-notitie {
  max-width: 34rem;
  margin: 0 auto 18px;
  padding: 10px 14px;
  border-left: 2px solid currentColor;
  opacity: 0.85;
  font-size: 0.95em;
}

/* ---------------------------------------------------------- de personen */

.uitn-formulier fieldset,
.uitn-stand fieldset {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.uitn-legend {
  padding: 0;
  margin: 0 0 10px;
  font-size: 1.05em;
  font-weight: 600;
}

.uitn-persoon {
  padding: 6px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.28);
}

.uitn-persoon:last-child {
  border-bottom: 0;
}

/* Het vinkje en de naam zijn samen een tikdoel van 48 pixels. Wie de naam
   aantikt, vinkt de persoon aan; dat is wat een mens verwacht. */
.uitn-vink {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}

.uitn-vink input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: currentColor;
}

.uitn-naam {
  font-size: 1.05em;
}

/* ------------------------------------------------------------- de chips */

.uitn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 34px;
}

.uitn-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92em;
  opacity: 0.75;
}

.uitn-chip input {
  width: 16px;
  height: 16px;
  accent-color: currentColor;
}

/* Aangevinkt is niet stiller maar luider. Zonder deze regel moet een gast
   naar het vakje kijken in plaats van naar de chip. */
.uitn-chip:focus-within,
.uitn-chip:hover {
  opacity: 1;
}

.uitn-eendagdeel {
  margin: -10px 0 22px;
  opacity: 0.8;
  font-size: 0.95em;
}

/* -------------------------------------------------------------- velden */

.uitn-persoonvragen {
  margin: 4px 0 12px 34px;
}

.uitn-vraag,
.uitn-veld {
  margin: 0 0 16px;
}

/* ALLES WAT EEN VELD BETREFT STAAT IN :where(), EN DAT IS DE HELE TRUC.

   :where() weegt nul. Elke regel die het ontwerp zelf al voor zijn
   formuliervelden had (.veld input in css/styles.css, en die staat in alle
   zes de templates) wint dus van wat hier staat, ook al wordt dit bestand
   later geladen. Zo ziet het paneel er in elk ontwerp uit alsof het er
   altijd al stond, en is wat hieronder staat alleen het vangnet voor een
   ontwerp dat niets meegaf. Vandaar ook veldKlasse in js/config.js: die
   klasse hangt het veld aan de opmaak van het ontwerp.

   font: inherit is geen eigen lettertype maar juist het tegendeel: zonder
   die regel zet de browser zijn eigen systeemletter in elk invoerveld. En
   16 pixels is de ondergrens, want daaronder zoomt iOS in zodra een veld
   focus krijgt. */
:where(.uitn-vraag, .uitn-veld) label,
:where(.uitn-janee) legend {
  display: block;
  margin: 0 0 6px;
  font-size: 0.95em;
  opacity: 0.85;
}

:where(.uitn-vraag, .uitn-veld) :where(input[type="text"], textarea, select) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  box-sizing: border-box;
  font: inherit;
  font-size: max(16px, 1em);
  color: inherit;
  background: rgba(128, 128, 128, 0.06);
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 6px;
}

:where(.uitn-vraag, .uitn-veld) :where(textarea) {
  min-height: 96px;
  resize: vertical;
}

.uitn-janee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.uitn-janee legend {
  width: 100%;
}

.uitn-keuze {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  cursor: pointer;
}

.uitn-keuze input {
  width: 20px;
  height: 20px;
  accent-color: currentColor;
}

.uitn-hint {
  margin: 6px 0 0;
  font-size: 0.88em;
  opacity: 0.7;
}

/* ---------------------------------------------------------- de honeypot */

/* Onzichtbaar voor mensen, verleidelijk voor bots. Niet display:none: een
   bot dat alleen zichtbare velden invult, hoort hier juist in te trappen. */
.uitn-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.uitn-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 22px 0 0;
}

.uitn-knop {
  min-height: 48px;
  cursor: pointer;
}

/* Annuleren is geen tweede hoofdknop maar een uitweg. Precies een primaire
   knop per kaart, ook hier. */
.uitn-terug {
  min-height: 48px;
  padding: 0 4px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
}

/* --------------------------------------------------------------- de fout */

/* display:block is hier geen opsmuk maar noodzaak. De foutregel draagt naast
   .uitn-fout ook de foutklasse van het ontwerp (foutKlasse in js/config.js),
   en in template 2 staat .formulier-fout op display:none: dat ontwerp maakt
   zijn eigen foutregel pas zichtbaar met een extra klasse .is-zichtbaar.
   Zonder deze regel zet toonFout() daar wel de tekst en hidden=false, maar
   ziet een gast niets gebeuren als hij op versturen tikt, en gaat er ook
   niets de deur uit. Dit bestand wordt na styles.css geladen en weegt even
   zwaar, dus deze regel wint. De [hidden]-regel bovenaan weegt zwaarder en
   blijft dus gewoon dicht doen wat ze moet. */
.uitn-fout {
  display: block;
  margin: 16px 0 0;
  padding: 10px 14px;
  border-left: 3px solid currentColor;
}

/* --------------------------------------------------------------- de stand */

.uitn-dank {
  margin: 0 0 12px;
  font-size: 1.05em;
}

.uitn-standkop {
  margin: 0 0 12px;
  font-size: 1.1em;
  font-weight: 600;
}

.uitn-standlijst {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.uitn-standlijst li {
  padding: 3px 0;
}

.uitn-standvraag {
  opacity: 0.85;
}

.uitn-standdieet {
  margin: 0 0 14px;
  opacity: 0.85;
}

.uitn-klopt {
  margin: 0;
  opacity: 0.85;
}

/* -------------------------------------------------------- het rustige blok */

.uitn-voorbeeld {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px dashed currentColor;
  border-radius: 6px;
  opacity: 0.85;
  font-size: 0.95em;
}

.uitn-rustigkop {
  margin: 0 0 8px;
  font-weight: 600;
}

.uitn-rustigtekst,
.uitn-rustig p {
  margin: 0 0 8px;
  opacity: 0.82;
}

.uitn-rustig .uitn-rustigkop {
  opacity: 1;
}

/* ------------------------------------------------------------- op telefoon */

@media (max-width: 560px) {
  .uitn-chips,
  .uitn-persoonvragen {
    margin-left: 0;
  }
}