/* pages/pages.css
 *
 * Stijl voor de statische inhoudspagina's (privacy, over) in de
 * WordWinner-merkstijl "Bordspel": warm perkament op zand, harde onderranden,
 * Baloo 2 voor koppen en Nunito voor tekst. Tokens komen uit
 * styles/tokens.css (geladen vóór dit bestand, samen met styles/fonts.css).
 *
 * Geen inline styles nodig in de HTML: alles loopt via de classes hieronder
 * (de CSP staat toch geen style="" of <style> toe).
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ww-zand);
  background-image: var(--ww-nerf);
  color: var(--ww-inkt);
  font-family: var(--ww-tekst);
  line-height: 1.65;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--ww-u6) var(--ww-u5) var(--ww-u16);
}

.page-nav,
.page-footer {
  display: flex;
  gap: var(--ww-u4);
  flex-wrap: wrap;
  font-size: 14px;
}

.page-nav {
  margin-bottom: var(--ww-u7);
  padding-bottom: var(--ww-u3);
  border-bottom: 1.5px solid var(--ww-lijn);
  font-family: var(--ww-display);
  font-weight: 600;
}

.page-footer {
  margin-top: var(--ww-u10);
  padding-top: var(--ww-u4);
  border-top: 1.5px solid var(--ww-lijn);
  color: var(--ww-vervaagd);
}

.page-nav a,
.page-footer a,
main a {
  color: var(--ww-accent);
  text-decoration: none;
}

.page-nav a:hover,
.page-footer a:hover,
main a:hover {
  color: var(--ww-accent-diep);
  text-decoration: underline;
}

main a:focus-visible,
.page-nav a:focus-visible,
.page-footer a:focus-visible {
  outline: 3px solid var(--ww-inkt);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--ww-display); font-weight: 700; color: var(--ww-inkt); }
h1 { font-size: 30px; margin: 0 0 6px; line-height: 1.15; letter-spacing: -.4px; }
h2 { font-size: var(--ww-fs-sectie); margin: var(--ww-u8) 0 10px; line-height: 1.2; }
h3 { font-size: 17px; margin: var(--ww-u5) 0 8px; line-height: 1.25; }

.page-meta {
  color: var(--ww-vervaagd);
  font-size: 13px;
  margin: 0 0 var(--ww-u7);
}

p, li { font-size: var(--ww-fs-brood); color: var(--ww-sepia); max-width: var(--ww-leesbreedte); text-wrap: pretty; }

ul, ol { padding-left: 22px; }

li + li { margin-top: 6px; }

.notice {
  background: var(--ww-honing);
  border-radius: var(--ww-radius-kaart);
  box-shadow: 0 4px 0 #E2CD9C;
  padding: var(--ww-u4) var(--ww-u4);
  margin: var(--ww-u4) 0;
}

.notice p { color: var(--ww-inkt); }
.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ww-u3) 0 var(--ww-u5);
  font-size: 14px;
}

caption {
  text-align: left;
  color: var(--ww-vervaagd);
  font-size: 13px;
  margin-bottom: 6px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--ww-lijn);
  vertical-align: top;
  color: var(--ww-sepia);
}

th {
  background: var(--ww-perkament);
  font-family: var(--ww-display);
  font-weight: 600;
  color: var(--ww-inkt);
}

code {
  background: var(--ww-zacht-zand);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .9em;
  color: var(--ww-inkt);
}

.placeholder {
  display: inline-block;
  background: var(--ww-honing);
  border: 1.5px dashed var(--ww-goud);
  border-radius: 4px;
  padding: 1px 6px;
}