/*
Theme Name: CarService Brothers
Theme URI: https://carservicebrothers.nl
Author: Selvi Administratie
Description: Maatwerkthema voor CarService Brothers, pixelgetrouw gebouwd naar de design-handoff (zwart/goud, Archivo).
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: csb
*/

/* Archivo, lokaal gehost (geen verbinding met Google nodig) */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100%; font-display:swap; src:url(assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100%; font-display:swap; src:url(assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Basis uit het designsysteem (Modernist) waarop het prototype draait */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8px; }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 12px; }
a { text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
:focus { outline: none; }
::selection { background: rgba(176,139,63,0.3); }

/* Basis — 1-op-1 uit het prototype */
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:#fdfcfa; font-family:"Archivo", system-ui, sans-serif; color:#201e1d; }
a { color:#8a6a24; text-decoration:none; cursor:pointer; }
a:hover { color:#6b511a; }
input, button, select, textarea { font-family:inherit; }
img { max-width:100%; }
[hidden] { display:none !important; }
.plate::placeholder { color:#9a8d66; }
@keyframes csb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes csb-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

/* Knoppen die in het prototype <button> waren en hier links zijn */
.csb-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; line-height:normal; text-align:center; cursor:pointer; }
.csb-btn[style*="text-align:left"] { justify-content:flex-start; }
button.csb-btn { font-family:inherit; }

/* Beeldkaders (image-slot in het prototype) */
.csb-img { display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; }
.csb-img-16 { border-radius:16px; }

/* Hover-staten (style-hover in het prototype) */
.h-gold:hover { background:#96742f !important; color:#fff; }
.h-soft:hover { background:#faf7f0 !important; }
.h-chip:hover { background:#f5f0e6 !important; }
.h-dark:hover { background:#3a3735 !important; color:#fff; }
.h-open:hover { background:#e2f0e4 !important; }
.h-closed:hover { background:#f9e1de !important; }
.h-fab:hover { background:#1eb955 !important; color:#fff; }
.h-ink:hover { color:#8a6a24 !important; }

/* Keuzechips: gekozen staat */
.csb-chip[aria-pressed="true"] { background:#f5f0e6 !important; border-color:#b08b3f !important; }

/* Toegankelijke focus zonder de look te veranderen */
a:focus-visible, button:focus-visible { outline:2px solid #b08b3f; outline-offset:2px; }
input:focus, textarea:focus { border-color:#b08b3f !important; }
.plate:focus { border-color:transparent !important; }

/* Honeypot */
.csb-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Overslaan-link voor toetsenbordgebruikers */
.csb-skip { position:absolute; left:-9999px; top:8px; z-index:100; background:#201e1d; color:#fff; padding:10px 14px; border-radius:8px; font-weight:800; }
.csb-skip:focus { left:8px; color:#fff; }

/* Formulieren */
.csb-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b08b3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; padding-right:36px !important; color:#201e1d; }
.csb-consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:#605d5d; cursor:pointer; }
.csb-consent input { width:18px; height:18px; margin:1px 0 0; accent-color:#b08b3f; flex-shrink:0; }
.csb-field-label { display:block; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:800; color:#8a6a24; margin:0 0 6px; }
button[type="submit"][disabled] { cursor:wait; }

/* Kaart pas laden na toestemming (Google plaatst cookies) */
.csb-map { position:relative; width:100%; border-radius:12px; overflow:hidden; background:#efe9dc; background-image:repeating-linear-gradient(90deg, rgba(176,139,63,0.12) 0 1px, transparent 1px 36px), repeating-linear-gradient(0deg, rgba(176,139,63,0.12) 0 1px, transparent 1px 36px); display:flex; align-items:center; justify-content:center; text-align:center; }
.csb-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Juridische teksten */
.csb-legal h2 { font-size:clamp(22px, 3vw, 28px); letter-spacing:-0.02em; margin:40px 0 12px; scroll-margin-top:110px; }
.csb-legal h2:first-child { margin-top:0; }
.csb-legal h3 { font-size:18px; margin:26px 0 8px; letter-spacing:-0.01em; }
.csb-legal p, .csb-legal li { font-size:15px; line-height:1.7; color:#444141; }
.csb-legal p { margin:0 0 12px; }
.csb-legal ul, .csb-legal ol { margin:0 0 14px; padding-left:22px; }
.csb-legal li { margin:0 0 6px; }
.csb-legal table { width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:14px; }
.csb-legal th, .csb-legal td { text-align:left; vertical-align:top; padding:10px 12px; border-top:1px solid #e8e1d3; color:#444141; }
.csb-legal th { background:#faf7f0; color:#201e1d; font-weight:800; }
.csb-legal a { font-weight:700; }
.csb-legal-grid { grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); }
.csb-toc a { display:block; padding:7px 0; color:#201e1d; font-size:14px; font-weight:600; border-bottom:1px solid #e8e1d3; }
.csb-toc a:hover { color:#8a6a24; }

/* ---------- Pagina-raster: één container voor alles ---------- */
:root { --csb-max:1440px; --csb-gutter:clamp(16px, 4vw, 64px); }
.csb-wrap { width:100%; max-width:var(--csb-max); margin-inline:auto; padding-inline:var(--csb-gutter); }

/* ---------- Bovenbalk ---------- */
.csb-topbar { background:#201e1d; color:#c9c4bb; font-size:13px; }
.csb-topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; min-height:40px; }
.csb-topbar-status { min-width:0; max-width:100%; display:inline-flex; align-items:center; gap:14px; background:none; border:0; padding:8px 0; color:inherit; font:inherit; cursor:pointer; text-align:left; }
.csb-status { display:inline-flex; align-items:center; gap:8px; font-weight:700; white-space:nowrap; }
.csb-status-open { color:#a5d6a7; }
.csb-status-closed { color:#ffab9e; }
.csb-status .csb-dot { background:currentColor; }
.csb-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.csb-topbar-hours { display:inline-flex; align-items:center; gap:5px; color:#d9bb74; font-weight:700; white-space:nowrap; }
.csb-topbar-status[aria-expanded="true"] .csb-topbar-hours svg { transform:rotate(180deg); }
.csb-topbar-status:hover .csb-topbar-hours { color:#f3efe6; }
.csb-topbar-links { display:flex; align-items:center; gap:26px; }
.csb-topbar-links a { display:inline-flex; align-items:center; gap:7px; color:#f3efe6; font-weight:600; white-space:nowrap; }
.csb-topbar-links a:hover { color:#d9bb74; }
.csb-topbar-phone { font-weight:800 !important; }

/* ---------- Header ---------- */
.csb-header { position:sticky; top:0; z-index:30; background:#fdfcfa; border-bottom:1px solid #e8e1d3; }
.csb-header-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; min-height:82px; }
.csb-logo { justify-self:start; display:block; flex-shrink:0; }
.csb-logo img { display:block; height:54px; width:auto; }
.csb-nav { display:flex; align-items:center; justify-content:center; gap:clamp(18px, 1.9vw, 34px); font-size:14.5px; font-weight:700; }
.csb-navlink { position:relative; color:#201e1d; white-space:nowrap; padding:8px 0; }
.csb-navlink:hover { color:#8a6a24; }
.csb-navlink[aria-current="page"] { color:#8a6a24; }
.csb-navlink[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#b08b3f; border-radius:2px; }
.csb-header-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.csb-hbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:800; white-space:nowrap; }
.csb-hbtn-line { border:1px solid #e2dacb; color:#201e1d; background:#fff; }
.csb-hbtn-gold { background:#b08b3f; color:#fff; }
.csb-hbtn-gold:hover { color:#fff; }
.csb-header-mobile { display:none; justify-self:end; align-items:center; gap:10px; }
.csb-iconbtn { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #e2dacb; border-radius:10px; background:#fff; cursor:pointer; flex-shrink:0; }
.csb-iconbtn-dark { background:#201e1d; border-color:#201e1d; flex-direction:column; gap:5px; }
.csb-burger { display:block; width:18px; height:2px; background:#fff; transition:transform .2s, opacity .2s; }
[data-menu-toggle][aria-expanded="true"] .csb-burger:nth-child(1) { transform:translateY(7px) rotate(45deg); }
[data-menu-toggle][aria-expanded="true"] .csb-burger:nth-child(2) { opacity:0; }
[data-menu-toggle][aria-expanded="true"] .csb-burger:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Uitklapmenu */
#csb-menu { position:absolute; top:100%; left:0; right:0; z-index:29; background:#201e1d; color:#f3efe6; padding:10px 0 24px; max-height:calc(100dvh - 82px); overflow-y:auto; box-shadow:0 18px 30px rgba(32,30,29,0.25); }
.csb-menu-status { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; padding:10px 0 6px; }
.csb-menu-links { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); column-gap:40px; }
.csb-menu-links a { display:flex; justify-content:space-between; align-items:center; color:#f3efe6; font-size:17px; font-weight:700; padding:14px 0; border-bottom:1px solid #3a3735; }
.csb-menu-links a span { color:#b08b3f; }
.csb-menu-links a:hover, .csb-menu-links a[aria-current="page"] { color:#d9bb74; }
.csb-menu-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.csb-menu-cta a { flex:1; min-width:150px; font-weight:800; font-size:15px; padding:15px 18px; border-radius:10px; text-align:center; }
.csb-menu-address { margin-top:16px; font-size:13px; color:#b9b3a9; }
.csb-menu-address a { color:#d9bb74; }

#csb-hours { background:#faf7f0; border-bottom:1px solid #e8e1d3; }

/* ---------- Responsief ---------- */
/* Kleine laptop: minder ruimte tussen de menu-items, e-mail uit de bovenbalk */
@media (max-width: 1379px) {
  .csb-topbar-links a[href^="mailto:"] { display:none; }
  .csb-nav { font-size:14px; }
  .csb-hbtn { padding:0 14px; }
}
@media (max-width: 1299px) {
  .csb-hbtn-line { width:44px; padding:0; }
  .csb-hbtn-line .csb-hbtn-label { display:none; }
}
/* Tablet en kleiner: hamburgermenu */
@media (max-width: 1199px) {
  .csb-nav, .csb-header-actions { display:none; }
  .csb-header-mobile { display:flex; }
  .csb-header-inner { grid-template-columns:auto 1fr; }
}
@media (max-width: 1080px) {
  .csb-mobilebar { display: flex !important; }
  .csb-fab { display: none !important; }
  footer { padding-bottom: 108px !important; }
}
/* Tablet: hero en tweekoloms-blokken onder elkaar */
@media (max-width: 899px) {
  .csb-topbar-links a:not(.csb-topbar-phone) { display:none; }
  .csb-legal-grid { grid-template-columns:1fr !important; }
  .csb-toc { position:static !important; max-width:none !important; }
  .csb-hero { grid-template-columns:1fr !important; }
  .csb-hero-media { min-height:clamp(260px, 62vw, 480px) !important; padding:0 !important; margin:0 var(--csb-gutter) 40px calc(var(--csb-gutter) + 18px); }
  .csb-hero-media > div { inset:0 !important; }
  .csb-hero-media > div:first-child { transform:translate(-18px, 18px) !important; }
  .csb-col-media { border-left:0 !important; border-right:0 !important; border-top:1px solid #e8e1d3; }
  .csb-col-divider { border-right:0 !important; border-left:0 !important; border-bottom:1px solid #e8e1d3; }
}
@media (max-width: 599px) {
  .csb-topbar-links { display:none; }
  .csb-topbar-inner { justify-content:flex-start; min-height:38px; }
  .csb-points { grid-template-columns:1fr !important; gap:0 !important; }
  .csb-points > div { padding-bottom:12px; }
  .csb-stack-sm { flex-direction:column !important; align-items:flex-start !important; }
  .csb-reviews-score { text-align:left !important; }
  .csb-tiles > * { border-right:0 !important; }
}
@media (max-width: 599px) {
  .csb-trow-tarief { grid-template-columns:minmax(0, 1fr) auto !important; }
  .csb-trow-tarief > div:nth-child(3) { grid-column:1 / -1; padding-top:0 !important; padding-bottom:14px !important; font-size:13.5px; }
  .csb-trow-tarief > div:nth-child(1), .csb-trow-tarief > div:nth-child(2) { padding-bottom:4px !important; }
  .csb-thead.csb-trow-tarief > div:nth-child(3) { display:none; }
  .csb-thead.csb-trow-tarief > div { padding-bottom:16px !important; }
  .csb-trow-compare { grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) !important; font-size:13px !important; }
  .csb-trow-compare > div { padding:11px 8px !important; overflow-wrap:anywhere; }
  .csb-trow-compare > div:first-child { padding-left:14px !important; }
  .csb-thead.csb-trow-compare { font-size:10.5px !important; letter-spacing:0.06em !important; }
  .csb-trow { min-width:0; }
}
@media (max-width: 459px) {
  .csb-span2 { grid-column:1 / -1 !important; }
  .csb-grid-1 { grid-template-columns:1fr !important; }
}
@media (min-width: 560px) and (max-width: 999px) {
  .csb-grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 479px) {
  .csb-topbar-hours { display:none; }
}
/* Kleine telefoons */
@media (max-width: 379px) {
  .csb-topbar-hours { display:none; }
  .csb-mobilebar { gap:6px !important; padding-left:8px !important; padding-right:8px !important; }
  .csb-mobilebar a { font-size:13px !important; gap:5px !important; white-space:nowrap; }
  .csb-mobilebar svg { width:15px; height:15px; }
}
@media (max-width: 339px) {
  .csb-logo img { height:46px; }
  .csb-mobilebar a:first-child svg { display:none; }
}

@media print {
  .csb-header { position: static !important; } .csb-topbar { display:none; }
  .csb-fab, .csb-mobilebar { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  .csb-marquee-track { animation:none !important; }
}
.screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }