/* =======================================================
   Kledingbus.nl Custom theme v1.2.0
   Frutiger-achtig (Source Sans 3), bus-geel accent
   ======================================================= */

/* ---------- CSS Variables ---------- */
:root {
    --color-bg: #ffffff;
    --color-bg-alt: #f7f6f2;
    --color-bg-paper: #fbfaf7;
    --color-bg-dark: #1a1a1a;
    --color-text: #1a1a1a;
    --color-text-muted: #666666;
    --color-text-inverse: #ffffff;
    --color-border: #e6e3dd;
    --color-accent: #fed027;          /* bus-geel, fel, overal gebruikt */
    --color-accent-hover: #f4b800;    /* iets donkerder, enkel voor hover */
    --color-accent-dark: #fed027;     /* alias = accent (legacy var) */

    --font-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius: 4px;
    --radius-lg: 10px;

    --container: 1240px;
    --container-narrow: 820px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    --transition: 200ms cubic-bezier(.4,0,.2,1);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 18px rgba(0,0,0,.07);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.10);
}

/* ---------- View Transitions API (cross-document) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
}
::view-transition-old(root) {
    animation-name: kb-fade-out;
}
::view-transition-new(root) {
    animation-name: kb-fade-in;
}
@keyframes kb-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes kb-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Subtiel paper-texture pattern als achtergrond */
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Subtiel patroon op witte vlakken: kleine diagonale streepjes + dot-grid.
   We zetten het op de site-main zodat header + footer rustig blijven. */
/* Plain white background, geen patroon */
body { background-color: var(--color-bg); }
.site-main { background-color: var(--color-bg); }
/* Sections met een gevulde achtergrond moeten het patroon overlappen. */
.hero, .page-hero, .section--alt, .section--cta, .bus-section--alt {
    position: relative;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-hover); }
.page-content a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.page-content a:hover { color: var(--color-accent-hover); text-decoration-color: var(--color-accent-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0 0 .6em;
    color: var(--color-text);
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

::selection { background: var(--color-accent); color: var(--color-text); }

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
    position: absolute; left: -9999px; top: 1rem; background: #000; color: #fff; padding: .75rem 1rem; z-index: 9999;
}
.skip-link:focus { left: 1rem; }

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: 1480px; }

/* ---------- Press strip ---------- */
.press-strip {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 2rem 0 2.25rem;
}
.press-strip__eyebrow {
    text-align: center;
    text-transform: uppercase; letter-spacing: .18em;
    font-size: .75rem; font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}
.press-strip__row {
    display: flex; flex-wrap: nowrap;
    justify-content: space-between; align-items: center;
    gap: clamp(.5rem, 1.5vw, 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
}
.press-strip__row::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
    .press-strip__row { justify-content: flex-start; }
}
.press-strip__item {
    font-family: var(--font-display);
    font-weight: 800; font-size: clamp(.9rem, 1.2vw, 1.1rem);
    letter-spacing: .02em;
    color: #6e6e6e;
    text-transform: uppercase;
    transition: color var(--transition), transform var(--transition), filter var(--transition);
    line-height: 1;
    display: inline-flex; align-items: center;
    flex: 0 0 auto;
}
.press-strip__item:hover {
    color: var(--color-text);
    transform: translateY(-1px);
}
.press-strip__item--img {
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 1 auto;
}
.press-strip__item--img img {
    height: clamp(22px, 2.5vw, 32px) !important;
    width: auto !important;
    max-width: clamp(70px, 12vw, 130px);
    object-fit: contain;
    filter: grayscale(100%) opacity(.65);
    transition: filter var(--transition), transform var(--transition);
}
.press-strip__item--img:hover img {
    filter: grayscale(0%) opacity(1);
}

/* ---------- About Thomas (home) ---------- */
.about-thomas__inner {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 800px) {
    .about-thomas__inner { grid-template-columns: 1fr 1.3fr; }
}
.about-thomas__photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--color-border);
    box-shadow: var(--shadow-md);
}
.about-thomas__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-thomas__body { font-size: 1.08rem; color: var(--color-text-muted); }
.about-thomas__body p:first-child { font-size: 1.2rem; color: var(--color-text); font-weight: 500; }

/* Contact-page photo above the contact details card */
.contact-grid__photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: -2rem -2rem 1.5rem;
    aspect-ratio: 3/4;
    background: var(--color-border);
}
.contact-grid__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
    /* GEEN backdrop-filter: dat creeert een containing block voor position:fixed
       kinderen (zoals .primary-nav op mobiel), waardoor het menu in de header
       wordt opgesloten ipv full-viewport open te klappen. */
}
.site-header__inner {
    display: flex; align-items: center;
    min-height: 84px;
    gap: 2rem;
}
.site-branding { display: flex; align-items: center; margin-right: auto; }
.site-branding img,
.site-branding .custom-logo {
    max-height: 52px; width: auto;
    object-fit: contain;
}
.site-title {
    font-weight: 800; font-size: 1.35rem; color: var(--color-text); letter-spacing: -0.02em;
}

/* Primary nav */
.primary-nav { display: flex; }
.primary-nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 2.25rem; align-items: center;
}
.primary-nav__list > li > a {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.97rem;
    padding: .65rem 0;
    position: relative;
}
.primary-nav__list > li > a:hover { color: var(--color-accent-dark); }
.primary-nav__list > li > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: var(--color-accent); opacity: 0;
    transition: opacity var(--transition);
}
.primary-nav__list > li > a:hover::after,
.primary-nav__list > li.current-menu-item > a::after,
.primary-nav__list > li.current-menu-ancestor > a::after {
    opacity: 1;
}
.primary-nav__list > li.current-menu-item > a,
.primary-nav__list > li.current-menu-ancestor > a { color: var(--color-text); }

/* Single dropdown arrow on the right of parents (no ::before bullet) */
.primary-nav__list .menu-item-has-children > a::after {
    content: "▾"; font-size: .6em; margin-left: .35em; vertical-align: middle; opacity: .55;
    position: static;
    height: auto; background: none; display: inline-block;
}
/* Explicitly disable any ::before that crept in on parent links */
.primary-nav__list > li > a::before { content: none !important; }

/* JS-injected submenu-toggle button: alleen zichtbaar op mobiel
   (in mobile media query expliciet display:flex gezet) */
.submenu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0;
}

/* ---------- MEGA MENU ---------- */
.primary-nav__list .has-megamenu { position: relative; }   /* dropdown positioned relative to parent */
.megamenu {
    position: absolute;
    left: 50%; top: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .875rem;
    width: max-content;
    max-width: min(1120px, 96vw);
    line-height: 1;
    opacity: 0; visibility: hidden;
    pointer-events: none;  /* voorkomt hover-triggers wanneer dicht */
    transform: translateX(-50%) translateY(8px);
    transition:
        opacity 260ms cubic-bezier(.4,0,.2,1) 80ms,
        transform 260ms cubic-bezier(.4,0,.2,1) 80ms,
        visibility 0ms linear 340ms;
    z-index: 99;
    margin-top: .5rem;
}
.primary-nav__list .has-megamenu:hover .megamenu,
.primary-nav__list .has-megamenu:focus-within .megamenu {
    opacity: 1; visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity 200ms cubic-bezier(.4,0,.2,1) 0ms,
        transform 200ms cubic-bezier(.4,0,.2,1) 0ms,
        visibility 0ms linear 0ms;
}
.megamenu__inner {
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}
.megamenu ul, .megamenu li {
    list-style: none !important;
    padding-left: 0;
    margin: 0;
}
.megamenu * { min-height: 0; }
.megamenu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.megamenu__card {
    display: flex; flex-direction: column;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    text-decoration: none;
}
.megamenu__card::before, .megamenu__card::after { content: none !important; display: none !important; }
.megamenu__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
    color: var(--color-text);
}
.megamenu__media {
    aspect-ratio: 4/3;
    background: #f2f0ea;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.megamenu__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 400ms ease;
}
.megamenu__card:hover .megamenu__media img { transform: scale(1.04); }
.megamenu__body {
    padding: .65rem .8rem .8rem;
    display: flex !important;
    flex-direction: column;
    gap: .35rem;
}
.megamenu__title {
    display: block !important;
    font-weight: 700; font-size: .95rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
}
.megamenu__sub {
    display: block !important;
    color: var(--color-text-muted);
    font-size: .78rem;
    line-height: 1.4;
}
.megamenu__features {
    display: block !important;
    visibility: visible !important;
    color: var(--color-text-muted);
    font-size: .8rem;
    line-height: 1.45;
    margin: 0;
}
.megamenu__feat {
    display: inline;
    color: var(--color-text-muted);
    line-height: 1.45;
}
.megamenu__feat + .megamenu__feat::before {
    content: " · ";
    color: #bbb;
    margin: 0 .15em;
    font-weight: 700;
}
.megamenu__grid {
    display: grid;
    grid-template-columns: repeat(2, 280px);
    gap: .75rem;
    padding: 0;
    margin: 0;
}
.megamenu__grid > * { min-width: 0; }
.megamenu__grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 240px); }
.megamenu__footer {
    display: flex;
    justify-content: flex-end;
    margin: .5rem 0 0;
    padding: 0;
}

/* Subtiele "Bekijk alle X" link, rechts onder de cards */
.megamenu__viewall {
    display: inline-flex; align-items: center;
    margin-top: 0;
    padding: .25rem .25rem;
    color: var(--color-text-muted);
    font-weight: 600; font-size: .85rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
    line-height: 1.4;
}
.megamenu__viewall:hover {
    color: var(--color-accent-dark);
    border-bottom-color: var(--color-accent);
}
.megamenu__viewall::after { content: " →"; margin-left: .3em; }
.megamenu__footer {
    display: flex; justify-content: flex-end;
    margin-top: .25rem;
}

.header-cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .8rem 1.5rem;
    background: var(--color-accent); color: var(--color-text);
    border: 1px solid rgba(160, 125, 5, .25);
    border-radius: var(--radius);
    font-weight: 700; font-size: .92rem;
    box-shadow: 0 2px 0 rgba(160, 125, 5, .3);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.header-cta:hover {
    background: var(--color-accent-hover); color: var(--color-text);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 rgba(160, 125, 5, .4), 0 8px 18px rgba(244,184,0,.3);
}

/* Mobile toggle */
.menu-toggle {
    display: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .5rem; cursor: pointer;
    width: 44px; height: 44px;
    flex-direction: column; justify-content: center; gap: 5px;
    appearance: none;
    -webkit-appearance: none;
}
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; border-radius: 4px; }
.menu-toggle__bar {
    display: block;
    width: 26px; height: 2px;
    background: var(--color-text);
    transition: transform var(--transition), opacity var(--transition);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .9rem 1.85rem;
    font-weight: 700; font-size: 1rem;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
    border: 0; cursor: pointer;
    line-height: 1;
}
/* Felgele knop met definitie: dunne donkergele rand + zachte bottom-shadow,
   zo blijft ie duidelijk zichtbaar op een witte achtergrond. */
.btn--primary {
    background: var(--color-accent);
    color: var(--color-text);
    border: 1px solid rgba(160, 125, 5, .25);
    box-shadow:
        0 2px 0 rgba(160, 125, 5, .35),
        0 6px 16px rgba(254, 208, 39, .25);
}
.btn--primary:hover {
    background: var(--color-accent-hover);
    color: var(--color-text);
    transform: translateY(-1px);
    box-shadow:
        0 3px 0 rgba(160, 125, 5, .45),
        0 10px 22px rgba(244, 184, 0, .35);
}
.btn--ghost { background: transparent; color: #fff; border: 1.5px solid #fff; }
.btn--ghost:hover { background: #fff; color: var(--color-text); }
.btn--dark { background: var(--color-text); color: #fff; }
.btn--dark:hover { background: #333; color: #fff; }
.btn--lg { padding: 1.1rem 2.5rem; font-size: 1.08rem; }

/* ---------- Hero (home) ---------- */
.hero {
    position: relative;
    background: var(--color-bg-alt);
    color: var(--color-text);
    min-height: clamp(420px, 60vh, 680px);
    display: flex; align-items: center;
    background-size: cover; background-position: center;
    overflow: hidden;
}
.hero.has-image {
    background-color: var(--color-bg-dark);
    color: #fff;
}
.hero.has-image::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.65) 100%);
}
.hero__inner {
    position: relative;
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    max-width: 820px;
    /* horizontale padding komt uit .container; geen shorthand die dit overrulet */
}
.hero__title { color: inherit; margin-bottom: 1rem; }
.hero.has-image .hero__title { color: #fff; }
.hero__subtitle { font-size: clamp(1.1rem, 2vw, 1.45rem); margin-bottom: 2rem; max-width: 640px; color: var(--color-text-muted); }
.hero.has-image .hero__subtitle { color: rgba(255,255,255,.92); }

/* ---------- Focus banner: één bus scherp, rest blurred ---------- */
.focus-banner {
    position: relative;
    overflow: hidden;
    min-height: clamp(360px, 55vh, 560px);
    display: flex;
    align-items: flex-end;
    background: #1a1a1a;
    isolation: isolate;
}
.focus-banner__blur,
.focus-banner__sharp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.focus-banner__blur {
    filter: blur(14px) brightness(.6);
    transform: scale(1.06);   /* voorkom witte randjes door blur */
    z-index: 1;
}
.focus-banner__sharp {
    z-index: 2;
    /* Soft-edged mask: verticale strook zichtbaar, rest transparant */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        transparent var(--focus-left, 0%),
        #000 calc(var(--focus-left, 0%) + 4%),
        #000 calc(var(--focus-right, 33%) - 4%),
        transparent var(--focus-right, 33%),
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0%,
        transparent var(--focus-left, 0%),
        #000 calc(var(--focus-left, 0%) + 4%),
        #000 calc(var(--focus-right, 33%) - 4%),
        transparent var(--focus-right, 33%),
        transparent 100%);
}
.focus-banner[data-focus="1"] { --focus-left: 0%;  --focus-right: 34%; }
.focus-banner[data-focus="2"] { --focus-left: 33%; --focus-right: 67%; }
.focus-banner[data-focus="3"] { --focus-left: 66%; --focus-right: 100%; }
.focus-banner__overlay {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 100%);
    color: #fff;
}
.focus-banner__overlay h1,
.focus-banner__overlay .page-hero__subtitle,
.focus-banner__overlay .page-hero__eyebrow { color: #fff; }
.focus-banner__overlay .page-hero__eyebrow { color: var(--color-accent); }

/* ---------- Page hero (subpages) ---------- */
.page-hero {
    background: var(--color-bg-alt);
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    background-size: cover; background-position: center;
}
.page-hero.has-image {
    color: #fff; background-color: var(--color-bg-dark);
}
/* Alleen bus-detailpagina's krijgen de grote hero */
.parent-kledingbussen .page-hero.has-image,
.parent-make-upbussen .page-hero.has-image {
    min-height: clamp(420px, 58vh, 640px);
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}
.parent-kledingbussen .page-hero.has-image .container,
.parent-make-upbussen .page-hero.has-image .container { width: 100%; }
.page-hero.has-image::before {
    content: ""; position: absolute; inset: 0;
    /* Lichter: alleen onderkant iets donker voor tekst-leesbaarheid */
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.page-hero.has-image .container { position: relative; }
.page-hero.has-image h1,
.page-hero.has-image .page-hero__subtitle { color: #fff; }
.page-hero h1 { margin-bottom: .5rem; }
.page-hero__subtitle { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--color-text-muted); max-width: 720px; }
.page-hero.has-image .page-hero__subtitle { color: rgba(255,255,255,.9); }
.page-hero__eyebrow {
    text-transform: uppercase; letter-spacing: .15em; font-size: .8rem;
    font-weight: 700; margin-bottom: 1rem; opacity: .85;
    color: var(--color-accent-dark);
}
.page-hero.has-image .page-hero__eyebrow { color: var(--color-accent); }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--intro { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--color-bg-alt); }
.section--cta {
    background: var(--color-text); color: #fff; text-align: center;
}
.section--cta h2 { color: #fff; margin-bottom: 1.5rem; }
.section__title { text-align: center; margin-bottom: 1rem; }
.section__lead { text-align: center; max-width: 680px; margin: 0 auto 3rem; color: var(--color-text-muted); font-size: 1.1rem; }
.section__eyebrow {
    display: block; text-align: center;
    text-transform: uppercase; letter-spacing: .15em; font-size: .8rem;
    font-weight: 700; color: var(--color-accent-dark);
    margin-bottom: .75rem;
}

.page-content { font-size: 1.05rem; }
.page-content h2 { margin-top: 2.5em; }
.page-content h3 { margin-top: 2em; }
.page-content ul, .page-content ol { padding-left: 1.4rem; }
.page-content li { margin-bottom: .4rem; }
.page-content > img { border-radius: var(--radius-lg); margin: 1.5rem 0; }
.page-content blockquote {
    border-left: 4px solid var(--color-accent);
    padding: .5rem 0 .5rem 1.5rem; margin: 1.5rem 0;
    font-style: italic; color: var(--color-text-muted);
}

/* ---------- Bus grids (home) ---------- */
.bus-grid {
    display: grid; gap: 3rem;
    grid-template-columns: 1fr;
}
@media (min-width: 800px) {
    .bus-grid { grid-template-columns: 1fr 1fr; }
}
.bus-block h3 {
    text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}
.bus-grid__inner { display: grid; gap: 1.5rem; }
@media (min-width: 600px) {
    .bus-grid__inner { grid-template-columns: 1fr 1fr; }
}
.bus-card {
    display: flex; flex-direction: column;
    background: #fff; color: var(--color-text);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.bus-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--color-text); }
.bus-card__media { aspect-ratio: 4/3; background: var(--color-border); overflow: hidden; }
.bus-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.bus-card:hover .bus-card__media img { transform: scale(1.04); }
.bus-card__body { padding: 1.25rem; }
.bus-card__title { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }
.bus-card__sub { display: block; color: var(--color-text-muted); font-size: .95rem; }

/* ---------- Bus compare list (homepage 'Onze bussen') ---------- */
.bus-compare {
    max-width: 900px;
    margin: 0 auto;
}
.bus-compare__group {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
    color: var(--color-text-muted);
    font-weight: 700;
    margin: 2rem 0 .75rem;
}
.bus-compare__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.bus-compare__list li + li { border-top: 1px solid var(--color-border); }
.bus-compare__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 1.5rem;
    padding: 1.15rem 1.5rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition);
}
.bus-compare__row:hover {
    background: var(--color-bg-paper);
    color: var(--color-text);
}
.bus-compare__name {
    font-weight: 700;
    font-size: 1.05rem;
}
.bus-compare__features {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    color: var(--color-text-muted);
    font-size: .93rem;
}
.bus-compare__features .feat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.bus-compare__features .feat svg {
    color: var(--color-accent-hover);
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .bus-compare__row {
        grid-template-columns: 1fr;
        gap: .5rem;
        padding: 1rem 1.25rem;
    }
    .bus-compare__features { font-size: .88rem; gap: .35rem .9rem; }
}

/* ---------- Card grid (generic) ---------- */
.card-grid {
    display: grid; gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--color-border); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eee, #ddd); }
.card__body { padding: 1.25rem 1.5rem 1.5rem; }
.card__title { font-size: 1.2rem; margin-bottom: .5rem; }
.card__title a { color: var(--color-text); }
.card__title a:hover { color: var(--color-accent-dark); }
.card__excerpt { color: var(--color-text-muted); font-size: .95rem; margin-bottom: .75rem; }
.card__link { font-weight: 700; font-size: .9rem; color: var(--color-accent-dark); }

/* ---------- PRODUCTIE SLIDER (scroll-snap) ---------- */
.productie-slider-wrap { position: relative; }
.productie-slider {
    display: flex; gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    padding: .5rem var(--gutter) 1.5rem;
    margin: 0 calc(var(--gutter) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
}
.productie-slider::-webkit-scrollbar { height: 6px; }
.productie-slider::-webkit-scrollbar-track { background: var(--color-border); border-radius: 3px; }
.productie-slider::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }
.productie-slide {
    flex: 0 0 220px;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #1a1a1a;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    color: #fff;
}
@media (min-width: 600px) { .productie-slide { flex: 0 0 260px; } }
.productie-slide:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: #fff; }
.productie-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.productie-slide:hover img { transform: scale(1.05); }
.productie-slide__title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.88));
    font-size: .98rem; font-weight: 700;
    color: #fff;
}
/* Slider nav buttons */
.productie-nav {
    display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem;
}
.productie-nav button {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-text); color: #fff; border: 0; cursor: pointer;
    font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--transition), transform var(--transition);
}
.productie-nav button:hover { background: var(--color-accent); color: var(--color-text); }
.productie-nav button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Productie grid (archive) ---------- */
.productie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.productie-card {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #1a1a1a;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    color: #fff;
}
.productie-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: #fff; }
.productie-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.productie-card:hover img { transform: scale(1.05); }
.productie-card__title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.88));
    font-size: .95rem; font-weight: 700;
    color: #fff;
}

/* ---------- BUS DETAIL TEMPLATE ---------- */
.bus-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.bus-section--alt { background: var(--color-bg-paper); }

/* Split: collage left + content right, or v.v. */
.bus-split {
    display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) {
    .bus-split { grid-template-columns: 1fr 1fr; }
    .bus-split--reverse > .bus-split__media { order: 2; }
}

.bus-split__title {
    text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
    font-weight: 700; color: var(--color-accent-dark);
    margin-bottom: .75rem;
}
.bus-split__text h2 { margin-bottom: 1rem; }
.bus-split__list { padding-left: 1.25rem; margin: 0; }
.bus-split__list li { margin-bottom: .55rem; }
.bus-split__list li::marker { color: var(--color-accent-dark); }

/* Collage: 3 foto's, hero + 2 small */
.bus-collage {
    display: grid; gap: .5rem;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
}
.bus-collage > * {
    overflow: hidden;
    background: var(--color-border);
}
.bus-collage > *:nth-child(1) { grid-row: 1 / 3; }
.bus-collage img { width: 100%; height: 100%; object-fit: cover; }

/* Bus specs grid (voertuiginfo) */
.bus-specs {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.bus-spec--wide { grid-column: span 2; }
@media (max-width: 600px) { .bus-spec--wide { grid-column: span 1; } }

/* Plattegrond */
.bus-plattegrond {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    overflow: hidden;
}
.bus-plattegrond img {
    width: 100%; height: auto;
    object-fit: contain;
}
.bus-spec {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}
.bus-spec__label {
    display: block;
    text-transform: uppercase; letter-spacing: .1em; font-size: .7rem;
    font-weight: 700; color: var(--color-text-muted);
    margin-bottom: .35rem;
}
.bus-spec__value {
    display: block; font-size: 1.15rem; font-weight: 700; color: var(--color-text);
}

/* Detail table look for uitrusting (item | qty | note) */
.bus-detail-list {
    list-style: none; padding: 0; margin: 0;
    border-top: 1px solid var(--color-border);
}
.bus-detail-list li {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr 2fr;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
}
@media (max-width: 700px) {
    .bus-detail-list li { grid-template-columns: 1.2fr 1fr; }
    .bus-detail-list li .bus-detail-list__note { grid-column: 1 / -1; color: var(--color-text-muted); }
}
.bus-detail-list__item { font-weight: 600; }
.bus-detail-list__qty { color: var(--color-accent-dark); font-weight: 700; }
.bus-detail-list__note { color: var(--color-text-muted); font-size: .95rem; }

/* Aansluitingen groep-cards */
.bus-groups {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .bus-groups { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.bus-group {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem 1.5rem 1.75rem;
    position: relative;
    overflow: hidden;
}
.bus-group::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 6px;
    background: var(--color-accent);
}
.bus-group__label {
    text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
    font-weight: 700; color: var(--color-text-muted);
    margin-bottom: .3rem;
}
.bus-group__amp {
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: .4rem;
    line-height: 1;
    display: inline-block;
    background: linear-gradient(180deg, transparent 60%, var(--color-accent) 60%);
    padding: 0 .15em;
}
.bus-group__load { color: var(--color-text-muted); font-size: .95rem; line-height: 1.5; }

/* Exterior image (full-bleed-ish) */
.bus-exterior {
    border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 16/8;
    background: var(--color-border);
}
.bus-exterior img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Prijzen blok ---------- */
.prijzen-grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 2rem 0;
}
.prijzen-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.25rem;
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.prijzen-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.prijzen-card__label {
    text-transform: uppercase; letter-spacing: .12em;
    font-size: .78rem; font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .85rem;
}
.prijzen-card__rates {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
    margin-bottom: 1rem;
}
.prijzen-card__rates > div {
    display: flex; flex-direction: column;
}
.prijzen-card__amt {
    font-size: 1.55rem; font-weight: 800; color: var(--color-text);
    line-height: 1.15;
}
.prijzen-card__unit {
    font-size: .85rem; color: var(--color-text-muted);
    font-weight: 600;
}
.prijzen-card__km {
    border-top: 1px solid var(--color-border);
    padding-top: .85rem;
    font-size: .95rem; font-weight: 600;
}
.prijzen-card__km small {
    display: block; margin-top: .15rem;
    color: var(--color-text-muted); font-weight: 400; font-size: .82rem;
}
/* Reserveer-knop onderaan elk prijscard: zelfde gele btn als de rest */
.prijzen-card__cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 1rem;
    padding: .75rem 1rem;
    width: 100%;
    background: var(--color-accent);
    color: var(--color-text) !important;
    border: 1px solid rgba(160, 125, 5, .25);
    border-radius: var(--radius);
    font-weight: 700; font-size: .92rem;
    text-decoration: none !important;
    box-shadow: 0 2px 0 rgba(160, 125, 5, .3);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.prijzen-card__cta:hover {
    background: var(--color-accent-hover);
    color: var(--color-text) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 rgba(160, 125, 5, .4), 0 8px 18px rgba(244,184,0,.3);
}

/* Volle-breedte CTA onder het prijzenblok */
.prijzen-cta {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%;
    margin: 3rem 0 1rem;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    background: var(--color-accent);
    border: 1px solid rgba(160, 125, 5, .25);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow:
        0 4px 0 rgba(160, 125, 5, .35),
        0 14px 32px rgba(254, 208, 39, .35);
    color: var(--color-text);
}
.prijzen-cta h3 {
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    margin: 0 0 .6rem;
    color: var(--color-text);
}
.prijzen-cta p {
    margin: 0 0 1.75rem;
    font-size: 1.1rem;
    color: #1a1a1a;
    opacity: .85;
    max-width: 540px;
}
.prijzen-cta__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1.15rem 3rem;
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-radius: var(--radius);
    font-weight: 700; font-size: 1.15rem;
    text-decoration: none !important;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.prijzen-cta__btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.prijzen-cta__btn::after { content: " →"; margin-left: .35em; }

/* Bus prijs card op bus detail pagina */
.bus-prijs-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.bus-prijs-card__rates {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 420px; margin: 0 auto 1rem;
    text-align: center;
}
.bus-prijs-card__rates > div { display: flex; flex-direction: column; align-items: center; }
.bus-prijs-card .prijzen-card__amt { font-size: 2rem; }
.bus-prijs-card .prijzen-card__km {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: .85rem 0;
    margin-top: .5rem;
    text-align: center;
}

.prijzen-footer {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
    margin: 2.5rem 0;
}
@media (min-width: 700px) { .prijzen-footer { grid-template-columns: 1fr 1fr; } }
.prijzen-footer__item {
    background: var(--color-bg-paper);
    border-left: 4px solid var(--color-accent);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
}
.prijzen-footer__label {
    display: block;
    text-transform: uppercase; letter-spacing: .12em;
    font-size: .72rem; font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .25rem;
}
.prijzen-footer__value { color: var(--color-text); font-weight: 500; }

/* ---------- CONTACT FORM ---------- */
.contact-grid {
    display: grid; gap: 3rem;
    grid-template-columns: 1fr;
}
@media (min-width: 800px) {
    .contact-grid { grid-template-columns: 1.4fr 1fr; }
}
.contact-form {
    display: grid; gap: 1rem;
    margin-top: 1.5rem;
}
.contact-form__row {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-form label {
    display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: .75rem 1rem;
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit; font-size: 1rem; color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(244,180,26,.18);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form__submit { margin-top: .5rem; }
.contact-form__message {
    padding: .9rem 1.2rem;
    border-radius: var(--radius);
    font-size: .95rem;
    display: none;
}
.contact-form__message.is-success { background: #e6f5e6; color: #2b6a2b; display: block; }
.contact-form__message.is-error   { background: #fbe9e7; color: #a3372b; display: block; }

.contact-grid__details {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 2rem;
    border-radius: var(--radius-lg);
    align-self: start;
}
.contact-link { font-weight: 600; font-size: 1.05rem; color: var(--color-text); }
.contact-link:hover { color: var(--color-accent-dark); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-bg-dark); color: #666666;
    padding: 4rem 0 0;
}
.site-footer h4 { color: #ffffff; margin-bottom: 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .15em; }
.site-footer p, .site-footer li, .site-footer small { color: #666666; }
.site-footer a { color: #888; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__grid {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: .5rem; }
.site-footer__bottom {
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid #2a2a2a;
    font-size: .85rem;
}
.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1.5rem;
}
.site-footer__bottom-inner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-footer__bottom-inner a:hover { color: var(--color-accent); }

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 900px) {
    .mobile-cta {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: #fff;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-cta__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding: 1rem .5rem;
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        line-height: 1;
        min-height: 56px;
    }
    .mobile-cta__btn--call {
        color: var(--color-dark);
        background: #fff;
    }
    .mobile-cta__btn--call svg { flex: 0 0 auto; }
    .mobile-cta__btn--book {
        color: var(--color-dark);
        background: var(--color-accent);
    }
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
    /* Menu-open state: sticky CTA blijft onderin, boven de scroll-lock */
    body.menu-open .mobile-cta { z-index: 200; }
}

/* ---------- Bus compare table (op overview pagina's) ---------- */
.bus-compare-table-wrap {
    margin-top: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
}
.bus-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    min-width: 520px;
}
.bus-compare-table th,
.bus-compare-table td {
    padding: .85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.bus-compare-table thead th {
    background: #f7f7f5;
    font-weight: 600;
    color: var(--color-dark);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
.bus-compare-table thead th a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.bus-compare-table thead th a:hover { color: var(--color-accent); }
.bus-compare-table tbody th {
    font-weight: 500;
    color: var(--color-muted);
    background: #fafafa;
    width: 40%;
}
.bus-compare-table tbody tr:last-child th,
.bus-compare-table tbody tr:last-child td { border-bottom: 0; }
.bus-compare-table td { text-align: center; }
.cmp {
    display: inline-block;
    line-height: 1;
}
.cmp--yes {
    color: #1a7c3a;
    font-weight: 700;
    font-size: 1.1rem;
}
.cmp--no {
    color: #b8b8b8;
    font-weight: 600;
}
.cmp--val {
    font-weight: 500;
    color: var(--color-dark);
}
@media (max-width: 600px) {
    .bus-compare-table { font-size: .88rem; }
    .bus-compare-table th,
    .bus-compare-table td { padding: .65rem .7rem; }
    .bus-compare-table tbody th { width: 44%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .site-header__inner { gap: 1rem; min-height: 68px; }
    .site-branding { margin-right: auto; }
    .site-branding img,
    .site-branding .custom-logo,
    .site-branding .custom-logo-link img {
        max-height: 36px !important;
        max-width: 200px;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }

    .menu-toggle {
        display: flex !important;
        order: 3;
        position: relative;
        z-index: 110;
    }
    .header-cta { display: none !important; }

    .primary-nav {
        position: fixed;
        top: 68px; left: 0; right: 0;
        bottom: 0;
        height: calc(100dvh - 68px);   /* dvh handelt iOS Safari address-bar */
        background: #fff;
        padding: 1.5rem var(--gutter) 4rem;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform var(--transition);
        overflow-y: auto;
        z-index: 105;
        -webkit-overflow-scrolling: touch;
    }
    @supports not (height: 100dvh) {
        .primary-nav { height: calc(100vh - 68px); }
    }
    .primary-nav.is-open { transform: translateX(0); }

    .primary-nav__list {
        flex-direction: column; align-items: stretch; gap: 0;
        width: 100%;
    }
    .primary-nav__list > li {
        border-bottom: 1px solid var(--color-border);
        padding: 0;
    }
    .primary-nav__list > li > a {
        padding: 1.1rem 0;
        font-size: 1.15rem;
        font-weight: 600;
        display: block;
    }
    .primary-nav__list > li > a::after { display: none; }

    /* Mobiel: submenu's standaard ingeklapt, accordion-stijl */
    .primary-nav__list .menu-item-has-children { position: relative; }
    /* Verberg desktop dropdown-pijl op mobiel (specificiteit matched) */
    .primary-nav__list .menu-item-has-children > a::after { display: none !important; }
    .submenu-toggle {
        position: absolute;
        top: .35rem; right: 0;
        width: 52px; height: 52px;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        cursor: pointer;
        padding: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    .submenu-toggle__icon {
        position: relative;
        width: 14px; height: 14px;
        display: block;
    }
    .submenu-toggle__icon::before,
    .submenu-toggle__icon::after {
        content: '';
        position: absolute;
        background: var(--color-text);
        transition: transform 200ms cubic-bezier(.4,0,.2,1);
    }
    .submenu-toggle__icon::before {
        top: 6px; left: 0; right: 0; height: 2px;
    }
    .submenu-toggle__icon::after {
        top: 0; bottom: 0; left: 6px; width: 2px;
    }
    .menu-item-has-children.is-expanded .submenu-toggle__icon::after {
        transform: scaleY(0);
    }

    /* Standaard ingeklapt */
    .megamenu, .primary-nav__list .sub-menu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 280ms cubic-bezier(.4,0,.2,1);
        width: auto !important;
        max-width: none !important;
        left: auto !important; right: auto !important;
    }
    .menu-item-has-children.is-expanded .megamenu,
    .menu-item-has-children.is-expanded .sub-menu {
        max-height: 800px;
        padding: 0 0 .75rem 1rem;
    }

    .megamenu__inner {
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        width: 100% !important;
    }
    /* Nuclear: forceer alles in de megamenu op 100% viewport-breedte
       zodat noch de :has() 3-koloms grid van KB noch de vaste 2-koloms
       van MB kunnen overflowen. */
    .primary-nav__list .megamenu,
    .primary-nav__list .megamenu *:not(img):not(svg) {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .megamenu__grid,
    .megamenu__grid:has(> :nth-child(3)) {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        grid-template-columns: none !important;
        width: 100% !important;
    }
    .megamenu__card {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        padding: .75rem 0 !important;
        align-items: flex-start !important;
        box-shadow: none !important;
        transform: none !important;
        border-bottom: 1px solid rgba(0,0,0,.06) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    .megamenu__card:hover { transform: none !important; box-shadow: none !important; }
    .megamenu__media { display: none !important; }
    .megamenu__body {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        gap: .2rem;
        width: 100%;
    }
    .megamenu__title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0; }
    .megamenu__sub { display: none; }
    .megamenu__features {
        font-size: .8rem;
        color: var(--color-text-muted);
        line-height: 1.4;
        white-space: normal;
        word-break: normal;
    }
    .megamenu__footer { margin-top: .5rem; justify-content: flex-start; }
    .megamenu__viewall {
        font-size: .85rem;
        padding: .35rem 0;
        color: var(--color-accent-hover);
        font-weight: 700;
    }

    body.menu-open { overflow: hidden; }
    body.menu-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.menu-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
    body.menu-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .bus-collage { aspect-ratio: 4/3; }

    /* CTA-styling voor laatste item werd voor Contact gebruikt; nu is Contact
       via de sticky mobile-cta bar en de header-CTA gedekt. Uitgezet. */

    /* Menu-open state override: reset desktop absolute-positioning van mega
       ongeacht viewport-precisie (Chrome DevTools device mode triggert de
       max-width query soms net anders dan native mobiel). */
    body.menu-open .megamenu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
        overflow: hidden !important;
    }
    body.menu-open .megamenu__inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.menu-open .megamenu__grid,
    body.menu-open .megamenu__grid:has(> :nth-child(3)) {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    body.menu-open .megamenu__card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: .75rem 0 !important;
        left: auto !important; right: auto !important; transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,.06) !important;
        text-align: left !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }
    body.menu-open .megamenu__media { display: none !important; }
    body.menu-open .megamenu__body {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    body.menu-open .megamenu__title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--color-text) !important;
        margin: 0 0 .2rem !important;
        line-height: 1.25 !important;
    }
    body.menu-open .megamenu__features {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: .8rem !important;
        color: var(--color-text-muted) !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-break: normal !important;
    }
    body.menu-open .megamenu__feat { display: inline !important; }

    /* Defensief: submenu cards altijd nette kolom, titel + features zichtbaar */
    .primary-nav__list .megamenu__card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        text-align: left !important;
        text-decoration: none !important;
    }
    .primary-nav__list .megamenu__body {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .primary-nav__list .megamenu__title {
        display: block !important;
        visibility: visible !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--color-text) !important;
        margin: 0 0 .15rem !important;
        line-height: 1.25 !important;
    }
    .primary-nav__list .megamenu__features {
        display: block !important;
        visibility: visible !important;
        font-size: .8rem !important;
        color: var(--color-text-muted) !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: normal !important;
    }
    /* Container clamp: geen enkele overflow naar links buiten viewport */
    .primary-nav { overflow-x: hidden !important; }
    .primary-nav__list { overflow-x: hidden !important; }
    .menu-item-has-children.is-expanded .megamenu {
        overflow: hidden !important;
    }
}

/* ---------- Gutenberg / WP defaults ---------- */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.wp-block-image img { border-radius: var(--radius-lg); }
.wp-block-quote { border-left: 4px solid var(--color-accent); padding-left: 1.5rem; font-style: italic; }

/* Pagination */
.wp-block-query-pagination, .nav-links {
    display: flex; gap: .5rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap;
}
.nav-links .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 .75rem;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-text); font-weight: 600;
}
.nav-links .page-numbers.current { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.nav-links .page-numbers:hover { background: var(--color-bg-alt); }