/* prachtigevoeten.nl: een wit blad op een foto van zand.

   Naar de oude WordPress-site (thema Tiny Forge, tot november 2026),
   uitgelezen op 2 november 2026: een blad van 960 px tekstbreedte met 40 px
   marge en een lichte schaduw, op de zandfoto die linksboven op ware grootte
   herhaalt; Open Sans; het menu in hoofdletters van 12 px tussen twee lijnen;
   een kopbeeld met afgeronde hoeken; tekst van 16 px op 28,8 px regelafstand,
   beelden die links of rechts naast de tekst zweven. Kleuren komen uit
   tokens.css (gegenereerd uit tools/tokens.py). */

/* Open Sans van de eigen server, niet van Google (zie fonts/OFL.txt). */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/open-sans-latin-700-italic.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--color-page) url("/assets/beeld/zand.jpg") left top repeat;
  color: var(--color-text);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}
img { max-width: 100%; height: auto; }
a { color: var(--color-link); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

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

/* Het blad. */
.blad {
  max-width: 65rem;
  margin: 1.5rem auto 3rem;
  padding: .75rem 2.5rem 0;
  background: var(--color-sheet);
  box-shadow: 0 2px 6px rgb(100 100 100 / .3);
}

/* Kop: het logo links, de naam ernaast. */
.kop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.5rem; padding-top: 1.5rem; }
.kop-logo { display: block; flex: 0 1 565px; }
.kop-logo img { display: block; width: 100%; }
.kop-naam { margin: 0; font-size: 1.625rem; line-height: 3rem; }
.kop-naam a { color: var(--color-text); text-decoration: none; }

/* Menu tussen twee lijnen. Op een smal scherm loopt het door over meer
   regels; zo blijft elk onderdeel zichtbaar zonder script. */
.menu { margin-top: 1.5rem; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.menu ul { display: flex; flex-wrap: wrap; gap: 0 2.75rem; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block;
  color: var(--color-menu);
  font-size: .75rem;
  line-height: 2.77;
  text-decoration: none;
  text-transform: uppercase;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--color-text); }
.menu a[aria-current="page"] { font-weight: 700; }

/* Kopbeeld: de collage, of een eigen beeld per pagina. */
.kopbeeld {
  display: block;
  margin: 1.5rem auto 0;
  border-radius: 3px;
  box-shadow: 0 0 4px rgb(0 0 0 / .2);
}

/* De pagina. */
.artikel { padding: 1.5rem 0 3rem; }
.artikel h1 { margin: 0 0 1.5rem; color: var(--color-heading); font-size: 1.6875rem; font-weight: 400; line-height: 1.4; }
.tekst p { margin: 0 0 1.5rem; }
.tekst h2 { margin: 0 0 1.5rem; font-size: 1.25rem; line-height: 1.5; }
.tekst ul { margin: 0 0 1.5rem; padding-left: 1.5rem; }
/* Na de zwevende beelden van een alinea begint de volgende kop eronder. */
.tekst h2, .tekst::after { clear: both; }
.tekst::after { content: ""; display: table; }

/* Beelden naast de tekst, zoals WordPress ze plaatste. */
.tekst img.alignleft, .tekst img.alignright {
  margin-bottom: 1rem;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgb(0 0 0 / .2);
}
.tekst img.alignleft { float: left; margin-right: 1.5rem; }
.tekst img.alignright { float: right; margin-left: 1.5rem; }

/* De prijslijst. */
.prijzen { margin: 0 0 1.5rem; border-collapse: collapse; }
.prijzen caption { text-align: left; font-weight: 700; white-space: nowrap; }
.prijzen th { text-align: left; }
.prijzen td, .prijzen th { padding: 0 2rem 0 0; vertical-align: top; }
.prijzen .bedrag { padding-right: 0; text-align: right; white-space: nowrap; }

/* Voet: de badge van internet.nl, alleen op productie. Geen vermelding van
   de maker, op verzoek (3 november 2026). */
.voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: .3rem;
  padding: .75rem 0 1.5rem;
  border-top: 1px solid var(--color-rule-soft);
  font-size: .75rem;
  line-height: 2;
}
.voet p { margin: 0; }
.voet-leden { display: flex; margin: 0; padding: 0; list-style: none; }
.voet-leden img { width: 204px; height: auto; }

/* Smal scherm: minder rand; de grote foto's (rechts, 300 px) staan dan
   onder elkaar, de kleine miniaturen (links, 150 px) blijven naast de tekst. */
@media (max-width: 40rem) {
  .blad { margin: 0; padding: .75rem 1rem 0; box-shadow: none; }
  .kop-naam { font-size: 1.25rem; line-height: 2.5rem; }
  .menu ul { gap: 0 1.25rem; }
  .tekst img.alignright { float: none; display: block; margin: 0 0 1rem; }
  .tekst img.alignleft { width: 6rem; margin-right: 1rem; }
  .prijzen td, .prijzen th { padding-right: 1rem; }
}