/* WordWinner designsysteem — basiscomponenten.
   Vereist styles/fonts.css en styles/tokens.css. Alle kleuren/maten via tokens. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ww-tekst);
  font-size: var(--ww-fs-brood);
  color: var(--ww-inkt);
  background: var(--ww-zand);
  background-image: var(--ww-nerf);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--ww-display); font-weight: 700; line-height: 1.1; margin: 0 0 var(--ww-u2); color: var(--ww-inkt); }
h1 { font-size: var(--ww-fs-display); line-height: 1.05; letter-spacing: -.4px; }
h2 { font-size: var(--ww-fs-sectie); }
h3 { font-size: 18px; }

p, li { max-width: var(--ww-leesbreedte); font-size: var(--ww-fs-brood); line-height: 1.65; color: var(--ww-sepia); text-wrap: pretty; }
a { color: var(--ww-accent); text-decoration: none; }
a:hover { color: var(--ww-accent-diep); text-decoration: underline; }
code { background: var(--ww-zacht-zand); border-radius: 4px; padding: 1px 5px; color: var(--ww-inkt); font-size: .92em; }

:focus-visible { outline: 3px solid var(--ww-inkt); outline-offset: 1px; border-radius: 4px; }

/* ---- label ---- */
.ww-label {
  font-size: var(--ww-fs-label); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ww-vervaagd);
}

/* ---- kaart ---- */
.ww-kaart {
  background: var(--ww-perkament);
  border-radius: var(--ww-radius-kaart);
  padding: var(--ww-kaart-pad);
  box-shadow: var(--ww-rand), var(--ww-omgeving);
}
.ww-kaart--linnen { background: var(--ww-linnen); }
.ww-kaart--honing { background: var(--ww-honing); box-shadow: 0 4px 0 #E2CD9C, var(--ww-omgeving); }

/* ---- knoppen ---- */
.ww-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ww-u2);
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--ww-display); font-size: var(--ww-fs-knop); font-weight: 600; line-height: 1.2;
  padding: var(--ww-knop-pad) 18px; border-radius: var(--ww-radius-knop);
  background: var(--ww-accent); color: var(--ww-accent-op);
  box-shadow: var(--ww-rand-accent);
  transition: transform .06s ease-out;
}
.ww-knop:hover { text-decoration: none; color: var(--ww-accent-op); filter: brightness(1.06); }
.ww-knop:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ww-accent-diep); }
.ww-knop:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ww-knop--cta { background: var(--ww-cta); color: #FFF3E6; box-shadow: var(--ww-rand-cta); }
.ww-knop--cta:hover { color: #FFF3E6; }
.ww-knop--cta:active { box-shadow: 0 2px 0 var(--ww-cta-diep); }
.ww-knop--secundair { background: var(--ww-perkament); color: var(--ww-inkt); box-shadow: var(--ww-rand); }
.ww-knop--secundair:hover { color: var(--ww-inkt); }
.ww-knop--secundair:active { box-shadow: 0 2px 0 var(--ww-lijn-diep); }
.ww-knop--destructief { background: var(--ww-gevaar-vlak); color: var(--ww-gevaar); box-shadow: 0 4px 0 var(--ww-gevaar-rand); }
.ww-knop--destructief:hover { color: var(--ww-gevaar); }
.ww-knop--guru { background: var(--ww-goud); color: #FFF8E7; box-shadow: 0 3px 0 var(--ww-goud-diep); border-radius: var(--ww-radius-pil); }
.ww-knop--klein { font-size: 14px; padding: 8px 13px; border-radius: 11px; box-shadow: var(--ww-rand-klein); }

/* ---- velden ---- */
.ww-veld {
  width: 100%; font-family: var(--ww-tekst); font-size: var(--ww-fs-brood);
  color: var(--ww-inkt); background: var(--ww-perkament);
  border: 1.5px solid var(--ww-lijn); border-radius: var(--ww-radius-veld);
  padding: 10px 13px;
}
.ww-veld::placeholder { color: var(--ww-vervaagd); }
.ww-veld:focus { outline: none; border-color: var(--ww-accent); box-shadow: 0 0 0 3px rgba(31, 111, 92, .18); }

/* ---- pil / badge ---- */
.ww-pil {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ww-fs-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ww-linnen); color: var(--ww-sepia);
  border-radius: var(--ww-radius-pil); padding: 4px 11px;
}
.ww-pil--accent { background: var(--ww-accent-vlak); color: var(--ww-accent-diep); }

/* ---- bordtegels ---- */
.ww-tegel {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--ww-display); font-weight: 600; font-size: var(--ww-tegel-font);
  border-radius: var(--ww-radius-tegel);
  background: var(--ww-tegel-leeg);
  box-shadow: inset 0 0 0 1.5px var(--ww-tegel-rand);
  color: var(--ww-vervaagd);
}
.ww-tegel--letter { background: var(--ww-steen); color: var(--ww-inkt); box-shadow: 0 3px 0 var(--ww-steen-diep); }
.ww-tegel--tw { background: var(--ww-tw); color: #FFF3E6; box-shadow: 0 3px 0 var(--ww-tw-diep); }
.ww-tegel--dw { background: var(--ww-dw); color: var(--ww-inkt); box-shadow: 0 3px 0 var(--ww-dw-diep); }
.ww-tegel--tl { background: var(--ww-tl); color: #FFF3E6; box-shadow: 0 3px 0 var(--ww-tl-diep); }
.ww-tegel--dl { background: var(--ww-dl); color: #FFF3E6; box-shadow: 0 3px 0 var(--ww-dl-diep); }
.ww-tegel--ster { background: var(--ww-ster); color: var(--ww-honing); box-shadow: 0 3px 0 var(--ww-ster-diep); }

/* ---- iconen: monocolor lijnwerk ---- */
.ww-icon {
  width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- logo ---- */
.ww-logo { display: inline-flex; align-items: center; gap: var(--ww-u3); text-decoration: none; }
.ww-logo:hover { text-decoration: none; }
.ww-logo-merk {
  width: 48px; height: 48px; border-radius: 10px; flex: 0 0 auto;
  background: var(--ww-accent); color: var(--ww-accent-op);
  box-shadow: 0 4px 0 var(--ww-accent-diep);
  transform: rotate(-4deg);
  display: flex; align-items: flex-start; justify-content: center;
  font-family: var(--ww-display); font-weight: 700; line-height: 48px;
}
.ww-logo-merk .groot { font-size: 28px; }
.ww-logo-merk .klein { font-size: 14px; opacity: .85; margin-left: 1px; line-height: 40px; }
.ww-logo--klein .ww-logo-merk { width: 38px; height: 38px; border-radius: 9px; line-height: 38px; box-shadow: 0 3px 0 var(--ww-accent-diep); }
.ww-logo--klein .ww-logo-merk .groot { font-size: 22px; }
.ww-logo--klein .ww-logo-merk .klein { font-size: 11px; line-height: 31px; }
.ww-wordmark { font-family: var(--ww-display); font-weight: 700; font-size: 24px; letter-spacing: -.3px; color: var(--ww-inkt); line-height: 1; }
.ww-wordmark .accent { color: var(--ww-accent); }
.ww-wordmark .super { font-size: .55em; color: var(--ww-vervaagd); vertical-align: super; }

/* ---- paginakop ---- */
.ww-topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ww-perkament);
  border-bottom: 1.5px solid var(--ww-lijn);
  padding: 10px var(--ww-u5);
}
.ww-topbar-rij {
  max-width: var(--ww-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--ww-u4); flex-wrap: wrap;
}
.ww-nav { display: flex; align-items: center; gap: var(--ww-u1); margin-left: auto; flex-wrap: wrap; }
.ww-nav a {
  font-family: var(--ww-display); font-weight: 600; font-size: 15px;
  color: var(--ww-sepia); text-decoration: none;
  padding: 8px 13px; border-radius: 11px;
}
.ww-nav a:hover { color: var(--ww-inkt); background: var(--ww-zacht-zand); text-decoration: none; }
.ww-nav a[aria-current='page'], .ww-nav a.actief {
  color: var(--ww-accent-diep); background: var(--ww-accent-vlak);
}

/* ---- tabbalk ---- */
.ww-tabs {
  display: inline-flex; gap: var(--ww-u1);
  background: var(--ww-linnen); border-radius: var(--ww-radius-knop); padding: 4px;
}
.ww-tab {
  border: none; cursor: pointer; background: transparent;
  font-family: var(--ww-display); font-weight: 600; font-size: 15px;
  color: var(--ww-sepia); padding: var(--ww-tab-pad); border-radius: 11px;
  text-decoration: none;
}
.ww-tab:hover { color: var(--ww-inkt); text-decoration: none; }
.ww-tab.actief, .ww-tab[aria-current='page'] {
  background: var(--ww-perkament); color: var(--ww-inkt); box-shadow: var(--ww-rand-klein);
}

/* ---- pagina-indeling ---- */
.ww-pagina { max-width: var(--ww-max); margin: 0 auto; padding: var(--ww-pagina-pad); }

/* ---- kruimelpad ---- */
.ww-kruimels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin: var(--ww-u2) 0 var(--ww-u4); color: var(--ww-vervaagd); }
.ww-kruimels a { color: var(--ww-sepia); }
.ww-kruimels .sep { opacity: .6; }

/* ---- voettekst ---- */
.ww-footer {
  max-width: var(--ww-max); margin: var(--ww-u10) auto 0;
  padding: var(--ww-u4) var(--ww-u5) var(--ww-u7);
  border-top: 1.5px solid var(--ww-lijn);
  color: var(--ww-vervaagd); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: var(--ww-u2); text-align: center;
}
.ww-footer a { color: var(--ww-sepia); }
.ww-footer a:hover { color: var(--ww-accent-diep); }

/* ---- upsellblok (lijstpagina's → tools) ---- */
.ww-upsell {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ww-u4);
  flex-wrap: wrap;
  background: var(--ww-perkament); border-radius: var(--ww-radius-kaart);
  padding: var(--ww-u4) var(--ww-u5);
  box-shadow: var(--ww-rand), var(--ww-omgeving);
  margin: var(--ww-u6) 0;
}
.ww-upsell h3 { margin: 0 0 4px; font-size: 18px; }
.ww-upsell p { margin: 0; font-size: 14px; }
.ww-upsell--accent { background: var(--ww-accent-vlak); box-shadow: 0 4px 0 #C9DACE, var(--ww-omgeving); }

/* ---- woordenlijsten ---- */
.ww-woordgroep { margin: var(--ww-u6) 0; }
.ww-woordgroep h2 { display: flex; align-items: baseline; gap: var(--ww-u2); flex-wrap: wrap; }
h2 .telling { font-family: var(--ww-tekst); font-weight: 700; font-size: 14px; color: var(--ww-vervaagd); letter-spacing: 0; }
.ww-hubgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ww-gutter); margin: var(--ww-u5) 0; }
.ww-ai-blok { margin: var(--ww-u6) 0; }
.ww-ai-blok p { max-width: none; }
.ww-woorden { display: flex; flex-wrap: wrap; gap: var(--ww-u2); padding: 0; margin: var(--ww-u3) 0 0; list-style: none; }
.ww-woord {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--ww-perkament); border-radius: 9px;
  box-shadow: var(--ww-rand-klein);
  padding: 6px 11px;
  font-family: var(--ww-display); font-weight: 600; font-size: 15px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ww-inkt);
  max-width: none;
}
.ww-woord .punten { font-family: var(--ww-tekst); font-weight: 800; font-size: 11px; color: var(--ww-vervaagd); letter-spacing: 0; }
.ww-woord.verborgen { display: none; }

/* ---- uitlegpagina ---- */
.uitleg-stappen { margin: 0; padding-left: 22px; }
.uitleg-stappen li { margin-bottom: var(--ww-u2); }
.uitleg-stappen li:last-child { margin-bottom: 0; }
.uitleg-faq-item { border-top: 1.5px solid var(--ww-lijn); padding: var(--ww-u3) 0; }
.uitleg-faq-item:first-of-type { border-top: 0; padding-top: 0; }
.uitleg-faq-item summary {
  cursor: pointer; font-family: var(--ww-display); font-weight: 600; font-size: 16px;
  color: var(--ww-inkt); list-style-position: outside;
}
.uitleg-faq-item summary:hover { color: var(--ww-accent-diep); }
.uitleg-faq-item[open] summary { margin-bottom: var(--ww-u2); }
.uitleg-faq-item p { margin: 0; }

/* ---- woordzoeker ---- */
.zoekkaart { display: flex; flex-direction: column; gap: var(--ww-u2); }
.letters-veld {
  font-family: var(--ww-display); font-weight: 600; font-size: 24px;
  letter-spacing: 6px; text-transform: uppercase; text-align: center;
}
.zoek-opties { display: flex; align-items: center; gap: var(--ww-u3); flex-wrap: wrap; }
.ww-veld--klein { width: auto; padding: 7px 10px; font-size: 14px; }
.zoek-status { margin: 0; font-size: 13px; color: var(--ww-vervaagd); min-height: 18px; }

/* ---- antwoordkaart (het directe antwoord bovenaan een lijstpagina) ---- */
.ww-antwoord {
  background: var(--ww-perkament); border-radius: var(--ww-radius-kaart);
  box-shadow: var(--ww-rand), var(--ww-omgeving);
  padding: var(--ww-u5) var(--ww-u6);
  margin: var(--ww-u4) 0 var(--ww-u6);
}
.ww-antwoord p { font-size: 17px; margin: 0; max-width: none; color: var(--ww-inkt); }
.ww-antwoord .getal { font-family: var(--ww-display); font-weight: 700; color: var(--ww-accent-diep); }