/*
Theme Name: Poetsadvies Theme
Theme URI: https://poetsadvies.nl
Author: Go Publish
Author URI: https://gopublish.nl
Description: Volledig custom vanilla WordPress-thema voor Poetsadvies.nl (geen page builder, geen ACF-afhankelijkheid). Design overgenomen uit preview/assets/styles.css en preview/homepage.html (navy/sage-palet, Fraunces voor koppen, Inter voor body-tekst). Zie docs/wp-architectuur.md en docs/sitestructuur.md in de projectroot voor de volledige architectuur; dit thema-skeleton implementeert bewust alleen de basisstructuur (zie functions.php-commentaar voor wat NIET in scope zit).
Version: 0.3.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: poetsadvies
*/

/* ============================================================
   Bron: preview/assets/styles.css (gedeeld designsysteem) +
   preview/homepage.html (homepage-specifieke secties: hero-visual,
   quick-links, cat-row/cat-card, blog-grid, section-dots).
   Tokens: navy/sage-palet, Fraunces (koppen) + Inter (body),
   conform DESIGN.md / docs/design-systeem.md.
   ============================================================ */

:root{
  --navy:#0f2733;
  --navy-2:#173a49;
  --accent:#2f8f72;
  --accent-dark:#206652;
  --bg:#ffffff;
  --bg-soft:#f3f5f4;
  --text:#1c2b2f;
  --text-muted:#5e6e71;
  --border:#e2e7e6;

  /* Statustokens — Middelenchecker (design-systeem.md §2.2), nog niet gebruikt
     in deze scope (plugin poetsadvies-tools is vervolgwerk) maar al wel als
     token beschikbaar zodat latere templates/plugin dezelfde kleuren gebruiken. */
  --danger:#9c3b2e;
  --danger-bg:#fbece8;
  --warning:#8a6a1f;
  --warning-bg:#faf2e1;
  --safe:#206652;
  --safe-bg:#eaf4ef;
}
*{box-sizing:border-box;overflow-wrap:break-word;}
body{
  margin:0;
  font-family:"Inter", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;line-height:1.18;margin:0;font-weight:600;letter-spacing:-.01em;overflow-wrap:break-word;}
em{font-style:italic;color:var(--accent);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
.label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:12px;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding:13px 28px;border-radius:3px;background:var(--accent-dark);color:#fff;
  font-family:"Inter",sans-serif;border:none;cursor:pointer;
}
.btn-primary:hover{background:var(--navy);}
.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
  padding:11px 22px;border-radius:3px;background:#fff;color:var(--navy);
  border:1px solid var(--border);cursor:pointer;font-family:"Inter",sans-serif;
}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent-dark);}
.text-link{
  font-weight:600;font-size:14.5px;color:var(--navy);border-bottom:1.5px solid var(--accent);
  padding-bottom:2px;display:inline-block;
}
.text-link:hover{color:var(--accent-dark);}

/* Focus states — design-systeem.md §6 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.chip:focus-visible,.menu-toggle:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

.notice{
  background:#f3f5f4;border-bottom:1px solid var(--border);
  font-size:12px;color:var(--text-muted);text-align:center;padding:6px 10px;
}

/* Header / navigatie */
header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;}
body.admin-bar header{top:32px;}
@media (max-width:782px){body.admin-bar header{top:46px;}}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;}
.logo{font-family:"Fraunces",serif;font-size:22px;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:8px;}
.logo-word{white-space:nowrap;}
.logo em{font-style:normal;color:var(--accent-dark);}
.logo-icon{width:24px;height:24px;flex-shrink:0;}
nav ul{list-style:none;display:flex;gap:17px;margin:0;padding:0;align-items:center;}
nav li{position:relative;}
nav a{font-weight:600;font-size:15px;letter-spacing:-.005em;color:var(--navy);padding:10px 2px;display:flex;align-items:center;gap:5px;white-space:nowrap;}
nav a:hover{color:var(--accent-dark);}
nav li[aria-current="page"] > a{color:var(--accent-dark);border-bottom:2px solid var(--accent);}
.caret{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.6;}
.dropdown{
  display:none;position:absolute;top:100%;left:-14px;background:#fff;
  border:1px solid var(--border);min-width:220px;
  box-shadow:0 16px 32px rgba(15,39,51,.12);padding:8px;
}
nav li:hover .dropdown, nav li.open .dropdown, nav li:focus-within .dropdown{display:block;}
.dropdown a{padding:9px 14px;font-weight:450;font-size:13.5px;}
.dropdown a:hover{background:var(--bg-soft);}
.menu-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--navy);}

/* Standaard sub-menu (bv. "Schoonmaken" > ruimtes) — simpele verticale dropdown, zelfde patroon als .dropdown. */
.sub-menu{
  display:none;position:absolute;top:100%;left:-14px;background:#fff;
  border:1px solid var(--border);min-width:220px;list-style:none;margin:0;
  box-shadow:0 16px 32px rgba(15,39,51,.12);padding:8px;
}
nav li:hover .sub-menu, nav li.open .sub-menu, nav li:focus-within .sub-menu{display:block;}
.sub-menu li{display:block;}
.sub-menu a{display:block;padding:9px 14px;font-weight:450;font-size:13.5px;white-space:nowrap;}
.sub-menu a:hover{background:var(--bg-soft);}

/* Mega-menu "Schoonmaken" — design-systeem.md §4 */
.mega{
  display:none;position:absolute;top:100%;right:0;left:auto;background:#fff;
  border:1px solid var(--border);box-shadow:0 20px 40px rgba(15,39,51,.14);
  padding:28px;width:620px;max-width:90vw;
}
nav li.has-mega:hover .mega, nav li.has-mega.open .mega, nav li.has-mega:focus-within .mega{display:block;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:28px;}
.mega-col h5{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
.mega-col ul{list-style:none;margin:0;padding:0;display:block;}
.mega-col li{margin-bottom:4px;}
.mega-col a{display:block;padding:7px 8px;border-radius:3px;font-size:13.5px;}
.mega-col a:hover{background:var(--bg-soft);color:var(--accent-dark);}
.mega-feature{border-left:1px solid var(--border);padding-left:24px;}
.mega-feature h5{color:var(--accent-dark);}
.mega-feature h4{font-size:16px;margin:6px 0 6px;color:var(--navy);}
.mega-feature p{font-size:13px;color:var(--text-muted);margin:0;}
.mega-feature a{display:block;white-space:normal;}

/* Hero (homepage) */
.hero{background:var(--navy);color:#fff;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;max-width:1360px;margin:0 auto;}
.hero-text{padding:90px 48px 90px 80px;display:flex;flex-direction:column;justify-content:center;}
.hero-text h1{font-size:40px;color:#fff;margin-bottom:20px;max-width:480px;}
.hero-text p{color:#aec4c9;font-size:15.5px;max-width:420px;margin-bottom:30px;}
.hero-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.hero-cta .text-link{color:#fff;border-bottom-color:var(--accent);}
.hero-photo{position:relative;min-height:460px;background:var(--navy-2);}
.hero-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.hero-visual{display:flex;align-items:center;justify-content:center;}
.hero-visual .dot-bg{position:absolute;width:76%;height:76%;border-radius:46% 54% 58% 42% / 48% 44% 56% 52%;background-color:rgba(255,255,255,.04);background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);background-size:16px 16px;}
.hero-photo.hero-visual img.photo-ring{position:relative;inset:auto;top:auto;left:auto;width:62%;height:auto;aspect-ratio:1/1;max-width:340px;border-radius:50%;object-fit:cover;border:6px solid rgba(255,255,255,.12);box-shadow:0 24px 48px -20px rgba(0,0,0,.45);}
.quick-links{border-top:1px solid rgba(255,255,255,.12);background:var(--navy-2);padding:0 28px;}
.quick-links .wrap{display:flex;flex-wrap:wrap;max-width:1360px;}
.quick-link{
  flex:1 1 220px;display:flex;flex-direction:column;gap:7px;padding:34px 26px;color:#fff;
  border-left:1px solid rgba(255,255,255,.14);transition:background .2s ease;
}
.quick-link:first-child{border-left:none;}
.quick-link:hover{background:var(--accent-dark);}
.quick-link:hover .ql-icon{color:#fff;}
.quick-link:hover .pq-go{color:#fff;}
.quick-link:hover .pq-arrow{transform:translateX(3px);}
.ql-icon{width:26px;height:26px;color:var(--accent);margin-bottom:2px;}
.ql-icon svg{width:100%;height:100%;}
.quick-link strong{font-family:"Fraunces",serif;font-size:18px;font-weight:600;}
.quick-link span{font-size:13.5px;color:#aec4c9;}
.quick-link .pq-go{display:inline-flex;align-items:center;gap:5px;color:#9fd9c3;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:5px;transition:color .2s ease;}
.pq-arrow{width:13px;height:13px;transition:transform .2s ease;}
.hero-ribbon{border-top:1px solid rgba(255,255,255,.12);padding:22px 28px;font-size:14px;line-height:1.7;color:#aec4c9;max-width:720px;margin:0;}
.hero-ribbon strong{font-family:"Fraunces",serif;color:#fff;font-weight:600;}

section{padding:88px 28px;}
.section-sm{padding:56px 28px;}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap;}
.section-top h2{font-size:30px;color:var(--navy);}
.section-top p{color:var(--text-muted);font-size:15.5px;max-width:560px;margin:0;}

/* Categorie-tegels (homepage) */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;}
.cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:12px;border-radius:10px;transition:transform .25s ease;}
.cat-card:hover{transform:translateY(-4px);}
.cat-card .cat-photo{width:136px;height:136px;border-radius:50%;overflow:hidden;box-shadow:0 16px 30px -16px rgba(15,39,51,.4);}
.cat-card .cat-photo span{display:block;width:100%;height:100%;background-size:cover;background-color:var(--navy);background-blend-mode:multiply;filter:saturate(.85);transition:transform .4s ease;}
.cat-card:hover .cat-photo span{transform:scale(1.08);}
.cat-card .cat-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.cat-card h3{font-family:"Fraunces",serif;font-weight:600;font-size:19px;color:var(--navy);margin:2px 0 0;}
.cat-card p{font-size:13px;color:var(--text-muted);margin:4px 0 0;max-width:230px;line-height:1.5;}

/* Blogartikelen / nieuwste artikelen (homepage) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-card{display:flex;flex-direction:column;gap:10px;}
.blog-photo{height:160px;border-radius:10px;background-size:cover;background-color:var(--bg-soft);}
.blog-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);}
.blog-card h3{font-size:16.5px;color:var(--navy);margin:0;}
.blog-card p{font-size:13.5px;color:var(--text-muted);margin:0;}
.blog-card:hover h3{color:var(--accent-dark);}
.section-dots{position:relative;}
.section-dots::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--border) 1.4px, transparent 1.4px);background-size:24px 24px;opacity:.6;pointer-events:none;}
.section-dots > .wrap{position:relative;z-index:1;}

/* Feature split */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;}
.feature-photo{border-radius:6px;overflow:hidden;background:var(--bg-soft);}
.feature-photo img{width:100%;height:420px;object-fit:cover;}
.feature-text h2{font-size:28px;color:var(--navy);margin-bottom:18px;max-width:420px;}
.feature-text p{color:var(--text-muted);font-size:15px;margin-bottom:24px;max-width:440px;}
.feature-list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--border);}
.feature-list li{padding:16px 0;border-bottom:1px solid var(--border);display:flex;gap:14px;font-size:14.5px;color:var(--text);}
.feature-list .mark{color:var(--accent);font-weight:700;flex-shrink:0;}

/* Editorial genummerde lijst (homepage + archief + content-stappenplan) */
.num-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.num-list li{border-bottom:1px solid var(--border);}
.num-list li:first-child{border-top:1px solid var(--border);}
.num-list a, .num-list .row{display:flex;align-items:baseline;gap:18px;padding:22px 4px;}
.num-list .num{font-family:"Fraunces",serif;font-size:22px;color:var(--accent);font-weight:600;flex-shrink:0;}
.num-list h4{font-size:18px;font-weight:600;color:var(--text);font-family:"Inter",sans-serif;margin:3px 0 5px;line-height:1.35;}
.num-list .cat{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
.num-list p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-muted);}

.feature-main{position:relative;border-radius:6px;overflow:hidden;min-height:420px;background-size:cover;background-position:center;display:flex;align-items:flex-end;}
.feature-main-bg{position:absolute;inset:0;background-size:cover;background-color:var(--navy);background-blend-mode:multiply;filter:saturate(.85);transition:transform .5s ease;}
.feature-main:hover .feature-main-bg{transform:scale(1.06);}
.feature-main::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(15,39,51,.92), rgba(15,39,51,0) 65%);}
.feature-main-copy{position:relative;z-index:1;padding:32px;}
.feature-main-copy h3{color:#fff;font-size:26px;margin:8px 0 8px;}
.feature-main-copy p{color:#cfe0e3;font-size:14px;margin:0;}
.tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);}
.featured-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;}
.feature-list-edit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.feature-list-edit li{border-bottom:1px solid var(--border);}
.feature-list-edit li:first-child{border-top:1px solid var(--border);}
.feature-list-edit a{display:flex;gap:16px;align-items:flex-start;padding:18px 4px;transition:gap .2s ease;}
.feature-list-edit a:hover{gap:20px;}
.feature-list-edit a:hover h4{color:var(--accent-dark);}
.feature-list-edit .num{font-family:"Fraunces",serif;font-weight:600;color:var(--border);font-size:18px;flex-shrink:0;}
.feature-list-edit .cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:3px;}
.feature-list-edit h4{color:var(--navy);font-size:15.5px;margin:0 0 2px;}
.feature-list-edit p{margin:0;color:var(--text-muted);font-size:13px;}

/* Vlekkengids A-Z */
.az-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.az-strip a{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;background:#fff;border:1px solid var(--border);
  font-family:"Fraunces",serif;font-weight:600;font-size:15px;color:var(--navy);
}
.az-strip a:hover{border-color:var(--accent);color:var(--accent-dark);}
.az-strip a.disabled{color:#c7d0cf;background:transparent;border-color:var(--border);cursor:default;}

.leeg-state{
  text-align:center;color:var(--text-muted);border:1px dashed var(--border);
  border-radius:6px;padding:36px;font-size:14px;background:var(--bg-soft);
}

/* ===== Taxonomie-archiefpagina (design-systeem.md §3.2 / wp-architectuur.md §5.1) ===== */
.archief-head{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--border);margin-bottom:40px;}
.archief-head h1{font-size:36px;color:var(--navy);margin-bottom:16px;}
.content-head article{max-width:720px;}
.content-head article h1{font-size:36px;color:var(--navy);margin-bottom:32px;}
.content-head article>div>*:first-child{margin-top:0;}
.content-head article>div h2{font-size:22px;color:var(--navy);margin:40px 0 14px;}
.content-head article>div h3{font-size:18px;color:var(--navy);margin:28px 0 10px;}
.content-head article>div p{margin:0 0 16px;line-height:1.65;color:var(--text);}
.content-head article>div ul,.content-head article>div ol{margin:0 0 16px;padding-left:22px;line-height:1.6;}
.content-head article>div li{margin-bottom:6px;}
.archief-head > div:first-child p{color:var(--text-muted);font-size:15px;max-width:520px;}
.archief-facts{border-left:1px solid var(--border);padding-left:32px;display:flex;flex-direction:column;gap:14px;justify-content:center;}
.archief-facts div{font-size:13.5px;color:var(--text-muted);}
.archief-facts strong{font-family:"Fraunces",serif;font-size:20px;color:var(--navy);display:block;}

/* ===== Contentpagina single-handleiding.php (design-systeem.md §3.3,
   docs/content-drafts/single-handleiding-ontwerp.md §1-7) ===== */
.content-body>*:first-child{margin-top:0;}
.content-body h2{font-size:22px;color:var(--navy);margin:40px 0 14px;}
.content-body h3{font-size:18px;color:var(--navy);margin:28px 0 10px;}
.content-body p{margin:0 0 16px;line-height:1.65;color:var(--text);}
.content-body ul,.content-body ol{margin:0 0 16px;padding-left:22px;line-height:1.6;}
.content-body li{margin-bottom:6px;}
.content-body blockquote{margin:0 0 16px;}

.content-meta{color:var(--text-muted);font-size:14px;margin:6px 0 0;}
.content-meta a{color:var(--text-muted);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:1.5px;
  text-underline-offset:2px;}
.content-meta a:hover{color:var(--accent-dark);}

.content-photo{border-radius:6px;overflow:hidden;background:var(--bg-soft);margin:0 0 32px;}
.content-photo img{width:100%;height:360px;object-fit:cover;display:block;}
.content-photo-caption{margin:8px 0 0;font-size:13px;color:var(--text-muted);}
.content-photo-credit{margin:8px 0 0;font-size:13px;color:var(--text-muted);}
.content-photo--inline{max-width:480px;}
.content-photo--inline img{height:260px;}

.supplies-box{border:1px solid var(--border);background:var(--bg-soft);
  border-radius:6px;padding:20px 24px;margin:0 0 32px;}
.supplies-box .label{margin-bottom:10px;}
.supplies-box .feature-list{border-top:none;margin:0;}
.supplies-box .feature-list li:last-child{border-bottom:none;}

.content-grid{display:grid;grid-template-columns:1fr;}

.quick-answer{margin:24px 0 32px;padding:18px 22px;border-radius:8px;
  border-left:4px solid var(--accent);background:var(--bg-soft);}
.quick-answer .label{margin-bottom:6px;}
.quick-answer p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text);
  font-weight:500;}

.faq-block{margin-top:40px;}
.faq-block .label{display:block;margin-bottom:14px;}
.faq-item{border:1px solid var(--border);border-radius:6px;padding:14px 18px;
  margin-bottom:10px;}
.faq-item summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--navy);
  list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"+";display:inline-block;width:16px;
  color:var(--accent);font-weight:700;}
.faq-item[open] summary::before{content:"\2212";}
.faq-item p{margin:10px 0 0 16px;font-size:14.5px;color:var(--text);line-height:1.6;}

.related-pages{margin-top:48px;padding:40px 24px;border-top:1px solid var(--border);}
.related-pages-title{text-align:center;font-size:26px;margin:0 0 10px;}
.related-pages-title::after{content:"";display:block;width:40px;height:3px;
  margin:14px auto 0;background:var(--accent);border-radius:2px;}
.related-pages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:32px;}
.related-card{display:flex;flex-direction:column;align-items:center;text-align:center;}
.related-card-photo{position:relative;display:block;width:100%;aspect-ratio:1/1;
  border-radius:10px;background-color:var(--bg-soft);background-size:cover;
  background-position:center;}
.related-card-arrow{position:absolute;left:50%;bottom:-18px;
  transform:translateX(-50%);width:36px;height:36px;border-radius:50%;
  background:#fff;border:1px solid var(--border);box-shadow:0 8px 18px -8px rgba(15,39,51,.35);
  display:flex;align-items:center;justify-content:center;color:var(--accent-dark);
  transition:background .2s ease,color .2s ease;}
.related-card-arrow svg{width:16px;height:16px;}
.related-card-title{margin-top:28px;font-family:"Fraunces",serif;font-weight:600;
  font-size:16.5px;color:var(--navy);line-height:1.4;}
.related-card:hover .related-card-arrow{background:var(--accent);color:#fff;}
.related-card:hover .related-card-title{color:var(--accent-dark);}
@media (max-width:640px){.related-pages-grid{grid-template-columns:1fr;}}

.tip-callout{display:flex;gap:12px;margin-top:14px;padding:14px 16px;
  border-radius:6px;border-left:3px solid var(--warning);background:var(--warning-bg);}
.tip-callout-icon{flex-shrink:0;width:20px;height:20px;margin-top:2px;color:var(--warning);}
.tip-callout-label{display:block;font-weight:700;font-size:13.5px;color:var(--warning);
  margin-bottom:3px;}
.tip-callout p{margin:0;font-size:14px;color:var(--text);}

/* Facet-filterchips (gedeeld met wizard/checker — plugin poetsadvies-tools is vervolgwerk) */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;
  background:#fff;border:1.5px solid var(--border);border-radius:30px;padding:9px 18px;
  cursor:pointer;line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
/* Twee afwisselende, getemperde tinten op de bestaande navy/sage-tokens (geen nieuw
   palet) zodat een rij van 35 vlekken niet als één ononderbroken witte vlakte oogt. */
.choice-grid .chip:nth-child(odd){background:#e9f3ee;border-color:#cfe4da;color:var(--accent-dark);}
.choice-grid .chip:nth-child(even){background:#eaeef1;border-color:#d6dee2;color:var(--navy-2);}
.chip:hover{border-color:currentColor;transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(15,39,51,.35);}
.chip[aria-pressed="true"]{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;}

/* ===== Homepage v2 — zoekbalk, probleem-paneel, taxonomie-snelkeuze ===== */
.site-search{position:relative;max-width:480px;}
.site-search input[type="search"]{
  width:100%;padding:15px 18px;border:1px solid rgba(255,255,255,.18);border-radius:4px;
  font-family:"Inter",sans-serif;font-size:15px;background:rgba(255,255,255,.06);color:#fff;
}
.site-search input[type="search"]::placeholder{color:#aec4c9;}
.site-search input[type="search"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;background:#fff;color:var(--text);}

.tool-step-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:18px;display:block;}

/* Introtekst boven de wizard (homepage) — géén flex-met-één-kind (dat drukt de
   paragraaf samen tot content-breedte i.p.v. de volle sectiebreedte, vandaar
   de eerdere "tekst wordt afgekapt"-klacht); gewoon gestapeld blok. */
.tool-intro{margin-bottom:36px;}
.tool-intro h2{font-size:28px;color:var(--navy);margin-bottom:20px;}
.tool-intro p{color:var(--text);margin:0;}
.tool-intro p + p{margin-top:10px;}

/* ===== Vlekkenwijzer — volledige wizard (homepage + page-vlekkengids.php) =====
   Bron: preview/assets/styles.css §"Interactieve tools". */
.tool-frame{
  position:relative;border:1px solid var(--border);background:#fff;border-radius:14px;
  padding:44px;box-shadow:0 28px 54px -36px rgba(15,39,51,.28);overflow:hidden;
}
.tool-frame::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
}
.choice-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}

/* Stappenindicator: twee genummerde bollen + vullende lijn, en een "gekozen
   vlek"-pil die verschijnt zodra stap 1 is gekozen (klikbaar om te wijzigen). */
.wiz-progress{
  display:flex;align-items:center;margin-bottom:20px;width:fit-content;
  background:var(--bg-soft);border-radius:30px;padding:8px 14px;
}
.wiz-dot{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-weight:600;font-size:12.5px;color:var(--text-muted);
  background:#fff;border:1.5px solid var(--border);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.wiz-dot.is-active{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;transform:scale(1.1);}
.wiz-track{width:46px;height:2px;margin:0 8px;background:var(--border);position:relative;overflow:hidden;flex-shrink:0;}
.wiz-track-fill{position:absolute;inset:0;width:0;background:var(--accent-dark);transition:width .35s ease;}
.wiz-track-fill.is-filled{width:100%;}
.wiz-chosen{
  margin-left:14px;display:inline-flex;align-items:center;gap:7px;border:none;
  font-family:"Inter",sans-serif;font-size:12.5px;font-weight:700;color:var(--accent-dark);
  background:#e9f3ee;border:1px solid #cfe4da;border-radius:30px;padding:5px 12px;
  cursor:pointer;opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .25s ease;
}
.wiz-chosen.is-visible{opacity:1;transform:translateX(0);}
.wiz-chosen::after{content:"✕";font-size:9px;opacity:.65;}
.wiz-chosen:hover{background:#dcefe6;}

@keyframes wizFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
#stap-materiaal:not([hidden]){animation:wizFadeIn .3s ease;}
.chip[aria-pressed="true"]{animation:wizChipPop .22s ease;}
@keyframes wizChipPop{0%{transform:scale(.92);}60%{transform:scale(1.05);}100%{transform:scale(1);}}
.chip:active{transform:scale(.96);}

.result-block{
  margin-top:28px;padding:20px 22px;border-radius:8px;border-left:4px solid var(--border);
  display:none;gap:14px;
}
.result-block.visible{display:flex;animation:wizFadeIn .35s ease;}
.result-block .r-icon{flex-shrink:0;width:26px;height:26px;margin-top:2px;}
.result-block .r-label{font-weight:700;font-size:15px;margin-bottom:4px;display:block;}
.result-block p{margin:0;font-size:14px;color:var(--text);}
.result-safe{background:var(--safe-bg);border-left-color:var(--safe);}
.result-safe .r-label{color:var(--safe);}
/* Neutrale status — "nog geen gecontroleerd advies beschikbaar". Bewust grijs/getemperd
   en géén groene safe-stijl, zodat dit nooit als een bevestiging gelezen kan worden. */
.result-neutral{background:#fff;border-left-color:var(--text-muted);}
.result-neutral .r-label{color:var(--text-muted);}
.r-bron,.r-note,.r-situatie{margin:10px 0 0;font-size:12.5px;color:var(--text-muted);}
.result-stappen{margin:14px 0 0;padding-left:20px;}
.result-stappen li{margin-bottom:7px;font-size:14px;color:var(--text);}
.tool-noscript{padding:20px;background:#fff;border:1px dashed var(--border);border-radius:4px;font-size:13.5px;color:var(--text-muted);}
.tool-noscript summary::-webkit-details-marker{color:var(--accent-dark);}
@media (max-width: 1140px){
  .tool-frame{padding:24px;}
}

/* Taxonomie-snelkeuze */
.taxo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:var(--navy);border-radius:6px;overflow:hidden;}
.taxo-swatch{
  padding:30px 20px;display:flex;flex-direction:column;gap:10px;
  border-left:1px solid rgba(255,255,255,.14);transition:background .2s ease,color .2s ease;
}
.taxo-swatch:first-child{border-left:none;}
.taxo-swatch .taxo-icon{width:26px;height:26px;color:var(--accent);}
.taxo-swatch .taxo-icon svg{width:100%;height:100%;}
.taxo-swatch .taxo-name{font-family:"Fraunces",serif;font-size:17px;font-weight:600;color:#fff;}
.taxo-swatch .taxo-count{font-size:11.5px;color:#9fd9c3;text-transform:uppercase;letter-spacing:.05em;}
a.taxo-swatch:hover{background:var(--accent);}
a.taxo-swatch:hover .taxo-icon,a.taxo-swatch:hover .taxo-name{color:var(--navy);}
a.taxo-swatch:hover .taxo-count{color:var(--navy-2);}
@media (max-width: 980px){
  .taxo-grid{grid-template-columns:repeat(3,1fr);}
  .taxo-swatch:nth-child(3n+1){border-left:none;}
}
@media (max-width: 560px){
  .taxo-grid{grid-template-columns:repeat(2,1fr);}
  .taxo-swatch:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.14);}
  .taxo-swatch:nth-child(2n+1){border-left:none;}
}

/* Footer (4 kolommen, sitestructuur.md §6) */
footer{background:var(--navy);color:#9fb4ba;padding:64px 28px 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
footer .logo{color:#fff;}
footer .logo em{color:#9fd9c3;}
footer h5{color:#fff;font-size:12.5px;margin:18px 0 16px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin-bottom:10px;font-size:14px;}
footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:11.5px;color:#718990;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{min-height:0;}
  .hero-visual{min-height:280px;padding:36px 0;}
  .hero-text{padding:50px 28px;}
  .quick-links .wrap{flex-direction:column;}
  .quick-link{border-left:none;border-top:1px solid rgba(255,255,255,.14);}
  .quick-link:first-child{border-top:none;}
  .cat-row{grid-template-columns:1fr;gap:36px;}
  .blog-grid{grid-template-columns:1fr;gap:28px;}
  .feature{grid-template-columns:1fr;gap:36px;}
  .feature-photo img{height:280px;}
  .featured-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .archief-head{grid-template-columns:1fr;}
  .archief-facts{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:24px;}
  .mega{width:480px;}
  .mega-grid{grid-template-columns:1fr 1fr;}
  .mega-feature{display:none;}
  .content-photo img{height:240px;}
  .content-photo--inline{max-width:100%;}
}
@media (max-width: 1140px){
  nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);display:none;max-height:80vh;overflow-y:auto;}
  nav.open{display:block;}
  nav ul{flex-direction:column;gap:0;padding:12px 28px;align-items:stretch;}
  nav li{border-bottom:1px solid var(--border);}
  .dropdown,.mega{position:static;border:none;box-shadow:none;display:none;padding:0 0 0 12px;width:auto;}
  nav li.open .dropdown, nav li.open .mega{display:block;}
  .mega-grid{display:block;}
  .mega-col{margin-bottom:16px;}
  .menu-toggle{display:block;}
  section{padding:56px 20px;}
  .section-sm{padding:40px 20px;}
  .hero-text h1{font-size:28px;}
  .section-top h2{font-size:24px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  .cat-card, .cat-card .cat-photo span, .feature-main-bg, .taxo-swatch, .quick-link, .feature-list-edit a, .pq-arrow{transition:none;}
  .cat-card:hover, a.taxo-swatch:hover, .quick-link:hover, .quick-link:hover .pq-arrow{transform:none;}
  .feature-main:hover .feature-main-bg{transform:none;}
  .wiz-dot, .wiz-track-fill, .wiz-chosen, .chip{transition:none;}
  .wiz-dot.is-active{transform:none;}
  #stap-materiaal:not([hidden]), .result-block.visible, .chip[aria-pressed="true"]{animation:none;}
  .chip:active{transform:none;}
}

/* ==========================================================
   "Artikel-kompas" sidebar (goedgekeurd klantconcept, zie
   scratchpad/sidebar-preview/preview.html): sticky sidebar naast
   .content-body op single-handleiding/single-vlek, met een
   vullende voortgangslijn (IntersectionObserver, zie
   assets/js/article-compass.js), optionele materiaal-kaarten en
   een vaste Vlekkengids-kruislinkkaart. Breakpoint afgestemd op de
   bestaande hamburger-nav-breakpoint hierboven (max-width: 1140px)
   i.p.v. de 860px die alleen in de smalle preview-iframe gebruikt werd.
   ========================================================== */
.content-grid-sidebar{display:grid;grid-template-columns:1fr;gap:0;}
@media (min-width:1141px){
  .content-grid-sidebar{grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;}
}

.article-compass{display:none;}
@media (min-width:1141px){
  .article-compass{
    display:block;position:sticky;top:28px;align-self:start;
    border:1px solid var(--border);border-radius:10px;background:#fff;
    padding:22px 20px 20px;box-shadow:0 20px 40px -32px rgba(15,39,51,.35);
  }
}
.compass-label{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;}

/* Verticale stepper met vullende lijn — zelfde idee als .wiz-track-fill op de
   homepage-wizard, hier verticaal en gekoppeld aan scrollpositie i.p.v. een klikstap. */
.compass-steps{position:relative;list-style:none;margin:0 0 20px;padding:0 0 0 22px;}
.compass-steps::before{
  content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border);
}
.compass-steps .fill{
  position:absolute;left:6px;top:4px;width:2px;background:var(--accent);
  height:0%;transition:height .25s ease;
}
.compass-steps li{position:relative;margin-bottom:4px;}
.compass-steps li::before{
  content:"";position:absolute;left:-22px;top:6px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--border);transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.compass-steps a{
  display:block;padding:8px 4px 8px 2px;font-size:15.5px;font-weight:600;color:var(--text-muted);
  line-height:1.4;transition:color .2s ease;
}
.compass-steps li.is-active::before{border-color:var(--accent-dark);background:var(--accent-dark);transform:scale(1.15);}
.compass-steps li.is-active a{color:var(--navy);}
.compass-steps a:hover{color:var(--accent-dark);}

.compass-divider{border:none;border-top:1px solid var(--border);margin:18px 0;}

/* Statische linkenlijst in poetsadvies_static_sidebar_markup() — eenvoudiger
   variant van .compass-steps zonder scroll-gekoppelde voortgangslijn/dots,
   voor paginatypes zonder H2-gestructureerde artikelcontent. */
.compass-static-links{list-style:none;margin:0 0 4px;padding:0;}
.compass-static-links li{border-bottom:1px solid var(--border);}
.compass-static-links li:last-child{border-bottom:none;}
.compass-static-links a{
  display:block;padding:11px 2px;font-size:15px;font-weight:600;color:var(--navy);
  transition:color .15s ease;
}
.compass-static-links a:hover{color:var(--accent-dark);}

/* Materiaal-snelkeuze: een kaart per materiaal met een echt inhoudelijk
   kenmerk (uit de content zelf) + duidelijke actie, i.p.v. losse pil-knoppen. */
.compass-materials{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.compass-material-card{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--bg-soft);border:1.5px solid var(--border);border-radius:10px;
  padding:13px 14px 12px;transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.compass-material-card:hover{border-color:var(--accent);background:#fff;}
.compass-material-card:active{transform:scale(.985);}
.compass-material-card-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.compass-material-card-icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;font-family:"Fraunces",serif;
}
.compass-material-card-name{font-family:"Inter",sans-serif;font-size:16px;font-weight:700;color:var(--navy);}
.compass-material-card-fact{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--text-muted);}
.compass-material-card-cta{
  display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;color:var(--accent-dark);
}
.compass-material-card-cta .arrow{transition:transform .15s ease;}
.compass-material-card:hover .compass-material-card-cta .arrow{transform:translateX(3px);}

/* "Verschillen per materiaal"-accordion — zelfde .faq-item component hergebruikt,
   plus een korte pulse-animatie wanneer een materiaal-kaart hierheen scrollt. */
.material-accordion .faq-item{scroll-margin-top:110px;}
.material-accordion .faq-item.js-pulse{animation:compassPulseBorder 1.1s ease;}
@keyframes compassPulseBorder{
  0%{box-shadow:0 0 0 0 rgba(47,143,114,.45);border-color:var(--accent);}
  100%{box-shadow:0 0 0 10px rgba(47,143,114,0);border-color:var(--border);}
}

/* Vaste cross-link naar de Vlekkengids — komt op ELKE artikelpagina terug,
   los van welk materiaal/onderwerp het artikel zelf behandelt. */
.compass-crosslink{
  display:block;margin-top:18px;padding:16px 16px 15px;border-radius:10px;cursor:pointer;
  background:var(--navy);color:#fff;transition:background .15s ease;
}
.compass-crosslink:hover{background:var(--navy-2);}
.compass-crosslink-head{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.compass-crosslink-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.14);}
.compass-crosslink-icon svg{width:15px;height:15px;stroke:#fff;}
.compass-crosslink-title{font-family:"Fraunces",serif;font-size:15.5px;font-weight:600;color:#fff;}
.compass-crosslink-desc{display:block;margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#d9e3e1;}
.compass-crosslink-cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#fff;text-decoration:none;}
.compass-crosslink-cta .arrow{transition:transform .15s ease;}
.compass-crosslink:hover .compass-crosslink-cta .arrow{transform:translateX(3px);}

@media (max-width:1140px){
  /* Mobiel/tablet (zelfde breakpoint als de hamburger-nav): sidebar bestaat
     niet in de flow — huidige single-column layout blijft exact zoals nu. */
  .article-compass{display:none !important;}
}