/*
Theme Name: veoconnect
Theme URI: https://webright.nl/
Author: Webright
Description: Webright WP Starter — Blockstudio 7-thema. Designer-CSS staat verbatim in assets/styles.css; dit bestand bevat ALLEEN additieve styling voor nieuwe componenten.
Version: 2.0.0
Requires PHP: 8.2
Text Domain: veoconnect
*/

/* ─── VEO Connect 2026 — additieve regels (bovenop verbatim assets/styles.css) ─── */

/* Perf/LCP: de eerste hero-fotokaart is de LCP op mobiel. De fadeInUp-entrance op
   .hero-visual (opacity 0 → 1) houdt de LCP-paint ~2s tegen. Meteen tonen; de
   doorlopende float-animatie op .hero-photo-1/2 blijft intact. style.css laadt ná
   assets/styles.css, dus deze regel wint op cascade-volgorde (geen !important nodig). */
.hero-visual { animation: none; opacity: 1; transform: none; }

/* Locatie-noot: in de bron een inline-style op de <p>; hier als klasse (blok rendert
   een RichText met class .locatie-note zodat de tekst bewerkbaar is). */
.locatie-note { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* ─── Footer "Cookie-voorkeuren"-knop — ziet eruit als de footer-links ─── */
.footer-links .footer-cookie-btn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 13px;
  color: rgba(255,255,255,0.65); cursor: pointer;
  transition: color 0.2s ease;
}
.footer-links .footer-cookie-btn:hover { color: var(--sage-glow); }

/* ─── T4: werksessie-<select>s — duidelijke dropdown-pijl + leesbare opties.
   De select heeft witte tekst; zonder deze regel kunnen de opties in sommige
   browsers wit-op-wit worden. style.css laadt ná assets/styles.css. ─── */
.form-field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.form-field select option { color: #1a1a2e; background: #fff; }
.form-field select:required:invalid { color: rgba(255,255,255,0.45); } /* placeholderkleur tot een keuze is gemaakt */

/* ─── T2: server-side foutmelding boven het aanmeldformulier (rendert zonder JS). ─── */
.form-error {
  margin-bottom: 22px; padding: 14px 18px; border-radius: 12px;
  background: rgba(220, 68, 68, 0.14); border: 1px solid rgba(240, 120, 120, 0.55);
  color: #ffe0e0; font-size: 14px; line-height: 1.55;
}

/* ─── T6: subtekst onder "Reserveer je plek" centreren. De aanmelden-header is
   text-align:center, maar .section-sub miste (anders dan de overige headers) de
   auto-marges, waardoor de 560px-tekstkolom links bleef hangen. ─── */
.aanmelden-header .section-sub { margin-left: auto; margin-right: auto; }

/* ─── T7 (kleurenblind-veilig): "Connect" in de hero — glow/gradient volledig weg,
   platte witte kleur met sterk contrast op de donkerpaarse achtergrond. ─── */
.hero-copy h1 .accent {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #fff; color: #fff;
  animation: none;
}

/* ─── T7 (kleurenblind-veilig): stats-strip — álle tekst (grote cijfers + kleine
   labels) van paars naar diepzwart voor maximaal contrast op de lichte achtergrond. ─── */
.intro-stat .n {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #000; color: #000;
}
.intro-stat .l { color: #000; }

/* ─── T8: Terugblik-galerij — responsive fotogrid (uniforme 4:3) + lightbox.
   Vervangt de twee marquee-rijen; de oude .marquee-* designer-CSS blijft ongebruikt. ─── */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.gallery-item {
  display: block; padding: 0; border: 0; margin: 0; background: none;
  width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px;
  cursor: pointer; position: relative; outline-offset: 3px;
}
.gallery-item .gallery-thumb, .gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(61,44,110,0.30) 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.gallery-item:hover .gallery-thumb, .gallery-item:focus-visible .gallery-thumb { transform: scale(1.06); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:focus-visible { outline: 3px solid var(--sage-glow); }
.gallery-item--edit { cursor: default; background: rgba(255,255,255,0.06); }

body.gallery-lb-lock { overflow: hidden; }
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,8,20,0.94); padding: 24px; opacity: 0; transition: opacity 0.25s ease;
}
.gallery-lightbox.open { display: flex; opacity: 1; }
.gallery-lb-stage { margin: 0; max-width: min(1100px, 92vw); max-height: 86vh; display: flex; }
.gallery-lb-img {
  max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.gallery-lb-close, .gallery-lb-prev, .gallery-lb-next {
  position: absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; cursor: pointer; border-radius: 999px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-lb-close:hover, .gallery-lb-prev:hover, .gallery-lb-next:hover { background: rgba(255,255,255,0.24); }
.gallery-lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.gallery-lb-prev, .gallery-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.gallery-lb-prev { left: 20px; } .gallery-lb-next { right: 20px; }
.gallery-lb-prev:hover, .gallery-lb-next:hover { transform: translateY(-50%) scale(1.06); }
.gallery-lb-close:focus-visible, .gallery-lb-prev:focus-visible, .gallery-lb-next:focus-visible { outline: 3px solid var(--sage-glow); outline-offset: 2px; }
.gallery-lb-counter { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.8); font-size: 14px; letter-spacing: 0.04em; }
@media (max-width: 960px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; }
  .gallery-lb-prev, .gallery-lb-next { width: 44px; height: 44px; font-size: 26px; }
  .gallery-lb-prev { left: 10px; } .gallery-lb-next { right: 10px; }
  .gallery-lb-close { top: 12px; right: 12px; }
}

/* ─── CookieYes: zwevende revisit-widget verbergen (heropenen via de footer-knop) ─── */
.cky-btn-revisit-wrapper { display: none !important; }
.cky-btn { border-radius: 999px !important; font-weight: 700 !important; }
.cky-btn-accept { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.cky-btn-accept:hover { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.cky-btn-reject, .cky-btn-customize { color: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }

/* ─── Werksessies: spreker / sessieleiding op een EIGEN regel onder de omschrijving ───
   (Siegbert, juli 2026). De designer-pill .sessie-host is inline-flex en plakte direct
   achter de laatste tekstregel; block-level + fit-content zet 'm er netjes onder, met de
   pill-vorm (stip + tekst, afgeronde achtergrond) behouden. */
.sessie-body .sessie-host { display: flex; width: fit-content; margin-top: 14px; }