/*
 * deust.be — de publieke, tenant-loze site (todo #238).
 *
 * EEN KOPIE, GEEN IMPORT. De tokens hieronder zijn woordelijk overgenomen uit
 * `frontend/kiosk/src/designtokens/tokens.css` (designsysteem "Lumina Event Flow", #44), zodat
 * de site en de kiosk als één product ogen. Ze zijn bewust *gekopieerd*: deze site mag nooit van
 * de frontend-build afhangen — geen bundler, geen `npm ci`, geen build. Dat de kopie niet
 * wegdrijft van de bron is niet aan de goede wil overgelaten: `backend/tests/test_site.py`
 * vergelijkt elk token dat hier een naamgenoot heeft in de bron, en wordt rood zodra ze
 * verschillen. Wijzig dus altijd de bron eerst.
 *
 * Geen font-CDN, geen externe stylesheet, geen tracking: alles wat deze pagina laadt, staat in
 * deze repo (#238 punt 4).
 */

:root {
  /* --- Uit tokens.css: lettertypefamilies ------------------------------------------------ */
  --font-family-montserrat: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-inter: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- Uit tokens.css: kleuren ----------------------------------------------------------- */
  --color-surface: #131315;
  --color-surface-container-lowest: #0e0e10;
  --color-surface-container-low: #1c1b1d;
  --color-surface-container: #201f21;
  --color-surface-container-high: #2a2a2c;
  --color-on-surface: #e5e1e4;
  --color-on-surface-variant: #c4c9ac;
  --color-outline: #8e9379;
  --color-outline-variant: #444933;
  --color-primary-container: #c3f400;
  --color-on-primary: #283500;
  --color-secondary-container: #6305ef;
  --color-on-secondary-container: #d2c0ff;
  --color-tertiary-container: #7df4ff;
  --color-on-tertiary: #00363a;
  --color-background: #131315;
  --color-on-background: #e5e1e4;

  /* --- Uit tokens.css: radii, spacing, effecten, layout ---------------------------------- */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --space-xs: 4px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-gutter: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-margin-mobile: 20px;
  --effect-glow-opacity: 0.4;
  --effect-glow-spread: 20px;
  --layout-container-max: 1200px;
  --layout-touch-target-min: 44px;
}

/* --------------------------------------------------------------------------------------- */
/* Basis                                                                                      */
/* --------------------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-family-inter);
  font-size: 16px;
  line-height: 24px;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-family-montserrat);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-tertiary-container);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-tertiary-container);
  outline-offset: 3px;
}

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

/* De vlucht-naar-inhoud-link: onzichtbaar tot hij focus krijgt. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--space-sm) var(--space-gutter);
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  text-decoration: none;
}

.overslaan:focus {
  left: 0;
}

.omhulsel {
  width: 100%;
  max-width: var(--layout-container-max);
  margin: 0 auto;
  padding-inline: var(--space-margin-mobile);
}

/* --------------------------------------------------------------------------------------- */
/* Kop                                                                                        */
/* --------------------------------------------------------------------------------------- */

/* Bewust NIET sticky op een gsm: daar valt de navigatie over twee rijen en zou een vaste kop
   ruim een tiende van het scherm opeten voor een pagina van vier secties. Vanaf 640px past ze op
   één rij en mag ze meelopen. Het alternatief — items verbergen of in een scrollbalk duwen —
   verstopt inhoud, en dat weegt hier niet op tegen een korte scroll terug naar boven. */
.kop {
  z-index: 5;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-surface-container-high);
}

.kop__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-gutter);
  padding-block: var(--space-sm);
}

.woordmerk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-family-montserrat);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  text-decoration: none;
}

.woordmerk img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
}

.woordmerk .extensie {
  color: var(--color-tertiary-container);
}

.kop nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-base);
}

.kop nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-touch-target-min);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-full);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-weight: 600;
}

.kop nav a:hover {
  color: var(--color-on-surface);
  background: var(--color-surface-container);
}

/* --------------------------------------------------------------------------------------- */
/* Knoppen                                                                                    */
/* --------------------------------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-touch-target-min);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-family: var(--font-family-montserrat);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid transparent;
}

.knop--primair {
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  box-shadow: 0 0 var(--effect-glow-spread)
    color-mix(in srgb, var(--color-primary-container) 40%, transparent);
}

.knop--primair:hover {
  background: color-mix(in srgb, var(--color-primary-container) 88%, #ffffff);
}

.knop--rand {
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}

.knop--rand:hover {
  border-color: var(--color-outline);
  background: var(--color-surface-container);
}

/* --------------------------------------------------------------------------------------- */
/* Secties                                                                                    */
/* --------------------------------------------------------------------------------------- */

section {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-surface-container-high);
}

section h2 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.sectie__lead {
  color: var(--color-on-surface-variant);
  font-size: 18px;
  line-height: 28px;
  max-width: 62ch;
  margin-bottom: var(--space-lg);
}

.opschrift {
  font-family: var(--font-family-jetbrains-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--color-outline);
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------------------- */
/* Hero                                                                                       */
/* --------------------------------------------------------------------------------------- */

.hero {
  border-top: none;
  padding-block: var(--space-xl) var(--space-xl);
  background:
    radial-gradient(
      60% 70% at 15% 0%,
      color-mix(in srgb, var(--color-primary-container) 12%, transparent),
      transparent
    ),
    radial-gradient(
      50% 60% at 95% 20%,
      color-mix(in srgb, var(--color-secondary-container) 22%, transparent),
      transparent
    );
}

.hero h1 {
  font-size: 40px;
  line-height: 46px;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.hero h1 .glans {
  color: var(--color-primary-container);
}

.hero__lead {
  margin-top: var(--space-md);
  max-width: 58ch;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-on-surface-variant);
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero__voet {
  margin-top: var(--space-md);
  font-family: var(--font-family-jetbrains-mono);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--color-outline);
}

/* --------------------------------------------------------------------------------------- */
/* Stappen                                                                                    */
/* --------------------------------------------------------------------------------------- */

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-gutter);
}

.stap {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.stap__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  font-family: var(--font-family-jetbrains-mono);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.stap h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: var(--space-base);
}

.stap p {
  color: var(--color-on-surface-variant);
}

/* Het afhaalteken: kleur + symbool, zoals de klant het op zijn scherm krijgt. */
.tekens {
  display: flex;
  gap: var(--space-base);
  margin-top: var(--space-sm);
}

.teken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: 20px;
  line-height: 1;
  color: var(--color-surface);
}

.teken--lime {
  background: var(--color-primary-container);
}

.teken--cyaan {
  background: var(--color-tertiary-container);
}

.teken--paars {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

/* --------------------------------------------------------------------------------------- */
/* Kaartenraster (voor wie / wat het oplevert)                                                */
/* --------------------------------------------------------------------------------------- */

.raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-gutter);
}

.kaart {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-surface-container-high);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.kaart h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: var(--space-base);
}

.kaart p {
  color: var(--color-on-surface-variant);
}

.kaart--accent {
  border-color: var(--color-outline-variant);
}

.adressen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-base);
  margin-top: var(--space-sm);
}

.adres {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-surface-container-high);
  font-family: var(--font-family-jetbrains-mono);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--color-on-surface);
}

/* --------------------------------------------------------------------------------------- */
/* Contact                                                                                    */
/* --------------------------------------------------------------------------------------- */

.contact__blok {
  max-width: 640px;
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
}

.contact__blok h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: var(--space-base);
}

.contact__blok p {
  color: var(--color-on-surface-variant);
}

.contact__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------------------- */
/* Voet                                                                                       */
/* --------------------------------------------------------------------------------------- */

.voet {
  border-top: 1px solid var(--color-surface-container-high);
  background: var(--color-surface-container-lowest);
  padding-block: var(--space-lg);
}

.voet__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.voet__merken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.voet__merk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-base);
  min-height: var(--layout-touch-target-min);
  padding: var(--space-xs) var(--space-base);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-on-surface-variant);
  font-family: var(--font-family-montserrat);
  font-weight: 700;
  font-size: 14px;
}

.voet__merk:hover {
  color: var(--color-on-surface);
  background: var(--color-surface-container);
}

.voet__merk img {
  height: 24px;
  width: auto;
}

.voet__merk--deust img {
  height: 24px;
  width: 24px;
  border-radius: var(--radius-sm);
}

.voet__fijndruk {
  margin-left: auto;
  font-family: var(--font-family-jetbrains-mono);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--color-outline);
}

/* --------------------------------------------------------------------------------------- */
/* Breder scherm — mobile-first, dus dit is de uitbreiding en niet de basis                    */
/* --------------------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .kop {
    position: sticky;
    top: 0;
  }

  .stappen,
  .raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero h1 {
    font-size: 56px;
    line-height: 62px;
  }

  section h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

@media (min-width: 1024px) {
  .stappen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .omhulsel {
    padding-inline: var(--space-lg);
  }

  .hero {
    padding-block: calc(var(--space-xl) * 1.5) var(--space-xl);
  }
}

/* Een bezoeker met een lichte systeeminstelling krijgt hetzelfde donkere ontwerp: de kiosk is
   donker (#44) en de etalage hoort erop te lijken. Bewust geen tweede thema — dat zou een
   tweede palet zijn om te onderhouden voor een pagina van één scherm. */