/* Zeeuwse Photobooth · componenten: knop, fotostrip, plaatshouder, icoon */

/* knop: pil, inkt; hover naar groen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
a.btn:hover, .btn:hover { background: var(--color-green); color: var(--color-paper); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--ghost { background: transparent; color: var(--color-ink); border: 2px solid var(--color-ink); }
a.btn--ghost:hover, .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }

.btn--light { background: var(--color-paper); color: var(--color-ink); }
a.btn--light:hover, .btn--light:hover { background: var(--color-mint); color: var(--color-ink); }

.btn--small { min-height: 44px; padding: 0 1.2rem; font-size: .98rem; }

/* fotostrip: het signatuur, kaders boven elkaar op wit, logo en regel eronder */
.photo-strip {
  display: flex;
  flex-direction: column;
  gap: var(--strip-gap);
  padding: 10px 10px 16px;
  background: var(--color-white);
  box-shadow: var(--shadow-strip);
}
.photo-strip__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-strip__logo { width: 40px; height: auto; margin: 4px auto 0; }
.photo-strip__caption {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--color-ink-quiet);
  text-align: center;
  line-height: 1.35;
}

/* plaatshouder: zichtbaar voor Chris en Mariëlle wat er nog van hen komt */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.4rem;
  border: 2px dashed rgba(43, 43, 43, .35);
  background: rgba(167, 195, 160, .22);
  color: var(--color-ink-soft);
  font-size: .95rem;
  text-align: center;
}
.placeholder__title { font-weight: 600; color: var(--color-ink); }

/* icoon: één lijnstijl op een 24-grid */
.icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--small { width: 22px; height: 22px; }

/* Honeypot in het formulier: buiten beeld, niet display:none (sommige bots slaan onzichtbare velden over). */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* cookiemelding (consent.js): een kaart onderin, nooit een muur; de pagina
   blijft bruikbaar tot er gekozen is. Weigeren en Accepteren zijn dezelfde
   knop, even groot en even zwaar. Eén moment: de kaart zakt op zijn plek,
   vanaf het eerste beeld zichtbaar; niets bij reduced motion. */
.consent {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 50;
  display: grid;
  gap: .7rem;
  max-width: 30rem;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: 6px;
  box-shadow: var(--shadow-card), var(--shadow-hairline);
}
.consent[hidden] { display: none; }
.consent__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.consent__text { color: var(--color-ink-soft); font-size: .95rem; line-height: 1.55; }
.consent__link { color: var(--color-green); text-underline-offset: .2em; white-space: nowrap; }
.consent__link:hover { color: var(--color-green-deep); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .2rem; }
@media (min-width: 760px) {
  .consent { inset-inline: auto 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent:not([hidden]) { animation: consent-in .6s var(--ease-out) both; }
}
@keyframes consent-in { from { transform: translateY(.75rem); } }

/* "Cookie-instellingen" in de footerregel: een knop die eruitziet als de
   links ernaast. Alleen zichtbaar als de melding actief is (consent.js). */
.site-footer__cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.site-footer__cookie:hover { color: var(--color-ink); }
.site-footer__cookie[hidden] { display: none; }