/* =========================================================
   Cruyff Court De Uithof — custom stijl
   Aanvulling op Tailwind. Bevat: veldlijn-signatuur,
   scorebord-teller, toegankelijkheid en printstijlen.
   ========================================================= */

:root {
  --pitch: #0B6B3A;   /* diep pitch-groen  */
  --grass: #22C55E;   /* grasgroen accent  */
  --sky:   #0EA5E9;   /* sky-blue          */
  --ocean: #0B4F9E;   /* oceaanblauw       */
  --paper: #F3F8F4;   /* zacht wit-groen   */
  --ink:   #0A2A1B;   /* donkere tekst     */
}

/* ---------- Basis & typografie ---------- */
html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; color: var(--ink); }
.font-display { font-family: "Archivo", "Inter", sans-serif; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Zichtbare focus (WCAG 2.4.7) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ocean);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-link */
.skip-link {
  position: absolute; left: 0; top: -60px;
  background: var(--ocean); color: #fff;
  padding: .75rem 1.25rem; z-index: 100;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Veldlijn-signatuur ----------
   Dunne witte lijnen als een voetbalveld: middenlijn,
   middencirkel en zijlijnen. Puur decoratief (aria-hidden). */
.pitch-lines {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; opacity: .35;
}
.pitch-lines::before {            /* middenlijn */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: rgba(255,255,255,.55); transform: translateX(-1px);
}
.pitch-lines::after {             /* middencirkel */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border: 2px solid rgba(255,255,255,.55); border-radius: 50%;
}
.pitch-frame {                    /* buitenlijnen */
  position: absolute; inset: 18px; border: 2px solid rgba(255,255,255,.4);
  border-radius: 10px; pointer-events: none;
}

/* Subtiel grasstreep-patroon voor groene secties */
.turf {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0 60px,
      rgba(0,0,0,.03) 60px 120px);
}

/* ---------- Scorebord-teller ---------- */
.scoreboard {
  background: linear-gradient(160deg, #06331f 0%, #0B6B3A 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.06),
              0 30px 60px -20px rgba(6,51,31,.6);
}
.score-digit {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  line-height: 1;
}
.score-dot { color: var(--grass); }

/* Voortgangsbalk */
.progress-track { background: rgba(255,255,255,.14); border-radius: 999px; overflow: hidden; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grass), var(--sky));
  border-radius: 999px; transition: width 1.2s cubic-bezier(.22,1,.36,1);
}

/* ---------- Kaarten / hover ---------- */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(11,79,158,.35); }

/* FAQ accordion */
.faq-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item[aria-expanded="true"] .faq-panel { max-height: 400px; }
.faq-item[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* Toast na verzenden */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%);
  transition: transform .4s cubic-bezier(.22,1,.36,1); z-index: 90;
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .progress-fill { transition: none; }
}

/* ---------- Kaart (Leaflet) ---------- */
.leaflet-container { font-family: "Inter", sans-serif; }

/* =========================================================
   PRINT — flyer, bewonersbrief en petitie
   ========================================================= */
@media print {
  body { background: #fff !important; }
  .no-print { display: none !important; }
  .print-page {
    width: 210mm; min-height: 297mm; margin: 0 auto;
    page-break-after: always; box-shadow: none !important;
  }
  a { text-decoration: none; color: inherit; }
}