/*
Theme Name: Isolatie Zuid-Holland
Theme URI: https://isolatiezuidholland.nl
Description: Warm-utilitair classic theme voor de regionale isolatiegids Zuid-Holland. Hallmark design-DNA (Bricolage Grotesque + Inter + Spline Sans Mono, terracotta-amber + petrol-trust).
Author: Isolatie Zuid-Holland
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: isolatiezuidholland
*/

:root{
  --color-paper:#F6F1E8; --color-paper-2:#EEE6D6; --color-paper-3:#fff;
  --color-ink:#211C16; --color-ink-2:#5A5044;
  --color-accent:#C2622E; --color-accent-press:#A4501F;
  --color-trust:#1F5C50; --color-trust-2:#CFE3DC;
  --color-amber:#E8C66A; --color-line:#DED4C4;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
  --space-xs:.5rem; --space-sm:.875rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --text-display:clamp(2.3rem,5.2vw,3.9rem); --text-h2:clamp(1.55rem,3vw,2.25rem); --text-h3:1.25rem;
  --gutter:max(16px,4vw); --radius:14px; --radius-sm:9px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(33,28,22,.05),0 12px 30px -18px rgba(33,28,22,.25);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;font-weight:700;letter-spacing:-.01em;margin:0 0 .5em;overflow-wrap:anywhere}
h1{font-size:var(--text-display)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)}
p,li{max-width:70ch}
p{margin:0 0 1em}
a{color:var(--color-trust);text-underline-offset:3px}
img{max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--gutter)}
.article-wrap{max-width:760px;margin:0 auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-mono)}
.tag{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--color-trust);background:var(--color-trust-2);padding:.3em .7em;border-radius:999px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:100}

/* nav */
.site-nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--color-paper) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-line)}
.site-nav .wrap{display:flex;align-items:center;gap:var(--space-md);min-height:68px}
.site-nav .brand{display:flex;align-items:center}
.site-nav .brand img{height:40px;width:auto}
.site-nav .menu{display:flex;gap:1.1rem;margin-left:auto;list-style:none;padding:0;margin-block:0;font-size:.95rem;font-weight:500}
.site-nav .menu a{color:var(--color-ink);text-decoration:none}
.site-nav .menu a:hover{color:var(--color-trust)}
.nav-cta{margin-left:.4rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--color-line);border-radius:9px;padding:.45rem .6rem;cursor:pointer}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--color-ink);margin:4px 0}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-weight:600;font-size:.97rem;background:var(--color-accent);color:#fff;border:none;padding:.7em 1.25em;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .18s var(--ease-out),transform .18s var(--ease-out)}
.btn:hover{background:var(--color-accent-press);color:#fff} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--color-trust);border:1.5px solid var(--color-trust)}
.btn.ghost:hover{background:var(--color-trust-2);color:var(--color-trust)}
:focus-visible{outline:2px solid var(--color-trust);outline-offset:2px}

/* hero */
.hero{position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-xl);align-items:center;padding-block:var(--space-2xl)}
.hero h1{margin-bottom:.4em}
.hero .lead{font-size:1.15rem;color:var(--color-ink-2)}
.hero .pic{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--color-paper-2)}
.hero .pic img{width:100%;height:100%;object-fit:cover;display:block}
.breadcrumb{font-size:.86rem;color:var(--color-ink-2);margin-bottom:.6rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.trust-row{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem;font-size:.9rem;color:var(--color-ink-2)}
.trust-row b{color:var(--color-ink)}
.layers{height:10px;background:repeating-linear-gradient(90deg,var(--color-amber) 0 18px,transparent 18px 24px);opacity:.5}

/* tegels */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.tile{display:flex;flex-direction:column;gap:.5rem;background:var(--color-paper-3);border:1px solid var(--color-line);border-radius:var(--radius);padding:1.4rem;text-decoration:none;color:inherit;transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile .ic{width:34px;height:34px;color:var(--color-trust)}
.tile h3{margin:0}
.tile p{margin:0;font-size:.95rem;color:var(--color-ink-2)}
.tile .vanaf{font-family:var(--font-mono);color:var(--color-accent);font-weight:600;font-size:.95rem;margin-top:auto}
.tile .arr{color:var(--color-accent);font-weight:600;font-size:.92rem}

/* secties */
.sec{padding-block:var(--space-2xl)}
.sec.alt{background:var(--color-paper-2)}
.sec .head{max-width:62ch;margin-bottom:var(--space-lg)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
.card{background:var(--color-paper-3);border:1px solid var(--color-line);border-radius:var(--radius);padding:1.5rem}
.card.trust{background:var(--color-trust);color:#fff}
.card.trust h3{color:#fff} .card.trust p{color:#dbeee6}

/* content (post body) */
.content h2{margin-top:1.8em} .content h3{margin-top:1.4em}
.content ul,.content ol{padding-left:1.2em}
.content img{border-radius:var(--radius);margin:1.2rem 0}

/* tabel */
.content table,table.izh{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--color-paper-3);border-radius:var(--radius);overflow:hidden;margin:1.2rem 0}
th,td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--color-line)}
th{font-family:var(--font-display);font-size:.9rem;background:var(--color-paper-2)}
td.num{font-family:var(--font-mono);color:var(--color-accent)}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--color-paper-2) 50%,transparent)}

/* faq */
.faq details{border-bottom:1px solid var(--color-line);padding:1rem 0}
.faq summary{font-family:var(--font-display);font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}

/* tool */
.tool{background:var(--color-paper-3);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field label{font-weight:600;font-size:.92rem}
.field select,.field input,.field textarea{font-family:var(--font-body);font-size:1rem;padding:.6em .8em;border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-paper);width:100%}
.result{background:var(--color-trust);color:#fff;border-radius:var(--radius);padding:1.4rem;margin-top:1rem}
.result .big{font-family:var(--font-mono);font-size:2rem;font-weight:600}

/* form */
.izh-form{display:grid;gap:1rem;max-width:560px}
.hp{position:absolute;left:-9999px}

/* byline */
.byline{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0 2rem;font-size:.92rem;color:var(--color-ink-2)}
.byline img{width:46px;height:46px;border-radius:999px;object-fit:cover}

/* blog cards */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.post-card{background:var(--color-paper-3);border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.post-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-card .body{padding:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.post-card h3{margin:0;font-size:1.1rem}
.post-card a{text-decoration:none}

/* footer */
.site-foot{background:var(--color-ink);color:#cfc7ba;padding-block:var(--space-xl) var(--space-lg);margin-top:var(--space-2xl)}
.site-foot h2{color:#fff;max-width:18ch}
.site-foot a{color:#cfc7ba;text-decoration:none}
.site-foot a:hover{color:#fff}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-lg);margin-top:var(--space-lg)}
.site-foot .cols h4{font-family:var(--font-display);color:#fff;margin:0 0 .6rem}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;font-size:.92rem}
.site-foot .legal{border-top:1px solid #3a342c;margin-top:var(--space-lg);padding-top:1rem;font-size:.82rem;color:#8d8478;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

@media(max-width:860px){
  .hero .grid,.two{grid-template-columns:1fr}
  .hero .grid{gap:var(--space-lg);padding-block:var(--space-xl)}
  .tiles,.posts{grid-template-columns:1fr 1fr}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .site-nav .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--color-paper);border-bottom:1px solid var(--color-line);padding:1rem var(--gutter);gap:.9rem}
  .site-nav .menu.open{display:flex}
  .menu-toggle{display:block}
  .nav-cta{display:none}
}
@media(max-width:480px){
  .tiles,.posts,.site-foot .cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}