/* RegioSafe, aanvullingen die alleen in de WordPress-bouw bestaan.
   ---------------------------------------------------------------------------
   site.css is een letterlijke kopie van de mockup en blijft dat. Alles wat de
   mockup niet kende, staat hier: de skip-link, de opmaak van tekst uit de
   editor, de klassen die WordPress zelf om afbeeldingen zet, en paginering.
   Geladen na site.css, dus dezelfde tokens zijn beschikbaar.             */

/* --- toegankelijkheid ---------------------------------------------------- */

/* Alleen voor schermlezers, maar wel focusbaar. */
.sr-only:not(:focus):not(:active){
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Sla de navigatie over. Onzichtbaar tot je er met Tab op komt. */
.skip{
  position:absolute;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:200;
  background:var(--ink);color:var(--paper);
  padding:13px 22px;border-radius:0 0 12px 12px;
  font-size:15px;font-weight:500;text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translate(-50%,0)}

/* --- tekst uit de editor -------------------------------------------------- */

.rte > *:first-child{margin-top:0}
.rte > *:last-child{margin-bottom:0}
.rte p{margin:0 0 1.1em}
.rte p:last-child{margin-bottom:0}

.rte h2,.rte h3,.rte h4{margin:1.6em 0 .5em}
.rte h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.rte h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.025em;font-weight:600}
.rte h4{font-size:18px;font-weight:600;letter-spacing:-.02em}

.rte a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .25s var(--ease)}
.rte a:hover{color:var(--ink)}

.rte strong,.rte b{font-weight:500;color:var(--ink)}

.rte ul,.rte ol{margin:0 0 1.1em;padding-left:1.35em}
.rte li{margin-bottom:.4em}
.rte li::marker{color:var(--accent)}
.rte ul ul,.rte ol ol{margin-top:.4em;margin-bottom:0}

.rte blockquote{
  margin:1.6em 0;padding:4px 0 4px 26px;
  border-left:2px solid var(--accent);
  font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink);
}
.rte blockquote p:last-child{margin-bottom:0}

.rte hr{height:1px;background:var(--line);border:0;margin:2.2em 0}

.rte table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:15.5px}
.rte th{text-align:left;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line);padding:10px 14px 10px 0}
.rte td{border-bottom:1px solid var(--line-soft);padding:10px 14px 10px 0;
  color:var(--ink-2)}

.rte code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em;
  background:var(--paper-2);padding:.12em .4em;border-radius:4px}

.rte img{height:auto;border-radius:var(--r-sm)}

/* --- wat WordPress zelf om beeld heen zet -------------------------------- */

.alignleft{float:left;margin:.3em 1.6em 1.2em 0;max-width:50%}
.alignright{float:right;margin:.3em 0 1.2em 1.6em;max-width:50%}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{margin-block:1.6em}

.wp-caption{max-width:100%}
.wp-caption-text,.rte figcaption{
  margin-top:10px;font-size:14px;color:var(--ink-3);line-height:1.45;
}
.rte figure{margin:1.6em 0}

@media (max-width:620px){
  .alignleft,.alignright{float:none;max-width:100%;margin-inline:0}
}

/* --- paginering ----------------------------------------------------------- */

.pagination{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:clamp(34px,4vw,56px);
}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;
  font-size:15px;color:var(--ink-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pagination .dots{border-color:transparent}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* --- zoekformulier -------------------------------------------------------- */

.zoek{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0;max-width:560px}
.zoek input[type="search"]{
  flex:1 1 220px;min-width:0;
  padding:14px 18px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface,#fff);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .3s var(--ease);
}
.zoek input[type="search"]:focus{outline:0;border-color:var(--ink)}
.zoek button{
  padding:14px 26px;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;transition:opacity .3s var(--ease);
}
.zoek button:hover{opacity:.86}

[data-theme="dark"] .zoek input[type="search"]{background:var(--paper-2)}

/* --- lege staat, alleen zichtbaar voor een ingelogde redacteur ------------ */

.blok-leeg{
  margin:0 auto;max-width:var(--maxw);
  padding:clamp(40px,6vw,80px) var(--gut);
  border:1px dashed var(--line);border-radius:var(--r);
  color:var(--ink-3);font-size:15px;text-align:center;
}

/* -------------------------------------------------------------------------
   Blokken die op elkaar aansluiten
   In de mockup zat de inhoud onder een paginakop in dezelfde sectie, met
   padding-top:0. Als losse blokken moet dat hier gebeuren.
   ---------------------------------------------------------------------- */

.blok--paginakop + .sec{padding-top:0}

/* De notitie hoort bij het blok erboven, niet als losse sectie ertussen. */
.blok--notitie.sec{padding-top:0}

/* -------------------------------------------------------------------------
   Detailpagina's
   De opbouw is goedgekeurd op 24 september 2026, zie de mockup
   detail-redvoertuigen.html. Deze regels staan daar in detail-extra.css.
   ---------------------------------------------------------------------- */

/* De introductie sluit aan op de paginakop, net als een blok eronder. */
.detail-intro{padding-top:0}
.detail-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Specificaties in een tegel: geen streep onder de laatste. */
.mat .mb .spec:last-child{border-bottom:0;padding-bottom:0}

/* --- veelgestelde vragen ------------------------------------------------- */

.faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.faq-side{position:sticky;top:120px}
.faq-i{border-top:1px solid var(--line)}
.faq-i:last-child{border-bottom:1px solid var(--line)}
.faq-i summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:clamp(17px,1.5vw,19.5px);font-weight:600;
  letter-spacing:-.02em;line-height:1.32;
  transition:color .3s var(--ease);
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover,
.faq-i[open] summary{color:var(--accent)}
.faq-i summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.faq-p{position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:4px}
.faq-p::before,.faq-p::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq-p::before{width:14px;height:1.4px;transform:translate(-50%,-50%)}
.faq-p::after{width:1.4px;height:14px;transform:translate(-50%,-50%)}
.faq-i[open] .faq-p::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{padding:0 44px 26px 0;color:var(--ink-2);max-width:64ch}
.faq-a > :first-child{margin-top:0}
.faq-a > :last-child{margin-bottom:0}
@media (max-width:900px){
  .faq{grid-template-columns:1fr;gap:26px}
  .faq-side{position:static}
  .faq-a{padding-right:0}
}

/* -------------------------------------------------------------------------
   Overlay-menu met tien items
   site.css (de mockup) geeft alleen item 1 tot en met 7 een vertraging, dus
   item 8, 9 en 10 stonden er meteen. Hier loopt de vertraging via --i, dat
   overlay-menu.php per item meegeeft, en geldt hij voor elk aantal items.
   De vertraging zit alleen op het inschuiven (transform en opacity). Kleur en
   inspringen bij hover reageren direct, ook op het laatste item.
   ---------------------------------------------------------------------- */

.ov-links > .ov-link{
  transition-delay:0s, calc(.14s + var(--i, 0) * .05s), calc(.14s + var(--i, 0) * .05s), 0s;
}

/* Tien in plaats van negen: iets strakker geschaald op de schermhoogte, zodat
   het menu op een laptop niet onder de onderrand doorloopt. */
.ov-link{
  font-size:clamp(21px,min(3.3vw,4.7vh),48px);
  padding:clamp(4px,.75vh,12px) 0;
}
@media (max-width:900px){
  .ov-link{font-size:clamp(23px,5.6vw,36px)}
}

/* -------------------------------------------------------------------------
   Hero met video
   Zelfde uitsnede als de afbeelding, maar zonder de langzame zoom: de video
   beweegt zelf al. De donkere verloop-laag van .hero-media::after blijft
   erover liggen, zodat de tekst leesbaar blijft.
   ---------------------------------------------------------------------- */

.hero-media .hero-video{
  display:block;width:100%;height:100%;object-fit:cover;
}

/* -------------------------------------------------------------------------
   Belbalk onderaan: het nummer is een link, zonder linkopmaak
   ---------------------------------------------------------------------- */

.alarm a.n{color:inherit;text-decoration:none}
.alarm a.n:hover{text-decoration:underline}

/* -------------------------------------------------------------------------
   Footer: de juridische links op één regel, in de stijl van de copyright
   ---------------------------------------------------------------------- */

.foot-bot .foot-juri{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-bot .foot-juri a{display:inline;padding:0;font-size:inherit;color:inherit}
.foot-bot .foot-juri a:hover{color:#fff}

/* -------------------------------------------------------------------------
   Header: knoppen voor de licht/donker-knop, in de stijl van de menuknop
   ---------------------------------------------------------------------- */

.hknop{
  display:inline-flex;align-items:center;height:42px;padding:0 20px;
  border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;
  white-space:nowrap;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.hknop:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hknop.vol{background:var(--accent);border-color:var(--accent);color:#fff}
.hknop.vol:hover{background:var(--ink);border-color:var(--ink)}
.head.over .hknop{color:#fff;border-color:rgba(255,255,255,.3)}
.head.over .hknop:hover{background:#fff;color:var(--night);border-color:#fff}
.head.over .hknop.vol{border-color:var(--accent)}
[data-theme="dark"] .hknop:hover{color:var(--on-ink)}
/* Menu open: dezelfde witte rand en tekst als de menuknop */
body.nav-open .hknop{color:#fff;border-color:rgba(255,255,255,.3)}
body.nav-open .hknop:hover{background:#fff;color:#0A0B0D;border-color:#fff}
body.nav-open .hknop.vol{border-color:var(--accent)}
body.nav-open .hknop.vol:hover{background:#fff;color:#0A0B0D;border-color:#fff}
/* Strakker bij elkaar: de mockup had 30px tussen twee knoppen, met vier is dat te ruim. */
.head-r{gap:10px}
@media (max-width:900px){.hknop{display:none}}

/* -------------------------------------------------------------------------
 * Formulieren (WPForms, zonder eigen opmaak). Elk veld heeft de klasse
 * .field uit de mockup; hier alleen wat WPForms extra of anders doet.
 * ---------------------------------------------------------------------- */
.rs-form .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.rs-form .wpforms-field{grid-column:1/-1;min-width:0}
.rs-form .wpforms-field.rs-half{grid-column:auto}
@media (max-width:700px){.rs-form .wpforms-field.rs-half{grid-column:1/-1}}

.rs-form .wpforms-field-hp,
.rs-form .wpforms-screen-reader-element{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rs-form .wpforms-required-label{color:var(--accent);margin-left:2px}
.rs-form .wpforms-field-description{font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:8px}
.rs-form .wpforms-field-description a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.rs-form .wpforms-field-description a:hover{color:var(--ink)}
.rs-form input::placeholder,.rs-form textarea::placeholder{color:var(--ink-3);opacity:1}
.rs-form select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2378808a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}

/* Keuzevakjes */
.rs-form fieldset{border:0;margin:0;padding:0;min-width:0}
.rs-form legend.wpforms-field-label{display:block;padding:0;font-size:13px;letter-spacing:.03em;color:var(--ink-3);margin-bottom:10px}
.rs-form .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
@media (max-width:520px){.rs-form .wpforms-field-checkbox ul{grid-template-columns:1fr}}
.rs-form .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:10px;margin:0}
.rs-form .field .wpforms-field-checkbox input,
.rs-form .field input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;padding:0;margin:2px 0 0;border-radius:4px;accent-color:var(--accent);box-shadow:none}
.rs-form .field label.wpforms-field-label-inline{display:inline;font-size:15px;letter-spacing:0;color:var(--ink-2);margin:0;cursor:pointer}

/* Uploadveld (WPForms Pro, klassieke stijl) */
.rs-form .field input[type="file"]{padding:11px 12px;cursor:pointer;font-size:14.5px;color:var(--ink-2)}
.rs-form .field input[type="file"]::file-selector-button{margin-right:14px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.rs-form .field input[type="file"]:hover::file-selector-button{border-color:var(--ink)}

/* Fouten */
.rs-form .wpforms-error{display:block;font-style:normal;font-size:13px;color:var(--accent);margin-top:7px}
.rs-form input.wpforms-error,.rs-form select.wpforms-error,.rs-form textarea.wpforms-error{display:block;margin-top:0;border-color:var(--accent)}
.rs-form .wpforms-error-container,.rs-form .wpforms-error-alert{padding:14px 16px;border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--accent);margin-bottom:16px;font-size:14.5px}

/* Versturen, met het pijltje van de mockup */
.rs-form .wpforms-submit-container{display:flex;align-items:center;gap:14px;margin-top:8px}
.rs-form .wpforms-submit.btn{cursor:pointer}
.rs-form .wpforms-submit.btn::before{content:"";order:2;width:16px;height:16px;flex:0 0 16px;background:currentColor;transition:transform .4s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.rs-form .wpforms-submit.btn:hover::before{transform:translateX(4px)}
.rs-form .wpforms-submit.btn:disabled{opacity:.6;cursor:wait}
.rs-form .wpforms-submit-spinner{width:22px;height:22px}

/* Melding na versturen, als er geen bedankpagina is */
.wpforms-confirmation-container-full{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink)}
.wpforms-confirmation-container-full p:last-child{margin-bottom:0}

[data-theme="dark"] .rs-form .field label.wpforms-field-label-inline{color:var(--ink-2)}
[data-theme="dark"] .wpforms-confirmation-container-full{background:var(--surface)}

/* Maker, heel ingetogen */
.foot-bot .foot-maker{color:inherit;opacity:.45;font-size:12px;letter-spacing:.02em;transition:opacity .3s var(--ease)}
.foot-bot .foot-maker:hover,.foot-bot .foot-maker:focus-visible{opacity:1;color:#fff}

/* Meldbalk bij de footer wegfaden */
.alarm{transition:transform .7s var(--slow),opacity .45s var(--ease)}
.alarm.weg{opacity:0;pointer-events:none}

/* Profielen onder het adres in de footer */
.foot .foot-prof{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0}
.foot .foot-prof a{display:inline;padding:0;font-size:14px;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.foot .foot-prof a:hover{color:#fff;text-decoration-color:currentColor}

/* Koppen: een regel die niet past, loopt door naar een volgende regel in
   plaats van buiten beeld te vallen (lange titels van detailpagina's).
   Regels die met een harde enter zijn gezet, blijven zoals ze zijn. */
.ml{text-wrap:wrap}
.ml > i{text-wrap:balance;overflow-wrap:break-word}