/* GEDEELD BESTAND — bewerk dit in onlineverf-portal/shared/ en verspreid het
   met `npm run sync` (scripts/sync-shared.sh). Kopieën in de tools worden
   overschreven.

   ============================================================================
   ov-sectie.css — hoe een sectiekop eruitziet in elke Onlineverf-tool
   ============================================================================

   Aanleiding (05-10-2026, Demian over het contractscherm): "ik vind de
   koppen/secties vaak nog vrij onduidelijk, ze vallen wat weinig op". Dat
   klopte, en het lag aan drie dingen tegelijk:

   1. Te weinig verschil in grootte. De kop was 14px, de tekst eronder 13px.
      Het oog ziet dan één blok in plaats van kop + inhoud.
   2. De kop was groen. Maar groen is in deze tools de kleur van ACTIE —
      knoppen, de actieve tab, links. Een kop in diezelfde kleur concurreert
      daarmee in plaats van rust te geven.
   3. Er was geen anker: niets markeerde "hier begint iets nieuws".

   Daar kwam bij dat er door de tools heen drie verschillende behandelingen
   voor dezelfde taak bestonden (groene Ubuntu-kop, hoofdletters in klein
   grijs, en ergens nog Jost cursief). Het oog kan dan geen patroon leren.

   ---------------------------------------------------------------------------
   DE LADDER — drie niveaus, meer zijn het er niet
   ---------------------------------------------------------------------------
   1. SECTIEKOP  →  .ov-sectie-kop
      Icoon in een zacht vierkantje, kop ernaast in 16px donker, dunne lijn
      eronder. Het icoon is het winstpunt: in een lange lade navigeer je op
      vorm, niet op tekst. Geef elke sectie zijn eigen icoon (een euro bij
      geld, een klok bij looptijd, een document bij bijlagen), dan vind je
      "waar stond dat ook alweer" zonder te lezen.

   2. SUBKOP     →  .ov-subkop
      Hoofdletters, klein, met letterafstand, grijs. Prima als label boven een
      rij of een kolom — nooit als sectiekop, want daar verdwijnt hij.

   3. VELDLABEL  →  blijft van de tool zelf (.hint, label, enzovoort).

   En één regel die veel doet: de uitleg onder een kop is altijd een stap
   lichter én smaller (70 tekens). Kop en uitleg horen niet om dezelfde
   aandacht te vechten.

   ---------------------------------------------------------------------------
   GEBRUIK
   ---------------------------------------------------------------------------
   <h3 class="ov-sectie-kop">
     <span class="ov-sectie-icoon"><svg class="icon"><use href="#icon-euro"/></svg></span>
     <span>Wat het servicepunt betaalt</span>
   </h3>
   <p class="ov-sectie-uitleg">De maandbijdrage waarmee het verdienmodel rekent.</p>

   Het icoon mag weg als een sectie er geen zinnig icoon bij heeft; de kop
   blijft dan gewoon werken.

   ---------------------------------------------------------------------------
   SPECIFICITEIT
   ---------------------------------------------------------------------------
   Alles staat in :where(), dus specificiteit 0. Een tool die iets anders wil,
   schrijft gewoon zijn eigen regel met dezelfde class en wint. Zo is dit
   bestand nooit iets om omheen te werken.
   ========================================================================== */

:where(.ov-sectie-kop) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
}

/* Gevuld vierkantje in de kleur van de kop, met een wit icoon. Het begon als
   een zacht groen vlakje met een groen icoon, maar dat viel bij vier secties
   onder elkaar gewoon weg — en juist dan moet het werken, want dan ben je aan
   het zoeken. Gevuld donker is het enige dat op één blik opvalt, en doordat
   het dezelfde kleur heeft als de tekst leest de kop als één geheel in plaats
   van als een gekleurde stip met woorden ernaast. (Voorstel van Demian,
   05-10-2026; naast elkaar gezet en hij won met afstand.) */
:where(.ov-sectie-icoon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--nachtblauw);
  color: #fff;
}
:where(.ov-sectie-icoon) .icon { width: 15px; height: 15px; }

/* Varianten voor secties die van kleur horen te verschillen. Spaarzaam
   gebruiken: als alles opvalt, valt niets meer op. Ook gevuld, zelfde reden. */
:where(.ov-sectie-icoon.is-geld) { background: var(--diepsaffraan-dark); color: #fff; }
:where(.ov-sectie-icoon.is-let-op) { background: var(--vermiljoen); color: #fff; }

:where(.ov-sectie-uitleg) {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 70ch;
}

:where(.ov-subkop) {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  :where(.ov-sectie-kop) { font-size: 15px; gap: 8px; }
  :where(.ov-sectie-icoon) { width: 24px; height: 24px; border-radius: 7px; }
}