/* theme.css: huisstijl van Noach, overgenomen uit de site
   (~/Sites/noach-site/src/styles/design.css). Laden NA functions.css.

   Merkkleur #C86D49 (terracotta), beige ondergrond #F3F1ED, donkergroen
   #4F584B als tweede kleur en voor het logovlak, tekst #3A3836. Lettertype
   Inter Tight, zoals de lopende tekst op de site. De koppen van de site
   (Cubano, hoofdletters) horen bij een website en niet in een beheerscherm. */

:root {
  --brand: #C86D49;
  --hover: #f8f1ec;
  --active: #f4e5dc;

  --bg: #F3F1ED;
  --ink: #3A3836;
  --kop-bg: #ECE8E0;
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Het logo is beige; op terracotta valt het weg, op het groen van de site niet. */
  --merk-bg: #4F584B;

  /* Kaart: lege provincie in het zand van de site, punten in het groen. */
  --kaart-leeg: #E2DDD3;
  --kaart-hover: #CFC9BE;
  --kaart-punt: #3F473C;

  /* Grafieksegmenten naast de merkkleur: groen van de site en een duidelijk blauw. */
  --grafiek-2: #5E7A56;
  --grafiek-3: #2F6FB0;
}

body.dark-mode {
  --brand: #DF815C;
  --merk-bg: #3F473C;
  --kaart-leeg: #2a2a2d;
  --kaart-hover: #36363a;
  --kaart-punt: #f2f2f3;
  --grafiek-2: #8FB386;
  --grafiek-3: #6FA8DC;
}

/* Provincies gekleurd naar bezoekers: vijf stappen van de merkkleur. De stap
   wordt in statistieken.html bepaald; hier alleen de kleur. */
.kaart_gebied--n1 { fill: color-mix(in srgb, var(--brand) 18%, var(--kaart-leeg)); }
.kaart_gebied--n2 { fill: color-mix(in srgb, var(--brand) 36%, var(--kaart-leeg)); }
.kaart_gebied--n3 { fill: color-mix(in srgb, var(--brand) 55%, var(--kaart-leeg)); }
.kaart_gebied--n4 { fill: color-mix(in srgb, var(--brand) 75%, var(--kaart-leeg)); }
.kaart_gebied--n5 { fill: var(--brand); }

/* De bedrijfskeuze bovenin de zijbalk (config/noach.js). Een gewoon nav-item
   met een pijltje rechts, zodat het als keuze leest en niet als pagina. */
.nav-item--bedrijf { margin-bottom: 10px; }
.nav-item--bedrijf > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.nav-item_pijl { font-size: 18px !important; color: var(--muted); }

/* Voorvertoning van de registerfoto: dezelfde 4:5-uitsnede als op de site,
   met foto_positie als object-position. Bij een rouwkaart (vrij) de hele
   afbeelding. */
.foto-voorbeeld {
  position: relative;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--kop-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-voorbeeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-voorbeeld--vrij { aspect-ratio: auto; min-height: 120px; }
.foto-voorbeeld--vrij img { position: static; height: auto; object-fit: contain; }
.foto-voorbeeld_leeg { font-size: var(--tekst-klein); color: var(--muted); padding: 12px; text-align: center; }

/* Vinkjes en keuzerondjes in de merkkleur in plaats van browserblauw. */
:root { accent-color: var(--brand); }