/*
Theme Name: little julie
Theme URI: https://little-julie.nl
Author: little julie
Description: Babykleding-gids — klassiek PHP-thema (klei × salie, Quicksand + Nunito Sans).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: little-julie
*/
/* Hallmark · macrostructure: per-page · genre: playful
 * tone: warm-zorgzaam · anchor hue: klei × salie
 * pre-emit critique: P5 H4 E4 S5 R4 V4
 * Gedeeld design system — little-julie.nl (babykleding-gids, Design-Voorstel fase 1)
 */
:root{
  --color-paper:#FBF7F0; --color-paper-2:#F2E9DA; --color-paper-3:#EADFCB;
  --color-ink:#3A332E; --color-ink-soft:#7A6F64;
  --color-brand:#C97B5A; --color-brand-2:#A85F42;
  --color-accent:#7E9B79; --color-accent-2:#5F7C5B;
  --color-honey:#EBA86B; --color-honey-soft:#F7E6CE;
  --color-boy:#8FA9BE; --color-girl:#D49AA0; --color-new:#9CB79A;
  --color-line:#E4D8C6; --color-white:#fff;
  --font-display:"Quicksand",system-ui,sans-serif;
  --font-body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,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.6rem; --text-display-s:3.1rem;
  --space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;
  --space-12:3rem;--space-16:4rem;--space-24:6rem;
  --gutter:clamp(1rem,5vw,2.5rem); --maxw:1140px; --measure:66ch;
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1); --dur:220ms;
  --shadow-sm:0 1px 2px rgba(58,51,46,.05),0 4px 14px rgba(201,123,90,.07);
  --shadow-md:0 8px 28px rgba(168,95,66,.14);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;color:var(--color-ink);background:var(--color-paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-brand-2);text-underline-offset:2px}
a:hover{color:var(--color-brand)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;color:var(--color-ink);overflow-wrap:anywhere;margin:0 0 .5em}
h1{font-size:var(--text-display-s)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-lg);font-weight:700}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);letter-spacing:.02em;color:var(--color-brand);display:inline-flex;align-items:center;gap:.5em;margin-bottom:.7rem}
.eyebrow::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--color-honey-soft);display:inline-block}
.lede{font-size:var(--text-lg);color:var(--color-ink-soft)}
.kbs-section,.lj-section{padding-block:var(--space-24)}
.section-tight{padding-block:var(--space-16)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:var(--text-base);padding:.75em 1.5em;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-brand);color:#fff}
.btn-primary:hover{background:var(--color-brand-2);color:#fff}
.btn-honey{background:var(--color-honey);color:#5a3d22}
.btn-honey:hover{background:#e0974f;color:#5a3d22}
.btn-ghost{background:#fff;color:var(--color-brand-2);border-color:var(--color-line)}
.btn-ghost:hover{background:var(--color-paper-2);color:var(--color-brand-2)}
.btn:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}

/* NAV (warm rounded bar) */
.site-head{position:sticky;top:0;z-index:40;background:rgba(251,247,240,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-line)}
.nav{display:flex;align-items:center;gap:var(--space-6);padding-block:.7rem}
.brand{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--color-ink);text-decoration:none;letter-spacing:-.02em}
.brand:hover{color:var(--color-ink)}
.nav-links{display:flex;gap:var(--space-6);margin-left:auto}
.nav-links a{color:var(--color-ink);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm)}
.nav-links a:hover{color:var(--color-brand)}
.nav-cta{margin-left:var(--space-2)}
.nav-burger{display:none;background:#fff;border:1px solid var(--color-line);border-radius:12px;width:42px;height:42px;place-items:center;margin-left:auto}
#nav-toggle{display:none}

/* CARDS / GRID / ICONS */
.card{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ico{width:1.4em;height:1.4em;stroke:var(--color-brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-sage{stroke:var(--color-accent)}
.icon-badge{width:48px;height:48px;border-radius:50%;background:var(--color-honey-soft);display:grid;place-items:center}
.icon-badge .ico{width:24px;height:24px}
.note{border-left:3px solid var(--color-honey);background:var(--color-honey-soft);padding:var(--space-4) var(--space-6);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--text-sm);color:var(--color-ink-soft)}
.disclosure{font-size:var(--text-sm);color:var(--color-ink-soft);background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-6);margin-top:var(--space-8)}

/* FOOTER */
.site-foot{background:var(--color-brand);color:#FBEDE4;margin-top:var(--space-24)}
.site-foot a{color:#FBEDE4;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-news{background:var(--color-brand-2);border-radius:var(--radius);padding:var(--space-8);margin-top:-40px;display:grid;grid-template-columns:1.3fr .7fr;gap:var(--space-6);align-items:center}
.foot-news h3{color:#fff;margin:0 0 .3rem}
.foot-news p{color:#FBEDE4;margin:0;font-size:var(--text-sm)}
.foot-news form{display:flex;gap:.5rem}
.foot-news input{flex:1;border:0;border-radius:var(--radius-pill);padding:.7rem 1rem;font:inherit}
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-8);padding-block:var(--space-16) var(--space-8)}
.foot-cols h4{color:#fff;font-family:var(--font-display);font-size:var(--text-sm);margin-bottom:var(--space-3)}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--text-sm)}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;padding-block:var(--space-6);border-top:1px solid rgba(255,255,255,.18);font-size:var(--text-xs);color:#F2D8C8}
.foot-legal nav{display:flex;gap:var(--space-4);flex-wrap:wrap}
.crumbs{font-size:var(--text-sm);color:var(--color-ink-soft);padding-top:var(--space-8)}
.crumbs a{color:var(--color-ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--color-brand)}

/* SEGMENT CHIPS */
.chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);padding:.25rem .7rem;border-radius:var(--radius-pill);color:#fff}
.chip-boy{background:var(--color-boy)} .chip-girl{background:var(--color-girl)} .chip-new{background:var(--color-new)}

/* HOMEPAGE */
.hero{padding-top:var(--space-16)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,3.8rem);margin-bottom:var(--space-4)}
.hero h1 em{font-style:normal;color:var(--color-brand)}
.hero-figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3.5;background:var(--color-paper-2)}
.hero-figure img{width:100%;height:100%;object-fit:cover}
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8)}
.segment{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-6);text-align:center;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.segment:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);color:inherit}
.segment .icon-badge{margin:0 auto var(--space-3)}
.segment h3{margin:.2rem 0}
.segment p{margin:0;color:var(--color-ink-soft);font-size:var(--text-sm)}
.trust{background:var(--color-paper-2)}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:center}
.trust li{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm)}
.tool-teaser{background:var(--color-accent);color:#fff;border-radius:var(--radius);padding:var(--space-12);display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-8);align-items:center}
.tool-teaser h2{color:#fff}.tool-teaser p{color:#EAF1E9;margin-bottom:var(--space-6)}
.tool-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:var(--space-6)}
.tool-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(255,255,255,.3);font-size:var(--text-sm)}
.tool-row:last-child{border:0}.tool-out{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.5rem}
.faq details{border-bottom:1px solid var(--color-line);padding:var(--space-4) 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-brand);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:.8rem 0 0;color:var(--color-ink-soft)}
.endcta{text-align:center}.endcta h2{font-size:var(--text-3xl);max-width:18ch;margin-inline:auto}.endcta .btn{margin:var(--space-3) .4rem 0}

/* PILLAR / DOC */
.lead-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);margin:var(--space-8) 0;aspect-ratio:16/7;background:var(--color-paper-2)}
.lead-img img{width:100%;height:100%;object-fit:cover}
.doc{display:grid;grid-template-columns:230px 1fr;gap:var(--space-12);align-items:start}
.toc{position:sticky;top:90px;font-size:var(--text-sm)}
.toc h4{font-family:var(--font-display);font-size:var(--text-xs);color:var(--color-ink-soft);margin-bottom:var(--space-3)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.toc a{display:block;padding:.35rem .6rem;border-radius:10px;color:var(--color-ink);text-decoration:none}
.toc a:hover{background:var(--color-paper-2);color:var(--color-brand)}
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--space-12);scroll-margin-top:90px}
.prose ul{padding-left:1.1em}.prose li{margin-bottom:.4rem}
.byline{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-6) 0;padding:var(--space-3) 0;border-block:1px solid var(--color-line)}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.byline b{display:block;font-size:var(--text-sm)}.byline span{font-size:var(--text-xs);color:var(--color-ink-soft)}
.callout{background:var(--color-honey-soft);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-6);margin:var(--space-8) 0}
.callout h3{margin-top:0}
.matentabel{width:100%;border-collapse:collapse;margin:var(--space-6) 0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.matentabel th,.matentabel td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--color-line);font-size:var(--text-sm)}
.matentabel thead th{background:var(--color-accent);color:#fff;font-family:var(--font-display)}
.matentabel tbody tr:nth-child(even){background:var(--color-paper-2)}

/* WINKEL / AANRADER KAARTEN + ROUNDUP */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8)}
.shop-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.shop-card .ph{aspect-ratio:4/3;background:var(--color-paper-2);overflow:hidden}
.shop-card .ph img{width:100%;height:100%;object-fit:cover}
.shop-card .b{padding:var(--space-4) var(--space-6) var(--space-6)}
.shop-card h3{margin:.2rem 0}
.shop-card .who{color:var(--color-ink-soft);font-size:var(--text-sm)}
.shop-card .price{font-family:var(--font-display);font-weight:700;color:var(--color-brand-2);margin:.5rem 0}
.shop-card .badge{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);color:#5a3d22;background:var(--color-honey);padding:.2rem .6rem;border-radius:var(--radius-pill);margin-bottom:.5rem}
.shop-card .btn{margin-top:var(--space-3);width:100%;justify-content:center}
.cmp-wrap{overflow-x:auto;margin-top:var(--space-8);border:1px solid var(--color-line);border-radius:var(--radius)}
table.cmp{border-collapse:collapse;width:100%;min-width:620px;background:#fff}
table.cmp th,table.cmp td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-line);font-size:var(--text-sm);vertical-align:top}
table.cmp thead th{background:var(--color-brand);color:#fff;font-family:var(--font-display)}
table.cmp tbody th{background:var(--color-paper-2);font-family:var(--font-display);white-space:nowrap}
table.cmp .pick{color:var(--color-accent-2);font-weight:700}

/* CATEGORIE / INSPIRATIE */
.cat-head{background:var(--color-paper-2)}
.insp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.insp{display:block;text-decoration:none;color:inherit;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--color-line);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out)}
.insp:hover{transform:translateY(-4px);color:inherit}
.insp .ph{aspect-ratio:1/1;background:var(--color-paper-2);overflow:hidden}.insp .ph img{width:100%;height:100%;object-fit:cover}
.insp .b{padding:var(--space-4)}.insp h3{font-size:var(--text-base);margin:0}.insp .chip{margin-bottom:.4rem}

/* BLOG */
.article{max-width:720px;margin-inline:auto}
.art-head{text-align:center;padding-top:var(--space-8)}
.art-head h1{font-size:clamp(2rem,5vw,3rem);max-width:22ch;margin-inline:auto}
.art-meta{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.art-meta img{width:42px;height:42px;border-radius:50%;object-fit:cover}.art-meta .who{text-align:left}
.art-meta b{display:block;font-size:var(--text-sm)}.art-meta span{font-size:var(--text-xs);color:var(--color-ink-soft)}
.art-figure{margin:var(--space-8) 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/8;background:var(--color-paper-2)}
.art-figure img{width:100%;height:100%;object-fit:cover}
.art-body{font-size:1.1rem;line-height:1.75}.art-body h2{margin-top:var(--space-12)}
.art-body ul{padding-left:1.1em}
.related{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-6);margin-top:var(--space-12)}
.related h3{margin-top:0}.related a{display:block;padding:.35rem 0}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-16);align-items:start;padding-top:var(--space-12)}
.assure{list-style:none;padding:0;margin:var(--space-8) 0 0;display:grid;gap:var(--space-4)}
.assure li{display:flex;gap:.7em;align-items:flex-start}.assure svg{width:1.4em;height:1.4em;flex:none;margin-top:.1em}
.assure b{display:block}.assure span{color:var(--color-ink-soft);font-size:var(--text-sm)}
.form-card{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-8);box-shadow:var(--shadow-sm)}
.field{margin-bottom:var(--space-4)}.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:var(--text-base);padding:.7rem .9rem;border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(126,155,121,.18)}
.field textarea{min-height:120px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.consent{display:flex;gap:.6em;align-items:flex-start;font-size:var(--text-sm);color:var(--color-ink-soft);margin:var(--space-4) 0}
.consent input{margin-top:.25em}.form-card .btn{width:100%;justify-content:center}
.privacy-line{font-size:var(--text-xs);color:var(--color-ink-soft);text-align:center;margin-top:var(--space-4)}
.form-success{background:#EAF1E9;border:1px solid var(--color-accent);color:var(--color-accent-2);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-6);margin-bottom:var(--space-4);font-size:var(--text-sm)}

/* TOOL (maatcalculator) */
.tool-app{display:grid;grid-template-columns:1fr .9fr;gap:var(--space-8);align-items:start;margin-top:var(--space-8)}
.tool-result{background:var(--color-accent);color:#fff;border-radius:var(--radius);padding:var(--space-8);position:sticky;top:90px}
.tool-result .big{font-family:var(--font-display);font-size:3rem;color:#fff;line-height:1}
.tool-result .sub{color:#EAF1E9;font-size:var(--text-sm)}
.tool-result hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:var(--space-4) 0}

/* WETTELIJK */
.legal{max-width:calc(56ch + 2*var(--gutter));margin-inline:auto;padding-top:var(--space-12);padding-inline:var(--gutter)}
.legal h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.legal .updated{color:var(--color-ink-soft);font-size:var(--text-sm);margin-bottom:var(--space-8)}
.legal h2{font-size:var(--text-xl);margin-top:var(--space-12)}
.legal h2 .n{color:var(--color-brand);margin-right:.4em}
.legal ul{padding-left:1.2em}.legal li{margin-bottom:.35rem}
.toc-mini{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-4) var(--space-6);margin:var(--space-8) 0;font-size:var(--text-sm)}
.toc-mini a{color:var(--color-brand-2);text-decoration:none}

/* RESPONSIVE */
@media(max-width:860px){
  :root{--text-display-s:2.3rem;--text-2xl:1.6rem;--text-3xl:2rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .nav-links{position:absolute;top:60px;left:var(--gutter);right:var(--gutter);flex-direction:column;gap:0;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow-md);display:none}
  #nav-toggle:checked ~ .nav-links{display:flex}
  .nav-links a{padding:.7rem .6rem;border-bottom:1px solid var(--color-line)}
  .nav-burger{display:grid}
  .hero-grid,.segments,.tool-teaser,.doc,.shop-grid,.cardrow,.contact-grid,.two,.tool-app,.foot-news{grid-template-columns:1fr}
  .insp-grid{grid-template-columns:1fr 1fr}
  .tool-teaser,.foot-news{padding:var(--space-8)}
  .foot-cols{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .toc{position:static;order:-1;background:var(--color-paper-2);padding:var(--space-4);border-radius:var(--radius)}
  .tool-result{position:static}
}
@media(max-width:520px){.foot-cols,.insp-grid{grid-template-columns:1fr}.lj-section,.kbs-section{padding-block:var(--space-16)}}