/* =====================================================================
   SCOUTR 2.0 - basis
   Typografie, focus, knoppen, formulieren, indeling.
   Werkt op tokens.css; hier staat geen enkele losse hexwaarde.

   Laadt NA het thema van de leverancier, dus overal waar materialize of
   style.css in de weg zit staat hier een tegenregel. Die zijn gemarkeerd
   met "tegen het thema" zodat je ze bij een update kunt nalopen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. GRONDSLAG
   --------------------------------------------------------------------- */

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

html {
  /* Geen vaste px op html: dan schaalt de site niet mee met de
     lettergrootte die iemand in zijn browser heeft ingesteld. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Het thema laat body scrollen in plaats van html. Beide meenemen. */
html, body { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
}

body.sc {
  margin: 0;
  background: var(--sc-nachtgroen);
  color: var(--sc-tekst);
  font-family: var(--sc-font-tekst);
  font-size: var(--sc-t-base);
  line-height: var(--sc-lh-tekst);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Het thema kleurt p, li en dergelijke bijna zwart. Binnen Scoutr erven
   ze de kleur van hun blok. :where() houdt het gewicht op nul, zodat elke
   eigen regel hieronder alsnog wint. Tegen het thema. */
.sc :where(p, li, dd, dt, span, small, strong, b, i, em, td, th, label, figcaption) {
  color: inherit;
}

/* Ankers krijgen ruimte onder een plakkende kopbalk. */
.sc [id] { scroll-margin-top: calc(var(--sc-r-8) + var(--sc-r-4)); }

/* ---------------------------------------------------------------------
   2. TYPOGRAFIE
   Koppen in Bricolage Grotesque, tekst in Hanken Grotesk, korte labels
   in Martian Mono. Nergens anders een lettertype.
   --------------------------------------------------------------------- */

.sc h1, .sc h2, .sc h3, .sc h4 {
  font-family: var(--sc-font-kop);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: var(--sc-lh-kop);
  margin: 0 0 var(--sc-r-3);
  text-wrap: balance;
  color: var(--sc-tekst);
}

.sc h1 { font-size: var(--sc-t-4xl); line-height: var(--sc-lh-strak); letter-spacing: -.03em; }
.sc h2 { font-size: var(--sc-t-3xl); line-height: var(--sc-lh-strak); letter-spacing: -.025em; }
.sc h3 { font-size: var(--sc-t-xl); }
.sc h4 { font-size: var(--sc-t-lg); }

.sc p { margin: 0 0 var(--sc-r-4); }
.sc p:last-child { margin-bottom: 0; }

/* Lopende tekst blijft leesbaar breed: ongeveer 65 tekens. */
.sc .sc-lees { max-width: 68ch; }

.sc-lead {
  font-size: var(--sc-t-lg);
  line-height: 1.55;
  color: var(--sc-tekst-zacht);
  max-width: 56ch;
}

.sc-klein {
  font-size: var(--sc-t-sm);
  color: var(--sc-tekst-zacht);
}

/* Het datalabel. Martian Mono, uitsluitend hier, maximaal drie woorden. */
.sc-data {
  font-family: var(--sc-font-data);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-spatie-data);
  text-transform: uppercase;
  color: var(--sc-touw);
  font-weight: 400;
  line-height: 1.5;
}

/* Roze is nooit de kleur van een zin. Deze klasse bestaat alleen voor
   koppen, en de regel eronder dwingt dat af zodra hij op iets kleins
   belandt: dan valt hij terug op de tekstkleur. */
.sc-accent { color: var(--sc-roze); }
.sc p .sc-accent,
.sc li .sc-accent,
.sc .sc-klein .sc-accent { color: var(--sc-tekst); }

.sc-goed { color: var(--sc-den-tekst); }
.sc-mis  { color: var(--sc-fout); }

/* Een link in lopende tekst is onderstreept. Een knop, een tab, een
   menu-item of een kaart die toevallig een <a> is, niet: die zien er al
   uit als iets waar je op drukt, en een streep eronder maakt ze rommelig. */
.sc a:not([class]),
.sc p a, .sc li a:not([class]), .sc dd a, .sc td a {
  color: var(--sc-touw);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sc a:not([class]):hover,
.sc p a:hover { color: var(--sc-tekst); text-decoration-thickness: 2px; }

.sc a.btn, .sc a.btn-flat, .sc a.btn-large, .sc a.btn-small,
.sc a.btn-floating, .sc nav a, .sc .tabs a, .sc ul.menu a,
.sc .card a, .sc .dropdown-content a, .sc .collection-item,
.sc .sc-knop, .sc .sc-knop-stil, .sc .brand-logo {
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   3. FOCUS
   Eén ring, overal hetzelfde, altijd zichtbaar. Ook op een roze knop,
   want touw valt daar niet in weg.
   --------------------------------------------------------------------- */

.sc :focus-visible {
  outline: var(--sc-focus-dikte) solid var(--sc-focus);
  outline-offset: var(--sc-focus-afstand);
  border-radius: var(--sc-r-1);
}

/* Het thema zet outline:none op van alles. Tegen het thema. */
.sc a:focus-visible,
.sc button:focus-visible,
.sc input:focus-visible,
.sc select:focus-visible,
.sc textarea:focus-visible,
.sc [tabindex]:focus-visible {
  outline: var(--sc-focus-dikte) solid var(--sc-focus) !important;
  outline-offset: var(--sc-focus-afstand) !important;
}

/* Overslaan naar de inhoud, voor wie met het toetsenbord werkt. */
.sc-overslaan {
  position: absolute;
  left: var(--sc-r-4);
  top: var(--sc-r-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--sc-kampdoek);
  color: var(--sc-tekst);
  border: 1px solid var(--sc-rand);
  border-radius: var(--sc-rond-sm);
  padding: var(--sc-r-3) var(--sc-r-4);
  text-decoration: none;
  font-weight: 600;
}
.sc-overslaan:focus { transform: none; }

/* Alleen voor schermlezers. */
.sc-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   4. INDELING
   --------------------------------------------------------------------- */

.sc-wrap {
  width: 100%;
  max-width: var(--sc-breed);
  margin-inline: auto;
  padding-inline: var(--sc-goot);
}
.sc-wrap--smal { max-width: var(--sc-breed-smal); }

.sc-vak {
  padding-block: var(--sc-r-8);
}
@media (max-width: 700px) {
  .sc-vak { padding-block: var(--sc-r-7); }
}

.sc-paneel {
  background: var(--sc-kampdoek);
  border: 1px solid var(--sc-rand-stil);
  border-radius: var(--sc-rond-md);
  padding: var(--sc-r-5);
}
@media (max-width: 700px) {
  .sc-paneel { padding: var(--sc-r-5); border-radius: var(--sc-rond-md); }
}

/* Het motief: de geweven band. Boven en onder de pagina. */
.sc-band {
  height: 14px;
  background: var(--sc-band);
  background-size: var(--sc-band-maat);
  animation: sc-band-schuif 7s linear infinite;
}
.sc-band--dun { height: 8px; animation-duration: 11s; }
@keyframes sc-band-schuif { to { background-position: 96px 0; } }
@media (prefers-reduced-motion: reduce) {
  .sc-band { animation: none; }
}

/* ---------------------------------------------------------------------
   5. KNOPPEN
   Alles minstens 44px hoog. De tekst zegt wat er gebeurt.
   --------------------------------------------------------------------- */

.sc-knop,
.sc-knop-stil,
.sc-knop-tekst {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-r-2);
  min-height: var(--sc-raak);
  padding: 8px var(--sc-r-5);
  border-radius: var(--sc-rond-pil);
  border: 1px solid transparent;
  font-family: var(--sc-font-tekst);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--sc-duur-snel) ease,
              border-color var(--sc-duur-snel) ease,
              transform var(--sc-duur-snel) var(--sc-soepel);
  /* Het thema zet hoofdletters en letterspatiëring op .btn. Tegen het thema. */
  text-transform: none;
  letter-spacing: 0;
}

.sc-knop {
  background: var(--sc-roze-vlak);
  color: #FFFFFF;              /* 4.70 op --sc-roze-vlak, berekend */
}
.sc-knop:hover  { background: var(--sc-roze-vlak-op); color: #FFFFFF; transform: translateY(-1px); }
.sc-knop:active { transform: translateY(0); }

.sc-knop-stil {
  background: transparent;
  color: var(--sc-tekst);
  border-color: var(--sc-rand);
}
.sc-knop-stil:hover { border-color: var(--sc-rand-sterk); background: rgba(255,255,255,.04); color: var(--sc-tekst); }

.sc-knop-tekst {
  background: transparent;
  color: var(--sc-touw);
  padding-inline: var(--sc-r-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-knop-tekst:hover { color: var(--sc-tekst); }

.sc-knop[disabled],
.sc-knop-stil[disabled],
.sc-knop:disabled,
.sc-knop-stil:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* Een knop die alleen een icoon bevat, heeft altijd een aria-label. */
.sc-knop-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sc-raak);
  height: var(--sc-raak);
  border-radius: var(--sc-rond-pil);
  border: 1px solid var(--sc-rand);
  background: transparent;
  color: var(--sc-tekst);
  cursor: pointer;
}
.sc-knop-icoon:hover { border-color: var(--sc-rand-sterk); background: rgba(255,255,255,.05); }

/* Op smalle schermen staan knoppen onder elkaar en vullen ze de breedte. */
.sc-knoppen { display: flex; flex-wrap: wrap; gap: var(--sc-r-3); align-items: center; }
@media (max-width: 560px) {
  .sc-knoppen { flex-direction: column; align-items: stretch; }
  .sc-knoppen .sc-knop,
  .sc-knoppen .sc-knop-stil { width: 100%; }
}

/* ---------------------------------------------------------------------
   6. FORMULIEREN
   Elk veld heeft een echte <label>. Randen halen 3:1. Foutmeldingen
   staan in tekst, niet alleen in kleur.
   --------------------------------------------------------------------- */

.sc-veld { margin-bottom: var(--sc-r-5); }

.sc-veld > label,
.sc-label {
  display: block;
  font-size: var(--sc-t-sm);
  font-weight: 600;
  color: var(--sc-tekst);
  margin-bottom: var(--sc-r-2);
}

.sc-hulp {
  display: block;
  font-size: var(--sc-t-sm);
  color: var(--sc-tekst-zacht);
  margin-top: var(--sc-r-2);
}

.sc input[type="text"],
.sc input[type="email"],
.sc input[type="password"],
.sc input[type="tel"],
.sc input[type="number"],
.sc input[type="date"],
.sc input[type="search"],
.sc select,
.sc textarea {
  /* Tegen het thema: materialize maakt hier een onderstreept veld van
     zonder achtergrond, met een zwevend label. Dat is slecht leesbaar. */
  display: block;
  width: 100%;
  min-height: var(--sc-raak);
  padding: var(--sc-r-3) var(--sc-r-4);
  background: var(--sc-kampdoek) !important;
  color: var(--sc-tekst) !important;
  border: 1px solid var(--sc-rand) !important;
  border-radius: var(--sc-rond-sm) !important;
  box-shadow: none !important;
  font-family: var(--sc-font-tekst);
  font-size: var(--sc-t-base);
  line-height: 1.4;
  transition: border-color var(--sc-duur-snel) ease, background var(--sc-duur-snel) ease;
}
.sc textarea { min-height: calc(var(--sc-raak) * 2.4); resize: vertical; }

.sc input:hover,
.sc select:hover,
.sc textarea:hover { border-color: var(--sc-rand-sterk) !important; }

.sc input:focus,
.sc select:focus,
.sc textarea:focus {
  border-color: var(--sc-touw) !important;
  background: var(--sc-kampdoek-hoog) !important;
}

.sc ::placeholder { color: var(--sc-tekst-zacht); opacity: .75; }

/* Fout: rand, icoontekst en een melding. Nooit alleen kleur. */
.sc .sc-veld--fout input,
.sc .sc-veld--fout select,
.sc .sc-veld--fout textarea { border-color: var(--sc-fout) !important; }

.sc-veldfout {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-r-2);
  margin-top: var(--sc-r-2);
  font-size: var(--sc-t-sm);
  color: var(--sc-fout);
}
.sc-veldfout::before { content: "!"; font-weight: 800; line-height: 1.5; }

/* Keuzerondjes en vinkjes als aanraakbare kaarten. */
.sc-keuzes { display: grid; gap: var(--sc-r-3); }
.sc-keuzes--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.sc-keuze {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-r-3);
  min-height: var(--sc-raak);
  padding: var(--sc-r-3) var(--sc-r-4);
  background: var(--sc-kampdoek);
  border: 1px solid var(--sc-rand);
  border-radius: var(--sc-rond-sm);
  cursor: pointer;
  transition: border-color var(--sc-duur-snel) ease, background var(--sc-duur-snel) ease;
}
.sc-keuze:hover { border-color: var(--sc-rand-sterk); }
.sc-keuze input { margin-top: 3px; accent-color: var(--sc-roze-vlak); width: 20px; height: 20px; flex: 0 0 20px; }
.sc-keuze:has(input:checked) { border-color: var(--sc-roze); background: var(--sc-roze-stil); }
.sc-keuze:has(input:focus-visible) {
  outline: var(--sc-focus-dikte) solid var(--sc-focus);
  outline-offset: var(--sc-focus-afstand);
}
.sc-keuze b { display: block; font-weight: 600; }
.sc-keuze small { display: block; color: var(--sc-tekst-zacht); font-size: var(--sc-t-sm); }

/* ---------------------------------------------------------------------
   7. MELDINGEN
   Worden door een schermlezer voorgelezen via aria-live in de markup.
   --------------------------------------------------------------------- */

.sc-melding {
  display: flex;
  gap: var(--sc-r-3);
  padding: var(--sc-r-4);
  border-radius: var(--sc-rond-sm);
  border: 1px solid var(--sc-rand);
  font-size: var(--sc-t-base);
  margin-bottom: var(--sc-r-4);
}
.sc-melding--fout { background: var(--sc-fout-stil); border-color: var(--sc-fout); color: var(--sc-fout); }
.sc-melding--goed { background: var(--sc-den-stil); border-color: var(--sc-den); color: var(--sc-den-tekst); }
.sc-melding p { color: inherit; }

/* ---------------------------------------------------------------------
   8. LEGE EN FOUTE TOESTANDEN
   Hoe een app aanvoelt op een slechte dag.
   --------------------------------------------------------------------- */

.sc-leeg {
  text-align: center;
  padding: var(--sc-r-8) var(--sc-r-5);
  max-width: 46ch;
  margin-inline: auto;
}
.sc-leeg h3 { margin-bottom: var(--sc-r-3); }
.sc-leeg p { color: var(--sc-tekst-zacht); margin-bottom: var(--sc-r-5); }

/* ---------------------------------------------------------------------
   9. TEKST OP EEN FOTO
   Nooit rechtstreeks. Er ligt altijd een verloop tussen.
   --------------------------------------------------------------------- */

.sc-opfoto { position: relative; overflow: hidden; }
.sc-opfoto::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom,
              rgba(18, 26, 23, 0) 0%,
              rgba(18, 26, 23, .72) 55%,
              rgba(18, 26, 23, .94) 100%);
  pointer-events: none;
}
.sc-opfoto > .sc-opfoto-tekst { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
   10. TABELLEN EN BREDE INHOUD
   Alleen deze mogen zijwaarts schuiven. De pagina zelf nooit.
   --------------------------------------------------------------------- */

.sc-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------
   11. ZOOM
   Op 200% zoom mag er niets zijwaarts weglopen.
   --------------------------------------------------------------------- */

.sc, .sc * { max-width: 100%; }
.sc img, .sc video { height: auto; }