/* site-uitgelicht.css — het blok dat de ene vraag beantwoordt.

   Uit site.css gehaald omdat dat blad op zijn plafond stond. De naad is
   inhoudelijk: `.note` is een terzijde, en dit is het omgekeerde -- het enige
   blok op de startpagina dat een bezoeker MOET zien voordat zij boekt. Bij een
   contractvrije praktijk is dat "krijg ik dit vergoed?"; een andere praktijk
   vult er iets anders in. Het blok is van het product, de woorden zijn van haar.

   Eigenaar, 27 september 2026: *"Ik wil dat het blokje zichtbaarder wordt, dus
   prominenter in beeld en dan mag je met wat schaduw werken en de lettertypes
   en ik wil dat de links naar de contractvrij pagina, dat die groter is, dat
   het duidelijker is dat je erop moet drukken."* En diezelfde ochtend: *"de
   streep aan de zijkant ervan wil ik weghebben maar de rechthoek om de text om
   het te laten oplichten is wel op zijn plaats."* (bevinding 536)

   Wat hij NIET wilde is even belangrijk: *"een total lift net als over mij (...)
   dat is denk ik te moeilijk en dat gaat te veel veranderen."* Dus een
   behandeling, geen herbouw -- het blok houdt zijn plek en zijn woorden.

   Laadt NA site.css, want het verfijnt `.note` van daar.

   GEEN EIGEN SCHADUW. Diepte is in dit product een schakelaar van de praktijk
   (`vormtaal.css`: op de vlakke stand staat de hele hoogteladder op `none` --
   "een doos die niemand heeft ingericht heeft geen diepte, en dat hoort saai te
   zijn"). Haar pakket staat vandaag op `plat`. De nadruk komt daarom uit wat op
   ELKE stand werkt: een vollere grond, een kader rondom, meer lucht en een
   grotere letter. `--hoogte-2` tilt het blok op zodra zij diepte aanzet. Zo
   blijft de vorm van het product en de smaak van haar.

   Gemeten door `tests/test_het_vergoedingsblok_valt_op.py`. */

.note--uitgelicht {
  border-left: 0;
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius);
  background: var(--paper-warm-a70, var(--cream-mist));
  box-shadow: var(--hoogte-2);
  padding: 1.6rem 1.8rem;
  margin: 2.4rem 0;
  font-size: 1.06rem;
  line-height: 1.6;
}

/* "Vergoeding." is de aanhef van het blok; die mag de stem van de site dragen
   in plaats van de vetgedrukte broodtekst te zijn. */
.note--uitgelicht > p:first-child > strong:first-child {
  font-family: var(--font-display);
  font-size: 1.22em;
  font-weight: 600;
  display: inline-block;
  margin-right: 0.15em;
}

/* De link naar de uitleg is een knop geworden: eigen grond, eigen vorm, en hoog
   genoeg om met een duim te raken (dezelfde ondergrens als bevinding 522). Hij
   staat midden in een lopende zin, dus geen blokknop maar een pil die meeloopt. */
.note--uitgelicht a[href="/contractvrij"] {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.18rem 0.72rem;
  border-radius: var(--radius-pill);
  background: var(--petrol);
  color: var(--paper);
  font-size: 1.02em;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--beweging-snel) var(--easing);
}
.note--uitgelicht a[href="/contractvrij"] strong { color: inherit; }
@media (hover: hover) {
  .note--uitgelicht a[href="/contractvrij"]:hover { background: var(--ink); }
}

/* Elke andere link in het blok blijft een link, maar wel een zichtbare. */
.note--uitgelicht a:not([href="/contractvrij"]) {
  color: var(--petrol);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ── haar standaardprijslijst, onder de draaikaarten ─────────────────────
   Eén regel die openklapt (partials/home/_prijslijst.html): rustig, in de vorm van
   de site, zodat de kaarten het gezicht van Aanbod blijven. */
.prijslijst-uitklap {
  margin: 2rem auto 0; max-width: 46rem;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-card);
}
.prijslijst-uitklap__kop {
  display: flex; align-items: baseline; gap: 0.8rem; cursor: pointer; list-style: none;
  padding: 1rem 1.2rem; font-weight: 600;
}
.prijslijst-uitklap__kop::-webkit-details-marker { display: none; }
.prijslijst-uitklap__kop::after { content: "+"; margin-left: auto; font-weight: 400; }
.prijslijst-uitklap[open] > .prijslijst-uitklap__kop::after { content: "–"; }
.prijslijst-uitklap__sub { font-weight: 400; font-size: 0.88rem; opacity: 0.75; }
.prijslijst-uitklap__inhoud { padding: 0 1.2rem 1.1rem; }
.prijslijst-uitklap .prijslijst { width: 100%; border-collapse: collapse; }
.prijslijst-uitklap .prijslijst th { text-align: left; font-size: 0.8rem; opacity: 0.75; padding: 0.3rem 0; }
.prijslijst-uitklap .prijslijst td { padding: 0.5rem 0; vertical-align: top; border-top: 1px solid var(--line-soft); }
.prijslijst-uitklap .prijslijst th:nth-child(n+2),
.prijslijst-uitklap .prijslijst td:nth-child(n+2) { text-align: right; white-space: nowrap; padding-left: 0.6rem; }
.prijslijst-uitklap .prijslijst__nza { margin: 0.8rem 0 0; opacity: 0.8; }