/*
Theme Name: markt2
Theme URI: https://markt2.nl
Description: Onafhankelijke gids voor tweedehands kopen en verkopen — klassiek thema voor markt2.nl (warm linnen + marktdag-oker). Niet voor algemene distributie.
Author: markt2
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: markt2
*/
/* Hallmark · macrostructure: per page (Marquee Hero / Comparison / Long Document / Category / Article)
 * tone: utilitair-editorial · genre: editorial · theme: custom "marktdag-warmte"
 * paper #F7F4ED (light) · display roman-serif (Newsreader) · accent warm oker #C9772E
 * pre-emit critique: P5 H5 E4 S5 R5 V4 · contrast: pass (AA)
 * markt2.nl — onafhankelijke tweedehands-gids — MOCKUP (design-voorstel)
 */

/* ---------- tokens ---------- */
:root{
  --paper:#F7F4ED; --paper-2:#ECE6D8; --paper-3:#F2EDE2;
  --ink:#22201B; --ink-2:#4A463D; --ink-soft:#6B6557;
  --accent:#C9772E; --accent-deep:#A65D1E; --accent-tint:#F5E6D4;
  --green:#2F6B4F; --green-tint:#E3EDE6;
  --warn:#C4502E; --warn-tint:#F6E3DB;
  --hair:#DED6C5; --hair-soft:#E8E1D2;
  --white:#FFFFFF;

  --font-display:"Newsreader",Georgia,serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;

  --text-xs:.78rem; --text-sm:.9rem; --text-base:1.0625rem; --text-lg:1.2rem;
  --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.7rem; --text-display:3.6rem;

  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:6.5rem;

  --gutter:clamp(1rem,5vw,2rem);     /* mobiele zijmarge ≥16px */
  --maxw:1140px; --measure:68ch;
  --radius:14px; --radius-sm:9px; --radius-lg:22px;
  --rule:1px solid var(--hair);
  --shadow:0 1px 2px rgba(34,32,27,.04),0 12px 32px -18px rgba(34,32,27,.22);
  --shadow-sm:0 1px 2px rgba(34,32,27,.05),0 6px 16px -12px rgba(34,32,27,.18);
  --ease-out:cubic-bezier(.2,.7,.3,1); --dur:.18s;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.62;
  font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:560;line-height:1.1;
  letter-spacing:-.01em;margin:0 0 .4em;overflow-wrap:anywhere;min-width:0}
h1{font-size:clamp(2.1rem,6vw,var(--text-display));font-weight:600;line-height:1.04}
h2{font-size:clamp(1.6rem,4vw,var(--text-3xl))}
h3{font-size:var(--text-xl)}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
img{max-width:100%;display:block}
strong{font-weight:650}
small{font-size:var(--text-sm)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
.mono{font-family:var(--font-mono)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 .6rem}
.lead{font-size:var(--text-lg);color:var(--ink-2);line-height:1.55;max-width:var(--measure)}
.section{padding-block:var(--space-8)}
.section--tight{padding-block:var(--space-7)}
.center{text-align:center}.center p{margin-inline:auto}

/* ---------- header / nav (N: utility bar) ---------- */
.topbar{background:var(--ink);color:var(--paper);font-size:var(--text-xs);
  font-family:var(--font-mono);letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:center;gap:.5rem;padding-block:.45rem;text-align:center}
.site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:var(--rule)}
.site-head .wrap{display:flex;align-items:center;gap:var(--space-5);
  min-height:68px;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-weight:650;font-size:1.32rem;letter-spacing:-.02em}
.brand:hover{color:var(--ink)}
.brand svg{flex:0 0 auto}
.nav{display:flex;gap:1.15rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.96rem;font-weight:520}
.nav a:hover{color:var(--accent-deep)}
.nav .btn{margin-left:.3rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);
  font-weight:600;font-size:.98rem;line-height:1;padding:.72em 1.15em;border-radius:var(--radius-sm);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur) var(--ease-out),background var(--dur),box-shadow var(--dur)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.btn--accent{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn--accent:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-3)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#000;color:#fff}
.btn--lg{padding:.85em 1.4em;font-size:1.05rem}

/* ---------- hero (homepage · Marquee) ---------- */
.hero{padding-block:var(--space-7) var(--space-8)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-7);align-items:center}
.hero h1{margin-bottom:.3em}
.hero .lead{margin-bottom:1.6rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero-media{position:relative}
.hero-img{border-radius:var(--radius-lg);box-shadow:var(--shadow);
  aspect-ratio:3/2;object-fit:cover;width:100%;background:var(--paper-2)}
.hero-figcap{position:absolute;left:14px;bottom:14px;background:color-mix(in srgb,var(--ink) 86%,transparent);
  color:var(--paper);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  padding:.35rem .6rem;border-radius:8px}
.trustline{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.7rem;
  font-size:var(--text-sm);color:var(--ink-soft)}
.trustline span{display:inline-flex;gap:.4rem;align-items:center}
.trustline svg{color:var(--green)}

/* ---------- category tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--space-4)}
.tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:#fff;border:1px solid var(--hair);background:var(--paper-2);
  box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out)}
.tile:hover{transform:translateY(-3px);color:#fff}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tile-label{position:absolute;inset:auto 0 0 0;padding:.8rem .9rem;
  background:linear-gradient(transparent,rgba(20,18,14,.82));
  font-family:var(--font-display);font-weight:600;font-size:1.12rem;display:flex;
  justify-content:space-between;align-items:center}
.tile-label .mono{font-family:var(--font-mono);font-size:.7rem;opacity:.9}

/* ---------- platform / keuze cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-4)}
.pcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);
  padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.6rem}
.pcard.is-pick{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.pcard .badge{align-self:flex-start}
.pcard h3{margin:0;font-size:1.28rem}
.pcard .meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-soft);
  letter-spacing:.03em}
.pcard ul{margin:.2rem 0 .4rem;padding-left:0;list-style:none;font-size:.95rem}
.pcard li{padding-left:1.4rem;position:relative;margin-bottom:.3rem;color:var(--ink-2)}
.pcard li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.4rem;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.pcard li.con::before{border-color:var(--warn);transform:none;top:.45em;width:.75rem;height:0;
  border-left:0;border-bottom:2px solid var(--warn)}
.pcard .price{font-family:var(--font-mono);font-size:1.05rem;color:var(--ink);margin-top:auto}
.pcard .btn{margin-top:.4rem;justify-content:center}

.badge{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.28em .6em;border-radius:6px;display:inline-block;font-weight:700}
.badge--pick{background:var(--accent);color:#fff}
.badge--free{background:var(--green-tint);color:var(--green)}
.badge--cat{background:var(--paper-2);color:var(--ink-2)}

/* ---------- comparison table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--radius);background:var(--white)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
table.cmp th,table.cmp td{padding:.8rem .9rem;text-align:left;border-bottom:1px solid var(--hair-soft)}
table.cmp thead th{background:var(--paper-2);font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
table.cmp tbody tr:hover{background:var(--paper-3)}
table.cmp td.num,table.cmp th.num{font-family:var(--font-mono)}
table.cmp .row-name{font-weight:650;font-family:var(--font-display);font-size:1.05rem}

/* ---------- safety / note boxes ---------- */
.note{border-radius:var(--radius);padding:var(--space-5);border:1px solid var(--hair);
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.note h3{margin:0 0 .3rem;font-size:1.15rem}
.note p{margin:0}
.note ul{margin:.4rem 0 0;padding-left:1.1rem}
.note.safe{background:var(--green-tint);border-color:color-mix(in srgb,var(--green) 30%,var(--hair))}
.note.safe .ic{color:var(--green)}
.note.watch{background:var(--warn-tint);border-color:color-mix(in srgb,var(--warn) 28%,var(--hair))}
.note.watch .ic{color:var(--warn)}
.note .ic{width:30px;height:30px}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:var(--space-4)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.step::before{counter-increment:s;content:counter(s);font-family:var(--font-mono);font-weight:700;
  background:var(--ink);color:var(--paper);width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;font-size:.95rem}
.step h3{margin:.15rem 0 .25rem;font-size:1.15rem}
.step p{margin:0}

/* ---------- band / CTA ---------- */
.band{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg)}
.band .wrap{padding-block:var(--space-7)}
.band h2{color:var(--paper)}
.band p{color:color-mix(in srgb,var(--paper) 82%,transparent)}
.band a:not(.btn){color:var(--accent-tint)}
.band--accent{background:linear-gradient(120deg,var(--accent-deep),var(--accent))}
.band--accent h2,.band--accent p{color:#fff}

/* ---------- article ---------- */
.article{max-width:760px;margin-inline:auto}
.article h2{margin-top:1.6em}
.article p,.article li{font-size:1.1rem;line-height:1.7}
.byline{display:flex;gap:.8rem;align-items:center;margin:1.4rem 0;padding:1rem 0;border-block:var(--rule)}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.byline .who{font-weight:650;font-family:var(--font-display)}
.byline .meta{font-size:var(--text-sm);color:var(--ink-soft)}
.disclosure{font-size:var(--text-sm);color:var(--ink-soft);background:var(--paper-3);
  border:1px dashed var(--hair);border-radius:var(--radius-sm);padding:.8rem 1rem}

/* ---------- TOC ---------- */
.toc{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--space-5)}
.toc ol{margin:.3rem 0 0;padding-left:1.1rem}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}

/* ---------- FAQ ---------- */
.faq details{border-bottom:var(--rule);padding:.9rem 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:560;font-size:1.12rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-deep);font-family:var(--font-mono)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.7rem 0 0}

/* ---------- forms (contact / tool) ---------- */
.form{display:grid;gap:1rem;max-width:540px}
.field{display:grid;gap:.35rem}
.field label{font-weight:600;font-size:.95rem}
.field input,.field textarea,.field select{font:inherit;padding:.7rem .85rem;border-radius:var(--radius-sm);
  border:1px solid var(--hair);background:var(--white);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hp{position:absolute;left:-9999px}

/* ---------- quiz tool ---------- */
.quiz{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm)}
.quiz .progress{height:7px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin-bottom:1.4rem}
.quiz .progress i{display:block;height:100%;width:33%;background:var(--accent);border-radius:99px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:.8rem;margin-top:1rem}
.opt{border:1px solid var(--hair);background:var(--paper-3);border-radius:var(--radius);
  padding:1.1rem;text-align:center;cursor:pointer;font-weight:600;transition:all var(--dur) var(--ease-out)}
.opt:hover{border-color:var(--accent);background:var(--accent-tint)}
.opt .ic{display:block;margin:0 auto .5rem;color:var(--accent-deep);width:30px;height:30px}

/* ---------- guide list (blog index / related) ---------- */
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--space-5)}
.gcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out)}
.gcard:hover{transform:translateY(-3px)}
.gcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.gcard .body{padding:var(--space-4)}
.gcard h3{font-size:1.18rem;margin:.1rem 0 .4rem}
.gcard a{text-decoration:none}
.gcard .meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-soft);letter-spacing:.04em}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:color-mix(in srgb,var(--paper) 80%,transparent);
  margin-top:var(--space-8);padding-block:var(--space-7) var(--space-5)}
.site-foot a{color:color-mix(in srgb,var(--paper) 82%,transparent);text-decoration:none}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-5)}
.foot-grid h4{color:var(--paper);font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin:0 0 .8rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.95rem}
.foot-brand .brand{color:var(--paper)}
.foot-brand p{font-size:.92rem;margin-top:.7rem;max-width:30ch}
.foot-bottom{border-top:1px solid rgba(247,244,237,.16);margin-top:var(--space-6);padding-top:var(--space-4);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--text-xs);
  font-family:var(--font-mono);color:color-mix(in srgb,var(--paper) 60%,transparent)}

/* ---------- helpers ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.kicker-row{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:var(--space-5)}
.chiplist{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font-size:.85rem;background:var(--paper-2);border:1px solid var(--hair);border-radius:99px;
  padding:.3rem .8rem;text-decoration:none;color:var(--ink-2)}
.chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.note-inline{font-size:var(--text-sm);color:var(--ink-soft)}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .hero-media{order:-1}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  :root{--text-display:2.4rem}
  .nav{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .foot-brand{grid-column:1/-1}
  .note{grid-template-columns:1fr}
  .note .ic{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- WordPress content ---------- */
.entry-content>*{max-width:var(--measure);margin-inline:auto}
.entry-content>.full,.entry-content>.wrap,.entry-content>section,.entry-content>.band{max-width:none}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{max-width:none}
.entry-content img{border-radius:var(--radius)}
.wp-caption-text,figcaption{font-size:var(--text-sm);color:var(--ink-soft);margin-top:.4rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:8px}
.skip-link:focus{left:1rem;top:1rem;z-index:99}

/* ---------- mobile nav toggle ---------- */
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--hair);border-radius:9px;
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.nav-toggle svg{width:22px;height:22px}
@media(max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);flex-direction:column;align-items:stretch;
    gap:.2rem;background:var(--paper);padding:5rem 1.4rem 2rem;box-shadow:var(--shadow);
    transform:translateX(100%);transition:transform .22s var(--ease-out);z-index:40;margin:0}
  .nav.open{transform:translateX(0)}
  .nav a{padding:.7rem .2rem;border-bottom:1px solid var(--hair-soft);font-size:1.05rem}
  .nav .btn{margin:.6rem 0 0;justify-content:center}
  .nav-backdrop{position:fixed;inset:0;background:rgba(20,18,14,.4);opacity:0;pointer-events:none;
    transition:opacity .22s;z-index:35}
  .nav-backdrop.open{opacity:1;pointer-events:auto}
}