/**
 * Componenten en compatibiliteit — Van der Meer Installatietechniek
 * Bron: Forms/design_handoff_vandermeer_website/README.md (artboard 9, component-sheet)
 *
 * Tailwind doet het meeste werk in de templates. Hier staat alleen wat het CMS
 * zelf genereert (menu, paginering, formuliervelden, meldingen) plus de
 * Bootstrap-achtige klassen die de standaardtemplates in /Modules/ nog gebruiken.
 */

body { overflow-x: hidden; }

/* ==========================================================================
   1. Container — max 1200
   ========================================================================== */

/* px-6 mobiel · px-10 tablet · px-0 desktop (zie Designsysteem-sheet).
   Bij 1440 geeft max 1200 + auto-marges precies de 120 px uit het ontwerp. */
.container {
  width: 100%;
  max-width: 1200px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  /* Tailwind's preflight staat uit, dus er is geen globale border-box reset.
     Zonder deze regel telt de padding bij de 100% op en loopt de pagina onder
     1280px aan de rechterkant buiten beeld. */
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container { padding-right: 40px; padding-left: 40px; }
}
@media (min-width: 1280px) {
  .container { padding-right: 0; padding-left: 0; }
}

/* ==========================================================================
   1b. Secties — koprij met de knop rechts op dezelfde regel
   ========================================================================== */

.sectie { padding-top: 104px; padding-bottom: 104px; }
@media (max-width: 767.98px) { .sectie { padding-top: 56px; padding-bottom: 56px; } }

.sectie-kop {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; margin-bottom: 46px;
}
@media (max-width: 767.98px) {
  .sectie-kop { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
}

.sectie-label {
  display: block; margin: 0 0 12px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--koper-600);
}
/* Basiskleur op donkere vlakken. Zonder deze regel erfde gewone tekst de
   donkere bodykleur en stond er zwart op petrol — alleen de losse onderdelen
   hieronder waren goed leesbaar. */
.op-donker { color: var(--opdonker); }
.op-donker .sectie-label { color: var(--koper-200); }

/* De homepagesecties gebruiken een zwaardere kop dan de H2 uit de basis. */
.sectie-titel {
  margin: 0;
  font-family: 'Bitter', Georgia, serif; font-weight: 700;
  font-size: 40px; line-height: 1.15;
  color: var(--ink);
}
.op-donker .sectie-titel { color: #fff; }
@media (max-width: 767.98px) { .sectie-titel { font-size: 28px; } }

.sectie-intro {
  margin: 14px 0 0;
  font-size: 19px; line-height: 1.6;
  color: var(--body);
}
.op-donker .sectie-intro { color: var(--opdonker); }

/* ==========================================================================
   2. Topbar
   ========================================================================== */

.site-topbar {
  background: var(--zand);
  border-bottom: 1px solid var(--lijn);
  padding: 8px 0;
  font-size: 14px;
  color: var(--body);
}
.site-topbar a { color: var(--body); }
.site-topbar i { color: var(--petrol-900); }

/* Onder 768 verbergen — de gegevens staan dan in het mobiele menu. */
@media (max-width: 767.98px) { .site-topbar { display: none; } }

/* De social-iconen zijn elders 44x44 voor de raakvlak-eis; in de topbar
   (alleen desktop, geen aanraakbediening) mogen ze compacter. */
.topbar-social a { width: 28px; height: 28px; border: none; }
.topbar-social a:hover { background: var(--petrol-50); }

/* ==========================================================================
   3. Header en hoofdmenu
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--lijn);
  /* Zonder deze grens neemt de sticky header de breedte van het document over.
     Loopt er elders iets buiten beeld, dan schoof de actieknop mee naar rechts
     en viel hij van het scherm. Gemeten: document 1520 bij een venster van 1440. */
  width: 100%;
  max-width: 100vw;
}
.site-header .container { max-width: min(1200px, 100vw); }

.site-header-rij { padding-top: 18px; padding-bottom: 18px; }

/* Logo en bedrijfsnaam — vaste maten uit het ontwerp, daarom een klasse
   in plaats van arbitrary Tailwind-waarden. */
.site-logo-img { max-height: 46px; display: block; }
.site-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 8px;
  background: var(--petrol-900); color: #fff;
  font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 19px;
}
.site-logo-mark-licht { background: #fff; color: var(--petrol-900); }

.site-naam {
  display: block;
  font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 20px;
  color: var(--ink); line-height: 1.2;
}
.site-naam-licht { color: #fff; }

.site-tagline {
  display: block;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--koper-600);
}

/* Telefoonknop in het mobiele menu: NAW_Tel levert zijn eigen <a>. */
.knop-telefoon { border-color: #fff; color: #fff; }
.knop-telefoon a { color: #fff; text-decoration: none; }

/* Menu en actieknop staan samen rechts, met 34 px ertussen (ontwerp).
   Het ontwerp rekent op zes menu-items; bij meer items zou de actieknop
   buiten de container van 1200 px vallen. Daarom krimpen de tussenruimtes
   mee en mag de header breder zijn dan de rest van de pagina. */
.site-header-rij { justify-content: space-between; }
/* Geen margin-left:auto: die vult de vrije ruimte op en werkt tegen het
   krimpen zodra de inhoud niet meer past. Met flex: 1 1 auto + min-width: 0
   krimpt het menublok wél en breekt de lijst netjes af. */
.site-nav-desktop { display: flex !important; align-items: center; gap: 34px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
/* Liever afbreken dan afkappen: met meer menu-items dan het ontwerp voorzag
   zakt het menu netjes naar een tweede regel in plaats van uit beeld te lopen.
   De <nav> ertussen heeft óók min-width:0 nodig — zonder dat krimpt een
   flex-item niet onder zijn inhoud en breekt de lijst dus nooit af. */
.site-nav-desktop > nav { min-width: 0; flex: 1 1 auto; }
.site-nav-desktop .site-nav-list { flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
.site-header-rij { flex-wrap: wrap; }

/* De winkelwagen kwam uit het oude donkere ontwerp en was wit op wit. */
.site-nav-desktop a[title="Winkelwagen"],
.site-nav-mobile a[title="Winkelwagen"] { color: var(--petrol-900); }
.site-nav-desktop a[title="Winkelwagen"]:hover,
.site-nav-mobile a[title="Winkelwagen"]:hover { color: var(--koper-700); }

@media (max-width: 1699.98px) {
  /* De bedrijfsnaam naast het logo kost ~300 px. Onder deze breedte wijkt
     hij voor het menu; het beeldmerk en de tagline blijven staan. */
  .site-naam { display: none; }
  .site-tagline { margin-left: 2px; }
}
/* Met meer menu-items dan de zes uit het ontwerp wordt het krap tussen logo
   en actieknop. Tussenruimtes en tekstgrootte krimpen dan mee; alles blijft
   op één regel staan. */
@media (max-width: 1699.98px) {
  .site-nav-desktop { gap: 20px; }
  .site-nav-list { gap: 1.375rem; }
  .site-nav-link, .site-nav-dropdown-toggle { font-size: 15px; }
  .site-nav-desktop .btn-primair { flex: 0 0 auto; }
}
.site-nav-mobile  { display: none  !important; align-items: center; gap: .5rem; margin-left: auto; }

@media (max-width: 991.98px) {
  .site-nav-desktop { display: none !important; }
  .site-nav-mobile  { display: flex !important; }
}

.site-nav-list {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
  gap: 1.75rem;
}

/* Elk <li> is identiek opgemaakt — het CMS genereert de items, dus er is
   bewust geen afwijkende opmaak per item. De onderlijn is de drager van
   de actieve staat, niet de kleur. */
.site-nav-item { position: relative; list-style: none; }

.site-nav-link,
.site-nav-dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 0 4px 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--body);
  text-decoration: none !important;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.site-nav-link:hover,
.site-nav-dropdown-toggle:hover { color: var(--ink); }

.site-nav-active > .site-nav-link,
.site-nav-active > .site-nav-dropdown-toggle {
  color: var(--ink);
  border-bottom-color: var(--koper-600);
}

.site-nav-disabled { color: var(--meta) !important; cursor: default; pointer-events: none; }

/* Submenu — zichtbaarheid regelt Alpine met x-show, niet CSS, zodat hetzelfde
   menusjabloon op desktop en in het mobiele menu werkt. */
[x-cloak] { display: none !important; }

.site-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px); left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  box-shadow: var(--schaduw-lg);
  list-style: none;
  padding: 8px; margin: 0;
  z-index: 9999;
}

.site-nav-subitem { list-style: none; }
.site-nav-sublink {
  display: block;
  padding: 10px 14px;
  font-size: 16px;
  color: var(--body);
  text-decoration: none !important;
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.site-nav-sublink:hover {
  background: var(--petrol-50);
  border-left-color: var(--koper-600);
  color: var(--ink);
}

/* ==========================================================================
   4. Mobiel menu — petrol overlay over de volle hoogte
   ========================================================================== */

.site-nav-mobiel {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--petrol-900);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.site-nav-mobiel .site-nav-list {
  flex-direction: column; align-items: stretch;
  gap: 0; padding: 0;
}
.site-nav-mobiel .site-nav-item {
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.site-nav-mobiel .site-nav-link,
.site-nav-mobiel .site-nav-dropdown-toggle {
  width: 100%;
  padding: 18px 0;
  font-size: 19px;
  color: #fff;
  border-bottom: none;
  min-height: 44px;
}
/* Actief item krijgt een icoon vóór het label, niet alleen een kleur. */
.site-nav-mobiel .site-nav-active > .site-nav-link::before,
.site-nav-mobiel .site-nav-active > .site-nav-dropdown-toggle::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f058';               /* fa-circle-check */
  color: var(--koper-200);
  margin-right: 10px;
}
.site-nav-mobiel .site-nav-dropdown {
  position: static;
  background: none;
  border: none;
  border-left: 2px solid var(--koper-600);
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 12px 8px;
  padding: 0 0 0 14px;
}
.site-nav-mobiel .site-nav-sublink {
  color: var(--opdonker);
  font-size: 17px; font-weight: 400;
  padding: 12px 0;
  border-left: none;
}
.site-nav-mobiel .site-nav-sublink:hover { background: none; color: #fff; }

/* Body-scroll blokkeren zolang het menu open staat */
body.menu-open { overflow: hidden; }

/* ==========================================================================
   4b. Footer
   ========================================================================== */

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 56px; }
}

.footer-kop {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 0 12px 0;
  background: none; border: none;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; text-align: left; cursor: default;
}
.footer-kop-icoon { display: none; }

/* Op mobiel worden de kolommen accordeons; op desktop staat alles open. */
@media (max-width: 767.98px) {
  .footer-kolom { border-top: 1px solid rgba(255,255,255,.2); padding-top: 14px; }
  .footer-kop { cursor: pointer; min-height: 44px; }
  .footer-kop-icoon { display: inline-block; transition: transform .2s; }
  .footer-paneel { display: none; padding-bottom: 14px; }
  .footer-paneel.is-open { display: block; }
  .footer-kop[aria-expanded="true"] .footer-kop-icoon { transform: rotate(180deg); }
}

/* Het footermenu gebruikt hetzelfde CMS-sjabloon als het hoofdmenu,
   maar staat onder elkaar op een donker vlak. */
.footer-menu { flex-direction: column; align-items: flex-start; gap: 0; }
.footer-menu .site-nav-link,
.footer-menu .site-nav-dropdown-toggle {
  padding: 7px 0;
  font-size: 15px; font-weight: 400;
  color: var(--opdonker);
  border-bottom: none;
}
.footer-menu .site-nav-link:hover { color: #fff; }
.footer-menu .site-nav-active > .site-nav-link {
  color: #fff; font-weight: 600; border-bottom: none;
}
.footer-menu .site-nav-dropdown { display: none !important; }

/* ==========================================================================
   4c. Vaste actiebalk onderaan (alleen mobiel)
   ========================================================================== */

.actiebalk-mobiel { display: none; }

@media (max-width: 767.98px) {
  .actiebalk-mobiel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1035;
    background: var(--zand);
    border-top: 1px solid var(--lijn);
  }
  .actiebalk-knop {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 6px 10px;
    font-size: 16px; font-weight: 600;
    color: #fff;
  }
  .actiebalk-knop a { color: #fff; text-decoration: none; }
  .actiebalk-bellen   { background: var(--koper-600); }
  .actiebalk-whatsapp { background: var(--status-ok); }

  /* Ruimte onder de pagina zodat de balk niets afdekt. */
  body { padding-bottom: 48px; }
}

/* ==========================================================================
   5. Taalswitcher — tekstcodes, geen losse vlaggetjes
   ========================================================================== */

/* De markup van de taalswitcher komt uit Framework/FrontendHandler.php en
   bestaat uit vlagafbeeldingen met de taalcode als alt-tekst. Dat bestand is
   off-limits, dus het onderscheid tussen actief en inactief wordt hier
   gemaakt met een onderlijn en volle dekking — niet met kleur alleen. */
.taalswitcher { display: inline-flex; align-items: center; gap: 4px; }
.taalswitcher a.language {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 2px;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  border-radius: 2px;
  opacity: .55;
}
.taalswitcher a.language img { display: block; width: 22px; height: auto; border-radius: 2px; }
.taalswitcher a.language:hover { opacity: 1; }
.taalswitcher a.language.active {
  opacity: 1;
  border-bottom-color: var(--koper-600);
  cursor: default;
}
/* In het mobiele menu staat de switcher op petrol */
.op-donker .taalswitcher a.language { color: var(--opdonker); }
.op-donker .taalswitcher a.language.active { color: #fff; border-bottom-color: var(--koper-200); }

/* ==========================================================================
   6. Knoppen — vier varianten, vijf states (artboard 9)
   ========================================================================== */

.btn,
.btn-primair, .btn-secundair, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
@media (max-width: 767.98px) {
  .btn, .btn-primair, .btn-secundair, .btn-outline { min-height: 48px; font-size: 16px; }
}

.btn-primair            { background: var(--koper-600); border-color: var(--koper-600); color: #fff; }
.btn-primair:hover      { background: var(--koper-700); border-color: var(--koper-700); color: #fff; box-shadow: var(--schaduw-md); }
.btn-primair:active     { background: var(--koper-800); border-color: var(--koper-800); }
/* Koperen outline op een koperen knop is onzichtbaar — daarom ink. */
.btn-primair:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.btn-secundair          { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }
.btn-secundair:hover    { background: var(--petrol-950); border-color: var(--petrol-950); color: #fff; box-shadow: var(--schaduw-md); }
.btn-secundair:active   { background: var(--petrol-975); border-color: var(--petrol-975); }

.btn-outline            { background: transparent; border-color: var(--petrol-900); color: var(--petrol-900); }
.btn-outline:hover      { background: var(--petrol-50); border-color: var(--petrol-900); color: var(--petrol-900); }
.btn-outline:active     { background: var(--petrol-100); }

/* Outline-knop op een donker vlak. Staat hier, ná .btn-outline, zodat de
   witte variant wint van de petrol-variant. */
.btn-outline-licht,
.btn-outline.btn-outline-licht { border-color: #fff; color: #fff; background: transparent; }
.btn-outline-licht:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-outline-licht a { color: #fff; text-decoration: none; }
.btn-outline-licht:focus-visible { outline: 3px solid var(--koper-200); outline-offset: 2px; }

/* Disabled = grijs vlak plus slotje, niet alleen een lichtere tint. */
.btn:disabled, .btn[aria-disabled="true"],
.btn-primair:disabled, .btn-secundair:disabled, .btn-outline:disabled,
.btn-primair[aria-disabled="true"], .btn-secundair[aria-disabled="true"], .btn-outline[aria-disabled="true"] {
  background: var(--uit-vlak);
  border-color: var(--uit-rand);
  color: var(--uit-tekst);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.btn:disabled::after, .btn[aria-disabled="true"]::after,
.btn-primair:disabled::after, .btn-secundair:disabled::after, .btn-outline:disabled::after {
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  content: '\f023';               /* fa-lock */
  font-size: 13px;
}

/* Tekstlink-variant */
.btn-tekstlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 17px;
  color: var(--petrol-900);
  text-decoration: underline; text-underline-offset: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.btn-tekstlink:hover  { color: var(--koper-700); }
.btn-tekstlink:active { color: var(--koper-800); }

/* Icoonknop */
.btn-icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-width: 44px; min-height: 44px;
  border-radius: 8px; border: 2px solid var(--petrol-900);
  background: #fff; color: var(--petrol-900);
  text-decoration: none !important; cursor: pointer;
}
.btn-icoon:hover { background: var(--petrol-50); }

/* Compatibiliteit met de standaardtemplates in /Modules/ */
.btn-primary { background: var(--koper-600); border-color: var(--koper-600); color: #fff; }
.btn-primary:hover { background: var(--koper-700); border-color: var(--koper-700); color: #fff; }
.btn-success { background: var(--status-ok); border-color: var(--status-ok); color: #fff; }
.btn-success:hover { background: #175737; color: #fff; }

/* ==========================================================================
   7. Formuliervelden — vijf states (artboard 8 en 9)
   ========================================================================== */

label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.form-group { margin-bottom: 1.25rem; }

.form-control, .veld {
  display: block; width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--randsterk);
  border-radius: 8px;
  box-shadow: var(--schaduw-sm);
  box-sizing: border-box;
  transition: border-color .15s;
}
.form-control:hover, .veld:hover { border-color: var(--ink); }
.form-control:focus, .veld:focus {
  border: 2px solid var(--ink);
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
.form-control.is-fout, .veld.is-fout { border: 2px solid var(--status-err); }

.form-control:disabled, .veld:disabled {
  background: var(--uit-zacht);
  border-color: var(--uit-rand);
  color: var(--uit-tekst);
  cursor: default;
}

textarea.form-control, textarea.veld { min-height: 130px; height: auto; resize: vertical; }
select.form-control, select.veld { cursor: pointer; }

/* Foutmelding onder een veld — icoon plus tekst, niet alleen een rode rand. */
.veld-fout {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--status-err);
}

.veld-hulp { margin-top: 6px; font-size: 14px; color: var(--meta); }

/* Selectievakje en keuzerondje */
.form-check { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.form-check-input { width: 24px; height: 24px; margin: 0; accent-color: var(--petrol-900); flex-shrink: 0; }
.form-check-label { margin-bottom: 0; cursor: pointer; font-weight: 400; font-size: 16px; color: var(--body); }

/* ==========================================================================
   8. Meldingen — icoon, vetgedrukt woord, linkerbalk. Kleur nooit alleen.
   ========================================================================== */

.melding, .alert {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-left-width: 6px;
  border-radius: 12px;
  font-size: 16px;
}
.melding strong, .alert strong { font-weight: 700; }

.melding-info    { background: var(--status-info-vlak); border-color: var(--status-info); color: #12333F; }
.melding-ok,   .alert-success { background: var(--status-ok-vlak);   border-color: var(--status-ok);   color: #155033; }
.melding-warn                 { background: var(--status-warn-vlak); border-color: var(--status-warn); color: #6B4700; }
.melding-fout, .alert-danger  { background: var(--status-err-vlak);  border-color: var(--status-err);  color: #7E1B21; }

/* ==========================================================================
   9. Paginering en chips
   ========================================================================== */

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-left: 0; list-style: none;
}
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 12px;
  font-size: 16px; font-weight: 600;
  color: var(--petrol-900);
  background: #fff;
  border: 1px solid var(--randsterk);
  border-radius: 8px;
  text-decoration: none !important;
}
.page-link:hover { background: var(--petrol-50); color: var(--petrol-900); }
.page-item.active .page-link {
  background: var(--petrol-900);
  border-color: var(--petrol-900);
  color: #fff;
}
.page-item.disabled .page-link {
  border-color: var(--lijn);
  color: var(--meta);
  pointer-events: none;
}

/* Naast de paginering staat altijd "Pagina 1 van 3" als tekst. */
.paginering-tekst { font-size: 15px; color: var(--meta); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  font-size: 15px; font-weight: 600;
  color: var(--petrol-900);
  background: #fff;
  border: 1px solid var(--randsterk);
  border-radius: 9999px;
  text-decoration: none !important;
}
.chip:hover { background: var(--petrol-50); color: var(--petrol-900); }
/* Actief = gevuld vlak plus vinkje: twee dragers naast de kleur. */
.chip-actief { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }
.chip-actief:hover { background: var(--petrol-950); color: #fff; }
.chip-uit { border-color: var(--uit-rand); color: var(--uit-tekst); pointer-events: none; }

/* ==========================================================================
   10. Kaarten
   ========================================================================== */

.kaart {
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  box-shadow: var(--schaduw-sm);
  transition: border-color .15s, box-shadow .15s;
}
.kaart:hover { border-color: var(--petrol-900); box-shadow: var(--schaduw-md); }
.kaart:focus-within { outline: var(--focus-outline); outline-offset: 3px; }

.kaart-icoonvlak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--petrol-50);
  color: var(--petrol-900);
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.kaart:hover .kaart-icoonvlak { background: var(--petrol-900); color: #fff; }

/* Link onderaan een kaart: onderstreept, met een pijl die bij hover meebeweegt. */
.kaart-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  color: var(--petrol-900);
  text-decoration: underline; text-underline-offset: 4px;
}
.kaart-link i { transition: transform .15s; }
.kaart:hover .kaart-link { color: var(--koper-700); }
.kaart:hover .kaart-link i { transform: translateX(4px); }

/* Uitgelicht = gevuld donker vlak, dus vulling als drager en niet een tint. */
.kaart-uitgelicht { background: var(--petrol-900); border-color: var(--petrol-900); color: var(--opdonker); }
.kaart-uitgelicht h2, .kaart-uitgelicht h3 { color: #fff; }
.kaart-uitgelicht a { color: var(--koper-200); }

/* ==========================================================================
   10a. Homepagesecties — exact volgens artboard 1
   ========================================================================== */

/* USP-balk */
.usp-balk { background: var(--zand); border-bottom: 1px solid var(--lijn); padding: 34px 0; }
.usp-lijst {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  list-style: none; padding: 0; margin: 0;
}
@media (max-width: 767.98px) { .usp-lijst { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } }
.usp-item { display: flex; gap: 14px; align-items: flex-start; }
.usp-item > i { color: var(--petrol-900); font-size: 22px; margin-top: 2px; }
.usp-titel { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.usp-tekst { display: block; font-size: 15px; line-height: 1.5; color: var(--meta); }

/* Dienstenkaart */
.dienst-kaart {
  border: 1px solid var(--lijn); border-radius: 12px; padding: 30px; background: #fff;
  box-shadow: var(--schaduw-sm);
  display: flex; flex-direction: column; height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.dienst-kaart:hover { border-color: var(--petrol-900); box-shadow: var(--schaduw-md); }
.dienst-icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 8px;
  background: var(--petrol-50); color: var(--petrol-900);
  font-size: 22px; margin-bottom: 20px;
}
.dienst-titel { margin: 0 0 10px; font-family: 'Bitter', Georgia, serif; font-weight: 600; font-size: 23px; line-height: 1.3; color: var(--ink); }
.dienst-tekst { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--body); }
/* Geen margin-top:auto — in het ontwerp staat de link direct onder de tekst,
   niet onderaan de kaart uitgerekt. */
.dienst-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 16px; font-weight: 600; color: var(--petrol-900);
  text-decoration: underline; text-underline-offset: 4px;
}
.dienst-link i { font-size: 13px; transition: transform .15s; }
.dienst-kaart:hover .dienst-link { color: var(--koper-700); }
.dienst-kaart:hover .dienst-link i { transform: translateX(4px); }

/* Uitgelicht: gevuld petrol vlak — vulling als drager, niet een tint. */
.dienst-kaart.is-uitgelicht { background: var(--petrol-900); border-color: var(--petrol-900); }
.dienst-kaart.is-uitgelicht .dienst-icoon { background: rgba(255,255,255,.14); color: #fff; }
.dienst-kaart.is-uitgelicht .dienst-titel { color: #fff; }
.dienst-kaart.is-uitgelicht .dienst-tekst { color: var(--opdonker); }
.dienst-kaart.is-uitgelicht .dienst-link { color: #fff; }

/* Over ons — foto met zwevende cijferkaart */
.overons-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 72px; align-items: center;
}
@media (max-width: 1279.98px) { .overons-grid { grid-template-columns: minmax(0,1fr); gap: 56px; } }
.overons-beeld { position: relative; }
.overons-cijfer {
  position: absolute; right: -26px; bottom: -26px;
  background: #fff; border: 1px solid var(--lijn); border-radius: 12px;
  padding: 22px 26px; box-shadow: var(--schaduw-lg);
}
@media (max-width: 767.98px) { .overons-cijfer { right: 12px; bottom: -20px; } }
.overons-cijfer-waarde { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--petrol-900); }
.overons-cijfer-label { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--body); }

/* Videosectie — eigen donkere tint uit het ontwerp */
.video-sectie { background: #24373E; padding: 88px 0; }
.video-grid { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 56px; align-items: center; }
@media (max-width: 1279.98px) { .video-grid { grid-template-columns: minmax(0,1fr); gap: 32px; } }
.video-vlak {
  height: 340px; border-radius: 12px; background: #17272D; border: 1px dashed #5E7178;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #A8BBC1;
}
.video-knop {
  width: 76px; height: 76px; border-radius: 9999px;
  background: var(--koper-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}

/* Reviews */
.review-score {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 16px 22px;
}
.review-score-cijfer { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 32px; line-height: 1; color: #fff; }
.review-kaart { background: #fff; border-radius: 12px; padding: 30px; height: 100%; display: flex; flex-direction: column; }
/* De naamregel staat onderaan de kaart, zodat kaarten van ongelijke
   tekstlengte toch netjes uitlijnen. */
.review-voet {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--lijn);
}
.review-avatar {
  width: 42px; height: 42px; border-radius: 9999px; flex: none;
  background: var(--petrol-50); color: var(--petrol-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}

/* Nieuwsitem — losse foto boven de tekst, geen omkaderde kaart */
.nieuws-item { display: flex; flex-direction: column; gap: 18px; }
.nieuws-beeld { height: 210px; border-radius: 12px; overflow: hidden; }
.nieuws-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--meta);
}
.nieuws-titel { margin: 0 0 10px; font-family: 'Bitter', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.35; color: var(--ink); }
.nieuws-tekst { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--body); }

/* Nieuwsbrief */
.nieuwsbrief-balk {
  background: var(--koper-50); border-top: 1px solid var(--lijn);
  padding: 56px 0;
}
.nieuwsbrief-rij { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
@media (max-width: 1279.98px) { .nieuwsbrief-rij { flex-direction: column; align-items: flex-start; gap: 28px; } }

/* ==========================================================================
   10b. Accordeon (veelgestelde vragen)
   ========================================================================== */

.faq-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 24px;
  background: none; border: none;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink); text-align: left; cursor: pointer;
}
.faq-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid var(--petrol-900);
  color: var(--petrol-900);
  font-size: 13px;
}
/* Open = gevuld vlak met een minteken: vorm én icoon, niet alleen kleur. */
.faq-toggle.is-open { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }

.faq-antwoord { padding: 0 24px 22px; font-size: 17px; line-height: 1.7; }
.faq-antwoord p:last-child { margin-bottom: 0; }

/* ==========================================================================
   10c. Tijdlijn
   ========================================================================== */

.tijdlijn { position: relative; }
.tijdlijn-stap { position: relative; display: flex; gap: 24px; padding-bottom: 40px; }
.tijdlijn-stap:last-child { padding-bottom: 0; }

/* Verbindingslijn tussen de stappen */
.tijdlijn-stap:not(:last-child)::before {
  content: '';
  position: absolute; left: 21px; top: 44px; bottom: 0;
  width: 2px; background: var(--lijn);
}

.tijdlijn-stip {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 9999px;
  background: var(--petrol-900); color: #fff;
  font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 17px;
}
/* De laatste of huidige stap: koper vlak met vlag-icoon. */
.tijdlijn-stip.is-nu { background: var(--koper-600); }

.tijdlijn-inhoud { padding-top: 6px; }

/* Tijdlijn als paginablok (src/PageBlockRenderer.php, case 'tijdlijn').
   Dezelfde opmaak als de plugin, maar met eigen klassenamen. */
.cb-block-tijdlijn { list-style: none; padding: 0; margin: 0; }
.tijdlijn-datum {
  margin: 0;
  font-family: 'Bitter', Georgia, serif; font-weight: 600;
  font-size: 20px; color: var(--petrol-900);
}
.tijdlijn-titel {
  margin: 4px 0 0;
  font-family: 'Bitter', Georgia, serif; font-weight: 600;
  font-size: 24px; line-height: 1.3; color: var(--ink);
}
.tijdlijn-tekst { margin-top: 8px; font-size: 16px; line-height: 1.7; }
.tijdlijn-tekst p { margin: 0 0 .8em; }
.tijdlijn-tekst p:last-child { margin-bottom: 0; }

/* ==========================================================================
   10d. Prijstabel
   ========================================================================== */

.prijs-kaart.is-uitgelicht {
  border: 2px solid var(--petrol-900);
  box-shadow: var(--schaduw-lg);
}
/* De badge steekt 14 px boven de kaartrand uit. */
.prijs-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  z-index: 2; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px;
  background: var(--petrol-900); color: #fff;
  border-radius: 9999px;
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
}

/* Badges — altijd icoon of tekst erbij, nooit alleen een kleurvlak. */
.badge-categorie {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: var(--petrol-50);
  color: var(--petrol-900);
  border-radius: 6px;
  font-size: 14px; font-weight: 600;
}
.badge-uitgelicht {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  background: var(--koper-50);
  color: var(--koper-700);
  border-radius: 6px;
  font-size: 14px; font-weight: 600;
}

/* ==========================================================================
   10e. Detailpagina's — inhoud met zijkolom
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1440px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; }
}

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1440px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; }
  .detail-zijkolom { position: sticky; top: 96px; align-self: start; }
}

/* Lightbox — puur Alpine, geen extra library. */
.lightbox {
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(23,32,35,.94);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
}
.lightbox-beeld { max-width: 90vw; max-height: 85vh; border-radius: 12px; }
.lightbox-sluit {
  position: absolute; top: 20px; right: 20px;
  width: 48px; height: 48px; border-radius: 9999px;
  border: 2px solid #fff; background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-sluit:focus-visible { outline: 3px solid var(--koper-200); outline-offset: 2px; }

/* Inleiding van een artikel: de koperen streep links maakt het onderscheid,
   niet een afwijkende tekstkleur. */
.artikel-lead {
  margin: 20px 0 0;
  padding-left: 22px;
  border-left: 4px solid var(--koper-600);
  font-size: 21px; line-height: 1.65;
  color: var(--body);
  max-width: 760px;
}

/* Specificatietabel op de projectpagina — zebra vanaf de tweede regel. */
.specificaties {
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
  max-width: 760px;
}
.specificatie-rij {
  margin: 0;
  padding: 12px 20px;
  font-size: 16px;
  border-bottom: 1px solid var(--lijn);
}
.specificatie-rij:last-child { border-bottom: none; }
.specificatie-rij:nth-child(even) { background: var(--zand); }

/* Kenmerken op de productpagina: label links, waarde rechts. */
.specificatie-paar {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px;
}
@media (max-width: 767.98px) {
  .specificatie-paar { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Webshop: filterkolom links, producten rechts */
.webshop-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) {
  .webshop-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
  .webshop-filter { position: sticky; top: 96px; align-self: start; }
}

.webshop-balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
  padding-bottom: 16px; border-bottom: 1px solid var(--lijn);
}
.webshop-sorteer { display: flex; align-items: center; gap: 10px; }
.webshop-sorteer label { margin: 0; white-space: nowrap; font-weight: 400; }
.webshop-sorteer .veld { width: auto; min-width: 200px; min-height: 44px; padding: 8px 14px; }

.filter-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 16px; color: var(--body);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.filter-link:hover { background: var(--petrol-50); color: var(--ink); }
/* Actief = gevuld vlak, vinkje én vet: drie dragers, niet alleen kleur. */
.filter-link.is-actief {
  background: var(--petrol-900); color: #fff; font-weight: 600;
  border-left-color: var(--koper-600);
}
.filter-link.is-actief:hover { background: var(--petrol-950); color: #fff; }
.filter-aantal { font-size: 14px; color: var(--meta); }
.filter-link.is-actief .filter-aantal { color: var(--koper-200); }

/* Zwevende foutmelding in de webshop */
.webshop-toast {
  display: none;
  position: fixed; top: 24px; right: 24px; z-index: 1070;
  max-width: 360px;
  box-shadow: var(--schaduw-lg);
}

/* Stappenbalk winkelwagen -> gegevens -> overzicht -> betaling.
   De actieve stap heeft een gevuld vlak én een vinkje, niet alleen kleur. */
.stappen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 40px; }
.stap {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--meta);
}
.stap-nu { font-weight: 600; color: var(--ink); }
.stap-klaar { color: var(--status-ok); }
.stappen .fa-chevron-right { font-size: 10px; color: var(--meta); }

/* ==========================================================================
   11. Kruimelpad
   ========================================================================== */

.kruimelpad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.kruimelpad a { color: var(--body); text-decoration: underline; text-underline-offset: 4px; }
.kruimelpad a:hover { color: var(--koper-700); }
.kruimelpad [aria-current="page"] { font-weight: 600; color: var(--ink); text-decoration: none; }
.kruimelpad i { color: var(--meta); font-size: 10px; }

/* ==========================================================================
   12. Paginainhoud (rich text uit de editor)
   ========================================================================== */

#paginainhoud { max-width: 760px; }
#paginainhoud.paginainhoud-breed { max-width: none; }
/* De 404 zet FrontendHandler in Default.html; daar kan geen extra klasse bij.
   Deze pagina is een eigen opmaak en hoort niet in de leeskolom van 760 px,
   want dan staat hij zichtbaar links van het midden. */
#paginainhoud:has(> .pagina-404) { max-width: none; }
#paginainhoud h2 { font-size: 30px; line-height: 1.25; margin-top: 1.6em; margin-bottom: .5em; }
#paginainhoud h3 { margin-top: 1.5em; margin-bottom: .5em; }
#paginainhoud p  { font-size: 18px; line-height: 1.8; margin-bottom: 1em; }
#paginainhoud a  { text-decoration: underline; text-underline-offset: 4px; }

/* Blokken uit de blokken-editor (src/PageBlockRenderer.php).
   Nieuws, diensten en projecten bouwen hun inhoud hiermee op. */
.cb-block { margin-bottom: 1.2em; }
.cb-block:last-child { margin-bottom: 0; }
h2.cb-block-kop {
  font-family: 'Bitter', Georgia, serif; font-weight: 600;
  font-size: 30px; line-height: 1.25; color: var(--ink);
  margin: 1.6em 0 .5em;
}
h2.cb-block-kop:first-child { margin-top: 0; }
.cb-block-tekst p { font-size: 18px; line-height: 1.8; margin: 0 0 1em; }
.cb-block-tekst p:last-child { margin-bottom: 0; }
.cb-block-tekst ul, .cb-block-tekst ol { margin: 16px 0 16px 20px; padding: 0 0 0 10px; }
.cb-block-tekst li { margin-bottom: 8px; }
.cb-block-tekst li::marker { color: var(--koper-600); }

/* Container: een vak met een eigen breedte, opgedeeld in kolommen.
   De breedte en de kolomindeling komen als inline stijl uit de renderer. */
.cb-block-container { margin-bottom: 2em; }
.cb-block-container .cb-kolom { min-width: 0; display: flex; flex-direction: column; }
.cb-block-container .cb-kolom > .cb-block:last-child { margin-bottom: 0; }

/* Onder 768 staan de kolommen onder elkaar en gebruikt de container de
   volle breedte; een container van 50% is op een telefoon onleesbaar. */
@media (max-width: 767.98px) {
  .cb-block-container { width: 100% !important; }
  .cb-block-container .cb-kolommen { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
}

.cb-block-foto img,
.cb-block-galerij img { border-radius: 12px; }
.cb-block-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

.cb-block-button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  background: var(--koper-600); color: #fff;
  border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.cb-block-button:hover { background: var(--koper-700); color: #fff; }

#paginainhoud ul:not([class]),
#paginainhoud ol:not([class]) { margin: 16px 0 16px 20px; padding: 0 0 0 10px; }
#paginainhoud ul:not([class]) li,
#paginainhoud ol:not([class]) li { margin-bottom: 8px; }
#paginainhoud ul:not([class]) li::marker { color: var(--koper-600); }

/* ==========================================================================
   13. Nog aanwezige Bootstrap-resten uit /Modules/-standaardtemplates
   ========================================================================== */

.collapse:not(.show) { display: none; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .35s ease; }