/* ============================================================
   STEEP MIGRATION — goldlemon.nl site-wide rebrand (juni 2026)
   Laadt als LAATSTE stylesheet, na het cream-migration blok.
   Laag 1: token-remap (meeste regels kleuren automatisch om).
   Laag 2: component-overrides met !important waar cream-migration
   hardcoded waarden zet (radius 3px, shadows none, borders).
   Verwijderen van dit bestand + font-link = volledige rollback.
   ============================================================ */

/* ---------- 0. MOBIEL: geen horizontale overflow ---------- */
/* clip dekt decoratieve glows/off-canvas die buiten de viewport bleeden,
   zonder een scroll-container te maken (sticky/fixed blijven werken). */
html,body{overflow-x:clip}

/* ---------- 0b. TOEGANKELIJKHEID ---------- */
/* zichtbare focus voor toetsenbordnavigatie (rust-accent) */
:focus-visible{outline:2px solid #5d2a1a;outline-offset:3px;border-radius:4px}
/* respecteer prefers-reduced-motion: zet marquees, wiel, reveals en transities stil */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- 1. TOKEN REMAP ---------- */
:root{
  /* canvas & tekst */
  --warm-cream:#ffffff;          /* paginakleur: editorial cream -> wit */
  --card-bg:#ffffff;             /* kaarten: wit met schaduw i.p.v. tint */
  --ink:#17191c;
  --ink2:#1d2024;                /* donkere inlay-blokken blijven donker */
  --ink3:#262a30;
  --ink-muted:#4c4c4c;
  --cream:#17191c;               /* cream-tekst (op nu witte canvas) -> ink */
  --muted:#4c4c4c;               /* oude rgba-cream muted -> ash */

  /* accenten: goud/teal -> rust */
  --amber:#5d2a1a;
  --gold:#7a3a24;                /* hover-variant van rust */
  --accent:#5d2a1a;
  --green:#1c7c4a;

  /* lijnen & vormen */
  --border:rgba(23,25,28,.08);
  --border2:rgba(93,42,26,.25);
  --r:16px;

  /* steep extra's */
  --fog:#f7f7f8;
  --apricot:#fbe1d1;
  --sky:#d3e3fc;
  --rust:#5d2a1a;
  --steep-shadow:0 0 0 1px rgba(4,23,43,.05),0 1px 2px rgba(16,18,21,.05),0 10px 22px -10px rgba(16,18,21,.14),0 28px 48px -18px rgba(16,18,21,.16);
  --steep-shadow-lift:0 0 0 1px rgba(4,23,43,.05),0 2px 4px rgba(16,18,21,.06),0 18px 32px -12px rgba(16,18,21,.18),0 42px 64px -22px rgba(16,18,21,.2);
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
}

/* ---------- 2. BASIS TYPOGRAFIE ---------- */
body,button,input,select,textarea{font-family:var(--sans)!important;letter-spacing:-0.009em}
body{background:var(--warm-cream)!important;color:var(--ink)!important;-webkit-font-smoothing:antialiased}

/* display-koppen: Geist 800 -> serif 400 */
h1,h2,
.hero-h1,.blog-h1,.article-h1,.cta-h2,
.wwd-hero__title,.art h2,.art-cta-title,
.wwd-card__heading{
  font-family:var(--serif)!important;
  font-weight:400!important;
  letter-spacing:-0.02em!important;
  line-height:1.1!important;
}
.hero-h1,.blog-h1{line-height:1.06!important}
h3{font-weight:500!important;letter-spacing:-0.015em}
.art h3{font-family:var(--sans)!important;font-weight:600!important;color:var(--ink)!important}

/* italic em-accenten: serif italic in rust (token doet de kleur) */
h1 em,h2 em,.hero-h1 em,.blog-h1 em,.article-h1 em,.cta-h2 em,
.wwd-hero__title em,.art h2 em,.art-cta-title em{
  font-family:var(--serif)!important;font-style:italic!important;font-weight:400!important;
}

/* zware sans-gewichten temperen op Inter */
.post-title,.post-title-sm,.related-card-title,.sys-title,.author-name{font-weight:600!important}
strong,b{font-weight:600}
.art p,.art li{color:var(--ink-muted)!important}
.art strong{color:var(--ink)!important}
.art a{color:var(--rust)!important;border-bottom-color:rgba(93,42,26,.3)!important}
.art a:hover{border-bottom-color:var(--rust)!important}

/* ---------- 3. NAV (floating pill -> steep glas) ---------- */
nav,nav#mainNav{
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(23,25,28,.08)!important;
  box-shadow:0 1px 2px rgba(16,18,21,.04),0 12px 32px -12px rgba(16,18,21,.16)!important;
  backdrop-filter:saturate(180%) blur(16px)!important;
}
.nav-logo,.footer-logo{font-family:var(--sans)!important;font-weight:600!important;color:var(--ink)!important}
.nav-logo::before,.footer-logo::before{content:"";display:inline-block;width:22px;height:22px;background:url(/img/logo-mark.svg) center/contain no-repeat;margin-right:8px;vertical-align:-5px}
.nav-logo span,.footer-logo span{color:#16BDB0!important}
.nav-links a{color:var(--ink)!important;font-weight:450}
.nav-links a:hover,.nav-links a.active{color:var(--ink-muted)!important}
.nav-mobile{background:rgba(255,255,255,.98)!important}
.nav-mobile a{font-family:var(--serif)!important;font-weight:400!important;color:var(--ink)!important;border-bottom:1px solid var(--fog)!important}
.nav-mobile a:hover{color:var(--rust)!important}
.lang-switch{border:1px solid rgba(23,25,28,.18)!important;color:var(--ink-muted)!important;border-radius:9999px!important}
.lang-switch:hover{border-color:var(--rust)!important;color:var(--rust)!important}

/* ---------- 4. KNOPPEN: alles terug naar steep pill ---------- */
.btn,.btn-primary,.btn-ghost,.btn-sec,.nav-cta,
.hero-btn-primary,.hero-cta-primary,.hero-btn-secondary,.hero-cta-secondary,
.btn-amber-art,.filter-btn,#cookieAccept,#cookieReject{
  border-radius:9999px!important;
}
.btn-primary,button.btn-primary,a.btn-primary,
.hero-btn-primary,.hero-cta-primary,.nav-cta,.btn-amber-art,#cookieAccept{
  background:linear-gradient(180deg,#2a2d33,#17191c 60%)!important;
  color:#fff!important;border:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(16,18,21,.25),0 8px 18px -8px rgba(16,18,21,.45)!important;
}
.btn-primary:hover,.hero-btn-primary:hover,.hero-cta-primary:hover,.nav-cta:hover,.btn-amber-art:hover,#cookieAccept:hover{
  background:linear-gradient(180deg,#33373d,#1d2024 60%)!important;color:#fff!important;
}
.btn-ghost,.btn-sec,a.btn-ghost,button.btn-ghost,
.hero-btn-secondary,.hero-cta-secondary{
  background:#fff!important;border:1px solid #a3a6af!important;color:var(--ink)!important;
}
.btn-ghost:hover,.btn-sec:hover,.hero-btn-secondary:hover,.hero-cta-secondary:hover{
  background:#fff!important;border-color:var(--ink)!important;color:var(--ink)!important;
}
.gl-link,.btn-tertiary{color:var(--rust)!important;text-decoration-color:rgba(93,42,26,.4)!important}
.svc-link,.niche-cta,.case-cta,.read-more,.lp-cta-link{color:var(--rust)!important}
.filter-btn{border:1px solid #a3a6af!important;color:var(--ink-muted)!important;background:#fff!important}
.filter-btn:hover{border-color:var(--ink)!important;color:var(--ink)!important}
.filter-btn.active{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}

/* ---------- 5. KAARTEN: tint-vlakken -> witte keramiek met schaduw ---------- */
.svc-card,.get-card,.post-card,.featured-card,.featured-body,.sys-card,
.related-card,.author-bio,.prijs-card,.gl-manifest__bezel,.gl-manifest__card,
.wwd-card__bezel,.config-block,#prijzen .config-block,.lp-step{
  background:#fff!important;
  border-color:transparent!important;
  box-shadow:var(--steep-shadow)!important;
  border-radius:24px!important;
}
.svc-card:hover,.get-card:hover,.post-card:hover,.featured-card:hover,
.sys-card:hover,.related-card:hover,.prijs-card:hover{
  border-color:transparent!important;
  box-shadow:var(--steep-shadow-lift)!important;
}
.post-card,.featured-card{overflow:hidden!important}
.sys-card{border-radius:18px!important}
.sys-card:hover{transform:translateX(0) translateY(-3px)!important}
.sys-icon{background:rgba(93,42,26,.07)!important;border:1px solid rgba(93,42,26,.16)!important;border-radius:10px!important}
.sys-badge{color:var(--rust)!important;background:var(--apricot)!important;border:none!important}
.featured-badge{background:var(--rust)!important}
.wwd-card{background:transparent!important;border-color:transparent!important;padding:0!important}
.wwd-card:hover{border-color:transparent!important}

/* dubbele-bezel grids: cellen op fog, container hairline */
.num-grid-lp,.lp-grid{background:rgba(23,25,28,.06)!important;border-color:rgba(23,25,28,.08)!important;border-radius:20px!important}
.num-cell,.lp-grid-cell,.stat-cell{background:var(--fog)!important}
.num-big{font-family:var(--serif)!important;font-weight:400!important;color:var(--ink)!important;letter-spacing:-0.02em!important}

/* secties & banden */
.cta-sec{background:var(--fog)!important;border-top:1px solid rgba(23,25,28,.08)!important;border-bottom:1px solid rgba(23,25,28,.08)!important}
.cta-strip{background:var(--fog)!important;border-top:1px solid rgba(23,25,28,.08)!important;border-bottom:1px solid rgba(23,25,28,.08)!important}
.marquee{background:var(--fog)!important;border-color:rgba(23,25,28,.08)!important}
.mitem{color:rgba(93,42,26,.35)!important}
footer{background:#fff!important;border-top:1px solid rgba(23,25,28,.12)!important}
.f-copy{color:#777b86!important}

/* ---------- 6. ARTIKEL-COMPONENTEN: steep washes ---------- */
.art blockquote{
  background:var(--apricot)!important;border-left:3px solid var(--rust)!important;
  color:var(--ink)!important;border-radius:0 16px 16px 0!important;
  font-family:var(--serif)!important;
}
.art .highlight-box{background:var(--sky)!important;border:none!important;border-radius:20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important}
.art .highlight-box p,.art .highlight-box li{color:var(--ink)!important}
.toc{background:var(--fog)!important;border:none!important;border-radius:20px!important}
.toc-title{color:var(--rust)!important}
.toc li a:hover{color:var(--rust)!important}
.art-cta{
  background:linear-gradient(135deg,#fdeee2,#fbe1d1 55%,#f8d3bb)!important;
  border:none!important;border-radius:24px!important;
  box-shadow:0 0 0 1px rgba(4,23,43,.04),inset 0 1px 0 rgba(255,255,255,.6),0 24px 48px -20px rgba(93,42,26,.25)!important;
}
.art-cta-sub{color:var(--ink-muted)!important}
.art-img{border-radius:12px!important}
.art-img figcaption{color:#777b86!important}
.breadcrumb a:hover{color:var(--rust)!important}
.breadcrumb span{color:#a3a6af!important}
.author-bio-av{border-color:rgba(93,42,26,.3)!important}
.author-role{color:var(--rust)!important}

/* ---------- 7. PRIJZEN & CONFIGURATOR ---------- */
#prijzen .prijs-card.featured{border-top:none!important;outline:2px solid var(--rust)!important;outline-offset:-2px}
#prijzen .prijs-card.config-active{outline:2px solid var(--rust)!important;outline-offset:-2px}
#prijzen .prijs-tag{color:var(--rust)!important}
#prijzen .config-toggle[aria-pressed="true"]{background:var(--rust)!important;border-color:var(--rust)!important}

/* ---------- 8. FAQ ---------- */
details{background:transparent!important;border:none!important;border-bottom:1px solid rgba(23,25,28,.1)!important}
details summary:hover{color:var(--rust)!important}
details p a{color:var(--rust)!important}
.faq-icon{color:var(--rust)!important}

/* ---------- 9. HERO-ELEMENTEN ---------- */
.hero-pill{background:var(--apricot)!important;border:none!important;color:var(--rust)!important}
.hero-pip,.pip{background:var(--green)!important;opacity:1!important}
.article-cat{background:var(--apricot)!important;border:none!important;color:var(--rust)!important}
.hero-sub{color:var(--ink-muted)!important;font-size:16px!important}
.hs-n{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-0.02em!important}
.hs-n span{color:var(--rust)!important}

/* zachte dawn-glow terug in de hero (cream-migration zette glows uit) */
.hero-lp,.wwd-hero{position:relative;isolation:isolate}
.hero-lp::before,.wwd-hero::before{
  content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:1100px;height:680px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 46% 42% at 50% 36%,rgba(247,200,160,.5),rgba(247,200,160,0) 70%),radial-gradient(ellipse 60% 54% at 50% 40%,rgba(251,225,209,.55),rgba(251,225,209,0) 72%);
}

/* ---------- 10. SVG-ACCENTEN: goud/teal -> rust ---------- */
svg [stroke="#D98A22"]{stroke:#5d2a1a!important}
svg [stroke="#FFB627"]{stroke:#5d2a1a!important}
svg [stroke="#16BDB0"]{stroke:#5d2a1a!important}
svg [fill="#D98A22"]{fill:#5d2a1a!important}
svg [fill="#FFB627"]{fill:#5d2a1a!important}
svg [fill="#16BDB0"]{fill:#5d2a1a!important}

/* ---------- 11. DIVERSEN ---------- */
::selection{background:var(--apricot);color:var(--ink)}
#cookieBanner{background:#17191c!important;border-top:none!important;border-radius:18px 18px 0 0!important}
#cookieBanner a{color:#fbe1d1!important}
#cookieReject{border:1px solid rgba(255,255,255,.3)!important;color:#fff!important}
.eyebrow{color:#777b86!important;font-weight:500!important;letter-spacing:.08em!important}
.eyebrow::before{background:var(--rust)!important;opacity:.55}
.post-cat,.related-cat{color:var(--rust)!important}
.wwd-card__num{color:var(--rust)!important}
.wwd-card__link{color:var(--rust)!important}

/* ---------- 12. DARK-BASE PAGINA'S (zonder cream-migration) ---------- */
/* 17 dienst-pagina's draaien nog op de originele donkere basis.
   Tokens hierboven maken tekst ink; hieronder de resterende
   donkere vlakken en bleke rgba-cream tinten naar steep licht. */
#cookieBanner,#cookieBanner p{color:#fff!important}
.modal-box,.modal-content,.modal-inner,.modal-card{background:#fff!important;color:var(--ink)!important}
.post-meta-sm,.article-meta,.hs-l,.author-desc{color:#777b86!important}
.nav-burger span{background:var(--ink)!important}
.nav-close{color:var(--ink-muted)!important}
[style*="background:#0F0F0F"],[style*="background: #0F0F0F"],
[style*="background:#080808"],[style*="background: #080808"],
[style*="background:var(--ink2)"],[style*="background: var(--ink2)"],
[style*="background:var(--ink3)"],[style*="background: var(--ink3)"],
[style*="background:var(--ink)"],[style*="background: var(--ink)"]{
  background:#fff!important;border-color:rgba(23,25,28,.08)!important;
}
/* wat-we-doen: paginabrede donkere wrapper */
.wwd-page{background:var(--warm-cream)!important;color:var(--ink)!important}
.wwd-hero,.wwd-section{background:transparent!important}
.wwd-card__body{color:var(--ink-muted)!important}
.wwd-hero__lead,.wwd-section__intro{color:var(--ink-muted)!important}
[style*="color:var(--cream)"],[style*="color: var(--cream)"],
[style*="color:#F4F3EF"],[style*="color: #F4F3EF"]{color:var(--ink)!important}
[style*="color:var(--muted)"],[style*="color: var(--muted)"]{color:var(--ink-muted)!important}

/* code-blokken: bewust donker (zoals dashboard-inlay), wel steep-radius */
.code-block{border-radius:12px!important}

/* reduced motion respecteren */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .marquee-track{animation:none!important}
}