/* tempor.org – opmaak volgens huisstijl/BRAND.md. Kleuren, typografie en maten komen uit tokens.css
   (/assets/tokens.css, uit huisstijl/tokens); hier staan alleen de pagina-onderdelen. */

/* DM Sans (SIL Open Font License), zelf gehost: geen verzoeken aan Google. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }

html { background: var(--tp-background); }

/* Ochtendlicht: bovenin een lucht die overloopt in de lichte basis (in donkere modus nachtblauw). */
body {
  margin: 0;
  background: var(--tp-sky-day) top / 100% 100vh no-repeat, var(--tp-background);
  color: var(--tp-text-primary);
  font: var(--tp-text-body);
  /* Vaste optische maat, gelijk aan de statische lettertypen in de app en het logo. */
  font-optical-sizing: none;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--tp-space-16); }

a { color: var(--tp-primary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { border-radius: 4px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--tp-space-16); top: var(--tp-space-8); background: var(--tp-surface); padding: var(--tp-space-8) var(--tp-space-12); z-index: 1; }

/* Kop, op de lucht */
.site-header { background: transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-12); flex-wrap: wrap; padding-top: var(--tp-space-12); padding-bottom: var(--tp-space-12); }
.brand { display: inline-flex; padding: var(--tp-space-4) 0; }
.brand img { display: block; width: auto; height: 36px; }
.site-nav { display: flex; gap: var(--tp-space-4) var(--tp-space-16); flex-wrap: wrap; }
.site-nav a { color: var(--tp-text-on-sky-secondary); text-decoration: none; font: var(--tp-text-callout); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--tp-text-on-sky); }
.site-nav a[aria-current] { font-weight: 600; }

/* Inhoud */
main { padding-top: var(--tp-space-24); padding-bottom: var(--tp-space-48); }
h1 { font: var(--tp-text-title1); letter-spacing: var(--tp-tracking-title1); margin: .4em 0 .4em; }
h2 { font: var(--tp-text-title3); margin: 2em 0 .5em; }
h3 { font: var(--tp-text-callout); font-weight: 600; margin: 1.5em 0 .3em; }
p, ul, ol, table { margin: 0 0 1em; }
li { margin-bottom: .35em; }
.updated { color: var(--tp-text-tertiary); font: var(--tp-text-subhead); }
.note { background: var(--tp-background-subtle); border: 1px solid var(--tp-border); border-left: 4px solid var(--tp-primary); border-radius: var(--tp-radius-md); padding: var(--tp-space-12) var(--tp-space-16); }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font: var(--tp-text-subhead); }
th, td { text-align: left; vertical-align: top; padding: var(--tp-space-8) var(--tp-space-12); border-bottom: 1px solid var(--tp-border); }
th { font-weight: 600; }

/* Startpagina: op de lucht, zoals bovenaan de app; amber alleen in de badge. */
.hero { padding: var(--tp-space-24) var(--tp-space-8) var(--tp-space-16); text-align: center; color: var(--tp-text-on-sky); }
.hero-mark { display: block; margin: 0 auto; width: 132px; height: auto; filter: drop-shadow(0 6px 10px rgba(30,100,190,0.22)); }
.hero h1 { font: var(--tp-text-display); letter-spacing: var(--tp-tracking-display); margin: var(--tp-space-24) 0 var(--tp-space-12); }
.hero p { margin: 0 auto var(--tp-space-16); max-width: 34em; color: var(--tp-text-on-sky-secondary); }
.hero .badge { display: inline-block; margin-top: var(--tp-space-8); padding: var(--tp-space-8) var(--tp-space-20); border-radius: var(--tp-radius-pill); background: var(--tp-accent); color: var(--tp-on-accent); font: var(--tp-text-callout); }
@media (max-width: 480px) {
  .hero h1 { font: var(--tp-text-title1); letter-spacing: var(--tp-tracking-title1); }
}

.features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tp-space-16); margin-top: var(--tp-space-32); }
.features li { margin: 0; padding: var(--tp-space-20); }
/* Eigen weericonen (huisstijl/weer-iconen), alleen als versiering. */
.features li::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: var(--tp-space-8); background: center / contain no-repeat; }
.features li:nth-child(1)::before { background-image: url("/assets/weer/partly_cloudy_day.svg"); }
.features li:nth-child(2)::before { background-image: url("/assets/weer/clear_day.svg"); }
.features li:nth-child(3)::before { background-image: url("/assets/weer/rain.svg"); }
.features li:nth-child(4)::before { background-image: url("/assets/weer/wind.svg"); }
.features li:nth-child(5)::before { background-image: url("/assets/weer/few_clouds_day.svg"); }
.features li:nth-child(6)::before { background-image: url("/assets/weer/showers_day.svg"); }
.features li:nth-child(7)::before { background-image: url("/assets/weer/clear_night.svg"); }
.features li:nth-child(8)::before { background-image: url("/assets/weer/rain_light.svg"); }
@media (prefers-color-scheme: dark) {
  .features li:nth-child(1)::before { background-image: url("/assets/weer/donker/partly_cloudy_day.svg"); }
  .features li:nth-child(2)::before { background-image: url("/assets/weer/donker/clear_day.svg"); }
  .features li:nth-child(3)::before { background-image: url("/assets/weer/donker/rain.svg"); }
  .features li:nth-child(4)::before { background-image: url("/assets/weer/donker/wind.svg"); }
  .features li:nth-child(5)::before { background-image: url("/assets/weer/donker/few_clouds_day.svg"); }
  .features li:nth-child(6)::before { background-image: url("/assets/weer/donker/showers_day.svg"); }
  .features li:nth-child(7)::before { background-image: url("/assets/weer/donker/clear_night.svg"); }
  .features li:nth-child(8)::before { background-image: url("/assets/weer/donker/rain_light.svg"); }
}
.features h2 { font: var(--tp-text-callout); font-weight: 600; margin: 0 0 var(--tp-space-4); }
.features p { margin: 0; color: var(--tp-text-secondary); font: var(--tp-text-subhead); }

.price { padding: var(--tp-space-24); margin-top: var(--tp-space-32); }
.price h2 { margin-top: 0; }
.price p:last-child { margin-bottom: 0; }

/* Witte kaarten met hoek 22 en een zachte blauwe schaduw; in donkere modus een rand (BRAND.md §7). */
.features li, .price { background: var(--tp-surface); border: 1px solid transparent; border-radius: 22px; box-shadow: var(--tp-shadow-card); }
@media (prefers-color-scheme: dark) {
  .features li, .price { border-color: var(--tp-border); }
}

/* Support */
.faq h2 { font: var(--tp-text-callout); font-weight: 600; }

/* Voettekst */
.site-footer { border-top: 1px solid var(--tp-border); background: var(--tp-background-subtle); color: var(--tp-text-secondary); font: var(--tp-text-subhead); padding: var(--tp-space-24) 0 var(--tp-space-32); }
.site-footer p { margin: .3em 0; }
.languages { list-style: none; padding: 0; margin: 0 0 var(--tp-space-12); display: flex; flex-wrap: wrap; gap: var(--tp-space-4) var(--tp-space-16); }
.languages li { margin: 0; }
.languages a[aria-current] { color: var(--tp-text-primary); font-weight: 600; text-decoration: none; }

.notfound { text-align: center; padding-top: var(--tp-space-64); }
.notfound img { margin: 0 auto; }