/*
 * Onze eigen laag boven de gekopieerde huisstijl van www.ijtsma.nl.
 * Alleen bewuste afwijkingen; de vendor-CSS blijft ongewijzigd en regenereerbaar.
 *
 * GEMETEN FEITEN (bewijs geleverd bij het opstellen van dit plan):
 *   - ijtsma-utilities.css zet op de selector `html,:host`:
 *       line-height: 1.5;  font-family: var(--font-raleway), sans-serif;
 *     Beide zijn ERFBAAR en bereiken dus de shadow tree van de configurator.
 *   - De inline head-stijl van ijtsma.nl zet
 *       * { font-family: var(--font-raleway), sans-serif !important; }
 *     Die regel zou ook het host-element <vme-configurator> raken. Daarom is ze in
 *     template.html gescopeerd tot `*:not(vme-configurator)` -- dat gebeurt daar, niet hier:
 *     dit bestand hoeft zelf geen concurrerende regel te zetten (zie hieronder waarom er
 *     geen neutralisatieblok nodig is).
 *   - --font-raleway wordt gedefinieerd door de body-class raleway_*__variable.
 *   - z-index bij IJtsma: drawer 10001, sticky (niet overgenomen) 9999, nav 200.
 *
 * GEMETEN IN DE CONFIGURATOR (packages/embed/src):
 *   - eigen typografie op :host -- base.css:1-18 zet font-family: var(--vme-font-body),
 *     font-size, color, background en line-height: 1.5; tokens in tokens.css:35-38.
 *     Daarom is hier GEEN neutralisatieblok nodig: de component wint zolang we hem niet
 *     met een important-regel overschrijven. Die scoping zit in template.html.
 *   - hoogste z-index: 9999 (ImageLightbox.vue:56-58), daarna 30 (VmeTopbar.vue:47).
 *     IJtsma: drawer 10001, nav 200. Geen conflict, geen aanpassing.
 *   - 100vh/100dvh: nul treffers. Geen hoogte-ingreep nodig.
 *   - eigen max-width: --vme-max-width 1200px met eigen centrering en
 *     container-type: inline-size. Dus: volle breedte laten, nergens een kleinere max-width.
 */

/*
 * Vangnet voor de fontvariabele.
 *
 * --font-raleway hangt aan een CSS-module-class met een buildhash
 * (raleway_d36f290a-module__U1wi1G__variable). Verandert die hash bij een volgende build van
 * ijtsma.nl en verversen we de snapshot, dan kent de pagina de variabele niet meer en valt
 * alles terug op sans-serif. Deze regel houdt de variabele in leven, los van de class. De
 * definitie van IJtsma zelf is specifieker en wint zolang die class bestaat.
 */
:root {
  --font-raleway: 'Raleway', 'Raleway Fallback';
}

/*
 * Het configurator-element krijgt hier BEWUST geen typografie.
 *
 * De verleiding is een blok als `vme-configurator { font-family: initial !important; ... }` om
 * de tool "af te schermen". Dat is precies verkeerd: `initial` betekent font-family Times, en
 * omdat erfbare properties de shadow-grens passeren zou de tool dan Times gaan erven in plaats
 * van zijn eigen --vme-font-body. De component regelt zijn typografie zelf op :host; het enige
 * wat wij moeten doen is hem niet met een important-regel overschrijven -- en dat is geregeld
 * met de :not(vme-configurator)-scoping in template.html.
 *
 * Wel expliciet: het element moet een blok van volle breedte zijn. Het zet zelf al
 * `display: block` op :host, maar een normale document-declaratie zou dat kunnen verslaan
 * (buitenste context wint voor normale declaraties), dus we bevestigen het hier.
 * Geen transform, filter, perspective, contain of will-change: die zouden een containing block
 * vormen en de fullscreen-lichtbox van de tool binnen dit element opsluiten.
 */
vme-configurator {
  display: block;
  width: 100%;
}

/*
 * Actief-item-markering in het menu uitgezet.
 *
 * IJtsma schuift onder de hoofdnavigatie een rood streepje van 3px mee naar het actieve of
 * gehoverde item: <span class="... absolute bottom-[-1px] h-[3px] bg-[#DB0032] transition-all">
 * met een inline width en left die React per item bijwerkt.
 *
 * Op deze pilotpagina is dat streepje zinloos en zelfs misleidend. De pagina staat buiten hun
 * sitestructuur, dus er is geen "actief" item -- en omdat de React-handlers uit de snapshot
 * verdwenen zijn, staat de inline positie bevroren op de willekeurige plek waar hij tijdens het
 * scrapen stond. Hij zou dus een categorie aanwijzen die de bezoeker niet bekijkt.
 * Besluit van de eigenaar (30-07-2026): weglaten.
 *
 * Let op de selector: alleen de meeschuivende SPAN. De twaalf losse streepjes met `w-14` zijn
 * iets anders -- die zitten in de kopjes BINNEN de dropdownpanelen en horen wel te blijven.
 *
 * We verbergen het element in plaats van het uit de snapshot te knippen, zodat de snapshot een
 * onbewerkte 1:1 kopie blijft en bij een verversing niet opnieuw bijgewerkt hoeft te worden.
 */
span[class*='bottom-[-1px]'][class*='h-[3px]'][class*='bg-[#DB0032]'] {
  display: none;
}