/* Accountantskantoor Taleman — gedeelde opmaak voor de Nederlandse en de
   Franse startpagina (index.html en fr/index.html). */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/lora-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/lora-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  /* Donkerder goud voor de knoppen: zelfde tint als --color-accent, maar met
     een contrast van 4,7:1 op de achtergrond (norm voor leesbare tekst: 4,5:1). */
  --color-knop: #92682b;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #5a3b0a;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* — basis — */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: 1.2; color: var(--color-text); /* 20px Cormorant oogt als 16px Lora */
  background: transparent; border: 1px solid transparent;
  padding: 11px 24px;
  border-radius: var(--radius-md);
}
/* Bij aanwijzen wordt de tekst nog iets donkerder. */
.btn-primary { color: var(--color-knop); border-color: var(--color-knop); }
.btn-primary:hover { color: var(--color-accent-2-700); background: color-mix(in srgb, var(--color-knop) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-knop) 22%, transparent); }
.btn-ghost { color: var(--color-knop); }
.btn-ghost:hover { color: var(--color-accent-2-700); background: color-mix(in srgb, var(--color-knop) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-knop) 18%, transparent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — pagina — */
html { scroll-behavior: smooth; }
body { margin: 0; --color-bg: #FBF9F5; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
@media (max-width: 880px) { .hoefjes-tussen { display: none } }

/* — navigatie: hamburger onder 760px, vast op touch — */
.nav {
  --nav-bg: #FBF9F5;
  --nav-pad: max(clamp(20px, 5vw, 64px), calc((100% - 1160px) / 2 + clamp(20px, 5vw, 64px)));
  display: flex; align-items: center; gap: 26px;
  padding: 12px var(--nav-pad);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--color-divider);
}
.nav a.nav-brand {
  margin-right: auto; display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.1;
  font-size: clamp(16px, 5vw, 20px);
  color: var(--color-text); text-decoration: none;
}
.nav-mark { flex: 0 0 auto; height: 36px; width: auto; display: block; }
.nav-naam { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 16px; white-space: nowrap; color: inherit; text-decoration: none; }
.nav-links a:hover { color: var(--color-accent-700); }
.nav-toggle { display: none; }
/* Taalkiezer: toont de weg naar de andere taal, niet de huidige status.
   In de eigen taal geschreven, zodat er geen twijfel over de richting is. */
.nav-links a.nav-taal {
  color: var(--color-neutral-700);
  padding-left: 26px;
  border-left: 1px solid var(--color-divider);
}
.nav-links a.nav-taal:hover { color: var(--color-accent-700); }
.nav-hoverzone { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 29; }

@media (max-width: 894px) {
  .nav { gap: 12px; padding-block: 7px; }
  .nav-mark { height: 30px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 42px; height: 42px; margin-right: -10px;
    padding: 0; border: 0; background: none; color: var(--color-text); cursor: pointer;
  }
  .nav-burger { display: block; position: relative; width: 22px; height: 15px; }
  .nav-burger span {
    position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 1px;
    background: currentColor; transition: transform .25s ease, opacity .2s ease;
  }
  .nav-burger span:nth-child(1) { top: 0 }
  .nav-burger span:nth-child(2) { top: 6.75px }
  .nav-burger span:nth-child(3) { top: 13.5px }
  .nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(1) { transform: translateY(6.75px) rotate(45deg) }
  .nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(2) { opacity: 0 }
  .nav-toggle[aria-expanded="true"] .nav-burger span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg) }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 2px clamp(20px, 5vw, 64px) 8px;
    background: var(--nav-bg); border-bottom: 1px solid var(--color-divider);
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links a { font-size: 17px; padding: 14px 0; border-top: 1px solid var(--color-divider); }
  /* In het paneel staat de taal onderaan, visueel ondergeschikt aan de navigatie. */
  .nav-links a.nav-taal { font-size: 16px; padding-left: 0; border-left: 0; }
}

@media (hover: none), (pointer: coarse) {
  .nav { transform: none !important; opacity: 1 !important; }
  .nav-hoverzone { display: none; }
  /* De balk staat hier permanent vast, dus de inhoud moet eronder beginnen. */
  .inhoud { padding-top: calc(var(--nav-h, 57px) + 8px); }
}

/* Onder 895px past de hero niet meer naast de afbeelding: de tekst wrapt naar
   boven en de H1 komt pal tegen de bovenrand, precies waar de vaste navbalk
   hangt. Daar dus ruimte reserveren. Boven die grens staat de H1 vanzelf al
   op 74px of lager en is dit niet nodig. */
@media (max-width: 894px) {
  .inhoud { padding-top: calc(var(--nav-h, 61px) + 12px); }
}
/* Onder 360px past "Accountantskantoor" — achttien letters, geen spatie —
   niet meer op 40px. Het woord kan nergens breken, dus zou de browser de
   hele pagina uitzoomen. Daarom hier een kleinere titel. De !important is
   nodig omdat de grootte als inline stijl op de h1 staat. */
@media (max-width: 359px) {
  #top h1 { font-size: 34px !important; }
}

/* — omzetting naar gewone HTML — */
/* Zonder JavaScript blijft de navigatiebalk gewoon zichtbaar. Met JavaScript
   (klasse js op <html>) is hij bovenaan de pagina verborgen; assets/site.js
   zet de klasse nav-toon zodra hij moet verschijnen. Op touchtoestellen houdt
   de regel met !important hierboven hem altijd zichtbaar. */
.js .nav { transform: translateY(-105%); opacity: 0; }
.js .nav.nav-toon { transform: translateY(0); opacity: 1; }

/* Links die pas bij aanwijzen kleuren en onderlijnen. */
.nav a.nav-brand:hover { color: var(--color-accent-700); }
.link-stil { color: var(--color-text); text-decoration: none; }
.link-voet { color: var(--color-neutral-700); text-decoration: none; }
.link-stil:hover, .link-voet:hover {
  color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 4px;
}

/* — leesbaarheid —
   Geen enkele tekst oogt kleiner dan de lopende tekst (Lora 16px). Let op:
   Cormorant Garamond heeft veel kleinere kleine letters dan Lora, zodat 20px
   Cormorant ongeveer even groot oogt als 16px Lora. Onderscheid tussen hoofd-
   en bijzaak zit in kleur, hoofdletters en lettertype, niet in kleine letters. */
.label {
  display: block; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); font-feature-settings: 'tnum' 1; margin-bottom: 18px;
}
/* Bewuste uitzondering: het bijschrift onder de tekening is bijzaak en blijft
   klein, zodat de titel op één regel past (vanaf 390 px breed). Daarom in de
   donkere tekstkleur, niet in grijs. */
.bijschrift {
  font-family: var(--font-heading); font-size: 16px; line-height: 1.5; letter-spacing: 0.01em;
  margin-top: 16px; text-align: center; color: var(--color-text); text-wrap: balance;
}
.bijschrift-titel { font-size: 17px; }
.team-regel { display: block; font-size: 16px; line-height: 1.6; color: var(--color-text); }
.voet { padding: 40px 0 56px; font-size: 16px; line-height: 1.7; color: var(--color-neutral-700); }

/* Uitvullen alleen op bredere schermen: op een gsm geeft het grote gaten
   tussen de woorden. */
@media (min-width: 700px) { .uitgevuld { text-align: justify; hyphens: auto; } }

/* Op smalle schermen krijgt elk gegeven in de voettekst een eigen regel, in
   plaats van scheidingspuntjes die anders aan het begin van een regel belanden. */
@media (max-width: 600px) { .voet-punt { display: block; height: 0; overflow: hidden; } }

/* Op gsm iets minder ruimte binnen de knoppen, zodat ze vaker naast elkaar passen. */
@media (max-width: 480px) { .btn { padding-inline: 16px; } }