/* ============================================================
   bereko.nl — design system base
   Art direction: HET NEDERLANDSE FORMULIER (Dutch form, done well)
   Giro-blue paper-form calm. No gradients, no glass, no accent
   stripes. Radius varies per component by meaning (2/6/8/10/999).
   ============================================================ */

:root{
  /* palette (per DESIGN.md) */
  --paper:#f7f8f6;
  --card:#ffffff;
  --ink:#16211e;
  --muted:#5a615d;
  --faint:#7d827e;
  --line:#e3e6e0;
  --blauw:#1d4ed0;
  --blauw-d:#16389c;
  --giro:#eef2fb;
  --oranje:#d4530b;
  --oranje-d:#b5460a;
  --ok:#1a7f4e;
  --warn:#b3541e;

  /* the one shadow allowed on the site: paper lifted off the desk */
  --paper-shadow:0 18px 40px -24px rgb(22 33 30 / .35);

  /* type */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* spacing scale 4/8/12/16/24/36/56 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:36px;--s7:56px;

  /* widths */
  --maxw:680px;      /* prose pages */
  --maxw-tool:1040px;/* tool pages (form + A4 preview) */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blauw-d);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--blauw)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blauw);outline-offset:2px;border-radius:2px}

/* ---------- header chrome ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgb(247 248 246 / .85);
  backdrop-filter:saturate(160%) blur(9px);
  -webkit-backdrop-filter:saturate(160%) blur(9px);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:var(--maxw-tool);margin:0 auto;
  padding:11px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--blauw);
  font-weight:700;font-size:1.1rem;letter-spacing:-.015em;
}
.logo svg{width:26px;height:26px;display:block;border-radius:6px}
.logo b{color:var(--blauw)}
nav.top{display:flex;gap:22px}
nav.top a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600}
nav.top a:hover,nav.top a.active{color:var(--blauw-d)}
@media(max-width:560px){
  nav.top{gap:15px}
  nav.top a.nav-secondary{display:none}
}

/* ---------- page shell ---------- */
main.page{max-width:var(--maxw);margin:0 auto;padding:28px 20px 8px}
main.tool{max-width:var(--maxw-tool)}

.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blauw-d);
}

h1{
  font-weight:700;font-size:2.05rem;line-height:1.14;
  letter-spacing:-.015em;margin:12px 0 8px;color:var(--ink);
}
main.page > p{margin:0 0 14px;color:#22302c;max-width:62ch}
main.page > p.lead{font-size:1.06rem;color:#2a3733}

h2{font-weight:700;font-size:1.32rem;line-height:1.25;letter-spacing:-.01em;margin:32px 0 12px}
h3{font-weight:700;font-size:1.04rem;line-height:1.3;margin:0 0 4px}

/* ---------- prose / question-H2 blocks ---------- */
.prose p{margin:0 0 14px;color:#22302c;max-width:64ch}
.prose h2{margin-top:34px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:#22302c;max-width:64ch}
.prose li{margin:0 0 7px}
.prose strong{font-weight:600}

/* ---------- privacy trust line ---------- */
.trustline{
  display:flex;gap:9px;align-items:flex-start;
  margin:20px 0 6px;padding:12px 15px;
  background:var(--giro);border:1px solid #d7e0f4;border-radius:10px;
  font-size:.9rem;color:#33405c;
}
.trustline svg{color:var(--blauw);flex:none;margin-top:1px}

/* ---------- tool grid tiles (homepage) ---------- */
.tool-grid{
  display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0 6px;
}
.tile{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:17px 18px;transition:border-color .12s ease;
}
.tile:hover{border-color:#c3ccf0}
.tile .ico{
  flex:none;width:40px;height:40px;border-radius:8px;
  background:var(--giro);display:flex;align-items:center;justify-content:center;
  color:var(--blauw);
}
.tile h3 a{text-decoration:none;color:var(--ink)}
.tile h3 a:hover{color:var(--blauw-d);text-decoration:underline}
.tile p{margin:0;color:var(--muted);font-size:.9rem}

/* ---------- giro-tint info card (no left accent stripe) ---------- */
.card-info{
  display:flex;gap:11px;align-items:flex-start;
  margin:22px 0 4px;padding:14px 16px;
  background:var(--giro);border:1px solid #d7e0f4;border-radius:10px;
  font-size:.92rem;color:#33405c;
}
.card-info svg{color:var(--blauw);flex:none;margin-top:2px}

/* ---------- form components ---------- */
.field{margin:0 0 var(--s4)}
label,.field-label{
  display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin:0 0 6px;
}
input[type=text],input[type=number],input[type=email],input[type=date],
select,textarea{
  width:100%;min-height:44px;
  padding:10px 12px;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:6px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
textarea{min-height:88px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blauw);
  box-shadow:0 0 0 3px rgb(29 78 208 / .16);
}
input.mono,.mono-in{font-family:var(--mono);letter-spacing:.02em}
input.ok{border-color:var(--ok)}
input.warn{border-color:var(--warn)}
.hint{margin:5px 0 0;font-size:.8rem;color:var(--faint)}
.hint.error{color:var(--warn)}

/* field group (giro-tint) */
.fieldset{
  background:var(--giro);border:1px solid #d7e0f4;border-radius:10px;
  padding:16px 18px;margin:0 0 var(--s4);
}
.fieldset legend,.fieldset .legend{
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--blauw-d);padding:0;margin:0 0 12px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;font:inherit;font-weight:600;font-size:1rem;
  border-radius:8px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;line-height:1;transition:background .12s ease,border-color .12s ease;
}
.btn-primary{background:var(--oranje);color:#fff;border-color:var(--oranje)}
.btn-primary:hover{background:var(--oranje-d);border-color:var(--oranje-d);color:#fff}
.btn-secondary{background:var(--card);color:var(--blauw-d);border-color:var(--blauw)}
.btn-secondary:hover{background:var(--giro);color:var(--blauw-d)}
.btn:focus-visible{outline:2px solid var(--blauw-d);outline-offset:2px}
/* Mobile: the single primary action stays in view while the form scrolls
   (Gate 2: primary button visible at 375px; sticky, not duplicated). */
@media(max-width:979px){
  .actions{position:sticky;bottom:0;z-index:30;
    background:rgba(247,248,246,.94);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    margin:0 -6px;padding:10px 6px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line)}
}

/* ---------- toggles / chips (btw-tarief) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;min-height:38px;
  padding:8px 16px;font-size:.9rem;font-weight:600;
  border:1.5px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--muted);cursor:pointer;
}
.chip:hover{border-color:#c3ccf0}
.chip[aria-pressed=true],.chip.active{
  background:var(--giro);border-color:var(--blauw);color:var(--blauw-d);
}

/* ---------- Opmaak panel (demoted-reference tier: collapsed, below fields) ----------
   A quiet <details> that never competes with the orange primary action. No
   giro-tint card chrome, no shadow: just a hairline summary that opens a small
   grid of chip groups. Radius 8 on the open body (a reference block, not paper). */
details.opmaak{
  margin:2px 0 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);
}
details.opmaak > summary.opmaak-summary{
  cursor:pointer;list-style:none;
  padding:12px 14px;font-size:.86rem;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
details.opmaak > summary.opmaak-summary::-webkit-details-marker{display:none}
details.opmaak > summary.opmaak-summary::before{
  content:"";width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(-45deg);transition:transform .12s ease;margin-top:-2px;
}
details.opmaak[open] > summary.opmaak-summary::before{transform:rotate(45deg);margin-top:0}
details.opmaak > summary.opmaak-summary:hover{color:var(--blauw-d)}
.opmaak-body{padding:2px 14px 14px;border-top:1px solid var(--line)}
.opmaak-group{margin:14px 0 0}
.opmaak-group:first-child{margin-top:12px}
.opmaak-label{
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 6px;
}
.opmaak-body .chip{min-height:36px;padding:7px 14px;font-size:.88rem}
.opmaak-hint{margin:14px 0 0;font-size:.8rem;color:var(--faint)}

/* ---------- result plate (transitievergoeding) ---------- */
.result-plate{
  background:var(--giro);border:1px solid #d7e0f4;border-radius:10px;
  border-top:2px solid var(--blauw);
  padding:20px 22px;margin:20px 0;
}
.result-plate .label{
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 6px;
}
.result-plate .amount{
  font-family:var(--mono);font-weight:600;color:var(--blauw-d);
  font-size:clamp(2rem,9vw,3.2rem);line-height:1.05;letter-spacing:-.01em;
}
.result-plate .sub{margin:8px 0 0;font-size:.88rem;color:var(--muted)}

/* mono money is right-aligned in tables */
.amount-cell,td.money{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- A4 invoice preview (the only shadow, radius 2) ---------- */
.a4{
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--paper-shadow);
  padding:36px;
}

/* ---------- tables ---------- */
table.data{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 16px}
table.data th{
  text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:700;background:var(--giro);
  padding:9px 12px;border-bottom:1px solid var(--line);
}
table.data td{padding:9px 12px;border-bottom:1px solid var(--line)}
table.data th.money,table.data td.money{text-align:right;font-family:var(--mono)}

/* ---------- related-tools footer strip ---------- */
.related{
  margin:36px 0 8px;padding-top:20px;border-top:1px solid var(--line);
}
.related h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--blauw-d);margin:0 0 14px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.related-grid a{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;font-size:.92rem;font-weight:600;
}
.related-grid a:hover{border-color:#c3ccf0;color:var(--blauw-d)}
.related-grid a span{display:block;font-weight:400;font-size:.82rem;color:var(--muted);margin-top:3px}

/* ---------- footer chrome ---------- */
footer.site{margin-top:50px;border-top:1px solid var(--line);background:#fbfcfa}
.finner{
  max-width:var(--maxw-tool);margin:0 auto;padding:34px 20px 22px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;
}
.fbrand .logo{margin-bottom:10px}
.fbrand p{color:var(--muted);font-size:.86rem;margin:0;max-width:34ch}
.fcol h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--blauw-d);margin:2px 0 12px;font-weight:700}
.fcol a{display:block;color:var(--muted);text-decoration:none;font-size:.9rem;margin-bottom:9px}
.fcol a:hover{color:var(--blauw-d)}
.fbottom{border-top:1px solid var(--line)}
.fbottom .inner{max-width:var(--maxw-tool);margin:0 auto;padding:16px 20px 30px;
  color:var(--faint);font-size:.78rem}
.fbottom p{margin:0 0 6px}
.fbottom a{color:var(--blauw-d)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .finner{grid-template-columns:1.4fr 1fr 1fr}
}
@media(max-width:560px){
  main.page{padding:22px 18px 8px}
  h1{font-size:1.72rem}
  h2{font-size:1.22rem}
  .related-grid{grid-template-columns:1fr}
  .finner{grid-template-columns:1fr 1fr;gap:22px}
  .fbrand{grid-column:1 / -1}
}

/* ---------- print-friendly base ---------- */

/* Ankerdoelen landen onder de sticky header, niet erachter (walkthrough JOHAN, 2026-07-03) */
[id]{scroll-margin-top:64px}

@media print{
  header.site,footer.site,.related,.trustline{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  main.page{max-width:none;padding:0}
  .a4{box-shadow:none;border:none;padding:0}
  a{color:#000;text-decoration:none}
}