/*
 * Reset, body, typografie en links — STIJLGIDS §1.3, §3, §4.
 * IBM Plex Sans is self-hosted (spec 02, afstemming punt 9): geen Google Fonts-request vanuit een
 * app met bankgegevens.
 */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}

/* ---------- reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; border-spacing: 0; }

[hidden] { display: none !important; }

/* ---------- typografie ---------- */

h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-tight); }
h3 { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); }

.page-title { display: flex; align-items: center; gap: var(--sp-3); }
.page-subtitle { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--sp-1); }

.label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.muted { color: var(--ink-2); }
.hint { font-size: var(--fs-xs); color: var(--ink-3); }
.seq { font-size: var(--fs-sm); color: var(--ink-3); }

/* Bedragen staan altijd rechts en op vaste cijferbreedte. */
.num { font-variant-numeric: tabular-nums; text-align: right; }
.num-pos { color: var(--pos); }
.num-neg { color: var(--neg); }
.num-zero { color: var(--ink-3); }

/* ---------- links ---------- */

a { color: var(--accent-hover); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* ---------- toegankelijkheid — §3 ---------- */

:focus-visible { outline: none; box-shadow: var(--focus); }

/* Blazor's FocusOnNavigate zet na elke navigatie de focus op de paginatitel, zodat een
   schermlezer weet waar hij is. Dat is geen toetsenbordfocus, dus daar hoort geen ring bij. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -48px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: top .12s ease;
}

.skip-link:focus { top: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-property: opacity !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- app-shell ---------- */

.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: 100vh;
}

.app__main { min-width: 0; }

.page {
  padding: 28px 36px 96px; /* §1.5 + 64 px vrij onder de laatste inhoud voor de toast */
  max-width: 1600px;
}

.section { margin-top: var(--sp-5); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--wrap { flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* Blazor's eigen foutbalk, in de stijl van de gids. */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--warn-tint);
  color: var(--warn-on);
  border-top: 1px solid var(--border-strong);
  font-size: var(--fs-md);
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---------- breekpunten — §1.6 ---------- */

@media (max-width: 1279px) {
  .app { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr); }
  .page { padding: 24px 24px 96px; }
  h1 { font-size: 24px; }
}

@media (max-width: 768px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .page { padding: var(--sp-4) var(--sp-4) 112px; }

  /* Titel en toelichting passen op deze breedte niet naast elkaar; de toelichting zakt eronder
     in plaats van de titel af te knijpen. */
  .section-head { flex-wrap: wrap; row-gap: var(--sp-1); }
}