/*
Theme Name: TarievenOnline
Description: Thema voor TarievenOnline.nl
Version: 1.0.0
Text Domain: tarievenonline
*/
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --paper:#f6f7f3;--surface:#fff;--ink:#142132;--muted:#5d6876;--rule:#e2e5de;--tint:#e7f3ec;--tint2:#fff6d6;
  --groen:#11845b;--groen-deep:#0b6646;--geel:#ffcf33;--rood:#c2412d;
  --f-display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;--radius:16px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:0 0 .45em;text-wrap:balance}
:focus-visible{outline:2px solid var(--groen);outline-offset:3px}
.screen-reader-text{position:absolute;left:-9999px}.screen-reader-text:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.muted{color:var(--muted)}
.kicker{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--groen);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none;background:var(--groen);color:#fff;border:1px solid var(--groen);cursor:pointer}
.btn:hover{background:var(--groen-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}

/* header */
.site-header{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo .mark{width:40px;height:40px;flex:none}
.wm{display:flex;flex-direction:column;line-height:1}
.wm1{font-family:var(--f-display);font-weight:700;font-size:23px;letter-spacing:-.03em}
.wm1 b{color:var(--groen);font-weight:700}
.wm2{font-size:11.5px;color:var(--muted);margin-top:4px;letter-spacing:.02em}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.mainnav a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px}
.mainnav a:hover,.mainnav .current-menu-item>a,.mainnav .current-category-ancestor>a,.mainnav .current-post-ancestor>a{background:var(--tint);color:var(--groen-deep)}
.navtoggle{display:none;background:none;border:1px solid var(--rule);border-radius:10px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}
.hdr-search{display:flex}
.hdr-search input{border:1px solid var(--rule);border-radius:999px;padding:9px 14px;font:inherit;font-size:15px;width:190px;background:var(--paper)}

/* hero */
.hero{padding:clamp(36px,6vw,72px) 0 clamp(28px,4vw,44px)}
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.04em;max-width:16ch}
.hero h1 span{color:var(--groen)}
.hero .lead{font-size:clamp(18px,1.8vw,21px);color:var(--muted);max-width:56ch;margin:0 0 26px}
.bigsearch{display:flex;max-width:620px;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:6px;box-shadow:0 10px 30px rgba(20,33,50,.07)}
.bigsearch input{flex:1;border:0;background:transparent;font:inherit;font-size:17px;padding:10px 16px;min-width:0}
.bigsearch input:focus{outline:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips a{text-decoration:none;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:14.5px}
.chips a:hover{border-color:var(--groen);color:var(--groen-deep)}

/* secties en kaarten */
section{margin:0 0 clamp(40px,6vw,64px)}
.sect-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
.sect-h h2{font-size:clamp(24px,2.6vw,30px);margin:0}
.sect-h a{font-weight:600;color:var(--groen-deep);text-decoration:none}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:#bfd9cb;box-shadow:0 10px 26px rgba(20,33,50,.07)}
.card h3{font-size:20px;margin:0}
.card h3 a{text-decoration:none}.card h3 a::after{content:"";position:absolute;inset:0}
.card .ex{color:var(--muted);font-size:15px;margin:0}
.card .meta{margin-top:auto;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.range{display:inline-block;align-self:flex-start;background:var(--tint2);color:#5a4500;border-radius:8px;padding:4px 10px;font-weight:700;font-size:14px}
.ico{width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--groen-deep);display:grid;place-items:center}
.ico svg{width:22px;height:22px}
.cat{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;display:grid;gap:8px;text-decoration:none}
.cat:hover{border-color:var(--groen)}
.cat b{font-family:var(--f-display);font-size:19px}
.cat span{font-size:14.5px;color:var(--muted)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.steps div{background:var(--surface);border-radius:var(--radius);padding:22px;border:1px solid var(--rule)}
.steps div::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--groen);color:#fff;font-weight:700;margin-bottom:12px}
.steps h3{font-size:19px}
.steps p{margin:0;color:var(--muted);font-size:15.5px}
.band{background:var(--ink);color:#fff;border-radius:22px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.band h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.band p{color:#c9d2dc;margin:0}
.band .btn{background:var(--geel);border-color:var(--geel);color:var(--ink)}
.list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.list li{border-top:1px solid var(--rule)}.list li:first-child{border-top:0}
.list a{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;text-decoration:none}
.list a:hover b{color:var(--groen-deep)}
.list small{color:var(--muted);white-space:nowrap}

/* artikel */
.crumbs{font-size:13px;color:var(--muted);margin:22px 0 10px}
.crumbs a{color:var(--muted)}
.art-head{max-width:820px;margin-bottom:26px}
.art-head h1{font-size:clamp(32px,4.4vw,50px);line-height:1.06;letter-spacing:-.035em}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;color:var(--muted)}
.byline a{color:var(--ink);font-weight:600}
.checked{display:inline-flex;align-items:center;gap:6px;background:var(--tint);color:var(--groen-deep);border-radius:999px;padding:4px 12px;font-weight:600}
.art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.entry{max-width:740px;font-size:18px}
.entry h2{font-size:clamp(25px,2.6vw,30px);margin:1.8em 0 .5em;scroll-margin-top:90px}
.entry h3{font-size:21px;margin:1.5em 0 .4em}
.entry p,.entry ul,.entry ol{margin:0 0 1.05em}
.entry a{color:var(--groen-deep);text-underline-offset:3px}
.entry img{border-radius:12px}
.entry table{width:100%;border-collapse:collapse;font-size:16px;margin:1em 0 1.4em;background:var(--surface);border:1px solid var(--rule);border-radius:12px;overflow:hidden;display:block;overflow-x:auto}
.entry thead{background:var(--tint)}
.entry th{text-align:left;padding:11px 14px;font-size:14px;letter-spacing:.02em;color:var(--groen-deep)}
.entry td{padding:11px 14px;border-top:1px solid var(--rule);vertical-align:top}
.entry table.prijs td:nth-child(2){font-weight:700;white-space:nowrap}
.kort{background:var(--tint);border-left:4px solid var(--groen);border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 1.6em;font-size:18.5px}
.kort strong:first-child{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--groen-deep);margin-bottom:6px}
.bronnen{font-size:14.5px;color:var(--muted);border-top:1px solid var(--rule);padding-top:16px;margin-top:2em}
.peildatum{font-size:14px;color:var(--muted);background:var(--tint2);border-radius:10px;padding:10px 14px}
.aside{position:sticky;top:96px;display:grid;gap:16px}
.box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px}
.box h4{font-family:var(--f-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.toc ol{margin:0;padding-left:18px;font-size:15px}
.toc li{margin:5px 0}
.toc a{text-decoration:none}.toc a:hover{color:var(--groen-deep);text-decoration:underline}
.box ul{list-style:none;margin:0;padding:0}
.box ul li{margin:0 0 10px}
.box ul a{text-decoration:none;font-weight:600;line-height:1.3}
.box ul a:hover{color:var(--groen-deep)}
.author{display:grid;grid-template-columns:60px 1fr;gap:16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;margin-top:40px;font-size:15.5px;max-width:740px}
.avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:22px;background:var(--tint);color:var(--groen-deep)}
.author b a{text-decoration:none}
.note{font-size:14px;color:var(--muted);border:1px dashed var(--rule);border-radius:12px;padding:12px 16px;max-width:740px}

/* archief */
.arch-head{padding:28px 0 26px;max-width:760px}
.arch-head h1{font-size:clamp(32px,4.4vw,48px)}
.arch-head .desc{color:var(--muted);font-size:18px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 40px}
.pagination .page-numbers{padding:8px 14px;border-radius:999px;border:1px solid var(--rule);text-decoration:none;background:var(--surface)}
.pagination .current{background:var(--groen);border-color:var(--groen);color:#fff}
.search-form{display:flex;gap:8px;max-width:520px;margin-top:14px}
.search-form input[type=search]{flex:1;border:1px solid var(--rule);border-radius:999px;padding:11px 16px;font:inherit;background:var(--surface)}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--rule);padding:44px 0 26px;margin-top:40px}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot-cols h4{font-family:var(--f-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin:0 0 8px}
.foot-cols a{text-decoration:none;color:var(--ink)}.foot-cols a:hover{color:var(--groen-deep)}
.foot-bottom{border-top:1px solid var(--rule);margin-top:30px;padding-top:16px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-bottom a{color:var(--muted)}

/* formulieren */
.wpcf7{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(18px,3vw,28px);margin:1.2em 0;font-size:16px}
.wpcf7 p{margin:0 0 14px}
.wpcf7 label{display:block;font-weight:600;font-size:14.5px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);padding:11px 14px}
.wpcf7 textarea{height:130px}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{outline:0;border-color:var(--groen);box-shadow:0 0 0 3px rgba(17,132,91,.14)}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-list-item label{display:flex;gap:10px;font-weight:400}
.wpcf7 input[type=submit]{background:var(--groen);color:#fff;border:0;border-radius:999px;padding:13px 26px;font:inherit;font-weight:700;cursor:pointer}

@media (max-width:1000px){
  .art{grid-template-columns:1fr}.aside{position:static}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:1fr 1fr}.band{grid-template-columns:1fr}
  .hdr-search{display:none}
}
@media (max-width:760px){
  .navtoggle{display:block}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--rule);padding:10px 16px 16px}
  .mainnav.open{display:block}
  .mainnav ul{flex-direction:column}
  .g2,.g3,.g4,.steps{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .entry{font-size:17px}
  .wm2{display:none}
}