/* ─────────────────────────────────────────────────────────────────────
   Fotosite — Kayleigh & Thijs

   Zelfde letters en kleuren als de trouwkaart-viewer: Cormorant Garamond en
   Cormorant SC op crèmepapier, met goud als accent. Daggasten krijgen het
   zandkleurige pocketfold-papier, avondgasten het groene.

   De galerij zelf blijft bewust stil. Alle versiering staat om de foto's heen,
   nooit eroverheen — foto's zijn hier de inhoud.
   ───────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/google/CormorantGaramond-400-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;
  src:url(../fonts/google/CormorantGaramond-400-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/google/CormorantGaramond-600-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/google/CormorantGaramond-700-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant SC";font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/google/CormorantSC-400-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant SC";font-weight:600;font-style:normal;font-display:swap;
  src:url(../fonts/google/CormorantSC-600-normal-latin.woff2) format("woff2")}

:root{
  --gold:#a8854c;
  --ink:#3a332c;
  --ink-soft:#6b6155;
  --paper:#4d685a;            /* avondgast: het groene pocketfold-papier */
  --paper-deep:#456052;
  --ring:rgba(255,255,255,.5);
  --rood:#8a4a34;
  --radius:14px;
  --knop:var(--paper);            /* het groen draagt zichzelf prima */
  --knop-tekst:#fdfaf5;
}
/* daggast: hetzelfde ontwerp op zandkleurig papier.
   De knop krijgt wél een eigen kleur: zand op crème haalt maar 1,43:1 tegen de
   ondergrond, en dan ziet niemand dat het een knop is. Dit dieper goud komt uit
   dezelfde familie als het bladgoud op de kaart en haalt 4,2:1. */
body[data-rol="dag"]{
  --paper:#d5cbbc;
  --paper-deep:#cbc0b0;
  --ring:rgba(96,78,52,.42);
  --knop:#8a6f3f;
}

*,*::before,*::after{box-sizing:border-box}
/* Elke display-regel hieronder (.uploadbalk, .tabs) wint het van het `hidden`
   uit de browserstijl. Zonder dit ziet een avondgast de tab "Overdag" staan en
   staat de uploadbalk er al vóór het aanmelden. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;color:var(--ink);
  background:radial-gradient(125% 95% at 50% 6%,#f2ece7 0%,#e4dbd4 46%,#d2c7c1 100%);
  background-attachment:fixed;
  font-family:"Cormorant Garamond",Georgia,serif;
  /* nooit onder 16.5px: dit wordt 's avonds op een telefoon gelezen */
  font-size:clamp(16.5px,1.05rem + .2vw,19px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
a{color:var(--gold);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ── chroom ───────────────────────────────────────────────────────── */
.balk{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem clamp(.9rem,4vw,2rem);
  background:rgba(246,241,236,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(58,51,44,.12);
}
.merk{font-family:"Cormorant SC",serif;font-size:.95rem;letter-spacing:.14em}
.rolchip{
  font-family:"Cormorant SC",serif;font-size:.72rem;letter-spacing:.12em;
  padding:.28rem .7rem;border-radius:999px;color:#fff;background:var(--paper);
  white-space:nowrap;
}
body[data-rol="dag"] .rolchip{color:#4a3f2c}

main{max-width:72rem;margin:0 auto;padding:clamp(1.2rem,4vw,2.6rem) clamp(.9rem,4vw,2rem) 6rem}

h1{font-weight:400;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.12;margin:0 0 .3em}
h2{font-weight:400;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);margin:0 0 .4em;color:var(--gold)}
.script{font-style:italic;color:var(--gold)}
p{margin:0 0 1em;max-width:38rem}
.klein{font-size:.9em;color:var(--ink-soft)}

/* ── kaart (papier) ───────────────────────────────────────────────── */
.kaart{
  background:linear-gradient(168deg,#fffdfa,#f7f1e9);
  border:1px solid rgba(58,51,44,.13);border-radius:var(--radius);
  padding:clamp(1.2rem,4vw,2.2rem);
  box-shadow:0 16px 40px rgba(60,45,35,.13);
  max-width:34rem;margin-inline:auto;
}
.kaart::before{
  content:"";display:block;height:3px;width:44px;margin:0 0 1.2rem;
  background:var(--gold);border-radius:2px;opacity:.75;
}

/* ── formulier ────────────────────────────────────────────────────── */
label{display:block;font-family:"Cormorant SC",serif;font-size:.78rem;
      letter-spacing:.16em;color:var(--ink-soft);margin:0 0 .4rem}
input[type=text]{
  width:100%;padding:.7rem .2rem;background:transparent;border:0;
  border-bottom:1px solid rgba(58,51,44,.28);border-radius:0;
  font-size:1.15rem;transition:border-color .2s;
}
input[type=text]:focus{outline:0;border-bottom-color:var(--gold)}
/* De toestemmingsregel is een zin om te lezen, geen veldnaam: terug naar de
   gewone letter, want kapitaaltjes met spatiëring lezen slecht op een telefoon. */
.akkoord{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0;
         font-family:"Cormorant Garamond",Georgia,serif;
         font-size:1rem;letter-spacing:normal;line-height:1.45;
         color:var(--ink-soft);cursor:pointer}
.akkoord input{margin-top:.28rem;width:1.25rem;height:1.25rem;flex:0 0 auto;accent-color:var(--gold)}

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.85rem 1.4rem;margin-top:.4rem;
  background:var(--knop);color:var(--knop-tekst);border:0;border-radius:999px;
  font-family:"Cormorant SC",serif;font-size:.95rem;letter-spacing:.16em;
  cursor:pointer;transition:filter .2s,transform .08s;
  min-height:48px;                       /* duim op een telefoon in het donker */
}
.knop:hover{filter:brightness(1.07)}
.knop:active{transform:translateY(1px)}
.knop[disabled]{opacity:.5;cursor:default}
.knop.stil{background:none;color:var(--ink);border:1px solid rgba(58,51,44,.25)}
.knop.breed{width:100%}

.fout{color:var(--rood);font-size:.95rem;margin:.8rem 0 0}
.melding{background:rgba(168,133,76,.1);border:1px solid rgba(168,133,76,.3);
         border-radius:10px;padding:.8rem 1rem;margin:0 0 1rem;font-size:.95rem}

/* ── tabs dag / avond ─────────────────────────────────────────────── */
.tabs{display:flex;gap:.4rem;margin:0 0 1.4rem;flex-wrap:wrap}
.tab{
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid rgba(58,51,44,.2);
  background:none;font-family:"Cormorant SC",serif;font-size:.8rem;letter-spacing:.12em;
  cursor:pointer;min-height:40px;
}
.tab[aria-selected=true]{background:var(--knop);color:var(--knop-tekst);border-color:transparent}

/* ── galerij ──────────────────────────────────────────────────────── */
.raster{
  display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(46vw,150px),1fr));
}
.tegel{
  position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
  background:rgba(58,51,44,.07);border:0;padding:0;cursor:pointer;
}
.tegel img{width:100%;height:100%;object-fit:cover;
           transition:transform .3s ease,opacity .3s ease;opacity:0}
.tegel img.klaar{opacity:1}
.tegel:hover img{transform:scale(1.04)}
.tegel .wie{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .5rem .35rem;
  font-size:.72rem;color:#fff;text-align:left;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tegel .badge{
  position:absolute;top:.4rem;right:.4rem;font-size:.65rem;letter-spacing:.08em;
  background:rgba(0,0,0,.55);color:#fff;padding:.15rem .45rem;border-radius:999px;
  font-family:"Cormorant SC",serif;
}
.leeg{text-align:center;padding:3rem 1rem;color:var(--ink-soft)}

/* ── lightbox ─────────────────────────────────────────────────────── */
.licht{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(30,24,20,.92);
  align-items:center;justify-content:center;flex-direction:column;gap:1rem;padding:1rem;
}
.licht[open],.licht.aan{display:flex}
.licht img,.licht video{max-width:100%;max-height:76vh;border-radius:6px;object-fit:contain}
.licht .onder{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:center;
              color:#f2ece7;font-size:.92rem}
.licht .knop{width:auto;padding:.6rem 1.2rem;margin:0}
/* Op het donkere doek keert de stille knop om: de inktkleur van de pagina is
   hier onleesbaar. */
.licht .knop.stil{color:#f6f1ec;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.licht .knop.stil:hover{background:rgba(255,255,255,.14)}
.sluit{position:absolute;top:.6rem;right:.8rem;width:44px;height:44px;border-radius:50%;
       background:rgba(255,255,255,.15);color:#fff;border:0;font-size:1.3rem;cursor:pointer}

/* ── upload ───────────────────────────────────────────────────────── */
.uploadbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:.7rem clamp(.9rem,4vw,2rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0));
  background:rgba(246,241,236,.95);backdrop-filter:blur(8px);
  border-top:1px solid rgba(58,51,44,.12);
  display:flex;gap:.6rem;align-items:center;
}
.uploadbalk .knop{margin:0;flex:1}
.wachtrij{max-width:72rem;margin:0 auto 1rem;display:grid;gap:.4rem}
.rij{display:flex;gap:.6rem;align-items:center;font-size:.85rem;
     background:rgba(255,255,255,.6);border:1px solid rgba(58,51,44,.1);
     border-radius:8px;padding:.4rem .6rem}
.rij .naam{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rij .staat{font-family:"Cormorant SC",serif;font-size:.7rem;letter-spacing:.1em;
            color:var(--ink-soft);white-space:nowrap}
.rij.klaar .staat{color:#4d685a}
.rij.mis .staat{color:var(--rood)}
.balkje{height:3px;background:rgba(58,51,44,.12);border-radius:2px;overflow:hidden;
        flex:0 0 60px}
.balkje i{display:block;height:100%;background:var(--gold);width:0;transition:width .25s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── voetnoot ─────────────────────────────────────────────────────── */
.voetnoot{
  text-align:center;margin:3rem 0 0;font-size:.85rem;color:var(--ink-soft);
  max-width:none;
}
.voetnoot a{color:var(--ink-soft);text-decoration-color:rgba(58,51,44,.3)}
.voetnoot a:hover{color:var(--gold)}

/* ── QR voor de eenmalige link ────────────────────────────────────── */
.qr{
  display:block;margin-inline:auto;         /* canvas is van zichzelf inline */
  width:min(100%,320px);height:auto;
  background:#fff;border-radius:10px;padding:0;
  box-shadow:0 6px 18px rgba(60,45,35,.16);
  image-rendering:pixelated;                /* nooit vervagen: dan scant hij niet */
}

/* ── kleine hulpklassen ───────────────────────────────────────────────
   Deze vervangen inline style-attributen. Het strikte CSP (`style-src 'self'`)
   blokkeert die namelijk, en dat is op de gedeployde site niet te zien in de
   dev-server — die past _headers niet toe. */
.rij-knoppen{display:flex;gap:.5rem;flex-wrap:wrap}
.rij-knoppen>.knop{flex:1}
.mt-s{margin-top:.5rem}
.mt-m{margin-top:1rem}
.mt-l{margin-top:1.4rem}
.mt-xl{margin-top:2rem}
.midden{text-align:center;margin-top:1.5rem}
.laden{text-align:center;padding:3rem 0}
.smal{max-width:34rem;margin:1rem auto 0}
.auto-breed{width:auto;padding-inline:2rem}
.breekbaar{word-break:break-all;margin-top:.6rem}
.uit-blok{margin-top:1rem;text-align:center}
.kaart-breed{max-width:40rem}

/* Achtergrond niet mee laten scrollen zolang de foto openstaat. */
body.vast{overflow:hidden}
.melding-uit{
  color:#f2ece7;font-size:.9rem;text-align:center;margin:0;
  background:rgba(255,255,255,.1);padding:.5rem .9rem;border-radius:8px;
}
.wachtrij-uitleg{
  max-width:72rem;margin:0 auto .6rem;font-size:.9rem;color:var(--ink-soft);
  text-align:center;
}

/* ── zoeker van de ingebouwde scanner ─────────────────────────────── */
#zoeker{margin-top:1rem;text-align:center}
#zoeker video{
  width:100%;max-width:22rem;aspect-ratio:1;object-fit:cover;
  border-radius:12px;background:#2a241e;margin:0 auto .6rem;
  /* niet spiegelen: dit is de camera aan de achterkant, geen selfie */
}
#zoeker p{margin:0 0 .6rem}