/*
Theme Name: Carblogger2026
Theme URI: https://www.carblogger.nl
Author: Patrick van Eck
Author URI: https://www.carblogger.nl
Description: Modern WordPress thema voor Carblogger.nl — automotive blog met kenteken lookup (RDW/OVI API), bijtelling calculator, brandstofprijzen BeNeLux en merk/model filtering. Vereiste plugins: Yoast SEO (breadcrumbs), WP-PostViews (weergaveteller), Contact Form 7 (contactformulier). Aanbevolen: TablePress (tabellen in content), Akismet Anti-Spam (reactiebeveiliging).
Version: 1.0
Requires at least: 6.4
Requires PHP: 8.1
Requires Plugins: wordpress-seo, contact-form-7, wp-postviews
Text Domain: carblogger
*/

/* ==========================================================================
   CSS Custom Properties — gebaseerd op de carblogger2016 huisstijl
   ========================================================================== */
:root {
  /* Primaire kleur = Carblogger-blauw (links, knoppen) */
  --color-primary:       #1982d1;
  --color-primary-dark:  #1267ab;

  /* Navigatiebalk */
  --color-secondary:     #000000;
  --color-secondary-600: #222222;

  /* Geel accent (categorie-badges, titels) */
  --color-accent:        #ffcc00;
  --color-accent-dark:   #e6b800;
  --color-accent-text:   #1a1a1a;   /* tekst OP gele achtergrond */

  --color-text:          #222222;
  --color-text-muted:    #777777;
  --color-bg:            #ffffff;
  --color-bg-alt:        #e6e6e6;   /* grijze pagina-achtergrond */
  --color-bg-dark:       #1a1a1a;   /* footer */
  --color-border:        #d2d5d7;
  --color-success:       #2dc653;
  --color-warning:       #fca311;

  --font-heading: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', 'Segoe UI', sans-serif;

  --radius:    4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow:    0 2px 10px rgba(0,0,0,.12);
  --shadow-lg: 0 6px 24px rgba(0,0,0,.16);

  --max-width:      1200px;
  --sidebar-width:  330px;
  --gap:            1.5rem;
  --header-height:  53px;

  --transition: .2s ease;
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
html[data-theme="dark"] {
  --color-text:          #e2e2e2;
  --color-text-muted:    #888888;
  --color-bg:            #252525;
  --color-bg-alt:        #181818;
  --color-bg-dark:       #0f0f0f;
  --color-border:        #3a3a3a;
  --color-secondary:     #f0f0f0;
  --color-secondary-600: #cccccc;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
  --shadow:    0 2px 10px rgba(0,0,0,.4);
  --shadow-lg: 0 6px 24px rgba(0,0,0,.5);
}

html[data-theme="dark"] .header-searchbar {
  background: #1c1c1c;
}
html[data-theme="dark"] .header-searchbar input[type="search"] {
  background: #2a2a2a;
  color: var(--color-text);
  border-color: var(--color-border);
}
html[data-theme="dark"] .header-searchbar input[type="search"]::placeholder {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .tabs li.active {
  background: #333;
  color: var(--color-text);
}
html[data-theme="dark"] img {
  filter: brightness(.92);
}

html[data-theme="dark"] .tablepress,
html[data-theme="dark"] .tablepress th,
html[data-theme="dark"] .tablepress td {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .tablepress thead th,
html[data-theme="dark"] .tablepress .column-1 {
  background: #2e2e2e !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .tablepress .odd td {
  background: var(--color-bg) !important;
}

html[data-theme="dark"] .tablepress .even td {
  background: #2a2a2a !important;
}

html[data-theme="dark"] .tablepress .row-hover tr:hover td {
  background: #333 !important;
}

html[data-theme="dark"] .tablepress-table-description {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .post-sharing a {
  background: #444;
  color: #fff;
}
html[data-theme="dark"] .post-sharing a:hover {
  background: var(--color-primary);
}

html[data-theme="dark"] .site-nav.is-open {
  background: #111;
}
html[data-theme="dark"] .site-nav.is-open .sub-menu {
  background: rgba(255,255,255,.05);
}

/* Toggle knop */
.btn-darkmode {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  font-size: 1.05rem;
  padding: .4rem .45rem;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.btn-darkmode:hover { color: var(--color-accent); }
.btn-darkmode .icon-sun  { display: none; }
html[data-theme="dark"] .btn-darkmode .icon-moon { display: none; }
html[data-theme="dark"] .btn-darkmode .icon-sun  { display: block; }

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Dubbeltik-zoom op iOS uitschakelen bij tikbare elementen (o.a. het menu-icoon);
   pinch-zoom (knijpen) blijft gewoon werken, dus bezoekers kunnen zelf inzoomen. */
a, button, input, select, textarea, label,
summary, [role="button"], .menu-toggle {
  touch-action: manipulation;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg-alt);
}

img { max-width: 100%; height: auto; display: block; }
a { color: #1982d1; text-decoration: none; }
a:hover { color: #1267ab; text-decoration: underline; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 .75rem;
  color: var(--color-secondary);
}

h1 { font-size: 2.6rem; font-weight: 900; }
h2 { font-size: 1.55rem; font-weight: 800; }
h3 { font-size: 1.2rem;  font-weight: 700; }
h4 { font-size: 1rem;    font-weight: 700; }

p { margin: 0 0 1.1rem; }

ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; }

table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .5rem .75rem; border: 1px solid var(--color-border); text-align: left; }
th { background: var(--color-bg-alt); font-family: var(--font-heading); }

code, pre {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .9em;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}
pre { padding: 1rem; overflow-x: auto; }
code { padding: .15em .4em; }

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }

/* ==========================================================================
   Layout Utilities
   ========================================================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Site Header — zwarte navigatiebalk met blauwe onderlijn (carblogger stijl)
   ========================================================================== */
.site-header {
  background: #000;
  border-bottom: 2px solid #0000bb;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-height);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-logo:hover { color: var(--color-primary); text-decoration: none; }

.site-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Navigation */
.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
}

.site-nav .navbar,
.site-nav ul.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.site-nav .navbar li,
.site-nav ul.menu li {
  position: relative;
}

.site-nav .navbar a,
.site-nav ul.menu a {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: 0 1.3em;
  height: var(--header-height);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-heading);
  text-decoration: none;
  transition: background var(--transition);
}

.site-nav .navbar a:hover,
.site-nav ul.menu a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.site-nav .navbar .current-menu-item > a,
.site-nav ul.menu .current-menu-item > a {
  background: transparent;
  color: #fff;
  font-weight: 700;
}
.site-nav .navbar .current-menu-item > a:hover,
.site-nav ul.menu .current-menu-item > a:hover {
  background: rgba(255,255,255,.1);
}

/* Dropdown */
.site-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 275px;
  background: #f9f9f9;
  border: none;
  box-shadow: var(--shadow);
  z-index: 999;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav .sub-menu li { list-style: none; }

.site-nav li:hover > .sub-menu { display: flex; }

/* Third-level dropdown: fly out to the right of the parent item */
.site-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Chevron on sub-menu items that have a child menu */
.site-nav .sub-menu li.menu-item-has-children > a::after {
  content: ' ›';
  float: right;
  opacity: .5;
  margin-left: .5rem;
}

/* Submenu toggle button — hidden on desktop, shown only in mobile nav */
.submenu-toggle {
  display: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  padding: .6rem 1.2rem;
  font-size: .95rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition);
}
.submenu-toggle:hover { color: #fff; }

.site-nav .sub-menu a {
  height: auto;
  line-height: 1;
  padding: 15px;
  text-transform: none;
  font-size: .9em;
  font-weight: normal;
  color: #444;
  border-bottom: 1px dotted #ddd;
  background: #f9f9f9;
}

.site-nav .sub-menu a:hover {
  background: #efefef;
  color: #373737;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.header-search-btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  padding: .5rem .6rem;
  border-radius: var(--radius);
  font-size: 1.1rem;
  transition: background var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  line-height: 1;
}

.header-search-btn:hover,
.header-search-btn[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; }

/* Search bar */
.header-searchbar {
  position: absolute;      /* schuift over de content i.p.v. die weg te duwen */
  top: 100%;
  left: 0;
  right: 0;
  background: #1c1c1c;   /* altijd donker, ongeacht licht/donker thema */
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.header-searchbar.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Verduistert + vervaagt de rest van de pagina als het zoekscherm open is.
   z-index 990 = onder de header (1000, dus nav blijft scherp) en boven content. */
.search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;              /* alleen klikbaar als 'ie via JS open is */
  transition: opacity .2s ease, visibility .2s;
}
.search-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Breed scherm: dim/blur de pagina zodra een uitklapmenu (hover-submenu) open
   staat. De backdrop blijft niet-klikbaar (pointer-events:none), zodat je de
   menu-items en de content eronder gewoon kunt gebruiken. */
@media (min-width: 1101px) {
  body:has(.site-nav .menu-item-has-children:hover) .search-backdrop {
    opacity: 1;
    visibility: visible;
  }
}

.header-searchbar .search-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;   /* extra ruimte onder de zoekvelden */
}

.cb-search-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 .75rem;
}

/* Trio-zoekpaneel: tabs (Zoeken / Merk-model / Vraag AI) + wisselende panes */
.cb-search-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .6rem;
}

.cb-search-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border: 1.5px solid #3a3a3a;
  border-radius: 999px;
  background: transparent;
  color: #cfcfcf;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.cb-search-tab:hover { color: #fff; border-color: var(--color-primary); }
.cb-search-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.cb-search-pane { display: none; }
.cb-search-pane.is-active { display: flex; gap: 0; }        /* Zoeken: input + knop aaneen */

/* Merk/model-tab */
.cb-search-merk.is-active { gap: .5rem; flex-wrap: wrap; }
.cb-search-merk select {
  flex: 1;
  min-width: 140px;
  padding: .5rem .75rem;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;                 /* vaste donkere tekst, ook in donker thema */
  font-size: .95rem;
  cursor: pointer;
}
.cb-search-merk select option { color: #1a1a1a; background: #fff; }
.cb-search-merk select:disabled { background: #e9e9e9; color: #8a8a8a; cursor: not-allowed; }

/* Vraag AI-tab (het antwoordpaneel .ai-search-panel wordt verderop gestyled) */
.cb-search-ai { position: relative; }
.cb-search-ai.is-active { gap: .5rem; }
#ai-search-input {
  flex: 1;
  min-width: 0;
  padding: .5rem .9rem;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  font-size: 16px;                /* 16px = geen automatische iOS-zoom bij focus */
}
#ai-search-input::placeholder { color: #8a8a8a; }

.header-searchbar input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  padding: .5rem .9rem;
  border: 1.5px solid var(--color-border);
  border-right: none;
  border-radius: 3px 0 0 3px;
  background: #fff;
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--font-body);
  outline: none;
  box-shadow: none;
  transition: border-color var(--transition);
}

.header-searchbar input[type="search"]::-webkit-search-cancel-button,
.header-searchbar input[type="search"]::-webkit-search-decoration { display: none; }
.header-searchbar input[type="search"]::placeholder { color: var(--color-text-muted); }
.header-searchbar input[type="search"]:focus { border-color: var(--color-primary); }

.btn-search-submit {
  flex-shrink: 0;
  padding: .5rem 1.1rem;
  background: var(--color-primary);
  color: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.btn-search-submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: .5rem;
  font-size: 1.4rem;
}

/* ==========================================================================
   Page Layout
   ========================================================================== */
.page-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.content-area {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--gap);
  align-items: start;
}

/* .content-area--breed (sjabloon zonder zijbalk) staat bewust niet hier: het
   thema heeft zelf geen sjabloon dat hem gebruikt. De twee plugins die er één
   hebben — carblogger-laadpalen en cb-autobeurzen — leveren de klasse elk in hun
   eigen stylesheet mee, zodat hun pagina ook onder een ander thema klopt. */

.main-content { min-width: 0; }

/* ==========================================================================
   Post Cards (list views)
   ========================================================================== */
.posts-grid {
  display: grid;
  /* Kolom vastzetten op de containerbreedte. Zonder dit is de kolom 'auto'
     (inhoud-gestuurd): een door Google Auto Ads ingevoegde brede advertentie
     rekt de kolom dan op, waardoor alle kaarten uit het midden schuiven. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Houd automatisch geplaatste AdSense-advertenties binnen de grid-kolom,
   zodat ze de layout niet breder kunnen maken dan het scherm. */
.posts-grid > .google-auto-placed,
.posts-grid ins.adsbygoogle { max-width: 100% !important; }

/* Zones waar AdSense Auto ads níets mag plaatsen (bijv. in een datatabel, waar
   een tussengeschoven advertentie de kolommen uit elkaar trekt). Het echte slot
   op de rem is "Uitgesloten gebieden" in AdSense zelf — daar de CSS-selector van
   de betreffende container invullen. Dit is het vangnet in de pagina zelf; de
   opruimer in main.js verwijdert de container ook daadwerkelijk uit de DOM. */
.cb-geen-autoads .google-auto-placed,
.cb-geen-autoads ins.adsbygoogle { display: none !important; }

/* Handmatig gepositioneerde advertentieslots — zie inc/ads.php / cb26_ad(). */
.cb-ad {
  margin: 1.5rem 0;
  text-align: center;
  overflow: hidden;
}

.cb-ad-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .4rem;
}

/* Alleen zichtbaar voor beheerders: gestippelde placeholder op de gereserveerde
   plek, ook als er nog geen slot-ID is ingevuld. */
.cb-ad--placeholder {
  border: 2px dashed var(--color-primary);
  border-radius: 6px;
  padding: 1.5rem 1rem;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.cb-ad--placeholder span {
  display: block;
  font-weight: 700;
}

.cb-ad--placeholder small {
  display: block;
  margin-top: .25rem;
  font-size: .8rem;
  opacity: .8;
}

.post-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.post-card-thumb {
  display: block;        /* <a> is inline; blok activeert overflow-clipping + hover-zoom */
  overflow: hidden;
  background: var(--color-bg-alt);
}

.post-card-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;    /* ratio op de img zelf = breedte-gedreven → herberekent bij iPad-rotatie */
  height: auto !important; /* géén height:100% meer: dat brak bij portrait→landscape op iPad */
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.post-card:hover .post-card-thumb img { transform: scale(1.04); }

.post-card-body { padding: 1.25rem; }

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: .65rem;
  align-items: center;
}

.post-card-meta a { color: var(--color-text-muted); }
.post-card-meta a:hover { color: var(--color-primary); text-decoration: none; }

/* Categorievakje in de overzichten: zwarte letters op de gele achtergrond
   (hogere specificiteit dan '.post-card-meta a'). */
.post-card-meta .post-cat-badge,
.post-card-meta .post-cat-badge:hover { color: #000; }

.post-cat-badge {
  background: var(--color-accent);
  color: var(--color-accent-text);
  padding: 6px 10px 5px;
  border-radius: 0;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
}

.post-card-title {
  font-weight: 800;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  line-height: 1.3;
}

.post-card-title a {
  color: var(--color-secondary);
  text-decoration: none;
}

.post-card-title a:hover { color: var(--color-primary); text-decoration: none; }

.post-card-teaser {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0 0 .6rem;
  line-height: 1.5;
}

.post-card-excerpt {
  font-size: .9rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Compacte post card (horizontaal, geen excerpt)
   ========================================================================== */
.post-card--compact {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.post-card-thumb-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.post-card-thumb-compact.no-thumb {
  background: #e8e8e8;
  color: #bbb;
  font-size: 1.8rem;
}

.post-card-thumb-compact img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform .4s ease;
}

.post-card--compact:hover .post-card-thumb-compact img { transform: scale(1.04); }

.post-card-body-compact {
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.post-card-topmeta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

.post-cat-badge--compact {
  background: #edf2f7;
  color: #4a5568;
  padding: 1px 5px;
  border-radius: var(--radius);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}

.post-cat-badge--compact:hover { background: #dce9f5; color: var(--color-primary); text-decoration: none; }

/* Merkenoverzicht (page-merken.php): tegels met logo of nette placeholder */
.merken-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.merk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  text-decoration: none;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color .2s, box-shadow .2s;
}
.merk-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
/* Vaste logo-zone zodat alle namen op dezelfde hoogte uitlijnen, met of zonder logo. */
.merk-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-bottom: .6rem;
}
.merk-card-logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  object-fit: contain;
}
/* Placeholder als er geen logo is: de merkinitiaal in een rond vlak. */
.merk-card-logo--empty {
  width: 60px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
}
.merk-card-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-secondary);
}
.merk-card-count {
  display: block;
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-top: .25rem;
}

/* Merklogo bovenaan de individuele merktag-pagina. */
.archive-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin: 0 0 .6rem;
}

.post-card-comments,
.post-card-views {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .78rem;
  color: var(--color-text-muted);
}

.post-card-body-compact .post-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-sub {
  font-size: .85rem;
  color: var(--color-text);
  margin: 0 0 .2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-date {
  display: block;
  font-size: .75rem;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .post-card-thumb-compact { width: 110px; }
}

/* ==========================================================================
   Post card footer
   ========================================================================== */

/* ==========================================================================
   Single Post
   ========================================================================== */
.post-single {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.post-hero {
  background: var(--color-bg-alt);
  line-height: 0;
  margin: 0;
  position: relative;
}

.post-hero img { width: 100%; height: auto !important; display: block; }

.post-hero-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 1.4;
  padding: .2rem .5rem;
  font-size: .72rem;
  font-style: italic;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.45);
  border-radius: 2px 0 0 0;
}

.post-header, .post-body {
  padding: 1.25rem 1.5rem;
}

.post-header {
  border-bottom: 1px solid var(--color-border);
  padding-top: .75rem;
  padding-bottom: .9rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-bottom: .45rem;
  align-items: center;
}

.post-meta a { color: inherit; }
.post-meta a:hover { color: var(--color-primary); }

/* Categorievakje: zwarte letters op de gele achtergrond. Hogere specificiteit
   dan '.post-meta a', anders erven de letters de grijze meta-kleur. */
.post-meta .post-cat-badge,
.post-meta .post-cat-badge:hover { color: #000; }

.post-meta-comments {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--color-primary) !important;
  font-weight: 600;
}

.post-title {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--color-secondary);
}

.post-body {
  font-size: 1rem;
  line-height: 1.8;
}

.post-body h2 { font-size: 1.3rem; margin-top: 2rem; }
.post-body h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.post-body h4 { font-size: 1rem; margin-top: 1.25rem; }

.post-body table { margin-bottom: 2rem; }

.post-body .wp-block-image,
.post-body figure { margin: 1.5rem 0; }

/* Uitgelijnde figures (bijv. afbeelding mét bijschrift: <figure class="wp-caption
   alignleft">) moeten hun horizontale marge behouden, anders loopt de tekst er
   strak langs. Deze regels winnen qua specificiteit van .post-body figure. */
.post-body figure.alignleft,
.post-body .wp-block-image.alignleft  { margin: .5rem 1.5rem 1rem 0; }
.post-body figure.alignright,
.post-body .wp-block-image.alignright { margin: .5rem 0 1rem 1.5rem; }
.post-body figure.aligncenter,
.post-body .wp-block-image.aligncenter { margin: 1rem auto; }

.post-body iframe,
.post-body .fluid-video { width: 100%; aspect-ratio: 16/9; height: auto; }

/* Externe links (zie inc/external-links.php): klein icoontje achter de tekst.
   currentColor + mask → past zich aan de linkkleur en het donkere thema aan.
   :not(:has(img)) laat links om een afbeelding met rust. */
.post-body a.cb-ext-icon:not(:has(img))::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .28em;
  vertical-align: baseline;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M14%203h7v7h-2V6.4l-9.3%209.3-1.4-1.4L17.6%205H14V3z'/%3E%3Cpath%20d='M19%2019H5V5h6V3H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-6h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M14%203h7v7h-2V6.4l-9.3%209.3-1.4-1.4L17.6%205H14V3z'/%3E%3Cpath%20d='M19%2019H5V5h6V3H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-6h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.post-comments {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--color-border);
}

/* Post navigation (vorig / volgend artikel) */
.post-navigation {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.post-navigation .nav-links {
  display: flex;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  flex: 1;
}

.post-navigation .nav-next {
  text-align: right;
  border-left: 1px solid var(--color-border);
}

.post-navigation a {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  height: 100%;
  transition: background var(--transition);
}

.post-navigation a:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.post-navigation .nav-label {
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.post-navigation .nav-next .nav-label {
  justify-content: flex-end;
}

.post-navigation .nav-title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 500px) {
  .post-navigation .nav-links { flex-direction: column; }
  .post-navigation .nav-next { text-align: left; border-left: none; border-top: 1px solid var(--color-border); }
  .post-navigation .nav-next .nav-label { justify-content: flex-start; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lb-overlay.is-open { display: flex; }

.lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 2rem);
  max-height: 100vh;
  gap: .6rem;
}

.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  cursor: default !important;
}

.lb-caption {
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  text-align: center;
  margin: 0;
}

.lb-counter {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  font-family: var(--font-heading);
  letter-spacing: .05em;
  pointer-events: none;
}

.lb-close {
  position: fixed;
  top: .75rem;
  right: 1rem;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.lb-close:hover { background: rgba(255,255,255,.25); }

.lb-prev,
.lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  z-index: 10000;
}
.lb-prev { left: .75rem; }
.lb-next { right: .75rem; }
.lb-prev:hover,
.lb-next:hover { background: rgba(255,255,255,.3); }
.lb-prev[hidden],
.lb-next[hidden] { display: none !important; }

@media (max-width: 600px) {
  .lb-stage { max-width: 100vw; }
  .lb-prev, .lb-next { width: 2.2rem; height: 2.2rem; font-size: .9rem; }
}

/* Social sharing */
/* Post-footer: tags (links) + universele deelknop (rechts) onderaan het artikel. */
.post-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

.post-tags-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.post-tags-label { color: var(--color-text-muted); }

.post-tags-bottom a {
  display: inline-block;
  padding: .25rem .6rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  font-size: .8rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.post-tags-bottom a:hover { background: var(--color-primary); color: #fff; text-decoration: none; }

/* Universele deelknop + popup */
.cb-share { position: relative; display: inline-block; }

.cb-share-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--transition);
}

.cb-share-toggle:hover { background: var(--color-primary-dark); }

.cb-share-popup {
  /* Vast t.o.v. de viewport + met JS gepositioneerd: zo wordt de popup niet
     afgekapt door een overflow:hidden-ouder (artikelkaart) en blijft hij altijd
     binnen het scherm, ongeacht of de knop links of rechts staat. */
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  padding: .35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.cb-share-popup[hidden] { display: none; }

.cb-share-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cb-share-option:hover { background: var(--color-bg-alt); text-decoration: none; }
.cb-share-option i { width: 1.15em; text-align: center; font-size: 1.05rem; }
.cb-share-wa i { color: #25d366; }

/* Gerelateerde artikelen (embedding-nabijheid) */
/* Gerelateerde artikelen worden op twee plekken gerenderd; CSS bepaalt welke
   zichtbaar is. Desktop: in de sidebar (witte kaart). Smal scherm: in het
   artikel, tussen de deelknoppen en de reacties (sectie met scheidingslijn). */

/* In het artikel (de mobiele plek): sectie met scheidingslijn, geen losse kaart.
   Standaard verborgen — op desktop gebruiken we de sidebar-versie. */
.main-content .related-posts {
  display: none;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--color-border);
}

/* In de sidebar (desktop): witte widget-kaart, net als de overige widgets. */
.sidebar .related-posts {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Smalle schermen: sidebar zakt onder het artikel, dus tonen we de versie in
   het artikel (tussen deelknoppen en reacties) en verbergen die in de sidebar. */
@media (max-width: 900px) {
  .main-content .related-posts { display: block; }
  .sidebar .related-posts { display: none; }
}

.related-posts-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 1rem;
  color: var(--color-secondary);
}

/* Past zich vanzelf aan de kolombreedte aan: in de smalle sidebar (desktop)
   komt alles onder elkaar; in de volle-breedte sidebar (mobiel/tablet) naast
   elkaar. */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.related-card { display: block; text-decoration: none; color: var(--color-text); }

.related-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.related-thumb img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.related-card:hover .related-thumb img { transform: scale(1.05); }

.related-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.35;
  margin: .5rem 0 .2rem;
  color: var(--color-secondary);
}

.related-card:hover .related-card-title { color: var(--color-primary); }

.related-card-date { font-size: .72rem; color: var(--color-text-muted); }
.related-card-views { display: inline-block; margin-top: .15rem; font-size: .72rem; color: var(--color-text-muted); }
.related-card-views .fa-eye { opacity: .7; margin-right: .15rem; }

/* ==========================================================================
   Page Template
   ========================================================================== */
.page-single {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.page-header-wrap {
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.page-single .post-body {
  padding: 1.75rem 2rem;
}

.page-title {
  font-size: 1.9rem;
  font-weight: 900;
  margin: 0;
  color: var(--color-secondary);
  font-family: var(--font-heading);
}

/* ==========================================================================
   Archive / Category Header
   ========================================================================== */
.archive-header {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.archive-title {
  font-size: 1.5rem;
  margin: 0 0 .3rem;
}

.archive-description {
  color: var(--color-text-muted);
  margin: 0;
  font-size: .95rem;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
/* min-width:0 → grid-item mag krimpen. contain:layout paint isoleert de
   sidebar als eigen layout-/paint-container: Firefox liet bij het slepen van
   het venster (grid-track-wissel rond 900px) een verouderd frame van de
   sidebar over de artikelen staan; met containment hertekent hij dit gebied
   los en kan de inhoud niet meer buiten de eigen kolom "uitlekken". */
.sidebar { min-width: 0; contain: layout paint; }

.widget {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.widget-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 10px;
}

.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: .4rem 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--color-text); }
.widget ul li a:hover { color: var(--color-primary); text-decoration: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  line-height: 1.2;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn-secondary {
  background: var(--color-secondary);
  color: #fff;
}
.btn-secondary:hover { background: var(--color-secondary-600); color: #fff; }

/* In dark mode is --color-secondary juist licht → knop + tekst allebei wit.
   Vaste donkere knop met witte tekst zodat 'Ophalen' leesbaar blijft. */
html[data-theme="dark"] .btn-secondary { background: #3a3a3a; color: #fff; }
html[data-theme="dark"] .btn-secondary:hover { background: #4a4a4a; color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

.btn-sm { padding: .4rem .9rem; font-size: .85rem; }
.btn-lg { padding: .85rem 1.75rem; font-size: 1.05rem; }

/* Load more */
.load-more-wrap { text-align: center; margin-top: 2rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .35rem;
  color: var(--color-secondary);
}

.form-control {
  display: block;
  width: 100%;
  padding: .6rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}

select.form-control { cursor: pointer; }

input[type="submit"], button[type="submit"] {
  cursor: pointer;
}

/* ==========================================================================
   Kenteken Lookup
   ========================================================================== */
.kenteken-lookup-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  margin-bottom: 2rem;
}

.kenteken-lookup-card h2 {
  font-size: 1.4rem;
  margin-bottom: .4rem;
}

.kenteken-input-row {
  display: flex;
  gap: .75rem;
  margin: 1rem 0;
}

/* Kenteken-invoerveld als realistische gele plaat (blauwe EU-strook via de
   PNG + het 'Kenteken'-font uit kenteken/kentekenplaat.css). */
input#kenteken {
  flex: 0 0 auto;      /* niet door flex laten schalen: in een kolom zou de
                          flex-basis anders de hóógte worden i.p.v. de breedte */
  width: 314px;
  max-width: 100%;
  height: 66px;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  background-color: rgb(255, 199, 0);
  background-image: url("kenteken/img/kentekenplaat/kentekenplaat-M.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
  color: #000;
  font-family: 'Kenteken', Helvetica, Arial, sans-serif;
  font-size: 40px;
  line-height: 66px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px 0 44px;   /* links ruimte voor de blauwe EU-strook */
  text-shadow: 1px 1px 1px rgba(0,0,0,.2), -2px -2px 2px rgba(248,216,103,1);
}

input#kenteken::placeholder { color: rgba(0,0,0,.4); letter-spacing: 1px; }

input#kenteken:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Auto-gegevens (RDW) in één vak onder de kentekenplaat. */
.car-result-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-top: .85rem;
  line-height: 1.5;
  font-size: .9rem;
}
.car-result-box > div:empty { display: none; }
.car-result-box > div + div {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid var(--color-border);
}
/* Technische specs (vermogen/range/kleur/massa) zijn minder belangrijk → grijs. */
#cardetailrow2 { color: var(--color-text-muted); }

/* Tenaamstellingsdata is het belangrijkst → zwart (normale tekstkleur);
   alleen de "automatisch ingevuld"-noot blijft subtiel grijs. */
.car-result-sub { color: var(--color-text); }
.car-result-sub small { color: var(--color-text-muted); }

/* ==========================================================================
   Bijtelling Calculator
   ========================================================================== */
.bijtelling-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.bijtelling-card .card-header {
  background: #000;
  color: #fff;
  padding: 1rem 1.25rem;
}

.bijtelling-card .card-header h1 {
  color: #fff;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

/* Kruimelpad-only header (bijtellingpagina): compact, geen loze marges. */
.page-header-wrap--crumbsonly .breadcrumbs,
.page-header-wrap--crumbsonly .breadcrumbs p { margin: 0; }

/* Pagina-tekst onder het formulier: zelfde kaartbreedte als de calculator,
   dus géén full-bleed negatieve marges zoals .page-single op mobiel. */
.bijtelling-content {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: 1.5rem;
}
.bijtelling-content .post-body { padding: 1.5rem; }

.bijtelling-form { padding: 1.25rem; }

.bijtelling-form .form-group { margin-bottom: .7rem; }

/* "Weet je het kenteken?" — Ja/Nee-keuze naast elkaar. */
.kenteken-keuze { display: flex; gap: 1.75rem; align-items: center; }
.kenteken-keuze label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
}
.kenteken-keuze input[type="radio"] {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.bijtelling-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.25rem;
}

.bijtelling-form .form-group.full-width {
  grid-column: 1 / -1;
}

.bijtelling-form input[type="submit"] {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .75rem 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: .5rem;
}

.bijtelling-form input[type="submit"]:hover {
  background: var(--color-primary-dark);
}

/* Uitkomst van de bijtelling-berekening (page-berekening-bijtelling.php) */
.bijt-result-hero {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.bijt-result-hero p { margin: 0 0 .35rem; }
.bijt-result-hero .bijt-result-total { font-size: 1.15rem; }
.bijt-result-hero strong { color: var(--color-accent); }

.bijt-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  font-size: .92rem;
}
.bijt-tabel th,
.bijt-tabel td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.bijt-tabel thead th { font-family: var(--font-heading); font-size: .8rem; color: var(--color-text-muted); }
.bijt-tabel td:not(:first-child) { text-align: right; white-space: nowrap; }
.bijt-tabel--invoer td:last-child,
.bijt-tabel--schijven td:last-child { font-weight: 600; }

/* De uitkomsttabel is een rekensom, geen datagrid. Er staat daarom alleen een
   lijn waar de som er een nodig heeft: onder de kop en boven een uitkomst.
   Verticale lijnen, celranden en een omhullende doos zijn er niet -- die
   maakten er een spreadsheet van, ook op de lege cellen. De +/- tekens staan
   in de markup aan het bedrag vast, zodat er geen kolommen vol lege cellen
   meer nodig zijn. */
.bijt-tabel--uitkomst {
  /* De lijnen dragen hier betekenis, dus ze moeten in beide standen leesbaar
     zijn; --color-border is in dark mode te dicht bij de achtergrond. */
  --bijt-lijn: var(--color-border);

  width: 100%;
  max-width: 34rem;
  margin: 0 0 1.75rem;
  font-size: .95rem;
  line-height: 1.5;
  /* Cijfers met vaste breedte: de bedragen staan zo onder elkaar uitgelijnd. */
  font-variant-numeric: tabular-nums;
}
.bijt-tabel--uitkomst th,
.bijt-tabel--uitkomst td {
  padding: .4rem .25rem;
  border: 0;
  background: none;
  text-align: right;
  white-space: nowrap;
  vertical-align: baseline;
}
.bijt-tabel--uitkomst th:first-child,
.bijt-tabel--uitkomst td:first-child {
  width: 100%;
  padding-left: 0;
  text-align: left;
  white-space: normal;
}
.bijt-tabel--uitkomst th:last-child,
.bijt-tabel--uitkomst td:last-child { padding-right: 0; }

.bijt-tabel--uitkomst thead th {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--bijt-lijn);
  /* Genoeg voor "Bruto p/m" op een regel, en genoeg om de twee bedragkolommen
     uit elkaar te houden als er korte bedragen in staan. */
  min-width: 5.5rem;
}

/* Een streep boven een bedrag betekent: dit is de uitkomst van de getallen
   erboven. */
.bijt-tabel--uitkomst .bijt-som {
  border-top: 1px solid var(--bijt-lijn);
  padding-top: .55rem;
}

/* Het eindbedrag krijgt de dubbele afsluitstreep uit de boekhouding: een lijn
   erboven voor de som, twee eronder omdat de rekening hier klaar is. */
.bijt-tabel--uitkomst .bijt-eindrij td { padding-top: .6rem; font-weight: 600; }
.bijt-tabel--uitkomst .bijt-eind {
  border-top: 1px solid var(--bijt-lijn);
  border-bottom: 3px double var(--bijt-lijn);
  padding-bottom: .5rem;
  color: var(--color-primary);
  /* Bescheiden opgeschaald: de blauwe balk boven de tabel roept dit bedrag al
     uit, hier hoeft het alleen het einde van de som te markeren. */
  font-size: 1.05rem;
  font-weight: 700;
}

html[data-theme="dark"] .bijt-tabel--uitkomst { --bijt-lijn: #4d4d4d; }

.bijt-melding {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.bijt-melding--error { background: #fdecec; color: #c0392b; }
/* Jaar waarvan de tarieven nog wetsvoorstel zijn (cb26_bijt_jaar_voorlopig) */
.bijt-melding--voorlopig { background: #fff6e0; color: #8a5a00; }

html[data-theme="dark"] .bijt-melding--error { background: #4a1f1f; color: #f5b5b5; }
html[data-theme="dark"] .bijt-melding--voorlopig { background: #423418; color: #f0d79a; }

.bijt-noot { font-size: .82rem; color: var(--color-text-muted); margin: .35rem 0; }
.bijt-disclaimer { font-size: .78rem; color: var(--color-text-muted); margin-top: 1.5rem; font-style: italic; }

.bijtinfo-table {
  margin-top: 1.5rem;
}

.bijtinfo-toggle {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  font-size: .85rem;
  text-decoration: underline;
  padding: 0;
  font-family: var(--font-body);
}

#bijtinfo {
  display: none;
  grid-column: 1 / -1;   /* volle breedte tussen 'Afwijkend percentage' en 'Grenswaarde' */
  min-width: 0;          /* laat het grid-item krimpen zodat de tabel-wrapper kan scrollen i.p.v. buiten beeld te lopen */
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: .25rem 0 .5rem;
  font-size: .85rem;
}

/* De tabel mag horizontaal scrollen binnen het infoblok. */
#bijtinfo > div { overflow-x: auto; }
#bijtinfo th, #bijtinfo td { white-space: nowrap; }

/* ==========================================================================
   Merken / Brand Filter
   ========================================================================== */
.merken-filter {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.merken-filter h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin: 0 0 .75rem;
}

.merken-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.merken-filter select {
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--color-text);
  background: var(--color-bg);
  cursor: pointer;
  min-width: 150px;
}

.merken-filter select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.merken-filter select:disabled {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  opacity: .55;
}

/* Merk-tagpagina: model-tegels */
.merk-model-tiles-wrap {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.merk-model-tiles-wrap h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin: 0 0 .85rem;
}

.merk-model-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.merk-model-tile {
  display: inline-block;
  padding: .5rem .85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.merk-model-tile:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   AI-zoek: knop + antwoordpaneel (gebruikt in het header-zoekpaneel)
   ========================================================================== */
.ai-search-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  border: 0;
  border-radius: var(--radius);
  background: #101418;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition);
}

.ai-search-btn i { color: var(--color-accent); }
.ai-search-btn:hover { background: #000; }

.ai-search-panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: min(92vw, 420px);
  max-height: 70vh;
  overflow: hidden;
  padding: .7rem .85rem .8rem;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  font-size: .9rem;
  line-height: 1.6;
  text-align: left;
}

.ai-panel-close {
  position: absolute;
  top: .35rem;
  right: .5rem;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ai-panel-close:hover { color: var(--color-primary); }
.ai-loading { color: var(--color-text-muted); }
.ai-error { color: #c0392b; }
.ai-answer { margin: 0 1.4rem .4rem 0; }

/* Gespreksmodus: chat-draad met bubbels. :not([hidden]) zodat het paneel via
   het hidden-attribuut verborgen blijft en alleen zichtbaar een flex-kolom is. */
.ai-search-panel:not([hidden]) { display: flex; flex-direction: column; }
.ai-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: 1.25rem;   /* ruimte voor de sluitknop rechtsboven */
}
.ai-msg {
  max-width: 92%;
  padding: .5rem .7rem;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.5;
}
.ai-msg--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.ai-msg--bot {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 3px;
}
.ai-msg--bot .ai-answer { margin: 0; }
.ai-msg--bot .ai-sources { margin-top: .45rem; }

.ai-sources {
  border-top: 1px solid var(--color-border);
  padding-top: .45rem;
  margin-top: .4rem;
}

.ai-sources-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-bottom: .35rem;
}

.ai-sources ul { list-style: none; margin: 0; padding: 0; }
.ai-sources li { margin: 0; border-top: 1px solid var(--color-border); }
.ai-sources li:first-child { border-top: none; }
.ai-sources a {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .45rem 0;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}
.ai-sources a:hover .ai-src-title { text-decoration: underline; }

/* Klein type-label (artikel/pagina) vóór elke bron. */
.ai-src-type {
  flex: 0 0 auto;
  padding: .05rem .4rem;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ai-src-type--artikel { background: #e5f0fb; color: #1e5fa3; }
.ai-src-type--pagina  { background: #fdf2d6; color: #8a6d00; }
.ai-src-title { flex: 1 1 auto; }

.ai-disclaimer {
  margin-top: .5rem;
  font-size: .72rem;
  color: var(--color-text-muted);
}

/* Tablet + telefoon: AI-antwoordpaneel over de volle breedte i.p.v. een smalle
   dropdown die buiten beeld kan vallen. */
@media (max-width: 1100px) {
  .ai-search-panel {
    width: auto;
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination-wrap {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-secondary);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.pagination-wrap .page-numbers:hover,
.pagination-wrap .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   Search
   ========================================================================== */
.search-results-header {
  margin-bottom: 1.5rem;
}

.search-results-header h1 { font-size: 1.5rem; }

/* ==========================================================================
   404
   ========================================================================== */
.not-found-wrap {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.not-found-wrap h1 {
  font-size: 5rem;
  color: var(--color-primary);
  margin: 0 0 .5rem;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  margin-bottom: .75rem;
  font-size: .82rem;
  color: var(--color-text-muted);
}

.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #1a1a1a;
  color: #888;
  margin-top: 3rem;
}

.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  border-bottom: 1px solid #444;
  padding: 10px 0;
  width: 100%;
  line-height: 2;
}

.footer-links a { color: #bbb; font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

.footer-social {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  text-decoration: none;
  transition: background var(--transition);
}

.footer-social a:hover { background: var(--color-primary); color: #fff; text-decoration: none; }

.footer-bottom {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: .85rem;
}

/* ==========================================================================
   Scroll to top
   ========================================================================== */
.scrolltop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.scrolltop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scrolltop button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrolltop button:hover { background: rgba(0,0,0,.92); }

/* ==========================================================================
   AdSense / Ad placeholders
   ========================================================================== */

/* AdBlock fallback */
.bol-banner a { display: block; }
.bol-banner img { max-width: 100%; border-radius: var(--radius); }

/* ==========================================================================
   Responsive video
   ========================================================================== */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
/* .widget-prefix nodig: anders wint de generieke ".widget ul { margin:0 }"
   (specificiteit 0,0,1,1) van ".tabs" en verdwijnt de marge/padding. */
.widget .tabs {
  display: flex;
  list-style: none;
  padding: 3px;
  margin: 0 0 .5rem;
  background: var(--color-bg-alt);
  border-radius: .5rem;
  gap: 3px;
}

.tabs li a {
  display: block;
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.tabs li.active a,
.tabs li a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Popular posts sidebar widget
   ========================================================================== */
.popular { list-style: none; padding: 0; margin: 0; }
.popular > li { border-bottom: 1px solid var(--color-border); padding: .5rem 0; }
.popular > li:last-child { border-bottom: none; }

.popular-item { display: flex; gap: .6rem; align-items: flex-start; }

.popular-thumb {
  display: block;
  flex-shrink: 0;
  width: 72px;
  height: 50px;
  overflow: hidden;
  border-radius: var(--radius);
}
.popular-thumb img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.popular-title { flex: 1; min-width: 0; }
.popular-title > a {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popular-title > a:hover { color: var(--color-primary); }

.post-views { display: block; font-size: .74rem; color: var(--color-text-muted); margin-top: .2rem; }

/* Datum + weergaveteller op één regel in de hero-items (paginazijbalk-gerelateerd). */
.popular-hero-meta { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.popular-hero-meta .post-views { margin: 0; }

/* Popular hero grid — 2 most-read recent posts above the tabbed list */
.popular-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}
.popular-hero-item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-decoration: none;
  color: var(--color-text);
}
.popular-hero-item:hover { text-decoration: none; }
.popular-hero-item:hover .popular-hero-title { color: var(--color-primary); }
.popular-hero-thumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-border);
}
.popular-hero-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;    /* ratio op de img zelf = breedte-gedreven → herberekent bij iPad-rotatie */
  height: auto !important; /* géén height:100% meer: dat brak bij portrait→landscape op iPad */
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.popular-hero-item:hover .popular-hero-thumb img { transform: scale(1.04); }
.popular-hero-title {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tab items without inner <a> (popular posts tabs use plain <li>).
   .widget-prefix om ".widget ul li { padding:.4rem 0 }" te overrulen. */
.widget .tabs li {
  flex: 1;
  padding: .45rem .75rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: .35rem;
  background: transparent;
  text-align: center;
  user-select: none;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.tabs li.active {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.tabs li:not(.active):hover { color: var(--color-text); }

/* ==========================================================================
   Kenteken sidebar
   ========================================================================== */
#kentekensidebar .widget-title a,
#brandstofprijzensidebar .widget-title a { color: inherit; text-decoration: none; }
#kentekensidebar .widget-title a:hover,
#brandstofprijzensidebar .widget-title a:hover { color: var(--color-primary); }


#kentekensidebar { padding-left: .5rem; padding-right: .5rem; }

.kentekenbron { font-size: .75rem; color: var(--color-text-muted); margin-top: .5rem; }
.kentekenbron a { color: var(--color-primary); }

/* ==========================================================================
   Brandstofprijzen sidebar table
   ========================================================================== */
.tabel-brandstof-widget {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin-top: .4rem;
}
.tabel-brandstof-widget th,
.tabel-brandstof-widget td { padding: .3rem .3rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.tabel-brandstof-widget th { font-weight: 700; color: var(--color-text-muted); font-size: .75rem; text-transform: uppercase; }
.tabel-brandstof-widget tbody tr:last-child td { border-bottom: none; }

.text-green  { color: #28a745; }
.text-red    { color: #dc3545; }
.text-orange { color: #fd7e14; }

#brandstofprijzensidebar .widget-title small { font-size: .7rem; font-weight: 400; color: var(--color-text-muted); text-transform: none; }

/* ==========================================================================
   WordPress Core classes
   ========================================================================== */
.alignleft  { float: left;  margin: .5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }
.alignwide  { margin-left: -2rem; margin-right: -2rem; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
figcaption,
.wp-element-caption,
.gallery-caption {
  font-size: .78rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: .35rem 0 0;
  line-height: 1.5;
  font-style: italic;
}

.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-element-caption {
  display: block;
}

.sticky { /* WordPress sticky post */ }

/* WordPress-galerij ([gallery]-shortcode): raster met het door de auteur gekozen
   aantal kolommen (class gallery-columns-N), óók op mobiel — net als voorheen. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* standaard 3 kolommen */
  gap: 4px;
  margin: 1.5rem 0;
}
.gallery.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

/* Overschrijf een eventuele resterende inline WP-breedte/float. */
.gallery-item {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  text-align: center;
}
.gallery-icon { margin: 0; }
.gallery-icon img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: var(--radius);
}
.gallery .gallery-caption,
.gallery .wp-caption-text {
  font-size: .72rem;
  color: var(--color-text-muted);
  margin: .25rem 0 0;
}

/* ==========================================================================
   Inline widget strip (homepage, after 2nd article)
   ========================================================================== */
.inline-widgets-strip {
  display: grid;
  grid-template-columns: 1fr;
  background: #111;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.inline-widget-panel {
  padding: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.inline-widget-kenteken {
  border-right: 1px solid rgba(255,255,255,.08);
}

.inline-widget-label {
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: .85rem;
}

.inline-widget-label a { color: var(--color-accent); text-decoration: none; }
.inline-widget-label a:hover { opacity: .8; }

.inline-widget-date {
  display: block;
  font-size: .65rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #555;
  margin-top: .15rem;
}

/* Flexibele kentekenplaat — CSS-only, schaalt mee met de kolombreedte */
/* Plaat schaalt naar 88% — layout-box blijft 314×66px, panel heeft overflow:hidden */
.inline-kenteken-link { display: inline-block; text-decoration: none; }

.inline-widget-kenteken .kentekenplaat-M {
  transform: scale(0.88);
  transform-origin: 0 center;
  margin-bottom: -8px;
}

.inline-widget-sub {
  font-size: .7rem;
  color: #555;
  margin: .75rem 0 0;
  line-height: 1.5;
}

.inline-widget-sub a { color: #666; text-decoration: none; }
.inline-widget-sub a:hover { color: var(--color-accent); }

/* Voetregel van de brandstofbox: bron-note links, "Meer"-link rechtsonder. */
.inline-widget-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .35rem .75rem;
  flex-wrap: wrap;
  margin-top: auto;   /* duw de voetregel naar de onderkant van het vak */
}
.inline-widget-sub a.inline-widget-more {
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
}
.inline-widget-sub a.inline-widget-more:hover { color: var(--color-primary); text-decoration: underline; }

/* Brandstof tabel */
.inline-brandstof-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .2rem;
  table-layout: fixed;
}

.inline-brandstof-table td {
  padding: .38rem .2rem;
  /* Globale th,td-rand (var(--color-border)) resetten: die tekende een grid
     rondom elke cel en liet de onderste rij afwijken. Alleen een subtiele
     onderlijn per rij houden. */
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Geen losse onderlijn onder de laatste rij: de tabel eindigt schoon. */
.inline-brandstof-table tr:last-child td { border-bottom: 0; }

/* Gelijkmatige kolomverdeling + gecentreerde prijs/verschil op alle resoluties. */
.fuel-name   { color: #aaa; width: 40%; }
.fuel-price  { color: #fff; font-weight: 700; width: 32%; text-align: center; }
/* Eigen lichte kleur: de strip is altijd donker, dus niet op --color-text
   leunen (dat is in de lichte modus bijna zwart → onleesbaar verschilgetal). */
.fuel-change { width: 28%; text-align: center; color: #e2e2e2; }
.fuel-arrow  { width: 18px; text-align: center; }
.fuel-diff   { color: #666; font-size: .74rem; }

/* Mobiel (strip is 1 kolom): kenteken vult de breedte (net als de tabel).
   De plaat is een vaste 314px-box; overtollig geel aan de rechterkant wordt
   door de panel-overflow netjes bijgesneden. */
@media (max-width: 747px) {
  .inline-widget-kenteken .kentekenplaat-M {
    transform: scale(1);
    margin-bottom: 0;
  }
}

/* Zeer smalle schermen: iets terugschalen zodat de kentekentekst niet afbreekt. */
@media (max-width: 360px) {
  .inline-widget-kenteken .kentekenplaat-M { transform: scale(0.9); }
}

/* ==========================================================================
   Trending auto-video's (YouTube) — inline homepage-strip
   ========================================================================== */

.yt-trending-strip {
  background: #111;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  overflow: hidden;
}

.yt-trending-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin-bottom: 1rem;
}

.yt-trending-label {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
}

.yt-trending-label i { color: #ff0000; margin-right: .35rem; }

.yt-trending-sub {
  font-size: .8rem;
  color: #666;
}

.yt-trending-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* "Meer …"-link onder het videoblok. */
.yt-trending-more {
  margin-top: .85rem;
  text-align: right;
}

.yt-trending-more a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  color: var(--color-accent);
  text-decoration: none;
}

.yt-trending-more a:hover { color: #fff; }

.yt-video-card {
  display: block;
  text-decoration: none;
  color: #fff;
}

.yt-video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.yt-video-thumb img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform .3s ease;
}

.yt-video-card:hover .yt-video-thumb img { transform: scale(1.05); }

.yt-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-video-play i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,0,0,.9);
  color: #fff;
  font-size: 1rem;
  padding-left: 3px;
  transition: transform .2s ease, background .2s ease;
}

.yt-video-card:hover .yt-video-play i { transform: scale(1.1); background: #ff0000; }

.yt-video-title {
  display: block;
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  margin: .55rem 0 .2rem;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-video-card:hover .yt-video-title { color: var(--color-accent); }

.yt-video-meta {
  display: block;
  font-size: .7rem;
  color: #888;
}

.yt-video-date {
  display: block;
  margin-top: .15rem;
  font-size: .68rem;
  color: #6a6a6a;
}

@media (min-width: 801px) {
  .yt-trending-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Embed-facade in posts/pagina's — klik opent dezelfde overlay-speler */
.yt-embed-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.yt-embed-facade img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.yt-embed-facade:hover img { transform: scale(1.03); }
.yt-embed-facade:hover .yt-video-play i { transform: scale(1.1); background: #ff0000; }

/* Overlay-speler — site blijft zichtbaar op de achtergrond */
.yt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0,0,0,.9);
}

.yt-modal.is-open { display: flex; }

/* Grootste 16:9-venster dat past: begrensd door zowel de schermbreedte (96vw)
   als de schermhoogte, zodat de video zo groot mogelijk is zonder buiten
   beeld te vallen. */
.yt-modal-inner {
  position: relative;
  width: min(96vw, calc((100vh - 2rem) * 16 / 9));
  max-width: none;
}

.yt-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.yt-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-modal-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: rgba(0,0,0,.55);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.yt-modal-close:hover { color: var(--color-accent); background: rgba(0,0,0,.8); }

/* ==========================================================================
   Reacties (comments)
   ========================================================================== */

/* Bestaande reacties — lijst */
ol.comment-list {
  list-style: none;
  counter-reset: none;
  margin: 0 0 2rem;
  padding: 0;
}

ol.comment-list li { list-style: none; }

/* Elke reactie als kaart */
.comment-list .comment {
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  margin-bottom: .75rem;
}

/* comment-body = <article> */
.comment-body {
  padding: 1rem 1.25rem;
}

/* Avatar + naam in flex-rij: [avatar] [naam] */
.comment-author.vcard {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.comment-author .avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.comment-author .fn,
.comment-author .fn a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-text);
  text-decoration: none;
}

.comment-author .fn a:hover { color: var(--color-primary); }
.comment-author .says { display: none; }

/* Koptegel: [avatar+naam] [datum] naast elkaar */
.comment-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}

.comment-metadata {
  font-size: .75rem;
  color: var(--color-text-muted);
}

.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { color: var(--color-primary); }

/* Scheidingsteken tussen naam en datum */
.comment-metadata::before {
  content: '·';
  margin-right: .4rem;
  color: var(--color-border);
}

.comment-content {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: .65rem;
}

.comment-content p { margin: 0 0 .4rem; }
.comment-content p:last-child { margin-bottom: 0; }

.reply .comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.reply .comment-reply-link:hover { color: var(--color-primary); }

/* Geneste reacties — inspringing, lichtere achtergrond */
.comment-list .children {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.comment-list .children .comment {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  background: #eff3f8;
}

.comment-list .children .comment-body {
  padding-left: 2.5rem;
}

/* Wacht op goedkeuring */
.comment-awaiting-moderation {
  font-size: .78rem;
  color: var(--color-warning);
  font-style: italic;
  padding: .25rem .75rem;
  background: rgba(252,163,17,.08);
  border-top: 1px solid rgba(252,163,17,.2);
}

/* ==========================================================================
   Recente reacties sidebar widget
   ========================================================================== */
#recent-comments-widget { margin-top: 1rem; }

.rc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rc-item {
  display: flex;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.rc-item:last-child { border-bottom: none; }

.rc-avatar { flex-shrink: 0; }

.rc-avatar img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: block;
}

.rc-body { flex: 1; min-width: 0; }

.rc-meta {
  font-size: .8rem;
  line-height: 1.4;
  margin-bottom: .2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem;
}

.rc-author {
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-heading);
}

.rc-sep { color: var(--color-text-muted); }

.rc-post {
  color: var(--color-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.rc-post:hover { text-decoration: underline; }

.rc-excerpt {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Eigen reactie-markup (cb26_comment callback) */
.comments-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-secondary);
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--color-border);
}

.cb-comment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem;
}

.cb-comment-list li,
.cb-comment-list ol { list-style: none !important; padding-left: 0 !important; }

/* Kaart-stijl op inner div zodat .children buiten de kaart vallen */
.cb-comment {
  margin-bottom: .75rem;
}

.cb-comment-inner {
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.cb-comment-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}

.cb-comment-avatar img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.cb-comment-meta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

.cb-comment-author {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--color-text);
}

.cb-comment-date {
  font-size: .75rem;
  color: var(--color-text-muted);
}

.cb-comment-date::before { content: '\B7'; margin-right: .35rem; }
.cb-comment-date a { color: inherit; text-decoration: none; }
.cb-comment-date a:hover { color: var(--color-primary); }

.cb-comment-content {
  font-size: .93rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: .6rem;
}

.cb-comment-content p { margin: 0 0 .4em; }
.cb-comment-content p:last-child { margin-bottom: 0; }

.cb-comment-reply .comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.cb-comment-reply .comment-reply-link:hover { color: var(--color-primary); }

.cb-comment-list .children {
  list-style: none !important;
  padding: 0 !important;
  margin: .75rem 0 0 2.5rem;
}

.cb-comment-list .children .cb-comment-inner {
  background: #eff3f8;
}

.cb-comment-list .children .cb-comment {
  margin-bottom: .5rem;
}

/* Reactieformulier */
.comment-respond {
  margin-top: 1.5rem;
}

.comment-reply-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-secondary);
  margin: 0 0 .5rem;
}

.comment-reply-title small { display: block; font-size: .8rem; font-weight: 400; margin-top: .25rem; }
.comment-reply-title small a { color: var(--color-primary); }

.comment-notes {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
}

.comment-notes .required { color: #c0392b; }

/* Veldgroepen */
.comment-form p { margin: 0 0 1rem; }

.comment-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .3rem;
}

.comment-form .required { color: #c0392b; margin-left: .1rem; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .6rem .85rem;
  font-family: var(--font-body);
  font-size: .93rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(25,130,209,.15);
}

.comment-form textarea { min-height: 130px; resize: vertical; }

/* Cookies-checkbox (optioneel, WordPress ≥4.9) */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: .2rem;
  flex-shrink: 0;
  width: auto;
}

.comment-form-cookies-consent label {
  margin: 0;
  font-size: .82rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Verstuurknop */
.form-submit { margin-bottom: 0 !important; }

#submit {
  display: inline-block;
  padding: .65rem 1.6rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  appearance: none;
}

#submit:hover { background: var(--color-primary-dark); }
#submit:active { transform: scale(.98); }

/* ==========================================================================
   Einde reacties
   ========================================================================== */

/* 2 kolommen alleen waar 276px (88% van 314px) veilig past in elk panel:
   – geen sidebar (748–900px): panel ≈ (viewport−40)/2−40 ≥ 276px → vanaf 748px
   – met sidebar (≥1024px):   panel ≈ (viewport−394)/2−40 ≥ 276px → vanaf 1024px   */
@media (min-width: 748px) and (max-width: 900px) {
  .inline-widgets-strip { grid-template-columns: 1fr 1fr; }
  .inline-widget-kenteken { border-right: 1px solid rgba(255,255,255,.08); border-bottom: none; }
}
@media (min-width: 1024px) {
  .inline-widgets-strip { grid-template-columns: 1fr 1fr; }
  .inline-widget-kenteken { border-right: 1px solid rgba(255,255,255,.08); border-bottom: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .content-area {
    grid-template-columns: 1fr;
  }

  .bijtelling-form { padding: 1rem; }
  .bijtelling-content .post-body { padding: 1rem; }
  .bijtelling-form .form-row {
    grid-template-columns: 1fr;
    gap: .4rem;
  }
  .bijtelling-form .form-group { margin-bottom: .45rem; }
  .form-group label { margin-bottom: .2rem; }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile nav — alle iPads (incl. Pro 12.9" landscape = 1366px) en kleiner */
@media (max-width: 1366px) {
  /* Mobiel menu: dropdown-overlay onder de header, met slide/fade — net als
     het zoekscherm. De dim/blur-backdrop (#searchBackdrop) verzorgt de rest. */
  .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-secondary);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav.is-open .navbar,
  .site-nav.is-open ul.menu {
    flex-direction: column;
    padding: 1rem 0;
  }

  .site-nav.is-open .navbar a,
  .site-nav.is-open ul.menu a {
    height: auto;
    line-height: 1.4;
    padding: .85rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-transform: none;
  }

  /* Disable hover-driven submenus in mobile nav (touch devices keep :hover state) */
  .site-nav.is-open li:hover > .sub-menu { display: none; }
  .site-nav.is-open li.submenu-is-open:hover > .sub-menu { display: flex; }

  /* Mobile: submenus collapsed by default, opened via JS toggle */
  .site-nav.is-open .sub-menu {
    display: none;
    position: static;
    background: rgba(0,0,0,.25);
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Override desktop link styling inside mobile submenu */
  .site-nav.is-open .sub-menu a {
    background: transparent;
    color: rgba(255,255,255,.85);
    padding: .75rem .85rem .75rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .9rem;
    font-weight: 400;
  }
  .site-nav.is-open .sub-menu a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .site-nav.is-open .sub-menu li:last-child a { border-bottom: none; }

  .site-nav.is-open li.submenu-is-open > .sub-menu { display: flex; }

  /* Parent item row: flex so link + button sit side by side, sub-menu wraps below */
  .site-nav.is-open li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .site-nav.is-open li.menu-item-has-children > a {
    flex: 1;
    border-bottom: none;
  }
  .site-nav.is-open li.menu-item-has-children > .sub-menu {
    width: 100%;
  }

  /* Third-level items: extra indent, button closer to text */
  .site-nav.is-open .sub-menu li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-nav.is-open .sub-menu li.menu-item-has-children > a {
    flex: 1;
    padding-right: 0;
  }
  .site-nav.is-open .sub-menu .submenu-toggle {
    padding: .75rem .85rem;
    font-size: .8rem;
  }
  .site-nav.is-open .sub-menu li.menu-item-has-children > .sub-menu a {
    padding-left: 3rem;
  }

  .submenu-toggle { display: flex; align-items: center; }
  .site-nav.is-open .submenu-toggle {
    height: auto;
    padding: .85rem 1.2rem;
  }

  .menu-toggle { display: flex; }
}

@media (max-width: 768px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }

  .post-title { font-size: 1.5rem; }

  /* Op mobiel de kaart plat maken: witte achtergrond behouden (beweegt via
     --color-bg mee met het donkere thema), maar de "randen" — schaduw +
     afgeronde hoeken — weg, en met een negatieve marge full-bleed tot de
     schermranden, zodat er geen ruimte verloren gaat aan de grijze
     buitenmarge. Reactiekaartjes en overzichts-cards blijven ongemoeid. */
  .post-single,
  .page-single,
  .post-navigation {
    box-shadow: none;
    border-radius: 0;
    margin-left: -1.25rem;   /* heft de horizontale wrapper-marge op */
    margin-right: -1.25rem;
  }

  /* Eén nette binnenmarge voor de leesbaarheid op de witte achtergrond. */
  .post-header,
  .post-body,
  .page-header-wrap,
  .page-single .post-body,
  .sharing,
  .post-comments,
  .related-posts,
  .post-navigation a { padding-left: 1rem; padding-right: 1rem; }

  .post-header, .post-body { padding-top: 1rem; padding-bottom: 1rem; }

  /* Geen grijze strook meer tussen de navbar en de content: de full-bleed
     post/pagina sluit strak onder de navigatiebalk aan. */
  .single .page-wrapper,
  .page .page-wrapper { padding-top: 0; }

  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .page-wrapper { padding: 1rem .75rem; }

  /* Full-bleed marge gelijkstellen aan de smallere wrapper-marge hier,
     zodat het wit exact tot de schermrand loopt zonder horizontaal scrollen. */
  .post-single,
  .page-single,
  .post-navigation { margin-left: -.75rem; margin-right: -.75rem; }

  .bijtelling-form { padding: 1.25rem; }

  .kenteken-input-row { flex-direction: column; }

  input#kenteken { max-width: 100%; }
}

@media (max-width: 350px) {
  /* Kentekenplaat-M is 314px fixed; scale to fit on very narrow screens */
  #kentekensidebar .kentekenplaat-M {
    transform: scale(0.85);
    transform-origin: 0 0;
    margin-bottom: -10px;
  }
}

/* ==========================================================================
   Jetpack Related Posts
   ========================================================================== */

#jp-relatedposts {
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-border);
  clear: both;
}

#jp-relatedposts .jp-relatedposts-headline {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
#jp-relatedposts .jp-relatedposts-headline em { font-style: normal; }

/* Grid van kaarten */
#jp-relatedposts .jp-relatedposts-items-visual {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kaart */
#jp-relatedposts .jp-relatedposts-post {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  transition: box-shadow .15s ease;
}
#jp-relatedposts .jp-relatedposts-post:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* De <a> die de afbeelding omhult is de thumbnail-container — padding-bottom geeft 16:9 hoogte */
#jp-relatedposts .jp-relatedposts-post > a.jp-relatedposts-post-a {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 56.25% !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

/* De <img> vult de container absoluut */
#jp-relatedposts img.jp-relatedposts-post-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Titel */
#jp-relatedposts .jp-relatedposts-post-title {
  padding: .6rem .75rem .25rem;
  flex: 1;
}
#jp-relatedposts .jp-relatedposts-post-title a {
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text) !important;
  text-decoration: none !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#jp-relatedposts .jp-relatedposts-post-title a:hover { color: var(--color-primary) !important; }

/* Samenvatting */
#jp-relatedposts .jp-relatedposts-post-excerpt {
  padding: 0 .75rem;
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Datum */
#jp-relatedposts .jp-relatedposts-post-date {
  padding: .3rem .75rem .65rem;
  font-size: .75rem;
  color: var(--color-text-muted);
  display: block !important;
}

#jp-relatedposts .jp-relatedposts-post-context {
  padding: .2rem .75rem .6rem;
  font-size: .75rem;
  color: var(--color-text-muted);
}

@media (max-width: 680px) {
  #jp-relatedposts .jp-relatedposts-items-visual {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 420px) {
  #jp-relatedposts .jp-relatedposts-items-visual {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Contact Form 7
   ========================================================================== */

.wpcf7 {
  margin-top: 1.5rem;
}

.wpcf7-form p {
  margin-bottom: 1.25rem;
}

.wpcf7-form label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .35rem;
}

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-url,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-quiz {
  width: 100%;
  padding: .65rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  box-sizing: border-box;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-url:focus,
.wpcf7-form .wpcf7-number:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form .wpcf7-quiz:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(25, 130, 209, .15);
}

.wpcf7-form .wpcf7-textarea {
  min-height: 150px;
  resize: vertical;
}

.wpcf7-form .wpcf7-not-valid {
  border-color: #e53e3e;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: #e53e3e;
}

.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  display: inline-block;
  padding: .7rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
  background: var(--color-secondary);
  transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form .wpcf7-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.wpcf7-response-output {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  border: 1px solid transparent;
}

.wpcf7-mail-sent-ok {
  background: #f0fff4;
  border-color: #68d391;
  color: #276749;
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted {
  background: #fff5f5;
  border-color: #fc8181;
  color: #9b2c2c;
}

.wpcf7-spam-blocked,
.wpcf7-validation-errors {
  background: #fffbeb;
  border-color: #f6c90e;
  color: #744210;
}

.wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 400;
  cursor: pointer;
}

.wpcf7-acceptance input[type="checkbox"] {
  margin-top: .2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}

/* ==========================================================================
   Subpagina-kaarten (ak-subpages grid — gedeeld door meerdere page-templates)
   ========================================================================== */
.ak-subpages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.5rem;
}
.ak-subpage-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  text-decoration: none;
  background: var(--color-bg-alt);
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.ak-subpage-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  background: var(--color-bg);
  text-decoration: none;
}
.ak-subpage-title {
  padding: .65rem .75rem;
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  text-align: center;
}

/* ==========================================================================
   Google Custom Search Engine (CSE) — light + dark mode
   ========================================================================== */

/* Basis: verberg Google-branding en reset achtergrond */
.gsc-control-cse {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--font-body) !important;
}

/* Zoekbalk van CSE verbergen (we gebruiken eigen header-zoekbalk) */
.gsc-search-box { display: none !important; }

/* Individueel resultaat */
.gsc-webResult.gsc-result {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: .75rem !important;
  padding: .85rem 1rem !important;
}
.gsc-webResult.gsc-result:hover {
  border-color: var(--color-primary) !important;
}

/* Titel */
.gs-title, .gs-title * {
  color: var(--color-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.gs-title:hover, .gs-title a:hover {
  text-decoration: underline !important;
}

/* URL */
.gs-visibleUrl, .gs-visibleUrl-long {
  color: var(--color-text-muted) !important;
  font-size: .8rem !important;
}

/* Snippet */
.gs-snippet {
  color: var(--color-text) !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

/* Paginering */
.gsc-cursor-box { margin-top: 1rem !important; }
.gsc-cursor-page {
  color: var(--color-primary) !important;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: .2rem .55rem !important;
  font-size: .85rem !important;
  text-decoration: none !important;
}
.gsc-cursor-current-page {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* Resultaten teller ("Ongeveer X resultaten") */
.gsc-result-info {
  color: var(--color-text-muted) !important;
  font-size: .82rem !important;
}

/* Geen resultaten */
.gs-no-results-result .gs-snippet {
  color: var(--color-text-muted) !important;
}

/* Dark mode overrides */
html[data-theme="dark"] .gsc-webResult.gsc-result {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
}
html[data-theme="dark"] .gs-snippet {
  color: var(--color-text) !important;
}
html[data-theme="dark"] .gs-visibleUrl,
html[data-theme="dark"] .gs-visibleUrl-long {
  color: var(--color-text-muted) !important;
}
html[data-theme="dark"] .gsc-cursor-page {
  background: var(--color-bg) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-border) !important;
}
html[data-theme="dark"] .gsc-cursor-current-page {
  background: var(--color-primary) !important;
  color: #fff !important;
}
html[data-theme="dark"] .gsc-result-info {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   Reacties — dark mode overrides
   ========================================================================== */
html[data-theme="dark"] .comment-list .comment,
html[data-theme="dark"] .cb-comment-inner {
  background: #2a2a2a;
  border-color: var(--color-border);
}

html[data-theme="dark"] .comment-list .children .comment,
html[data-theme="dark"] .cb-comment-list .children .cb-comment-inner {
  background: #222222;
}

html[data-theme="dark"] .comment-awaiting-moderation {
  background: rgba(252,163,17,.06);
  border-color: rgba(252,163,17,.15);
}

html[data-theme="dark"] .comment-form input[type="text"],
html[data-theme="dark"] .comment-form input[type="email"],
html[data-theme="dark"] .comment-form input[type="url"],
html[data-theme="dark"] .comment-form textarea {
  background: #2a2a2a;
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .comment-form input[type="text"]::placeholder,
html[data-theme="dark"] .comment-form input[type="email"]::placeholder,
html[data-theme="dark"] .comment-form input[type="url"]::placeholder,
html[data-theme="dark"] .comment-form textarea::placeholder {
  color: var(--color-text-muted);
}

/* Copy URL knop — zelfde stijl als .post-sharing a */
.cb-copy-url {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.cb-copy-url:hover {
  background: var(--color-primary);
  transform: scale(1.1);
}
html[data-theme="dark"] .cb-copy-url { background: #444; }
html[data-theme="dark"] .cb-copy-url:hover { background: var(--color-primary); }

/* Voorkom dat plugins een external-link icoon toevoegen aan de deelknoppen */
.post-sharing a::before,
.post-sharing a::after { display: none !important; content: none !important; }