/* Ik leer thuis – gedeelde stijl voor de beginpagina en de privacypagina.
 * Basis: rustig en zacht. Licht/donker via [data-kleur], seizoen via [data-seizoen] (zie thema.js). */

:root {
  --basis-bg: #F7F5F1; --basis-ink: #27303F; --basis-muted: #6B7280; --basis-surface: #FFFFFF; --basis-line: #E7E2DA;
  --accent: #5B8DEF; --tint: #DCE7FB;
  --bg: color-mix(in srgb, var(--tint) 14%, var(--basis-bg));
  --ink: var(--basis-ink); --muted: var(--basis-muted);
  --surface: var(--basis-surface);
  --line: color-mix(in srgb, var(--tint) 35%, var(--basis-line));
  --accent-zacht: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color-scheme: light;
}
:root[data-kleur="donker"] {
  --basis-bg: #171A21; --basis-ink: #ECEEF2; --basis-muted: #A3A9B6; --basis-surface: #20242D; --basis-line: #2F3440;
  --bg: color-mix(in srgb, var(--tint) 6%, var(--basis-bg));
  --line: color-mix(in srgb, var(--tint) 10%, var(--basis-line));
  --accent-zacht: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color-scheme: dark;
}

/* Seizoenen: alleen accentkleur, achtergrondtint en versiering verschillen */
:root[data-seizoen="lente"]   { --accent: #4E9A57; --tint: #D6EDCB; }
:root[data-seizoen="zomer"]   { --accent: #E59A2F; --tint: #FFE6AE; }
:root[data-seizoen="herfst"]  { --accent: #C0663A; --tint: #F2CDB2; }
:root[data-seizoen="winter"]  { --accent: #4A87CC; --tint: #D3E5F8; }
:root[data-seizoen="kerst"]   { --accent: #C23B3B; --tint: #F4D2D2; --accent2: #2F7D52; }
:root[data-seizoen="oudjaar"] { --accent: #7656D8; --tint: #E2D9FA; --accent2: #D9A92B; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 500 1.05rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: background-color .3s, color .3s;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Bovenbalk: kleurkeuze */
.balk { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 16px 0; max-width: 1040px; width: 100%; margin: 0 auto; }
.kleurkeuze { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.kleurkeuze button {
  border: 0; background: none; color: var(--muted); font: 600 .85rem/1 inherit; padding: 8px 12px; border-radius: 99px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.kleurkeuze button[aria-pressed="true"] { background: var(--accent-zacht); color: var(--ink); }
.kleurkeuze .woord { display: inline; }
@media (max-width: 480px) { .kleurkeuze .woord { display: none; } .kleurkeuze button { padding: 8px 10px; } }

/* Beginpagina */
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: clamp(12px, 3vh, 36px) 16px 28px; display: flex; flex-direction: column; align-items: center; }
.logo { margin: 0 0 clamp(20px, 4vh, 40px); text-align: center; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(2.6rem, 8vw, 4.2rem); }
.logo .huis { display: block; font-size: .8em; margin-bottom: 6px; }
.logo .thuis { color: var(--accent); }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; width: 100%; max-width: 760px; }
.tegel {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 22px;
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px -12px color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform .15s, box-shadow .15s;
}
a.tegel:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--accent), 0 10px 22px -12px color-mix(in srgb, var(--ink) 45%, transparent); }
a.tegel:active { transform: translateY(1px); }
.tegel .ic { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 2.1rem; background: var(--accent-zacht); }
.tegel .tekst { display: flex; flex-direction: column; min-width: 0; }
.tegel .ikleer { font-size: .95rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.tegel b { font-size: 1.55rem; font-weight: 900; line-height: 1.15; }
.tegel small { margin-top: 4px; color: var(--muted); font-size: .95rem; line-height: 1.35; }
.tegel.binnenkort { opacity: .62; }
.tegel .label { position: absolute; top: 12px; right: 14px; font-size: .75rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--accent-zacht); color: var(--muted); }
@media (max-width: 600px) {
  /* Telefoon: compact, zodat er minstens vier tegels in beeld passen zonder scrollen */
  .balk { padding-top: 8px; }
  main { padding-top: 4px; }
  .logo { font-size: 2.3rem; margin-bottom: 16px; }
  .logo .huis { display: inline; font-size: .85em; margin: 0 .2em 0 0; }
  .tegels { gap: 10px; }
  .tegel small { display: none; }
  .tegel { padding: 12px 16px; gap: 14px; border-radius: 18px; }
  .tegel .ic { width: 50px; height: 50px; font-size: 1.6rem; border-radius: 15px; }
  .tegel b { font-size: 1.35rem; }
  .tegel .ikleer { font-size: .85rem; }
  .tegel .label { top: 8px; right: 10px; }
}

/* Onderkant */
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 24px 16px 28px; }
.beloften { opacity: .8; margin-bottom: 8px; }
.beloften span, .links > * { white-space: nowrap; display: inline-block; }
.beloften span + span::before { content: "·"; margin: 0 .6em; }
.links a { color: var(--muted); text-underline-offset: 3px; }
.links span + span::before, .links a + span::before, .links span + a::before, .links a + a::before { content: "·"; margin: 0 .6em; text-decoration: none; display: inline-block; }

/* Versielabel */
.versie { position: fixed; right: 8px; bottom: 6px; font: 600 .68rem/1 system-ui, sans-serif; color: var(--ink); opacity: .32; pointer-events: none; }

/* Seizoenspatroon: vast behang van figuurtjes achter de inhoud (zie thema.js) */
.versiering { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-repeat: repeat; opacity: .15; }
:root[data-kleur="donker"] .versiering { opacity: .10; }
.balk, main, footer { position: relative; z-index: 1; }

/* Privacypagina */
.tekstpagina { max-width: 760px; text-align: left; align-items: stretch; background: var(--surface); border-radius: 24px; padding: clamp(20px, 4vw, 40px); margin-top: 16px; margin-bottom: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.tekstpagina h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 4px; }
.tekstpagina h2 { font-size: 1.2rem; margin: 28px 0 6px; }
.tekstpagina p, .tekstpagina li { color: var(--ink); }
.tekstpagina .muted { color: var(--muted); font-size: .9rem; }
.kortweg { background: var(--bg); border-radius: 16px; padding: 14px 18px; box-shadow: inset 0 0 0 1px var(--line); margin: 16px 0 8px; }
.kortweg ul { margin: 6px 0 0; padding-left: 1.2em; }
.terug { display: inline-block; margin-bottom: 18px; color: var(--muted); text-decoration: none; font-weight: 600; }
.terug:hover { color: var(--ink); }
@media (max-width: 600px) {
  .beloften, .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
  .beloften span::before, .links > *::before { content: none !important; }
}

/* Icoonvarianten (keuze op de testsite) */
.ic .tk { font-weight: 900; color: var(--accent); line-height: 1; }
.ic .tk.groot { font-size: 2.6rem; }
.ic .tk.som { font-size: 1.05rem; letter-spacing: -.02em; }
.ic svg { width: 62%; height: 62%; }
.tegel .ic.vol { background: none; }
.ic.vol svg { width: 100%; height: 100%; overflow: visible; }

.tabelrol { overflow-x: auto; margin: 10px 0; }
.tekstpagina table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--bg); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.tekstpagina th, .tekstpagina td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tekstpagina th { font-size: .85rem; color: var(--muted); }
.tekstpagina tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .tekstpagina table, .tekstpagina tbody, .tekstpagina tr, .tekstpagina td { display: block; } .tekstpagina thead { display: none; } .tekstpagina td:first-child { padding-bottom: 2px; } .tekstpagina tr { border-bottom: 1px solid var(--line); padding: 4px 0; } .tekstpagina td { border: 0; } .tekstpagina td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; color: var(--muted); } }