/* triibus.nl: de witte kaart van de oude site.

   De oude site (WordPress met het thema Pro, tot november 2026) was één
   witte kaart met een lichte schaduw op lichtgrijs: het logo, een slogan in
   cursief, drie thema's, een grote alinea en een grijs contactblok. De maten
   hieronder zijn op 1 november 2026 op 1280 px van die site gemeten
   (docs/01-bron.md) en staan in rem, zodat ze meeschalen met de
   lettergrootte van de bezoeker.

   Kleuren komen uit tokens.css (gegenereerd uit tools/tokens.py). Hier staan
   rollen, geen kleuren. */

@font-face { font-family: Lato; src: url(/assets/fonts/Lato-400.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Lato; src: url(/assets/fonts/Lato-700.woff2) format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Lato; src: url(/assets/fonts/Lato-400-italic.woff2) format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Lato; src: url(/assets/fonts/Lato-700-italic.woff2) format("woff2");
             font-weight: 700; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  padding: 2.5rem 1rem;
  background: var(--color-page);
  color: var(--color-text);
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1375rem;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--color-card); }
.skip:focus { left: 1rem; z-index: 10; }

/* De kaart: 1126 px breed op een scherm van 1280, 60 px binnenruimte,
   hoekjes van 4 px en de schaduw van de oude site. */
.kaart {
  max-width: 70.375rem;
  margin: 0 auto;
  padding: 3.75rem;
  background: var(--color-card);
  border-radius: 4px;
  box-shadow: 0 2.1px 4.9px rgb(0 0 0 / .133);
}

/* Startpagina. Logo, slogan en tekst springen 60 px verder in dan de kaart,
   zoals op de oude site. */
.start { padding: 2.8rem 3.75rem 0; }
.start-logo img { width: 16rem; }
.start-slogan {
  margin: 2.75rem 0 0;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.45rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
}
.start-thema {
  margin: 0;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.1875rem);
  line-height: 1.4;
}
.start-tekst { margin: 3.5rem 0 0; }
.start-tekst p {
  margin: 0;
  font-size: clamp(1.25rem, .9rem + 1.2vw, 1.75rem);
  line-height: 1.5;
}

/* Het grijze contactblok over de volle breedte van de kaart, met links de
   gegevens en rechts de persoon. */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3.75rem;
  margin-top: 5.5rem;
  padding: 4rem 3.75rem;
  background: var(--color-panel);
}
.contact h2 { margin: 0 0 1.25rem; font-size: 1.575rem; line-height: 1.4; }
.contact p { margin: 0; font-size: 1.1375rem; line-height: 1.6; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }

.persoon { display: flex; align-items: flex-start; gap: 1rem; }
.persoon img { width: 8.5625rem; }
.persoon .persoon-naam { margin: 0; font-size: 1.225rem; line-height: 1.4; }
.persoon .persoon-functie { margin: .25rem 0 0; font-size: 1.225rem; line-height: 1.2; }
.persoon .persoon-link { margin: .9rem 0 0; font-size: 1.05rem; line-height: 1.2; }

/* Gewone pagina's (privacyverklaring, foutpagina). */
.kaart > h1 { margin: 0 0 1.5rem; font-size: 2.1875rem; line-height: 1.3; }
.prose { max-width: 44rem; }
.prose h2 { margin: 2rem 0 .5rem; font-size: 1.4rem; }
.prose p { margin: 0 0 1rem; }
.terug { margin: 0 0 2rem; font-size: 1rem; }

/* Voet onder de kaart: de privacyverklaring en wie de site maakte. */
.voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 70.375rem;
  margin: 1.5rem auto 0;
  padding: 0 .25rem;
  color: var(--color-muted);
  font-size: .9375rem;
}
.voet p { margin: 0; }
.voet a { color: inherit; }
.voet-maker a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.voet-maker img { width: 7.5rem; height: auto; }

@media (max-width: 760px) {
  body { padding: 0; }
  .kaart { padding: 1.5rem; border-radius: 0; box-shadow: none; }
  .start { padding: 1rem 0 0; }
  .start-logo img { width: 10rem; }
  .start-slogan { margin-top: 1.75rem; }
  .start-tekst { margin-top: 2rem; }
  .contact { grid-template-columns: 1fr; margin: 3rem -1.5rem 0; padding: 2.5rem 1.5rem; }
  .voet { margin: 0; padding: 1.25rem 1.5rem 2rem; background: var(--color-card); }
}

/* De badge van internet.nl onder in de voet (alleen op productie). */
.voet-leden { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; order: 1; }
/* Op één regel: privacy statement links, de badge in het midden, de maker
   rechts (Mike, 1 november 2026). Op een smal scherm loopt het door. */
.voet-maker { order: 2; }
.voet-leden img { width: 204px; height: auto; }