/* site.css — gedeelde stijl voor de homepage + provincie-subpagina's (politiecontroles.com) */
:root{
  --ink:#0f172a; --ink2:#334155; --dim:#64748b; --line:#e6ebf2; --line2:#dbe2ec; --card:#ffffff;
  --blue:#0047c4; --blue-deep:#00379c; --fluo:#cfe000; --fluo-deep:#a9b800;
  --r:#ef4444; --o:#f97316; --y:#eab308; --g:#16a34a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh; color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; padding-bottom:48px;
  background:linear-gradient(180deg,#f8fafb 0%,#eceff3 48%,#e6eaf0 100%); background-attachment:fixed}
a{color:var(--blue)}
.wrap{max-width:920px; margin:0 auto; padding:0 16px}

.batten{height:16px; background:conic-gradient(from 0deg, var(--blue) 25%, var(--fluo) 0 50%, var(--blue) 0 75%, var(--fluo) 0); background-size:16px 16px}

header{position:sticky; top:0; z-index:900; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.hd{display:flex; align-items:center; gap:12px; padding:13px 0}
.logo{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:19px; letter-spacing:.03em; display:flex; align-items:center; gap:8px; color:#000; text-decoration:none}
.logo b{color:#000}
.logo .siren{font-size:17px}
.hd .home{margin-left:auto; font-size:13px; font-weight:600; color:var(--ink2); text-decoration:none}
.hd .home:hover{color:var(--blue)}

.crumbs{font-size:13px; color:var(--dim); padding:16px 0 0}
.crumbs a{color:var(--ink2); text-decoration:none}
.crumbs a:hover{color:var(--blue)}

.hero{padding:22px 0 8px}
.hero h1{font-weight:800; font-size:clamp(26px,5.4vw,40px); margin:0 0 10px; letter-spacing:-.02em; line-height:1.14}
.hero h1 .hl{background:linear-gradient(180deg,transparent 10%,var(--fluo) 10%,var(--fluo) 82%,transparent 82%); padding:0 .1em; border-radius:3px}
.hero p{margin:0; color:var(--ink2); font-size:16px; max-width:64ch}
.hero p + p{margin-top:12px; color:var(--dim)}

.assen{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 4px}
.assen .ax{font-size:12px; font-weight:600; color:var(--ink2); background:#fff; border:1px solid var(--line2); border-radius:999px; padding:5px 12px}

.cta{margin:22px 0 6px}
.btn{appearance:none; border:none; border-radius:14px; padding:15px 22px; font-weight:700; font-size:15.5px;
  letter-spacing:.01em; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:.15s}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(0,71,196,.6)}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(0,71,196,.7)}
.btn-ghost{background:#fff; color:var(--ink2); border:1px solid var(--line2)}
.btn-ghost:hover{border-color:#c7d2e0}

section{margin-top:26px}
.sec-head{display:flex; align-items:baseline; gap:10px; margin-bottom:11px}
.sec-head h2{font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; margin:0}
.sec-head .count{margin-left:auto; font-size:12.5px; color:var(--dim); font-weight:500}

#map{height:min(52vh,460px); width:100%; border-radius:18px; overflow:hidden; background:#e8edf3;
  border:1px solid var(--line); box-shadow:0 10px 30px -16px rgba(15,23,42,.25)}
.legend{display:flex; gap:15px; flex-wrap:wrap; margin-top:11px; font-size:12.5px; color:var(--dim)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:50%}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px}
.chip{border:1px solid var(--line2); background:#fff; color:var(--ink2); border-radius:999px; padding:8px 15px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s}
.chip:hover{border-color:#c3d0e2}
.chip.on{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 6px 16px -8px rgba(0,71,196,.6)}

.list{display:flex; flex-direction:column; gap:9px}
.item{display:flex; align-items:flex-start; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px 15px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 24px -18px rgba(15,23,42,.25);
  transition:border-color .15s, box-shadow .15s, transform .05s}
.item[data-lat]{cursor:pointer}
.item[data-lat]:hover{border-color:#c7d2e0}
.item[data-lat]:active{transform:translateY(1px)}
.item.flash{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,71,196,.16)}
.item .meta{display:flex; align-items:center; gap:8px; flex:0 0 auto; min-height:22px}
.item .rec{width:11px; height:11px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 3px rgba(15,23,42,.04)}
.item .when{font-variant-numeric:tabular-nums; font-weight:700; font-size:14px}
.item .prov{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:11px; letter-spacing:.06em; color:#fff; background:var(--blue); border-radius:7px; padding:3px 8px}
.item .ic{font-size:15px; line-height:1}
.item .main{flex:1; min-width:0}
.item .l1{display:flex; align-items:baseline; gap:10px; min-height:22px}
.item .gem{flex:1; min-width:0; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .ago{margin-left:auto; font-size:12.5px; color:var(--dim); flex:0 0 auto; white-space:nowrap}
.item .l2{margin-top:2px; font-size:14px; font-weight:500; color:var(--ink2); line-height:1.35; overflow-wrap:anywhere}
.empty{color:var(--dim); text-align:center; padding:28px; background:#fff; border:1px dashed var(--line2); border-radius:14px}

.provnav{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:14px}
.provnav a{color:var(--ink2); text-decoration:none; font-size:13px; font-weight:600}
.provnav a:hover{color:var(--blue)}

.mission{max-width:62ch; margin:0 auto 16px; color:var(--dim); font-size:12.5px; line-height:1.55}
footer{margin-top:38px; padding-top:18px; border-top:1px solid var(--line); color:var(--dim); font-size:12.5px; text-align:center}

.modal{position:fixed; inset:0; z-index:1000; display:none; align-items:flex-end; justify-content:center; background:rgba(15,23,42,.34); backdrop-filter:blur(3px)}
.modal.open{display:flex}
.sheet{width:100%; max-width:560px; background:#fff; border:1px solid var(--line); overflow:hidden;
  border-radius:22px 22px 0 0; padding:0 0 calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -20px 60px -20px rgba(15,23,42,.4); animation:up .25s ease}
.sheet .batten{height:8px}
.sheet-inner{padding:22px 22px}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:600px){ .modal{align-items:center} .sheet{border-radius:22px} }
.sheet h3{margin:0 0 5px; font-size:20px; font-weight:800; letter-spacing:-.01em}
.sheet p.sub{margin:0 0 18px; color:var(--dim); font-size:14px}
.field{margin-bottom:13px}
.field label{display:block; font-size:12.5px; color:var(--dim); font-weight:600; margin-bottom:7px}
textarea,select{width:100%; background:#f8fafc; border:1px solid var(--line2); border-radius:12px; color:var(--ink); padding:12px 14px; font:inherit; font-size:15px; outline:none; transition:.15s}
textarea{resize:vertical; min-height:80px}
textarea:focus,select:focus{border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(0,71,196,.14)}
.sheet-actions{display:flex; gap:10px; margin-top:8px}
.sheet-actions .btn{flex:1; justify-content:center}
.thanks{text-align:center; padding:12px 0}
.thanks .big{font-size:44px; margin-bottom:4px}