/* =========================================================
   TSCB UTILITY-SYSTEEM — spacing (secties + gaps)
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   ========================================================= */

:root {
  /* Spacing-schaal — fluid, gebruikt door secties en gaps */
  --tscb_space_xs:  clamp(0.5rem, 1vw, 0.75rem);
  --tscb_space_s:   clamp(0.75rem, 1.5vw, 1rem);
  --tscb_space_m:   clamp(1rem, 2.5vw, 1.5rem);
  --tscb_space_l:   clamp(1.5rem, 4vw, 2.5rem);
  --tscb_space_xl:  clamp(2.5rem, 6vw, 4rem);
  --tscb_space_2xl: clamp(4rem, 8vw, 6rem);
  --tscb_space_3xl: clamp(6rem, 10vw, 9rem);
}

/* ---------------------------------------------------------
   1. SECTIES — verticale sectie-padding (padding-block)
   Laag nummer = compact, hoog = ruim.
   --------------------------------------------------------- */
.tscb_section_1 { padding-block: var(--_tscb_section, var(--tscb_space_l)); }
.tscb_section_2 { padding-block: var(--_tscb_section, var(--tscb_space_xl)); }
.tscb_section_3 { padding-block: var(--_tscb_section, var(--tscb_space_2xl)); }
.tscb_section_4 { padding-block: var(--_tscb_section, var(--tscb_space_3xl)); }

/* ---------------------------------------------------------
   2. SPACING — gap tussen kind-elementen (flex/grid)
   --------------------------------------------------------- */
.tscb_gap_xs  { gap: var(--_tscb_gap, var(--tscb_space_xs)); }
.tscb_gap_s   { gap: var(--_tscb_gap, var(--tscb_space_s)); }
.tscb_gap_m   { gap: var(--_tscb_gap, var(--tscb_space_m)); }
.tscb_gap_l   { gap: var(--_tscb_gap, var(--tscb_space_l)); }
.tscb_gap_xl  { gap: var(--_tscb_gap, var(--tscb_space_xl)); }
.tscb_gap_2xl { gap: var(--_tscb_gap, var(--tscb_space_2xl)); }
.tscb_gap_3xl { gap: var(--_tscb_gap, var(--tscb_space_3xl)); }

/* ---------------------------------------------------------
   3. CONTENTKOLOM — breedte + vaste zijmarge
   Bricks zet de container standaard op `width: 1100px` met
   `margin-inline: auto` en GEEN padding: onder 1100px staat
   hij daardoor strak tegen beide schermranden.
   De zijmarge zit hier bewust in de max-width en niet in
   padding of margin: zo blijft het auto-centreren van Bricks
   werken én is er op élke schermbreedte evenveel lucht naast
   de kolom.
   --------------------------------------------------------- */
:root {
  --tscb_content_max:    1400px;
  --tscb_content_gutter: 5vw;
}

.brxe-container {
  width: var(--tscb_content_max);
  max-width: calc(100% - 2 * var(--tscb_content_gutter));
}

/* ---------------------------------------------------------
   4. KOPPEN — verticaal ritme + lichte inspringing naar rechts.
   h1/h2/h3 staan iets naar binnen ten opzichte van de rest van
   de content. h4-h6 doen niet mee: die zitten meestal binnen
   een component en zouden daar scheef gaan staan.

   HORIZONTAAL is het padding en geen margin. Een kop is normaal
   een shrink-to-fit flex-item, dan maakt het niet uit — maar
   zet iemand in de builder `width: 100%` op een kop, dan duwt
   een margin 'm buiten de container en krijg je horizontale
   overflow. Met padding en box-sizing: border-box kan dat niet
   gebeuren, en het ziet er hetzelfde uit.

   VERTICAAL is het juist margin. Ruimte bóven een kop is ruimte
   tússen de kop en wat ervoor kwam, en dat hoort buiten de box:
   krijgt een kop ooit een achtergrond, een border-top of een
   markering, dan zou padding die ruimte binnen het gekleurde
   vlak zetten en klopt het beeld niet meer.
   De klassieke reden om verticale margins te mijden — margin
   collapse — speelt hier niet: Bricks-containers zijn flex, en
   in een flexcontainer klappen margins nooit samen.
   Wat margin wél mist is dat een #anker-sprong de kop tegen de
   bovenrand van het scherm plakt (de ruimte staat immers buiten
   het element). Daar is scroll-margin-top voor; die staat
   hieronder en houdt die ruimte zichtbaar bij zo'n sprong.
   --------------------------------------------------------- */
:root {
  --tscb_heading_indent: clamp(1rem, 2.5vw, 2.5rem);

  /* Halve inspringing, gedeeld door het streepje en de lopende
     tekst. Bewust afgeleid van de kop-inspringing en niet apart
     ingetikt: draai je die knop, dan blijven streepje en tekst
     vanzelf op één lijn staan. */
  --tscb_text_indent: calc(var(--tscb_heading_indent) / 2);

  /* Ruimte boven een kop. De h1 krijgt bewust meer: die opent
     een pagina en mag echt lucht boven zich hebben — sinds hij
     groter is, een stap meer dan de schaal zelf aanbiedt.
     Deze factor stond eerder alleen op home; nu opent elke
     pagina op dezelfde hoogte (zie PAGINA-OPENING onderaan). */
  --tscb_h1_space_top: calc(var(--tscb_space_3xl) * 1.8);
  --tscb_h2_space_top: var(--tscb_space_xl);

  /* Ruimte ONDER de kop — dus onder het streepje, want dat
     hangt als ::after aan de kop vast. */
  --tscb_h1_space_bottom: var(--tscb_space_l);
  --tscb_h2_space_bottom: var(--tscb_space_m);

  /* Het streepje onder de kop.
     De kleur is tertiary_1 (#f5e4f5) met een scheut tertiary_2
     (#8a688a) erdoor: puur tertiary_1 haalt 1.21:1 tegen de
     paginakleur en is dus vrijwel onzichtbaar, puur tertiary_2 is
     4.74:1 en trekt de aandacht van de kop weg.
     DRAAI AAN HET PERCENTAGE: 100% = de oude, bijna onzichtbare
     tint, lager = donkerder. 65% zit rond 2:1. */
  --tscb_heading_rule_mix:    65%;
  --tscb_heading_rule_color:  color-mix(in srgb,
    var(--tscb_tertiary_1) var(--tscb_heading_rule_mix),
    var(--tscb_tertiary_2));
  --tscb_heading_rule_width:  clamp(9rem, 24vw, 18rem);
  --tscb_heading_rule_height: 2px;
  --tscb_heading_rule_gap:    var(--tscb_space_s);
}

h1 {
  margin-block: var(--tscb_h1_space_top) var(--tscb_h1_space_bottom);
}

h2, h3 {
  margin-block: var(--tscb_h2_space_top) var(--tscb_h2_space_bottom);
}

/* Kort streepje onder de kop, van de merkkleur naar transparant.
   Het hangt aan de kop zelf en niet aan een los element, zodat
   het altijd meeschuift met de inspringing hierboven: de ::after
   begint op de padding-rand, dus precies onder de eerste letter.

   `transparent` als eindstop mag: browsers interpoleren gradients
   in premultiplied alpha, dus je krijgt géén grijze waas halverwege
   (dat was een oud probleem). Nagemeten op de gerenderde pixels.

   .tscb_streep = dezelfde streep, maar dan onder iets dat geen kop is. */
h1::after,
h2::after,
h3::after,
.tscb_streep::after {
  content: "";
  display: block;
  width: var(--tscb_heading_rule_width);
  height: var(--tscb_heading_rule_height);
  margin-top: var(--tscb_heading_rule_gap);

  /* De achtergrond is bewust bréder dan het streepje: alleen dan
     heeft het verloop ruimte om heen en weer te schuiven.
     no-repeat is daarbij verplicht — met de default `repeat`
     zie je bij het uiteinde van de schuif de staart van de
     volgende tegel als een harde naad. */
  background-image: linear-gradient(90deg,
    var(--tscb_heading_rule_color), transparent);
  background-size: calc(100% + var(--tscb_rule_travel)) 100%;
  background-repeat: no-repeat;

  /* Vanaf links uitrekken, zodat het streepje aan de kop
     vastzit en alleen z'n staart beweegt. */
  transform-origin: left center;
  animation:
    tscb_rule_drift   var(--tscb_rule_drift_duration)   ease-in-out infinite,
    tscb_rule_breathe var(--tscb_rule_breathe_duration) ease-in-out infinite;
}

/* Het titelblok bovenaan is groter dan een h2, dus mag z'n streepje ook
   iets verder van de tekst af staan. */
h1::after,
.tscb_streep::after {
  margin-top: calc(var(--tscb_heading_rule_gap) * 1.6);
}

/* h2/h3 springen een halve stap verder in dan de lopende tekst; deze
   negatieve marge trekt hun streepje terug naar de tekstlijn. De h1 en
   .tscb_streep staan daar al op en hebben 'm dus niet nodig. */
h2::after,
h3::after {
  margin-inline-start: calc(
    var(--tscb_text_indent) - var(--tscb_heading_indent));
}

/* Negatieve delays per kopniveau: staan er meerdere koppen op een
   pagina, dan deinen ze niet in de maat mee. Negatief i.p.v.
   positief, zodat er nooit een stilstand aan het begin zit. */
h2::after { animation-delay: -7s, -11s; }
h3::after { animation-delay: -13s, -17s; }

/* Een h2/h3 bovenaan z'n kolom heeft de sectie-padding al boven
   zich; anders krijg je die ruimte dubbel.
   De h1 doet hier bewust NIET aan mee: die staat vrijwel altijd
   als eerste in z'n container, en juist dáár wil je die ruimte
   hebben. Zet je 'm hier wel bij, dan is de hele
   --tscb_h1_space_top hierboven een dode knop. */
h2:first-child,
h3:first-child {
  margin-block-start: 0;
}

h1, h2, h3 {
  padding-inline-start: var(--tscb_heading_indent);
  scroll-margin-top: var(--tscb_space_xl);
}

/* ---------------------------------------------------------
   4b. PAGINA-OPENING — de h1 begint overal op dezelfde hoogte.

   Boven de h1 staan twee dingen: de padding van de eerste sectie
   en de marge van de h1 zelf. Die tweede staat hierboven en geldt
   al overal; deze regel doet hetzelfde voor de eerste.

   Home zet die padding met .tscb_section_3 in de builder, andere
   pagina's hebben daar niets staan — Bricks geeft een sectie zelf
   geen padding, dus daar begon de h1 een halve schermhoogte hoger.

   :where() maakt de regel specificiteit 0, zodat élke
   tscb_section_*-class er nog overheen gaat. Een pagina die z'n
   opening bewust anders wil, zet dus gewoon een class in de
   builder en wint. Zonder :where() zou die knop dood zijn.
   --------------------------------------------------------- */
:root {
  --tscb_opening_top: var(--tscb_space_2xl);   /* = tscb_section_3 */
}

:where(main > section:first-child) {
  padding-block-start: var(--tscb_opening_top);
}

/* De h1 staat op de tekstlijn en niet op de kop-inspringing: op de
   grootste letter van de pagina leest dat extra stukje als scheefstand. */
h1 {
  padding-inline-start: var(--tscb_text_indent);
}

/* ---------------------------------------------------------
   5. LOPENDE TEKST — zelfde halve inspringing als het streepje,
   plus ruimte onder elke alinea.
   Padding en geen margin, om dezelfde reden als bij de koppen:
   een alinea die in de builder op width 100% is gezet zou met
   een margin de container uit lopen.
   Het formulier krijgt deze inspringing bewust NIET: dat blijft
   op de volle contentkolom staan en oogt daardoor iets breder
   dan de tekst erboven.

   WAAROM DE HAAK <p> IS, en niet .brxe-text of iets breders:
   dit ritme hoort bij lopende tekst, en <p> is precies wat dat
   betekent. Losse regels die géén alinea zijn — een label, een
   bijschrift, één woord onder een icoon — zet je in Bricks met
   Text Basic op een span of div, en die vallen hier dan vanzelf
   buiten. Dat is geen gat maar het gewenste gedrag: de semantiek
   bepaalt of iets alinea-ritme krijgt. Zet je zulke losse regels
   tóch in een <p>, dan krijgen ze de inspringing en de marge
   mee en gaan ze scheef staan t.o.v. de rest.

   Let op als je componenten met lopende tekst gaat bouwen: een
   <p> in een kaartje krijgt deze inspringing óók. Bijt dat, scope
   deze regel dan naar de contentkolom i.p.v. globaal.
   --------------------------------------------------------- */
:root {
  --tscb_text_space_bottom: var(--tscb_space_xl);
}

p {
  padding-inline-start: var(--tscb_text_indent);
  margin-block-end: var(--tscb_text_space_bottom);
}

/* Wie beweging heeft uitgezet krijgt het streepje gewoon stil.
   De vorm blijft, alleen het deinen stopt. */
@media (prefers-reduced-motion: reduce) {
  h1::after,
  h2::after,
  h3::after,
  .tscb_streep::after {
    animation: none;
  }
}