/*
Theme Name: Elektro-Onderdelen
Theme URI: https://elektro-onderdelen.be
Description: Klassiek PHP-thema "werkplaats & koperdraad" voor elektro-onderdelen.be — Vlaamse doe-het-zelf- + koopgids voor elektrisch installatiemateriaal.
Author: Elektro-Onderdelen.be
Version: 1.0.0
Text Domain: elektro
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* paper & ink */
  --color-paper:      oklch(96% 0.008 75);   /* #F6F3EE warm betongrijs */
  --color-card:       oklch(100% 0 0);        /* #FFFFFF */
  --color-line:       oklch(91% 0.012 75);    /* randen */
  --color-band:       oklch(93.5% 0.01 75);   /* #ECE7DF sectievlak */
  --color-ink:        oklch(26% 0.012 250);   /* #22262B gunmetal */
  --color-ink-2:      oklch(42% 0.012 250);   /* zachter */
  --color-ink-3:      oklch(58% 0.010 250);   /* meta */
  /* accent: koper-amber */
  --color-accent:     oklch(58% 0.12 55);     /* #B96C2E */
  --color-accent-d:   oklch(50% 0.12 52);     /* hover/donker */
  --color-accent-soft:oklch(85% 0.05 65);     /* #E7C9A8 */
  --color-accent-wash:oklch(95% 0.022 70);    /* lichte accent-achtergrond */
  /* status */
  --color-ok:         oklch(56% 0.09 155);    /* conform-groen */
  --color-ok-wash:    oklch(95% 0.03 155);
  --color-warn:       oklch(52% 0.15 30);     /* veiligheid-rood */
  --color-warn-wash:  oklch(95% 0.035 35);
  --color-focus:      oklch(58% 0.12 55);

  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --text-xs:.78rem; --text-sm:.88rem; --text-base:1.0625rem; --text-lg:1.22rem;
  --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.7rem; --text-display-s:3.4rem; --text-display:4.4rem;

  --space-2:2px; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px;
  --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px;

  --gutter:clamp(16px, 5vw, 56px);
  --maxw:1140px;
  --radius:4px; --radius-lg:8px;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur:180ms;
  --rule:1px solid var(--color-line);
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.62;
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01";
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.05; letter-spacing:-0.02em; margin:0; overflow-wrap:anywhere; min-width:0}
h1{font-size:clamp(2.3rem, 6vw, var(--text-display)); font-weight:900}
h2{font-size:clamp(1.7rem, 3.6vw, var(--text-3xl)); font-weight:800}
h3{font-size:var(--text-xl); font-weight:700}
p{margin:0 0 var(--space-16)}
a{color:var(--color-accent-d); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--color-accent-d); font-weight:600; margin:0 0 var(--space-12)}
.lead{font-size:var(--text-lg); color:var(--color-ink-2); line-height:1.6}
.mono{font-family:var(--font-mono)}

/* ---- nav: N6 utility-bar (koper bovenrand, geen plain N1) ---- */
.topbar{border-top:3px solid var(--color-accent); background:var(--color-card); border-bottom:var(--rule); position:sticky; top:0; z-index:30}
.nav{display:flex; align-items:center; gap:var(--space-24); height:68px}
.nav__logo{display:flex; align-items:center}
.nav__logo img{height:38px; width:auto}
.nav__links{display:flex; gap:var(--space-24); margin-left:auto; align-items:center; font-size:var(--text-sm); font-weight:500}
.nav__links a{color:var(--color-ink-2)}
.nav__links a:hover{color:var(--color-ink); text-decoration:none}
.nav__cta{font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); background:var(--color-ink); color:var(--color-card); padding:10px 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.nav__cta:hover{background:var(--color-accent-d); text-decoration:none}
.nav__burger{display:none; margin-left:auto; background:none; border:var(--rule); border-radius:var(--radius); padding:8px 10px; font-size:1.1rem}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); padding:13px 20px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)}
.btn--primary{background:var(--color-accent); color:#fff}
.btn--primary:hover{background:var(--color-accent-d); text-decoration:none}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--color-ink); border-color:var(--color-ink)}
.btn--ghost:hover{background:var(--color-ink); color:#fff; text-decoration:none}
.btn--shop{background:var(--color-ink); color:#fff}
.btn--shop:hover{background:var(--color-accent-d); text-decoration:none}

/* ---- hero ---- */
.hero{padding:var(--space-64) 0 var(--space-48)}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-48); align-items:center}
.hero__fig{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 18px 40px -24px rgba(34,38,43,.5); aspect-ratio:4/3; background:var(--color-band)}
.hero__fig img{width:100%; height:100%; object-fit:cover}
.hero h1{margin-bottom:var(--space-16)}
.hero .accent{color:var(--color-accent)}
.hero__cta{display:flex; gap:var(--space-12); flex-wrap:wrap; margin-top:var(--space-24)}
.hero__trust{display:flex; gap:var(--space-24); margin-top:var(--space-32); font-size:var(--text-sm); color:var(--color-ink-3); flex-wrap:wrap}
.hero__trust span{display:flex; align-items:center; gap:8px}

/* ---- sections ---- */
section{padding:var(--space-64) 0}
.band{background:var(--color-band)}
.sec-head{max-width:62ch; margin-bottom:var(--space-32)}
.sec-head h2{margin-bottom:var(--space-12)}

/* ---- category / link grid ---- */
.grid{display:grid; gap:var(--space-16)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat{background:var(--color-card); border:var(--rule); border-radius:var(--radius-lg); padding:var(--space-24); transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); display:block; color:inherit}
.cat:hover{transform:translateY(-3px); box-shadow:0 12px 28px -20px rgba(34,38,43,.6); text-decoration:none}
.cat__ic{width:42px; height:42px; color:var(--color-accent); margin-bottom:var(--space-16)}
.cat h3{margin-bottom:var(--space-8); font-size:var(--text-lg)}
.cat p{font-size:var(--text-sm); color:var(--color-ink-2); margin:0}
.cat__more{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent-d); margin-top:var(--space-16); display:inline-block; letter-spacing:.04em}

/* ---- material / aanrader card ---- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-24)}
.card{background:var(--color-card); border:var(--rule); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column}
.card__img{aspect-ratio:4/3; background:var(--color-band); object-fit:cover; width:100%}
.card__b{padding:var(--space-24); display:flex; flex-direction:column; gap:var(--space-8); flex:1}
.card__tag{font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--color-ok); font-weight:600}
.card h3{font-size:var(--text-lg)}
.card__spec{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-ink-2)}
.card__price{margin-top:auto; font-family:var(--font-mono); font-weight:600}
.card__price b{font-size:var(--text-lg); color:var(--color-ink)}
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600; padding:4px 9px; border-radius:100px; letter-spacing:.04em}
.badge--ok{background:var(--color-ok-wash); color:var(--color-ok)}
.badge--top{background:var(--color-accent-wash); color:var(--color-accent-d)}

/* ---- table ---- */
.tbl{width:100%; border-collapse:collapse; background:var(--color-card); border:var(--rule); border-radius:var(--radius-lg); overflow:hidden; font-size:var(--text-sm)}
.tbl th,.tbl td{padding:13px 16px; text-align:left; border-bottom:var(--rule)}
.tbl th{font-family:var(--font-display); font-weight:700; background:var(--color-band); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em}
.tbl td.num{font-family:var(--font-mono)}
.tbl tr:last-child td{border-bottom:none}

/* ---- howto steps ---- */
.steps{display:grid; gap:var(--space-16); counter-reset:s}
.step{background:var(--color-card); border:var(--rule); border-left:3px solid var(--color-accent); border-radius:var(--radius); padding:var(--space-24) var(--space-24) var(--space-24) var(--space-64); position:relative}
.step::before{counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:var(--space-24); top:var(--space-24); font-family:var(--font-mono); font-weight:600; color:var(--color-accent); font-size:var(--text-base)}
.step h3{font-size:var(--text-lg); margin-bottom:var(--space-4)}
.step p{margin:0; font-size:var(--text-sm); color:var(--color-ink-2)}

/* ---- callouts ---- */
.callout{border-radius:var(--radius-lg); padding:var(--space-24); display:flex; gap:var(--space-16); align-items:flex-start; margin:var(--space-24) 0}
.callout svg{flex:none; width:26px; height:26px; margin-top:2px}
.callout--warn{background:var(--color-warn-wash); border:1px solid color-mix(in oklab, var(--color-warn) 35%, transparent)}
.callout--warn svg{color:var(--color-warn)}
.callout--ok{background:var(--color-ok-wash); border:1px solid color-mix(in oklab, var(--color-ok) 35%, transparent)}
.callout--ok svg{color:var(--color-ok)}
.callout b{font-family:var(--font-display)}
.callout p{margin:4px 0 0; font-size:var(--text-sm); color:var(--color-ink-2)}

/* ---- tool widget ---- */
.tool{background:var(--color-ink); color:var(--color-card); border-radius:var(--radius-lg); padding:var(--space-48); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-48); align-items:center}
.tool h2{color:#fff}
.tool .lead{color:color-mix(in oklab, #fff 80%, transparent)}
.tool__panel{background:#fff; color:var(--color-ink); border-radius:var(--radius-lg); padding:var(--space-24)}
.tool__row{display:flex; justify-content:space-between; align-items:center; gap:var(--space-16); padding:10px 0; border-bottom:var(--rule)}
.tool__row label{font-size:var(--text-sm); font-weight:500}
.tool__row input,.tool__row select{font-family:var(--font-mono); border:var(--rule); border-radius:var(--radius); padding:8px 10px; font-size:var(--text-sm); width:120px; background:var(--color-paper)}
.tool__out{margin-top:var(--space-16); background:var(--color-accent-wash); border-radius:var(--radius); padding:var(--space-16); text-align:center}
.tool__out .v{font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:600; color:var(--color-accent-d)}
.tool__out .k{font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--color-ink-3); font-family:var(--font-mono)}

/* checklist tool */
.check{display:grid; gap:var(--space-8)}
.check__item{display:flex; gap:var(--space-12); align-items:center; background:var(--color-paper); border:var(--rule); border-radius:var(--radius); padding:12px 16px; font-size:var(--text-sm)}
.check__box{width:22px; height:22px; border-radius:var(--radius); border:2px solid var(--color-ok); flex:none; display:grid; place-items:center; color:var(--color-ok); font-size:.8rem}

/* ---- expert ---- */
.expert{display:grid; grid-template-columns:auto 1fr; gap:var(--space-24); align-items:center; background:var(--color-card); border:var(--rule); border-radius:var(--radius-lg); padding:var(--space-32)}
.expert__ph{width:96px; height:96px; border-radius:50%; object-fit:cover; background:var(--color-band)}
.expert__name{font-family:var(--font-display); font-weight:800; font-size:var(--text-lg)}
.expert__role{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent-d); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--space-8)}
.byline{display:flex; gap:var(--space-12); align-items:center; font-size:var(--text-sm); color:var(--color-ink-3); margin:var(--space-16) 0 var(--space-32)}
.byline img{width:40px; height:40px; border-radius:50%; object-fit:cover}

/* ---- FAQ ---- */
.faq details{background:var(--color-card); border:var(--rule); border-radius:var(--radius); padding:var(--space-16) var(--space-24); margin-bottom:var(--space-8)}
.faq summary{font-family:var(--font-display); font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--space-16)}
.faq summary::after{content:"+"; color:var(--color-accent); font-family:var(--font-mono)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:var(--space-12) 0 0; font-size:var(--text-sm); color:var(--color-ink-2)}

/* ---- disclosure ---- */
.disclosure{font-size:var(--text-sm); color:var(--color-ink-3); background:var(--color-band); border-radius:var(--radius); padding:12px 16px; display:flex; gap:10px; align-items:center}
.disclosure svg{width:18px; height:18px; color:var(--color-accent-d); flex:none}

/* ---- breadcrumb ---- */
.crumb{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-ink-3); padding:var(--space-24) 0 0; letter-spacing:.03em}
.crumb a{color:var(--color-ink-3)}

/* ---- article body ---- */
.prose{max-width:none}
.article{display:grid; grid-template-columns:1fr; gap:var(--space-48)}
.article__body h2{margin:var(--space-48) 0 var(--space-16)}
.article__body h3{margin:var(--space-32) 0 var(--space-8)}
.article__body ul{padding-left:1.2em}
.article__body li{margin-bottom:6px}
.article__fig{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; background:var(--color-band); margin:var(--space-24) 0}
.article__fig img{width:100%; height:100%; object-fit:cover}

/* related / hub-spoke */
.related{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-16)}
.related a{background:var(--color-card); border:var(--rule); border-radius:var(--radius); padding:var(--space-16); font-weight:600; font-family:var(--font-display); font-size:var(--text-sm); color:var(--color-ink); display:flex; justify-content:space-between; gap:10px}
.related a:hover{border-color:var(--color-accent); text-decoration:none; color:var(--color-accent-d)}

/* ---- form ---- */
.form{display:grid; gap:var(--space-16); max-width:560px}
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:var(--text-sm)}
.field input,.field textarea{font-family:var(--font-body); border:var(--rule); border-radius:var(--radius); padding:12px 14px; font-size:var(--text-base); background:var(--color-card)}
.field input:focus,.field textarea:focus{outline:2px solid var(--color-focus); outline-offset:1px}

/* ---- footer: Ft5 statement ---- */
.foot{background:var(--color-ink); color:color-mix(in oklab,#fff 72%,transparent); padding:var(--space-64) 0 var(--space-32); margin-top:var(--space-64)}
.foot__statement{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3.4vw,var(--text-3xl)); color:#fff; max-width:18ch; line-height:1.08; margin-bottom:var(--space-48)}
.foot__statement .accent{color:var(--color-accent-soft)}
.foot__cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-32); border-top:1px solid #3a3f46; padding-top:var(--space-32)}
.foot h4{font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:#fff; margin-bottom:var(--space-16); font-weight:500}
.foot a{color:color-mix(in oklab,#fff 72%,transparent); font-size:var(--text-sm); display:block; margin-bottom:8px}
.foot a:hover{color:#fff}
.foot__safety{font-size:var(--text-xs); color:color-mix(in oklab,#fff 55%,transparent); margin-top:var(--space-32); border-top:1px solid #3a3f46; padding-top:var(--space-24); line-height:1.6}

/* ---- mockup chrome (alleen voor de design-review pagina, niet voor de echte site) ---- */
.mock-note{background:var(--color-accent-wash); border-bottom:1px solid var(--color-accent-soft); font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent-d); padding:8px var(--gutter); text-align:center; letter-spacing:.03em}

/* ---- responsive ---- */
@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr; gap:var(--space-32)}
  .hero__fig{order:-1}
  .tool{grid-template-columns:1fr; gap:var(--space-24); padding:var(--space-32)}
  .grid--3,.cards,.related{grid-template-columns:1fr 1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .nav__links{display:none}
  .nav__burger{display:block}
}
@media (max-width:560px){
  .grid--3,.grid--2,.cards,.related,.foot__cols{grid-template-columns:1fr}
  .expert{grid-template-columns:1fr; text-align:left}
  section{padding:var(--space-48) 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important; scroll-behavior:auto}
}

/* WP-specifiek */
.hp{position:absolute!important;left:-9999px!important}
.mock-note{display:none}
.callout-ic{flex:none;width:26px;height:26px;margin-top:2px}
.check__item input{width:18px;height:18px;accent-color:var(--color-ok)}
.tool-check{background:var(--color-card);border:var(--rule);border-radius:var(--radius-lg);padding:var(--space-32)}
.byline a{color:var(--color-accent-d)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--gutter);top:8px;background:var(--color-ink);color:#fff;padding:8px 14px;border-radius:4px;z-index:50}
.nav__links a.current{color:var(--color-ink);font-weight:600}

/* mobiel menu open-state */
@media (max-width:880px){
  .nav__links.is-open{display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--color-card); border-bottom:var(--rule); padding:16px var(--gutter); gap:16px; box-shadow:0 12px 24px -16px rgba(34,38,43,.5); align-items:stretch; z-index:40}
  .nav__links.is-open a{padding:6px 0}
  .nav__links.is-open .nav__cta{justify-content:center}
}
.hi{width:18px;height:18px;color:var(--color-ok)}
.disc-ic{width:18px;height:18px;color:var(--color-accent-d);flex:none}