/* InkomensverklaringAanvragen.nl. Vormgeving naar het voorbeeld van werkgeversverklaringaanvragen.nl
   (zelfde letters, opbouw en tekenstijl), met diepgroen als ondernemerskleur in plaats van blauw. */
@font-face{font-family:"Bricolage Grotesque";src:url("./fonts/bricolage.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Outfit";src:url("./fonts/outfit.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("./fonts/dm-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  color-scheme:light;
  --veld:#DDEFE3;      /* lichte achtergrond, zoals het lichtblauw van de zustersite */
  --groen:#17683F;     /* kop, knop, link */
  --groen-donker:#0F4F2F;
  --inkt:#163A2B;      /* tekst en tussenkoppen */
  --muted:#3B5A4B;
  --lijn:#9FC4AE;
  --band:#F3F9F5;      /* zachte tussenband */
  --wit:#fff;
  --creme:#FFF9EB; --creme-lijn:#C4BDA0;
  --body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --display:"Outfit","Segoe UI",system-ui,sans-serif;
  --kop:"Bricolage Grotesque","Arial",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--veld);color:var(--inkt);font:400 17px/1.6 var(--body)}
main{flex:1}
img{max-width:100%;height:auto}
a{color:var(--groen);text-underline-offset:3px}
a:hover{color:var(--groen-donker)}
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #87490b;outline-offset:3px}
.wrap{width:min(1000px,calc(100% - 48px));margin-inline:auto}
h1,h2,h3{font-family:var(--display);color:var(--inkt);letter-spacing:-.035em;line-height:1.2;margin:0 0 .5em;font-weight:700}
h1{font:800 clamp(44px,6.6vw,80px)/1.1 var(--kop);color:var(--groen);letter-spacing:-.057em;text-wrap:balance}
h2{font-size:clamp(28px,3vw,39px)}
h3,.h3{font-size:20px}
p,ul,ol{margin:0 0 1em}
li{margin-bottom:.35em}
.overslaan{position:absolute;left:-999px;top:0;background:var(--wit);padding:10px 14px;z-index:9}
.overslaan:focus{left:12px;top:12px}

/* kop */
.kop-rij{display:flex;align-items:center;gap:26px;min-height:82px;border-bottom:1px solid var(--lijn)}
.merk{font:700 clamp(15px,1.6vw,19px)/1.2 var(--display);letter-spacing:-.035em;color:var(--inkt);text-decoration:none;margin-right:auto}
.nav-breed{display:flex;gap:24px}
.nav-breed a{color:var(--inkt);text-decoration:none;font-size:14px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.nav-breed a:hover,.nav-breed a[aria-current]{border-bottom-color:var(--groen);color:var(--groen)}
.nav-smal{display:none;position:relative}
.nav-smal summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--lijn);border-radius:10px;color:var(--groen);font-weight:600}
.nav-smal summary::-webkit-details-marker{display:none}
.nav-smal nav{position:absolute;right:0;top:52px;z-index:5;display:flex;flex-direction:column;min-width:240px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:8px;box-shadow:0 20px 60px #0f2f2033}
.nav-smal nav a{min-height:44px;display:flex;align-items:center;padding:0 12px;color:var(--inkt);text-decoration:none;border-radius:8px}
.nav-smal nav a:hover,.nav-smal nav a[aria-current]{background:var(--veld)}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:51px;padding:14px 24px;border-radius:13px;background:var(--groen);color:var(--wit);
  font:700 19px/1.2 var(--display);letter-spacing:-.02em;text-decoration:none;border:1px solid var(--groen);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--groen-donker);border-color:var(--groen-donker);color:var(--wit)}
.btn[disabled]{opacity:.6;cursor:progress}

/* home: eerste scherm */
.held{padding:17px 0 60px}
.held-raster{display:grid;grid-template-columns:minmax(0,57%) minmax(0,1fr);gap:3%;align-items:center;margin-top:26px}
.held-beeld svg{display:block;width:100%;height:auto}
.held-tekst{max-width:430px}
.held-tekst h2{font-size:clamp(28px,3vw,37px);line-height:1.2;letter-spacing:-.036em}
.held-tekst>p{margin:24px 0 0;font-size:clamp(17px,1.5vw,19px);line-height:1.53}
.acties{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:clamp(26px,4vw,48px)}
.acties a:not(.btn){font-size:16px;font-weight:500;padding:3px 0 5px 3px}

/* banden */
.band{background:var(--wit);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:56px 0}
.band + .band{border-top:0}
.vlak{padding:56px 0}
.zij-aan-zij{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:6%;align-items:start}
.zij-aan-zij > div > p:last-child{margin-bottom:0}
.lead{font-size:18px;max-width:640px}
.stappen{list-style:none;padding:0;margin:0;counter-reset:stap}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:44px 1fr;gap:0 16px;padding:16px 0;border-top:1px solid var(--lijn);margin:0}
.stappen li:last-child{border-bottom:1px solid var(--lijn)}
.stappen li::before{content:counter(stap);grid-row:span 2;font:800 30px/1 var(--kop);color:var(--groen);letter-spacing:-.05em;padding-top:2px}
.stappen h3{margin:0 0 4px;font-size:19px}
.stappen p{margin:0;color:var(--muted)}

/* twee keuzes: kolommen met een lijn, geen kaarten */
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin:26px 0 24px;border-top:2px solid var(--groen)}
.twee > div{padding-top:16px}
.keuze h3{color:var(--groen)}
.keuze p:last-child{margin-bottom:0}
.lijst-links{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.lijst-links li{border-top:1px solid var(--lijn);padding-top:16px;margin:0}
.lijst-links h3 a{color:var(--groen)}

/* let op / status */
.let-op{background:var(--creme);border:1px solid var(--creme-lijn);border-radius:12px;padding:18px 22px;margin:24px 0;color:#2E2A1F}
.let-op p:last-child{margin-bottom:0}
.status{border-left:4px solid var(--groen);padding:4px 0 4px 18px;margin:26px 0}
.status p:last-child{margin-bottom:0}
.bron{font-size:14px;color:var(--muted);border-top:1px solid var(--lijn);padding-top:12px;margin-top:28px}

/* artikelen */
.kruimel{font-size:14px;padding-top:20px;color:var(--inkt)}
.kruimel a{color:var(--inkt)}
.artikel{padding-bottom:60px}
.artikel > *{max-width:760px}
.artikel > .twee{max-width:860px}
.pagina-kop{padding:14px 0 26px}
.pagina-kop h1{font-size:clamp(36px,4.5vw,58px);letter-spacing:-.05em}
.pagina-kop .intro{font-size:clamp(18px,1.6vw,20px);max-width:680px}
.artikel h2{margin-top:1.5em}
.artikel .pagina-kop + h2,.artikel .pagina-kop + .status{margin-top:0}
.artikel table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:16px;background:var(--wit)}
.artikel th,.artikel td{border:1px solid var(--lijn);padding:9px 12px;text-align:left;vertical-align:top}
.artikel th{background:var(--band);font-family:var(--display)}
.tabel-scroll{overflow-x:auto}
.cta{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:24px 26px;margin-top:36px}
.cta h2{margin-top:0;font-size:27px}
.cta p:last-child{margin-bottom:0}

/* veelgestelde vragen: lijst met lijnen, zoals de zustersite */
.faq-lijst{border-top:1px solid var(--lijn);max-width:740px;margin-bottom:22px}
.faq-lijst details{border-bottom:1px solid var(--lijn)}
.faq-lijst summary{cursor:pointer;padding:17px 0;font:600 18px/1.35 var(--display);color:var(--inkt);list-style:none;display:flex;gap:10px;min-height:44px}
.faq-lijst summary::-webkit-details-marker{display:none}
.faq-lijst summary::before{content:"\25B8";color:var(--groen);flex:none;font-size:15px;line-height:1.6}
.faq-lijst details[open] summary::before{content:"\25BE"}
.faq-lijst .antwoord{padding:0 0 10px 25px;color:var(--muted);max-width:660px}
.artikel h2 + .faq-lijst{margin-top:10px}

/* formulier */
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:26px;margin:10px 0 30px}
.veld{margin:0 0 20px}
.veld label,.veld legend{display:block;font-weight:600;color:var(--inkt);margin-bottom:6px}
.veld .hulp{display:block;font-size:15px;color:var(--muted);margin:-2px 0 8px;font-weight:400}
.veld input[type=text],.veld input[type=email],.veld input[type=tel],.veld select,.veld textarea{
  width:100%;max-width:560px;font:inherit;font-size:max(16px,1rem);padding:11px 12px;border:1px solid #7FA591;border-radius:8px;background:var(--wit);color:var(--inkt)}
.veld textarea{min-height:120px;resize:vertical}
.veld input.kort{max-width:8rem}
.veld fieldset{border:0;padding:0;margin:0}
.keuzerij{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;font-weight:400}
.keuzerij input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--groen)}
.verplicht{color:var(--groen)}
.fout{display:block;color:#A3201C;font-size:15px;margin-top:6px;font-weight:600}
.veld [aria-invalid=true]{border-color:#A3201C;border-width:2px}
.verborgen{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.kleine-noot{font-size:15px;color:var(--muted)}
.melding{border-radius:12px;padding:18px 22px;margin:0 0 20px}
.melding:empty{display:none}
.melding.goed{background:var(--wit);border:1px solid var(--lijn);border-left:6px solid var(--groen);color:var(--inkt)}
.melding.mis{background:#FBEDEC;border:1px solid #D9938F;color:#5E1512}
.melding h2{font-size:22px;color:inherit;margin-bottom:.3em}

/* voet: potloodstreep, korte regel en links */
.voet{margin-top:auto;padding:28px 0 22px}
.voet .wrap{padding-top:32px;background:url("./potloodstreep.svg") top center / 100% 12px no-repeat}
.voet-regel{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 22px}
.voet-regel p{margin:0;font:400 18px/1.35 var(--display);letter-spacing:-.025em}
.voet-regel a{font-size:13px;font-weight:500;color:var(--inkt)}
.voet-nav{display:flex;flex-wrap:wrap;gap:8px 21px;font-size:13px}
.voet-nav a{color:var(--inkt)}

@media (max-width:900px){
  .nav-breed{display:none}
  .nav-smal{display:block}
  .held-raster{grid-template-columns:minmax(0,51%) minmax(0,1fr);gap:4%}
  .btn{padding:13px 17px;font-size:17px}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  .kop-rij{min-height:66px;gap:10px}
  h1{font-size:clamp(30px,8.6vw,48px);line-height:1.08;overflow-wrap:break-word}
  .pagina-kop h1{font-size:clamp(28px,8vw,40px)}
  .held{padding:16px 0 40px}
  .held-raster{display:flex;flex-direction:column;gap:18px;margin-top:14px}
  .held-beeld{width:min(100%,400px);align-self:center}
  .held-tekst h2{font-size:clamp(24px,6.5vw,32px);line-height:1.15}
  .held-tekst>p{margin-top:12px;font-size:16px}
  .acties{margin-top:20px;gap:10px}
  .acties a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  .band,.vlak{padding:38px 0}
  .zij-aan-zij,.twee,.lijst-links{grid-template-columns:1fr}
  .twee > div + div,.lijst-links li + li{margin-top:18px}
  .twee{border-top:0}
  .twee > div{border-top:2px solid var(--groen)}
  .formulier{padding:18px}
  .btn{white-space:normal;text-align:center}
  .voet-regel{flex-wrap:wrap;gap:4px 12px}
  .voet-regel p{font-size:15px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* blog */
.blog-lijst{list-style:none;padding:0;margin:18px 0 22px;max-width:760px;border-top:1px solid var(--lijn)}
.blog-lijst li{border-bottom:1px solid var(--lijn);padding:16px 0;margin:0}
.blog-lijst h2,.blog-lijst h3{font-size:21px;margin:2px 0 6px}
.blog-lijst h2 a,.blog-lijst h3 a{color:var(--groen);text-decoration:none}
.blog-lijst h2 a:hover,.blog-lijst h3 a:hover{text-decoration:underline}
.blog-lijst p:last-child{margin:0;color:var(--muted)}
.blog-meta{font-size:14px;color:var(--muted);margin:0}
.blog .pagina-kop .blog-meta{margin-top:-4px}