/*
Theme Name: Sleutelvast
Theme URI: https://fietsstad2008.nl
Description: Fiets-onderhoudsgids — utilitair werkplaats-thema (Sleutelvast). Custom theme, hi-vis lime accent.
Author: Sleutelvast
Version: 1.0.0
Text Domain: fietsstad
*/

:root{
  --color-paper:oklch(96% 0.008 110);
  --color-paper-2:oklch(99% 0.004 110);
  --color-paper-3:oklch(92% 0.010 110);
  --color-ink:oklch(24% 0.012 250);
  --color-ink-2:oklch(42% 0.012 250);
  --color-signal:oklch(82% 0.19 122);
  --color-signal-deep:oklch(64% 0.16 125);
  --color-steel:oklch(50% 0.06 240);
  --color-rust:oklch(58% 0.15 45);
  --color-line:oklch(86% 0.010 110);
  --color-focus:oklch(64% 0.16 125);
  --color-ink-dark:oklch(20% 0.012 250);

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --space-xs:.5rem; --space-sm:.75rem; --space-md:1.25rem; --space-lg:2rem;
  --space-xl:3.25rem; --space-2xl:5rem;
  --gutter:clamp(1rem,5vw,2.5rem);
  --maxw:1120px; --measure:68ch;
  --radius:10px; --radius-sm:6px;
  --text-display:clamp(2.4rem,6vw,4rem);
  --text-h2:clamp(1.5rem,3.2vw,2.1rem);
  --text-h3:1.2rem;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --dur:.18s;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--color-ink);
  background:var(--color-paper);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.01em;
  overflow-wrap:anywhere;min-width:0;margin:0 0 .5em}
h1{font-size:var(--text-display);font-weight:700}
h2{font-size:var(--text-h2);font-weight:700}
h3{font-size:var(--text-h3);font-weight:700}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--color-signal-deep);text-underline-offset:3px}
a:hover{color:var(--color-ink)}
.mono{font-family:var(--font-mono)}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-xl)}
.lede{font-size:1.18rem;color:var(--color-ink-2);max-width:62ch}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-weight:500;font-size:.98rem;padding:.7rem 1.15rem;border-radius:var(--radius-sm);
  background:var(--color-ink);color:var(--color-paper);text-decoration:none;
  border:1px solid var(--color-ink);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
  cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--color-signal);color:var(--color-paper)}
.btn--lime{background:var(--color-signal);color:var(--color-ink);border-color:var(--color-signal)}
.btn--lime:hover{color:var(--color-ink);box-shadow:0 0 0 2px var(--color-ink)}
.btn--ghost{background:transparent;color:var(--color-ink);border-color:var(--color-line)}
.btn--ghost:hover{color:var(--color-ink);border-color:var(--color-ink);box-shadow:none}
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:2px}

/* ---- header / nav (N6-ish) ---- */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--color-paper),transparent 8%);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--color-line)}
.nav{display:flex;align-items:center;gap:var(--space-md);min-height:64px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);
  font-weight:700;font-size:1.18rem;color:var(--color-ink);text-decoration:none;letter-spacing:-.02em}
.brand svg{flex:none}
.nav-links{display:flex;gap:1.1rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--color-ink);text-decoration:none;font-size:.95rem;font-weight:500}
.nav-links a:hover{color:var(--color-signal-deep)}
.nav-cta{margin-left:.4rem}
.hamburger{display:none;margin-left:auto;background:none;border:1px solid var(--color-line);
  border-radius:var(--radius-sm);padding:.45rem .6rem;cursor:pointer}

/* ---- hero ---- */
.hero{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-xl);align-items:center;
  padding-block:var(--space-xl)}
.hero-eyebrow{font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--color-signal-deep);margin-bottom:.9rem}
.hero-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-line);
  aspect-ratio:4/3;background:var(--color-paper-3)}
.hero-media img{width:100%;height:100%;object-fit:cover}

/* ---- onderdelen-grid (workbench) ---- */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--space-md)}
.card{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);
  padding:var(--space-md);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
  text-decoration:none;color:inherit;display:block}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 22px -14px var(--color-ink);color:inherit}
.card h3{margin-bottom:.25rem}
.card .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--color-ink-2)}
.card .ico{width:34px;height:34px;color:var(--color-ink);margin-bottom:.6rem}
.card .ico .fill{fill:var(--color-signal)}

.section-head{margin-bottom:var(--space-lg);max-width:62ch}
.section-head .tag{display:block;font-family:var(--font-mono);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink-2);margin-bottom:.5rem}

/* ---- step block ---- */
.steps{display:grid;gap:var(--space-md);counter-reset:s;margin:var(--space-md) 0}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);align-items:start}
.step .num{font-family:var(--font-mono);font-weight:500;color:var(--color-ink);
  background:var(--color-signal);width:40px;height:46px;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-size:1rem}
.step h3{margin-bottom:.2rem}

/* ---- need / tools box ---- */
.need{background:var(--color-paper-2);border:1px solid var(--color-line);border-left:3px solid var(--color-signal);
  border-radius:var(--radius);padding:var(--space-md);margin:var(--space-lg) 0}
.need h3{margin-bottom:.6rem}
.need ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.need li{display:flex;gap:.6rem;align-items:center}
.need li svg{flex:none;color:var(--color-signal-deep)}
.need a{font-weight:600}

/* ---- spec table ---- */
table.spec{width:100%;border-collapse:collapse;margin:var(--space-md) 0;font-size:.96rem}
table.spec th,table.spec td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--color-line)}
table.spec th{font-family:var(--font-display);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
table.spec tr:nth-child(even) td{background:var(--color-paper-3)}
table.spec td .mono{color:var(--color-ink)}

/* ---- let op ---- */
.note{border:1px solid var(--color-rust);border-left:3px solid var(--color-rust);
  background:color-mix(in oklch,var(--color-rust),var(--color-paper) 88%);
  border-radius:var(--radius);padding:var(--space-sm) var(--space-md);margin:var(--space-md) 0}
.note strong{color:var(--color-rust)}

/* ---- badges ---- */
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:var(--space-sm) 0}
.badge{font-family:var(--font-mono);font-size:.78rem;background:var(--color-paper-3);
  border:1px solid var(--color-line);border-radius:100px;padding:.25rem .7rem}

/* ---- aanrader / product card ---- */
.product{display:grid;grid-template-columns:96px 1fr auto;gap:var(--space-md);align-items:center;
  background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);
  padding:var(--space-md)}
.product .thumb{width:96px;height:96px;border-radius:var(--radius-sm);background:var(--color-paper-3);
  display:grid;place-items:center;color:var(--color-ink-2)}
.product .price{font-family:var(--font-mono);font-size:.82rem;color:var(--color-ink-2);
  background:var(--color-paper-3);border-radius:var(--radius-sm);padding:.2rem .5rem;display:inline-block}

/* ---- expert ---- */
.expert{display:grid;grid-template-columns:120px 1fr;gap:var(--space-md);align-items:center;
  background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-md)}
.expert img{width:120px;height:120px;border-radius:50%;object-fit:cover}
.byline{display:flex;gap:.6rem;align-items:center;color:var(--color-ink-2);font-size:.92rem;margin:var(--space-sm) 0}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover}

/* ---- tool ---- */
.tool{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);
  padding:var(--space-lg);max-width:560px}
.field{display:grid;gap:.35rem;margin-bottom:var(--space-md)}
.field label{font-weight:600;font-size:.92rem}
.field input,.field select{font:inherit;padding:.6rem .7rem;border:1px solid var(--color-line);
  border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink)}
.result{margin-top:var(--space-md);padding:var(--space-md);border-radius:var(--radius);
  background:var(--color-ink);color:var(--color-paper);font-family:var(--font-mono)}
.result .big{font-size:1.8rem;display:block}
.result .lime{color:var(--color-signal)}

/* ---- form ---- */
form.contact{max-width:520px;display:grid;gap:var(--space-md)}
textarea{font:inherit;padding:.6rem .7rem;border:1px solid var(--color-line);border-radius:var(--radius-sm);
  background:var(--color-paper);min-height:120px;resize:vertical}

/* ---- footer (Ft5 statement) ---- */
.site-foot{background:var(--color-ink-dark);color:var(--color-paper);margin-top:var(--space-2xl);
  padding-block:var(--space-xl)}
.foot-state{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;
  max-width:18ch;margin-bottom:var(--space-lg)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.foot-cols h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-signal);margin-bottom:.7rem}
.foot-cols a{display:block;color:color-mix(in oklch,var(--color-paper),transparent 22%);
  text-decoration:none;font-size:.92rem;padding:.18rem 0}
.foot-cols a:hover{color:var(--color-signal)}
.foot-bottom{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid color-mix(in oklch,var(--color-paper),transparent 80%);
  display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;font-size:.85rem;
  color:color-mix(in oklch,var(--color-paper),transparent 35%)}
.foot-brand{display:flex;align-items:center;gap:.5rem;color:var(--color-paper);font-family:var(--font-display);font-weight:700}

.crumbs{font-size:.85rem;color:var(--color-ink-2);margin:var(--space-md) 0 0}
.crumbs a{color:var(--color-ink-2)}
mark{background:var(--color-signal);color:var(--color-ink);padding:0 .15em}
.faq dt{font-weight:600;margin-top:var(--space-md)}
.faq dd{margin:.25rem 0 0;color:var(--color-ink-2)}
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--space-lg)}

/* ---- responsive ---- */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}
  .hamburger{display:block}
  .expert,.product{grid-template-columns:1fr}
  .product{text-align:left}
}
@media(max-width:430px){
  body{font-size:16px}
  .foot-cols{grid-template-columns:1fr}
  .step{grid-template-columns:1fr}
  .step .num{margin-bottom:.3rem}
}

/* ---- WP-specifiek ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-ink);color:var(--color-paper);padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:.5rem;top:.5rem}
.menu{display:flex;gap:1.1rem;margin:0 0 0 auto;padding:0;list-style:none;align-items:center;flex-wrap:wrap}
.menu li{margin:0}
.menu a{color:var(--color-ink);text-decoration:none;font-size:.95rem;font-weight:500}
.menu a:hover{color:var(--color-signal-deep)}
.article-wrap{max-width:760px;margin:0 auto;padding-inline:var(--gutter)}
.article-wrap .content{max-width:none}
.article-wrap .content h2{margin-top:var(--space-lg)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-md)}
.post-card{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden}
.post-card img{width:100%;height:190px;object-fit:cover}
.post-card .body{padding:var(--space-md)}
.post-card h3{margin:0 0 .4rem;font-size:1.08rem}
.post-card h3 a{color:var(--color-ink);text-decoration:none}
.post-card h3 a:hover{color:var(--color-signal-deep)}
.head .tag{display:block;font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-ink-2);margin-bottom:.5rem}
.sec{padding-block:var(--space-xl)}
.hp{position:absolute;left:-9999px}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--space-lg)}
.pagination .page-numbers{padding:.4rem .8rem;border:1px solid var(--color-line);border-radius:var(--radius-sm);text-decoration:none;color:var(--color-ink)}
.pagination .current{background:var(--color-ink);color:var(--color-paper)}
.menu-open-body{overflow:hidden}
@media(max-width:860px){
  .menu{position:fixed;inset:64px 0 auto 0;background:var(--color-paper);flex-direction:column;
    align-items:flex-start;padding:var(--gutter);gap:var(--space-sm);border-bottom:1px solid var(--color-line);
    transform:translateY(-130%);transition:transform .25s var(--ease-out);box-shadow:0 12px 30px -18px var(--color-ink);margin:0}
  .menu.open{transform:translateY(0)}
  .menu .nav-cta{margin:.4rem 0 0}
}