/* =========================================================================
   ZZP Ondernemersprofiel — stylesheet
   The ONLY block that changes per client is :root below.
   Everything else is shared. See docs/04-design-standard.md.
   ========================================================================= */

/* ---- 1. CLIENT VARIABLES — edit these, nothing else -------------------- */
:root {
  /* Brand colours — copy verbatim from ~/Documents/klanten/<slug>/brand/palette.md */
  --c-brand:      #2f5d3f;
  --c-brand-dark: #23462f;
  --c-brand-soft: #eaf1ec;
  --c-accent:     #96601f;  /* must reach 4.5:1 on white AND on --c-bg-soft */

  /* Neutrals — normally left alone */
  --c-ink:      #1a1d1a;
  --c-ink-soft: #4a4f4a;
  --c-bg:       #ffffff;
  --c-bg-soft:  #f5f6f4;
  /* Decorative dividers and card borders ONLY. Never use --c-line to outline
     an interactive control — those need --c-brand-dark to reach 3:1. */
  --c-line:     #dfe2dd;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---- 2. SHARED TOKENS — do not edit per client ------------------------- */
:root {
  --fs-hero:  clamp(2rem, 5vw, 3.25rem);
  --fs-h1:    clamp(1.75rem, 4vw, 2.5rem);
  --fs-h2:    clamp(1.35rem, 3vw, 1.75rem);
  --fs-h3:    1.125rem;
  --fs-body:  1.0625rem;
  --fs-small: .9375rem;

  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem; --s-9: 6rem;

  --w-content: 68rem;
  --w-text: 62ch;
  --radius: 6px;
}

/* ---- 3. RESET --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important;
    transition-duration: .01ms !important; }
}
img, svg { display: block; max-width: 100%; height: auto; }

/* ---- 4. BASE ---------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p, ul, ol { max-width: var(--w-text); }
p + p { margin-top: var(--s-4); }
a { color: var(--c-brand-dark); text-underline-offset: .18em; }
a:hover { color: var(--c-brand); }
:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px;
  border-radius: 2px; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-7) 0; }

/* ---- 5. LAYOUT -------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-content); margin-inline: auto;
  padding-inline: var(--s-5); }
.section { padding-block: var(--s-8); }
.section--soft { background: var(--c-bg-soft); }
.section--brand { background: var(--c-brand-soft); }
.section__intro { margin-bottom: var(--s-6); }
.section__intro p { color: var(--c-ink-soft); margin-top: var(--s-3); }
@media (min-width: 48rem) { .section { padding-block: var(--s-9); } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-brand-dark); color: #fff; padding: var(--s-3) var(--s-4);
}
.skip:focus { left: 0; }

/* ---- 6. KAART — het digitale visitekaartje ------------------------------ */
.kaart { background: var(--c-bg-soft); }
.kaart > .wrap, .kaart__voet .wrap { max-width: 44rem; }

#main.wrap {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  margin-block: var(--s-6);
  padding: var(--s-6) var(--s-5);
}
@media (min-width: 40rem) {
  #main.wrap { margin-block: var(--s-8); padding: var(--s-8) var(--s-7); }
}

.kaart__kop { display: flex; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-5); border-bottom: 2px solid var(--c-brand); }
.kaart__logo { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 6px; }
.kaart__kop h1 { font-size: clamp(1.5rem, 5vw, 2.125rem); }
.kaart__vak { color: var(--c-ink-soft); margin-top: var(--s-1); font-size: 1.0625rem; }

.kaart__intro { font-size: 1.0625rem; padding-top: var(--s-5); max-width: 58ch; }

.kaart__diensten { display: grid; gap: var(--s-4); margin: 0; }
.kaart__diensten dt { font-weight: 700; }
.kaart__diensten dd { margin: var(--s-1) 0 0; color: var(--c-ink-soft);
  font-size: var(--fs-small); max-width: 58ch; }

.kaart__over { max-width: 58ch; }

.kaart__contact { display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding-block: var(--s-5); }
.kaart__contact .btn { flex: 1 1 14rem; }

.kaart__blok { padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.kaart__blok h2 { font-size: 0.875rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink-soft); margin-bottom: var(--s-3); }

.kaart__lijst { list-style: none; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--s-2); max-width: none; }
.kaart__lijst li { background: var(--c-brand-soft); color: var(--c-brand-dark);
  border-radius: 999px; padding: var(--s-2) var(--s-4); font-size: var(--fs-small);
  font-weight: 700; }

.kaart__feiten { display: grid; gap: var(--s-3); margin: 0; }
.kaart__feiten > div { display: grid; grid-template-columns: 9rem 1fr;
  gap: var(--s-3); align-items: baseline; }
.kaart__feiten dt { color: var(--c-ink-soft); font-size: var(--fs-small); }
.kaart__feiten dd { margin: 0; font-weight: 700; }
@media (max-width: 28rem) {
  .kaart__feiten > div { grid-template-columns: 1fr; gap: 0; }
}

.kaart__voet { padding-block: var(--s-6); color: var(--c-ink-soft);
  font-size: var(--fs-small); text-align: center; }
.kaart__voet p { max-width: none; }
.kaart__voet p + p { margin-top: var(--s-3); }
.kaart__voet a { color: var(--c-brand-dark); display: inline-block;
  padding-block: var(--s-2); }

/* ---- 7. BUTTONS ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); min-height: 48px; padding: var(--s-3) var(--s-5);
  border-radius: var(--radius); font-weight: 700; font-size: var(--fs-body);
  text-decoration: none; border: 2px solid var(--c-brand-dark);
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--c-brand-dark); color: #fff; }
.btn--primary:hover { background: var(--c-brand); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-brand-dark); }
.btn--ghost:hover { background: var(--c-brand-soft); color: var(--c-brand-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---- 13. PROSE (legal pages) ------------------------------------------ */
.prose h2 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose ul, .prose ol { margin-top: var(--s-3); padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose > p:first-child { font-size: 1.125rem; }

/* ---- 15. UTILITIES ---------------------------------------------------- */
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 16. PRINT -------------------------------------------------------- */
@media print {
  .site-nav, .btn-row, .header-cta, .skip { display: none; }
  body { font-size: 11pt; color: #000; }
  .site-footer { background: none; color: #000;
    border-top: 1px solid #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}