/*
Theme Name: BW Chiptuningbedrijf
Theme URI: https://chiptuningbedrijf.nl
Author: Samautomation
Description: Onafhankelijk, eerlijk block-thema voor chiptuningbedrijf.nl — automotive, technisch-strak, betrouwbaar. Carbon/antraciet + signaaloranje.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: bw-chiptuningbedrijf
*/

/* Hallmark · macrostructure: Workbench · genre: modern-minimal · tone: technical/trust
 * theme: custom (carbon workshop · paper #1A1D21 dark-chrome + #FFFFFF light-content · accent warm-orange · display geometric-tech-sans)
 * fonts: Saira (display) + Inter (body) · diversification axes: dark+light hybrid / geometric-sans / warm-accent
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 * honest copy: no invented metrics · contrast: pass
 */

:root{
  --ct-carbon:#1A1D21; --ct-carbon-2:#22262B; --ct-carbon-3:#2A2F35;
  --ct-steel:#3A4048; --ct-light:#F3F4F6; --ct-paper:#FFFFFF;
  --ct-ink:#1A1D21; --ct-ink-soft:#52585F;
  --ct-on-dark:#E7E9EC; --ct-on-dark-soft:#A4ACB4;
  --ct-accent:#FF6A2C; --ct-accent-dark:#E85A1E;
  --ct-ok:#2FA866; --ct-warn:#D64545;
  --ct-hairline:#E2E4E8; --ct-hairline-dark:#363B41;
  --ct-ease:cubic-bezier(.22,.61,.36,1);
  --ct-radius:14px; --ct-radius-sm:10px;
  --ct-shadow:0 1px 2px rgba(16,19,23,.06),0 8px 28px rgba(16,19,23,.07);
}

html{ overflow-x:clip; scroll-behavior:smooth; }
body{ overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
*{ overflow-wrap:break-word; }

/* ---------- Section helpers (full-width banded layout) ---------- */
.ct-band{ padding-block:var(--wp--preset--spacing--70); }
.ct-band--dark{ background:var(--ct-carbon); color:var(--ct-on-dark); }
.ct-band--carbon2{ background:var(--ct-carbon-2); color:var(--ct-on-dark); }
.ct-band--light{ background:var(--ct-light); }
.ct-band--dark :is(h1,h2,h3,h4), .ct-band--carbon2 :is(h1,h2,h3,h4){ color:#fff; }
.ct-band--dark .ct-lead, .ct-band--carbon2 .ct-lead{ color:var(--ct-on-dark-soft); }
/* ct-info blokken op donkere secties: lichte tekst + donker-vriendelijke note-bg */
.ct-band--dark .ct-info, .ct-band--carbon2 .ct-info{ color:var(--ct-on-dark); }
.ct-band--dark .ct-info strong, .ct-band--carbon2 .ct-info strong{ color:#fff; }
.ct-band--dark .ct-info--note, .ct-band--carbon2 .ct-info--note{ background:rgba(255,106,44,.12); border-color:rgba(255,106,44,.4); }
.ct-band--dark .ct-info--ok, .ct-band--carbon2 .ct-info--ok{ background:rgba(47,168,102,.14); border-color:rgba(47,168,102,.45); }
.ct-band--dark .ct-info--warn, .ct-band--carbon2 .ct-info--warn{ background:rgba(214,69,69,.14); border-color:rgba(214,69,69,.45); }
.ct-lead{ font-size:var(--wp--preset--font-size--large); color:var(--ct-ink-soft); line-height:1.6; }

/* eyebrow / kicker */
.ct-eyebrow{ font-family:var(--wp--preset--font-family--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; color:var(--ct-accent); margin:0 0 .6rem; display:flex; align-items:center; gap:.55rem; }
.ct-eyebrow::before{ content:""; width:26px; height:2px; background:var(--ct-accent); display:inline-block; }

/* section heading underline accent */
.ct-h-accent{ position:relative; padding-bottom:.5rem; }
.ct-h-accent::after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--ct-accent); border-radius:2px; }

/* ---------- HERO ---------- */
.ct-hero{ background:linear-gradient(165deg,#23272D 0%,#1A1D21 60%); color:var(--ct-on-dark);
  padding-block:var(--wp--preset--spacing--80) var(--wp--preset--spacing--70); position:relative; overflow:clip; }
.ct-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 380px at 88% -8%, rgba(255,106,44,.16), transparent 60%); }
.ct-hero > *{ position:relative; z-index:1; }
.ct-hero h1{ font-size:clamp(2.4rem,1.4rem + 4vw,3.9rem); letter-spacing:-.02em; color:#fff; max-width:16ch; }
.ct-hero .ct-lead{ max-width:54ch; }
.ct-trustline{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1.4rem; font-size:.95rem; color:var(--ct-on-dark-soft); }
.ct-trustline span{ display:inline-flex; align-items:center; gap:.5rem; }
.ct-trustline span::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ct-accent); flex:0 0 auto; }

/* independence ribbon */
.ct-ribbon{ display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,106,44,.12);
  border:1px solid rgba(255,106,44,.35); color:#FFCBB0; border-radius:999px;
  padding:.4rem .9rem; font-size:.85rem; font-weight:600; margin-bottom:1.3rem; }
.ct-ribbon::before{ content:"●"; color:var(--ct-accent); font-size:.7rem; }

/* ---------- Buttons (extra: ghost on dark) ---------- */
.ct-btn-ghost a, a.ct-btn-ghost{ display:inline-block; font-family:var(--wp--preset--font-family--display); font-weight:700;
  color:#fff !important; text-decoration:none; padding:.85rem 1.5rem; border-radius:var(--ct-radius-sm);
  border:1.5px solid rgba(255,255,255,.3); transition:border-color .2s var(--ct-ease), background .2s var(--ct-ease); }
.ct-btn-ghost a:hover{ border-color:var(--ct-accent); background:rgba(255,106,44,.1); }

/* ---------- Cards (uitleg-kaarten) ---------- */
.ct-cards .wp-block-column{ background:var(--ct-paper); border:1px solid var(--ct-hairline);
  border-radius:var(--ct-radius); padding:1.6rem 1.5rem; box-shadow:var(--ct-shadow);
  transition:transform .22s var(--ct-ease), box-shadow .22s var(--ct-ease), border-color .22s var(--ct-ease); position:relative; }
.ct-cards .wp-block-column::before{ content:""; position:absolute; top:0; left:1.5rem; right:1.5rem; height:3px;
  background:var(--ct-accent); border-radius:0 0 3px 3px; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ct-ease); }
.ct-cards .wp-block-column:hover{ transform:translateY(-4px); box-shadow:0 10px 34px rgba(16,19,23,.12); border-color:#D7DAE0; }
.ct-cards .wp-block-column:hover::before{ transform:scaleX(1); }
.ct-cards h3{ font-size:1.3rem; margin:.2rem 0 .5rem; }
.ct-card-ico{ width:42px; height:42px; border-radius:10px; background:var(--ct-light);
  display:grid; place-items:center; font-size:1.3rem; margin-bottom:.9rem; }

/* ---------- Legaliteit-infoblok ---------- */
.ct-info{ border-radius:var(--ct-radius); padding:1.4rem 1.5rem; border:1px solid; display:flex; gap:1rem; align-items:flex-start; }
.ct-info__ico{ font-size:1.4rem; line-height:1; flex:0 0 auto; margin-top:.1rem; }
.ct-info p{ margin:.2rem 0 0; }
.ct-info strong{ font-family:var(--wp--preset--font-family--display); }
.ct-info--ok{ background:rgba(47,168,102,.08); border-color:rgba(47,168,102,.35); }
.ct-info--ok .ct-info__ico{ color:var(--ct-ok); }
.ct-info--warn{ background:rgba(214,69,69,.07); border-color:rgba(214,69,69,.32); }
.ct-info--warn .ct-info__ico{ color:var(--ct-warn); }
.ct-info--note{ background:#FFF6F0; border-color:rgba(255,106,44,.3); }
.ct-info--note .ct-info__ico{ color:var(--ct-accent-dark); }

/* ---------- Merk-tegels ---------- */
.ct-tegels .wp-block-button__link, .ct-tegels a.ct-tegel{ display:flex; align-items:center; justify-content:space-between;
  background:var(--ct-carbon-3); color:#fff !important; border:1px solid var(--ct-hairline-dark);
  border-radius:var(--ct-radius-sm); padding:.95rem 1.1rem; font-family:var(--wp--preset--font-family--display);
  font-weight:600; text-decoration:none; transition:border-color .2s var(--ct-ease), background .2s var(--ct-ease), transform .2s var(--ct-ease); }
.ct-tegels a.ct-tegel:hover{ border-color:var(--ct-accent); background:#31373E; transform:translateY(-2px); }
.ct-tegels a.ct-tegel::after{ content:"→"; color:var(--ct-accent); font-weight:700; }

/* ---------- Kosten / vergelijk tabel ---------- */
.ct-table{ width:100%; border-collapse:collapse; background:var(--ct-paper); border:1px solid var(--ct-hairline);
  border-radius:var(--ct-radius); overflow:hidden; font-size:1rem; }
.ct-table th, .ct-table td{ padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--ct-hairline); }
.ct-table thead th{ background:var(--ct-carbon); color:#fff; font-family:var(--wp--preset--font-family--display);
  font-weight:600; letter-spacing:.01em; }
.ct-table tbody tr:last-child td{ border-bottom:0; }
.ct-table tbody tr:nth-child(even){ background:#FAFBFC; }
.ct-table td:last-child{ font-family:var(--wp--preset--font-family--display); font-weight:600; }
.ct-table-wrap{ overflow-x:auto; border-radius:var(--ct-radius); }

/* ---------- FAQ accordeon ---------- */
.ct-faq details{ background:var(--ct-paper); border:1px solid var(--ct-hairline); border-radius:var(--ct-radius-sm);
  padding:0 1.25rem; margin-bottom:.75rem; transition:border-color .2s var(--ct-ease); }
.ct-faq details[open]{ border-color:#CFD3D9; box-shadow:var(--ct-shadow); }
.ct-faq summary{ list-style:none; cursor:pointer; padding:1.05rem 2rem 1.05rem 0; position:relative;
  font-family:var(--wp--preset--font-family--display); font-weight:600; font-size:1.1rem; color:var(--ct-ink); }
.ct-faq summary::-webkit-details-marker{ display:none; }
.ct-faq summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--ct-accent); transition:transform .2s var(--ct-ease); line-height:1; }
.ct-faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.ct-faq details > *:not(summary){ padding-bottom:1.1rem; margin-top:-.2rem; color:var(--ct-ink-soft); }

/* ---------- CTA band ---------- */
.ct-cta{ background:linear-gradient(135deg,#22262B 0%,#15171A 100%); color:#fff; border-radius:var(--ct-radius);
  padding:var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); text-align:center; position:relative; overflow:clip; }
.ct-cta::after{ content:""; position:absolute; inset:0; background:radial-gradient(600px 240px at 50% 0%, rgba(255,106,44,.18), transparent 65%); pointer-events:none; }
.ct-cta > *{ position:relative; z-index:1; }
.ct-cta h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.ct-cta .ct-lead{ color:var(--ct-on-dark-soft); max-width:48ch; margin-inline:auto; }

/* ---------- USP / process steps ---------- */
.ct-steps{ counter-reset:step; }
.ct-steps .wp-block-column{ position:relative; padding-top:.5rem; }
.ct-steps .wp-block-column::before{ counter-increment:step; content:"0" counter(step);
  font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:1.5rem; color:var(--ct-accent); display:block; margin-bottom:.4rem; }

/* ---------- HEADER (V1-classic + block compat) ---------- */
.wp-block-template-part .ct-header{ background:var(--ct-carbon); }
.ct-header{ background:var(--ct-carbon); color:#fff; border-bottom:1px solid var(--ct-hairline-dark); }
.ct-header a{ color:#fff; text-decoration:none; }
.ct-header .wp-block-site-title a{ color:#fff !important; }
.ct-header .wp-block-navigation a{ color:var(--ct-on-dark) !important; font-family:var(--wp--preset--font-family--display); font-weight:500; }
.ct-header .wp-block-navigation a:hover{ color:#fff !important; }
.ct-header .wp-block-navigation .current-menu-item a{ color:#fff !important; }

/* ---------- FOOTER ---------- */
.ct-footer{ background:var(--ct-carbon); color:var(--ct-on-dark-soft); border-top:3px solid var(--ct-accent); }
.ct-footer a{ color:var(--ct-on-dark-soft); text-decoration:none; }
.ct-footer a:hover{ color:#fff; }
.ct-footer h3, .ct-footer .wp-block-heading{ color:#fff; font-size:1.05rem; }
.ct-footer-meta{ border-top:1px solid var(--ct-hairline-dark); color:#7E868E; font-size:.9rem; }

/* ---------- Content (single/page) refinements ---------- */
.ct-prose :is(h2){ margin-top:2.4rem; }
.ct-prose :is(h3){ margin-top:1.8rem; }
.ct-prose blockquote{ border-left:3px solid var(--ct-accent); padding:.4rem 0 .4rem 1.2rem; margin:1.6rem 0;
  color:var(--ct-ink-soft); font-style:normal; background:#FAFBFC; border-radius:0 8px 8px 0; }
.ct-prose blockquote p{ margin:.3rem 0; }
.ct-prose ul li::marker{ color:var(--ct-accent); }

/* ---------- Reveal animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .ct-reveal{ opacity:0; transform:translateY(16px); animation:ctUp .6s var(--ct-ease) forwards; }
  @keyframes ctUp{ to{ opacity:1; transform:none; } }
}

/* ---------- Focus ---------- */
:where(a,button,summary,input,textarea,select):focus-visible{ outline:3px solid var(--ct-accent); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--ct-accent); color:#1A1D21; }

/* ---------- SVG iconen ---------- */
.ct-ico{ display:inline-flex; align-items:center; justify-content:center; }
.ct-ico svg{ width:100%; height:100%; display:block; }
.ct-card-ico{ width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#FFEDE3,#FFD9C4);
  display:grid; place-items:center; margin-bottom:1rem; color:var(--ct-accent-dark); }
.ct-card-ico svg{ width:26px; height:26px; }
.ct-band--dark .ct-card-ico, .ct-band--carbon2 .ct-card-ico{ background:rgba(255,106,44,.14); color:var(--ct-accent); }

/* ---------- HERO grid (tekst + illustratie) ---------- */
.ct-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center; }
.ct-hero__art{ position:relative; }
.ct-hero__art svg{ width:100%; height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
@media (max-width:900px){ .ct-hero__grid{ grid-template-columns:1fr; gap:1.5rem; } .ct-hero__art{ max-width:420px; margin:0 auto; order:-1; } }

/* ---------- USP-bar ---------- */
.ct-uspbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ct-hairline);
  border:1px solid var(--ct-hairline); border-radius:var(--ct-radius); overflow:hidden; }
.ct-uspbar__item{ background:var(--ct-paper); padding:1.3rem 1.2rem; display:flex; gap:.85rem; align-items:flex-start; }
.ct-uspbar__ico{ width:30px; height:30px; flex:0 0 auto; color:var(--ct-accent-dark); }
.ct-uspbar__item strong{ font-family:var(--wp--preset--font-family--display); display:block; font-size:1rem; margin-bottom:.15rem; }
.ct-uspbar__item span{ font-size:.9rem; color:var(--ct-ink-soft); line-height:1.45; }
@media (max-width:860px){ .ct-uspbar{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ct-uspbar{ grid-template-columns:1fr; } }

/* ---------- Soorten mini-cards ---------- */
.ct-soorten{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ct-soorten__card{ background:var(--ct-paper); border:1px solid var(--ct-hairline); border-radius:var(--ct-radius);
  padding:1.4rem; transition:transform .2s var(--ct-ease), box-shadow .2s var(--ct-ease); }
.ct-soorten__card:hover{ transform:translateY(-3px); box-shadow:var(--ct-shadow); }
.ct-soorten__ico{ width:40px; height:40px; color:var(--ct-accent-dark); margin-bottom:.7rem; }
.ct-soorten__card h3{ font-size:1.15rem; margin:0 0 .4rem; }
.ct-soorten__card p{ font-size:.95rem; color:var(--ct-ink-soft); margin:0; }
@media (max-width:760px){ .ct-soorten{ grid-template-columns:1fr; } }

/* ---------- Vermogen voor/na ---------- */
.ct-vermogen{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
  background:var(--ct-carbon-2); border-radius:var(--ct-radius); padding:2rem; color:var(--ct-on-dark); }
.ct-vermogen h3{ color:#fff; }
.ct-vermogen p{ color:var(--ct-on-dark-soft); }
.ct-vermogen svg{ width:100%; height:auto; }
@media (max-width:760px){ .ct-vermogen{ grid-template-columns:1fr; gap:1.2rem; } }

/* ---------- Eco strip ---------- */
.ct-eco{ display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center;
  background:linear-gradient(120deg,rgba(47,168,102,.1),rgba(47,168,102,.03)); border:1px solid rgba(47,168,102,.3);
  border-radius:var(--ct-radius); padding:1.6rem 1.8rem; }
.ct-eco__ico{ width:46px; height:46px; color:var(--ct-ok); flex:0 0 auto; }
.ct-eco h3{ margin:0 0 .25rem; font-size:1.25rem; }
.ct-eco p{ margin:0; color:var(--ct-ink-soft); }
@media (max-width:680px){ .ct-eco{ grid-template-columns:1fr; text-align:left; } }

/* ---------- Onderwerpen / interne link-hub ---------- */
.ct-onderwerpen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.7rem; }
.ct-onderwerpen a{ display:flex; align-items:center; gap:.7rem; background:var(--ct-paper); border:1px solid var(--ct-hairline);
  border-radius:var(--ct-radius-sm); padding:.85rem 1rem; text-decoration:none; color:var(--ct-ink);
  font-weight:500; transition:border-color .2s var(--ct-ease), transform .2s var(--ct-ease); }
.ct-onderwerpen a:hover{ border-color:var(--ct-accent); transform:translateX(3px); }
.ct-onderwerpen a svg{ width:20px; height:20px; color:var(--ct-accent-dark); flex:0 0 auto; }
.ct-onderwerpen a span{ flex:1; }
.ct-onderwerpen a::after{ content:"→"; color:var(--ct-accent); }

/* ---------- Info-blok SVG-iconen ---------- */
.ct-info__ico svg{ width:24px; height:24px; }

/* ---------- Breadcrumbs ---------- */
.ct-breadcrumb, .rank-math-breadcrumb{ font-size:.85rem; color:var(--ct-ink-soft); margin-bottom:1.2rem; }
.ct-breadcrumb a, .rank-math-breadcrumb a{ color:var(--ct-ink-soft); text-decoration:none; }
.ct-breadcrumb a:hover, .rank-math-breadcrumb a:hover{ color:var(--ct-accent-dark); text-decoration:underline; }
.ct-breadcrumb .separator, .rank-math-breadcrumb .separator{ margin:0 .4rem; color:var(--ct-accent); }
.rank-math-breadcrumb p{ margin:0; }
.rank-math-breadcrumb .last{ color:var(--ct-ink); font-weight:500; }

/* ---------- Pagina-hero SVG-banner ---------- */
.ct-page-hero{ border-radius:var(--ct-radius); overflow:hidden; margin:0 0 1.8rem; line-height:0; box-shadow:0 10px 30px rgba(16,19,23,.1); }
.ct-page-hero svg{ width:100%; height:auto; display:block; }

/* ---------- Merk-tegel met icoon ---------- */
.ct-tegels a.ct-tegel{ gap:.6rem; }
.ct-tegels a.ct-tegel .tegel-ico{ width:22px; height:22px; color:var(--ct-accent); flex:0 0 auto; margin-right:auto; }
.ct-tegels a.ct-tegel .tegel-naam{ flex:0 1 auto; }

/* ---------- Responsive ---------- */
@media (max-width:781px){
  .ct-band{ padding-block:var(--wp--preset--spacing--60); }
  .ct-hero{ padding-block:var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
  .ct-trustline{ gap:.4rem 1rem; }
  .ct-cards .wp-block-column{ padding:1.3rem 1.25rem; }
}