/* FinanceMCP — documentatie, vormgeving gelijk aan de marketingsite v3 "Grootboek".
   Huisstijl B-28: Grootboekblauw #16324F, Saldogroen #15A38B. Self-hosted fonts
   (AVG), warm grootboekpapier en dezelfde typografie/kaarten/tabellen als
   financemcp.nl, met een praktische linkernavigatie voor de documentatie. */

/* ── Fonts (variabel, self-hosted) ──────────────────────────────────────── */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --blauw: #16324F;
  --blauw-d: #0d1f33;
  --blauw-l: #24557d;
  --groen: #15A38B;
  --groen-d: #0c7d6a;
  --groen-l: #43c9af;

  --ink: #16242f;
  --muted: #5a6772;
  --paper: #faf8f3;
  --paper-2: #f2eee4;
  --kaart: #ffffff;
  --rule: #e6e0d2;

  --rad: 14px;
  --rad-s: 9px;
  --schaduw-s: 0 2px 14px -6px rgb(13 31 51 / .25);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.65;
  background: var(--paper);
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grootboek-liniatuur achter de hele pagina, gelijk aan de site */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60rem 32rem at 88% -8%, rgb(21 163 139 / .10), transparent 62%),
    radial-gradient(48rem 30rem at -8% 8%, rgb(22 50 79 / .07), transparent 60%),
    var(--paper);
}

img, svg { max-width: 100%; }
::selection { background: var(--groen); color: #fff; }

/* ── Zijbalk: donkere grootboekband, gelijk aan de marketingsite ─────────── */
.zijbalk {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background:
    radial-gradient(40rem 26rem at 20% 0%, rgb(21 163 139 / .18), transparent 60%),
    linear-gradient(170deg, var(--blauw-d), var(--blauw) 65%, var(--blauw-l));
  color: #cfdae5;
  padding: 1.6rem 1.25rem 2.5rem;
  border-right: 1px solid rgb(255 255 255 / .06);
}
.zijbalk > a:first-child { display: inline-flex; line-height: 0; margin-bottom: 1.5rem; }
.zijbalk h2 {
  font-family: var(--mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--groen-l); margin: 1.6rem 0 .5rem; font-weight: 500;
}
.zijbalk nav a {
  display: block; color: #dce6ef; text-decoration: none;
  padding: .42rem .65rem; border-radius: var(--rad-s); margin-bottom: 2px;
  font-size: .95rem; transition: background .16s, color .16s;
}
.zijbalk nav a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.zijbalk nav a.actief { background: var(--groen); color: #fff; font-weight: 600; }

/* Onderwerpen van de pagina waar je op staat, één niveau onder de paginalink. Ingesprongen achter een
   lijn, zodat te zien is dat het bij die pagina hoort en niet bij de navigatie eronder. */
.zijbalk nav .subnav {
  margin: .2rem 0 .6rem .65rem;
  padding-left: .7rem;
  border-left: 1px solid rgb(255 255 255 / .14);
}
.zijbalk nav .subnav a {
  padding: .28rem .5rem; font-size: .86rem; color: #b9c8d6; margin-bottom: 0;
}
.zijbalk nav .subnav a.diep { padding-left: 1.35rem; font-size: .82rem; }
.zijbalk nav .subnav a.hier { color: #fff; background: rgb(255 255 255 / .1); font-weight: 600; }

/* ── Inhoud ──────────────────────────────────────────────────────────────── */
.inhoud { padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4.5rem); max-width: 56rem; }

h1, h2, h3 { font-family: var(--display); color: var(--blauw); line-height: 1.12; letter-spacing: -.012em; }
/* Wie via de onderwerpenlijst naar een kop springt, wil hem niet tegen de bovenrand geplakt zien. */
h2, h3 { scroll-margin-top: 1.2rem; }
h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 540; letter-spacing: -.02em; margin: 0 0 .8rem; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 560; margin: 2.4rem 0 .6rem; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 1.8rem 0 .4rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 650; color: var(--blauw); }
ul, ol { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: .4rem; }

a { color: var(--groen-d); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--groen); }

/* Merknaam in logokleuren: Finance = Grootboekblauw, MCP = Saldogroen. */
.merk-f { color: var(--blauw); }
.merk-m { color: var(--groen); }

/* ── Code ────────────────────────────────────────────────────────────────── */
code, pre {
  font-family: var(--mono);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--rad-s);
  font-size: .92em;
}
code { padding: .15rem .4rem; }
pre { padding: .9rem 1.1rem; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }

/* ── Stap- en opmerkingblokken, gelijk aan de site-banden ────────────────── */
.stap {
  background: var(--kaart); border: 1px solid var(--rule); border-left: 4px solid var(--groen);
  border-radius: 0 var(--rad) var(--rad) 0; box-shadow: var(--schaduw-s);
  padding: 1.1rem 1.3rem; margin: 1.1rem 0;
}
.stap > p:last-child { margin-bottom: 0; }

.opmerking {
  background: #eef8f5; border: 1px solid var(--groen-l);
  border-radius: var(--rad); padding: 1rem 1.2rem; margin: 1.1rem 0;
}
.opmerking > p:last-child { margin-bottom: 0; }

/* ── Tabellen ────────────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .95rem; }
th, td { border: 1px solid var(--rule); padding: .55rem .8rem; text-align: left; vertical-align: top; }
thead th { background: var(--blauw); color: #fff; font-weight: 600; }
tbody tr:nth-child(even) { background: rgb(242 238 228 / .5); }

.paginavoet { margin-top: 3rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }

/* ── Entiteits-/colofonvoet ────────────────────────────────────────────────── */
.doc-voet {
  grid-column: 2;
  max-width: 56rem;
  padding: 1.4rem clamp(1.5rem, 5vw, 4.5rem) 2.6rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .82rem; line-height: 1.6;
}
.doc-voet p { margin: .25rem 0; }
.doc-voet a { color: var(--groen-d); }

/* ── Responsief ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; }
  .zijbalk { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .06); }
  .doc-voet { grid-column: 1; }
}

/* ── Cookie-banner (gespiegeld op www; knopstijl scoped, docs kent geen .button) ── */
#cookie-banner {
  position: fixed; inset-inline: 1rem; bottom: 1rem; max-width: 27rem; margin: 0 auto;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--rad);
  box-shadow: var(--schaduw-s); padding: 1.1rem 1.3rem; z-index: 40;
}
#cookie-banner p { margin: 0 0 .8rem; font-size: .92rem; }
#cookie-banner .knoppen { display: flex; gap: .6rem; }
#cookie-banner .button {
  appearance: none; cursor: pointer; font: inherit; font-size: .9rem;
  padding: .5rem 1rem; border-radius: var(--rad-s);
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
}
#cookie-banner .button.primary { background: var(--groen); border-color: var(--groen); color: #fff; }

/* Weergave van sitemap.xml in de browser (via sitemap.xsl). Zonder stylesheet meldt de browser dat
   er geen opmaakinformatie bij het bestand hoort, wat eruitziet als een fout terwijl het bestand
   klopt. Inline stijlen kunnen hier niet: het Content-Security-Policy staat alleen eigen
   stylesheets toe. */
/* De XML-sitemap heeft geen zijbalk, maar body is een grid van 264px plus de rest. Zonder deze
   uitzondering belandt de inhoud in de smalle eerste kolom en breken de adressen per letter af. */
body.los { display: block; }
body.los .inhoud { margin: 0 auto; max-width: 60rem; }

.xmltabel { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 2rem; }
.xmltabel th, .xmltabel td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); }
.xmltabel thead th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.xmltabel td { color: var(--muted); }
.xmltabel td:first-child { color: var(--blauw); }
.xmltabel td, .xmltabel th { white-space: nowrap; }
.xmltabel-schuif { overflow-x: auto; }