/* Skin art nouveau: het palet van de affiches van Mucha (gedempte pastels met goud, mosterd, olijf
   en wijnrood, bruin in plaats van zwart). Zweepslaglijnen zoals het ijzerwerk van Horta, een halo
   achter het woordmerk, een rij art-nouveau-gevels in de kop, boogvormige medaillons en ranken in
   de hoeken. Bovenop basis.css; de beelden staan in `beelden/`. */

@font-face {
  font-family: "Della Respira";
  src: url("fonts/della-respira.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-cursief.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Kleurparen voor tekst halen minstens 4,5 : 1; goud en salie zijn enkel voor lijnen en vlakken. */
:root {
  --perkament: #f4ead5;
  --papier: #fbf5e6;
  --perzik: #efd3a6;
  --goud: #c9973a;
  --goud-licht: #e8cf94;
  --goud-tekst: #7a5520;
  --salie: #a9b58c;
  --olijf: #6b7040;
  --wijnrood: #8e3b2f;
  --bruin: #4a3426;

  --achtergrond: var(--perkament);
  --tekst: #3b2a1f;
  --zacht: #6e5a49;
  --vlak: var(--papier);
  --rand: var(--salie);
  --lijn: #e7dcc4;
  --veld-rand: #a08b70;
  --accent: var(--goud);
  --accent-tekst: var(--goud-tekst);
  --link: var(--bruin);
  --link-lijn: var(--goud);

  --kop-vlak: #f3dcbc;
  --kop-beeld: linear-gradient(180deg, #f9eed6 0%, #f3dcbc 70%, #eccaa6 100%);
  --kop-rand: 1px solid var(--goud);
  --kop-tekst: var(--bruin);
  --kop-merk: var(--wijnrood);
  --kop-lijn: rgba(201, 151, 58, 0.6);
  --kop-actief: var(--wijnrood);
  --kop-gedimd: var(--zacht);
  --aantal-vlak: var(--wijnrood);
  --aantal-tekst: #fbeee8;

  --knop-vlak: var(--bruin);
  --knop-vlak-hover: #5e4433;
  --knop-tekst: var(--goud-licht);
  --knop-tekst-hover: #f3dfae;
  --knop-rand: inset 0 0 0 1px var(--bruin), inset 0 0 0 3px rgba(201, 151, 58, 0.75);
  --knop-licht-rand: inset 0 0 0 1px var(--bruin);
  --knop-licht-hover: #f1e4c8;

  --medaillon-vlak: linear-gradient(180deg, #f6e3c2, var(--perzik));
  --medaillon-alarm: linear-gradient(180deg, #f2d3c4, #e8b9a6);
  --medaillon-goed: linear-gradient(180deg, #e6e9cf, #d2d8b2);
  --medaillon-tekst: #5a4030;
  --medaillon-label: var(--goud-tekst);
  --medaillon-getal: var(--bruin);
  --medaillon-alarmtekst: #7d2f25;
  --medaillon-kader: rgba(122, 85, 32, 0.45);
  --medaillon-knop-vlak: var(--bruin);
  --medaillon-knop-tekst: var(--goud-licht);

  --teken-vlak: var(--olijf);
  --teken-tekst: #f8efd9;

  --goed: var(--olijf);
  --goed-vlak: #eef0e0;
  --let-op: #a35a24;
  --let-op-vlak: #f8e6cf;
  --let-op-tekst: #6e3c14;
  --fout: var(--wijnrood);
  --fout-vlak: #f6e1d9;

  --letter-titel: "Della Respira", Georgia, serif;
  --letter-kop: var(--letter-titel);
  --letter-tekst: "EB Garamond", Garamond, Georgia, serif;
  --letter-label: var(--letter-titel);
  --letter-getal: var(--letter-titel);
  --tekstgrootte: 1.0625rem;
  --spatiering: 0.45;
  --hoofdletters: none;
  --titel-hoofdletters: none;
  --kop-gewicht: 400;

  --hoek: 1.375rem;
  --hoek-knop: 999px;
  --hoek-veld: 0.625rem;
  /* Een boog als top, zoals de kaders op de affiches van Mucha. */
  --hoek-medaillon: 50% 50% 1.375rem 1.375rem / 5.5rem 5.5rem 1.375rem 1.375rem;
  --medaillon-kader-hoek: 50% 50% 0.875rem 0.875rem / 5rem 5rem 0.875rem 0.875rem;
  --medaillon-kader-inset: 0.5625rem;
  --paneel-binnenlijn: 1px solid rgba(201, 151, 58, 0.7);
  --chip-hoek: 999px;
  /* Statussen in de matrix en de pictogrammen van de tabbalk: blaadjes. */
  --ruit-hoek: 0.875rem 0;
  --teken-hoek: 50%;
  --icoon-hoek: 0.5rem 0;
  --icoon-draai: none;
}

/* Statussen: elk paar haalt minstens 4,5 : 1. */
.status-betaald { --s-vlak: #c9973a; --s-tekst: #3b2a1f; }
.status-verrekend { --s-vlak: #6b7040; --s-tekst: #f8efd9; }
.status-te-weinig { --s-vlak: #a35a24; --s-tekst: #fff4e6; }
.status-te-veel { --s-vlak: #7a5a78; --s-tekst: #fbf0f8; }
.status-ontbreekt { --s-vlak: #8e3b2f; --s-tekst: #fbeee8; }
.status-lopende-maand { --s-vlak: #f0cfa0; --s-tekst: #4a3426; }
.status-niet-zichtbaar { --s-vlak: #e2d6c2; --s-tekst: #5a4a3c; }
.status-toekomst { --s-vlak: #ece2cf; --s-tekst: #6a5a4a; }

/* Een zacht bloemmotief op de achtergrond. In een regel en niet in `--achtergrond-beeld`: een url()
   in een variabele wordt opgelost tegenover basis.css, waar de variabele gebruikt wordt. */
body {
  background: url("beelden/motief.svg") 0 0 / 4rem 4rem, var(--achtergrond);
}

/* ---------- Kop: halo achter het woordmerk, zweepslagstengels links en rechts ---------- */

.kop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4.25rem;
  width: 20rem;
  height: 20rem;
  transform: translate(-50%, -50%);
  background: url("beelden/halo.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Een rij art-nouveau-herenhuizen onderaan de kop: het huis waar het om draait. */
.kop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7.5rem;
  background: url("beelden/gevels.svg") center bottom / auto 100% repeat-x;
  opacity: 0.55;
  pointer-events: none;
}

/* De stengels staan vóór de gevels; het menu (z-index 1, later in de kop) blijft bovenaan. */
.kop-sier {
  top: 0;
  z-index: 1;
  width: min(33rem, 36%);
  background: url("beelden/stengel.svg") left bottom / contain no-repeat;
}

.kop-sier-rechts {
  transform: scaleX(-1);
}

.navigatie .merk {
  font-size: clamp(3rem, 8vw, 4.75rem);
  letter-spacing: 0.03em;
  text-shadow: 0 2px 0 var(--goud-licht);
}

.adres {
  font-size: 1.1875rem;
  font-style: italic;
  letter-spacing: 0.03em;
}

.adres::before {
  content: "~ ";
}

.adres::after {
  content: " ~";
}

.menu a {
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
}

/* Op een groot scherm: een zachte band achter het menu (zodat de gevels de tekst niet storen), een
   gouden blaadje tussen de menu-items en een boogje onder het actieve. */
@media (min-width: 40.0625rem) {
  /* Over de volle breedte: de schaduw loopt tot aan de randen, de clip-path snijdt boven en onder af. */
  .menu {
    background: rgba(249, 238, 214, 0.7);
    box-shadow: 0 0 0 100vmax rgba(249, 238, 214, 0.7);
    clip-path: inset(0 -100vmax);
  }

  .menu a + a::before {
    content: "";
    position: absolute;
    left: -0.4375rem;
    top: 50%;
    width: 0.875rem;
    height: 0.5625rem;
    transform: translateY(-50%);
    background: url("beelden/blad-goud.svg") center / contain no-repeat;
  }

  .menu a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0.625rem;
    height: 0.5rem;
    background: url("beelden/boog.svg") center / 100% 100% no-repeat;
  }
}

@media (max-width: 40rem) {
  .kop::before {
    top: 2.75rem;
    width: 13rem;
    height: 13rem;
  }

  .kop::after {
    height: 4.5rem;
  }

  .kop-sier {
    width: 46%;
  }

  .navigatie .merk {
    font-size: 2.875rem;
  }

  .adres {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
  }

  .menu a {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
  }
}

/* Een gouden sierlijn net onder de kop. */
.inhoud::before {
  content: "";
  display: block;
  width: 7.5rem;
  height: 0.875rem;
  margin: -2rem auto 1.5rem;
  background: url("beelden/rand.svg") center / contain no-repeat;
}

/* ---------- Titels: zweepslag aan weerskanten, blaadje en golflijn bij kopjes ---------- */

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--bruin);
}

h1::before,
h1::after {
  content: "";
  flex: 0 1 12.5rem;
  min-width: 3rem;
  height: 2.5rem;
  background: url("beelden/zwiep.svg") center / contain no-repeat;
}

h1::after {
  transform: scaleX(-1);
}

@media (max-width: 30rem) {
  h1::before,
  h1::after {
    flex-basis: 4rem;
    min-width: 2rem;
  }
}

.titel p {
  font-family: var(--letter-tekst);
  font-size: 1.25rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

h2 {
  font-size: 1.6875rem;
  letter-spacing: 0.02em;
  color: var(--bruin);
}

h2::before {
  content: "";
  flex: none;
  width: 1.625rem;
  height: 1rem;
  background: url("beelden/blad.svg") center / contain no-repeat;
}

h2::after {
  content: "";
  flex: 1;
  height: 0.625rem;
  background: url("beelden/golf.svg") left center / 2.5rem 0.625rem repeat-x;
  -webkit-mask: linear-gradient(90deg, #000, transparent);
  mask: linear-gradient(90deg, #000, transparent);
}

/* ---------- Panelen: een gouden rank in de bovenhoeken ---------- */

.paneel::before,
.paneel::after {
  content: "";
  position: absolute;
  top: -0.625rem;
  width: 4rem;
  height: 4rem;
  background: url("beelden/rank.svg") center / contain no-repeat;
  pointer-events: none;
}

.paneel::before {
  left: -0.625rem;
}

.paneel::after {
  right: -0.625rem;
  transform: scaleX(-1);
}

/* ---------- Medaillons: pastel met een boog en een lelie bovenaan ---------- */

.medaillon {
  padding-top: 2.5rem;
  box-shadow: 0 0.375rem 0.875rem rgba(74, 52, 38, 0.18), inset 0 0 0 1px rgba(122, 85, 32, 0.35);
}

.medaillon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.125rem;
  width: 2.125rem;
  height: 1.375rem;
  transform: translateX(-50%);
  background: url("beelden/bloem.svg") center / contain no-repeat;
  pointer-events: none;
}

.medaillon .medaillon-label {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.medaillon.alarm .medaillon-label {
  color: var(--medaillon-alarmtekst);
}

.medaillon .medaillon-getal {
  font-size: 3rem;
}

.medaillon.goed .medaillon-getal {
  color: #4f5530;
}

.medaillon p:not(.medaillon-getal),
.medaillon > span:last-child {
  font-size: 1rem;
  font-style: italic;
}

@media (max-width: 40rem) {
  :root {
    --hoek-medaillon: 50% 50% 1rem 1rem / 3rem 3rem 1rem 1rem;
    --medaillon-kader-hoek: 50% 50% 0.625rem 0.625rem / 2.625rem 2.625rem 0.625rem 0.625rem;
    --medaillon-kader-inset: 0.4375rem;
  }

  .medaillon {
    padding-top: 1.75rem;
  }

  .medaillon::after {
    width: 1.5rem;
    height: 1rem;
  }

  .medaillon .medaillon-label {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }

  .medaillon .medaillon-getal {
    font-size: 2rem;
  }

  .medaillon p:not(.medaillon-getal),
  .medaillon > span:last-child {
    font-size: 0.8125rem;
  }
}

.totalen > div {
  padding-top: 1.125rem;
  border-radius: 50% 50% 0.875rem 0.875rem / 2rem 2rem 0.875rem 0.875rem;
  box-shadow: inset 0 0 0 1px rgba(122, 85, 32, 0.35);
}

.totalen dt {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.totalen dd {
  font-size: 1.5rem;
}

/* ---------- Tekens, tabellen en knoppen ---------- */

.kamer-nr {
  font-size: 1.0625rem;
  box-shadow: inset 0 0 0 2px var(--olijf), inset 0 0 0 3px var(--goud);
}

.teller-ruit {
  box-shadow: inset 0 0 0 3px var(--olijf), inset 0 0 0 4px var(--goud);
}

.tabel thead th {
  border-bottom: 1px solid var(--olijf);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status {
  padding: 0.125rem 0.875rem 0.1875rem;
  font-family: var(--letter-tekst);
  font-size: 0.9375rem;
  font-style: italic;
  letter-spacing: 0;
}

.legende {
  font-family: var(--letter-tekst);
  font-size: 0.9375rem;
  font-style: italic;
  letter-spacing: 0;
}

.knop,
button {
  padding: 0.625rem 1.625rem;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.kaarten [data-label]::before {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meter span {
  background: linear-gradient(90deg, var(--salie), var(--olijf));
}

.rij-kop time {
  font-style: italic;
  letter-spacing: 0.02em;
}

.jaarkeuze strong {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}