/*
 * GTGF layoutfase L1 — Trainingsplanner, weekkop overlapt zichzelf (/training-planner/,
 * is_page('training-planner')).
 *
 * Dit is GEEN contrastbug (geen kleurprobleem) maar een cascade-opmaakbug: tekst wordt
 * over andere tekst heen gerenderd, waardoor beide onleesbaar worden. Gevonden tijdens
 * de diepere-flow-rondgang die op contrast was gericht; hier apart als "layoutfase"
 * genummerd omdat de oorzaak en de fix van een andere aard zijn dan E1–E7.
 *
 * Waar: het weekblok in het gegenereerde trainingsschema (#planner-week-heading, zowel
 * in de vier concrete weken als in de latere "roadmap"-weken — beide hergebruiken
 * dezelfde .planner-week-heading__identity/__metrics-structuur, dus deze fix dekt ze
 * automatisch allebei). Live geconstateerd bij elk getest plan, o.a. op /training-planner/
 * na het doorlopen van de intake.
 *
 * Root cause: minstens 50 CSS-regels uit de opeenvolgende "quality-*"-versies raken dit
 * element; voor de eigenschap grid-template-columns wint uiteindelijk een regel met een
 * ID-selector uit desktop-premium-v1523.css:
 *
 *   @media (min-width: 783px) and (max-width: 1180px) {
 *     body.gtgf-v14 #planner-week-heading.planner-week-heading {
 *       grid-template-columns: 1fr 1.4fr 1fr !important;
 *     }
 *   }
 *
 * Deze regel legt een raster met DRIE kolommen op, terwijl #planner-week-heading maar
 * twee kinderen heeft (.planner-week-heading__identity en .planner-week-heading__metrics).
 * Daardoor krijgt elk kind maar een smalle kolom (~84 px resp. ~118 px op een 1024 px
 * scherm, live gemeten) — veel te smal voor hun inhoud. Omdat de tekst binnenin niet
 * binnen die kolombreedte wordt afgekapt, loopt hij er zichtbaar overheen: de kop
 * "Rustige duurconditie" (identity) en de coachregel "Focus op uitvoering, niet op uren
 * vullen." (metrics) eindigen exact over elkaar, net als "WEEK 1 VAN 12 / 22 sep – 28 sep
 * 2026" (identity) over "3,75 uur · 4 sessies · 4 dagen" (metrics). Boven de 1180 px-grens
 * geldt een andere regel uit hetzelfde bestand met DRIE kolommen mét harde minimumbreedtes
 * (minmax(230px,...) minmax(300px,...) minmax(230px,...) = 760 px minimum voor een kaart
 * die zelf maar enkele honderden pixels breed is) — zelfde onderliggende fout, andere
 * symptoom (de kaart zou breder worden geduwd dan bedoeld). Alleen onder de 783 px-grens
 * (mobiel) bestaat er een aparte regel die wél één kolom gebruikt; die blijft dus intact.
 *
 * Live geverifieerd (tijdelijke in-memory CSS-injectie, direct opgeruimd na de meting):
 * vóór de fix overlappen identity- en metrics-tekst elkaar op een 1024 px breed scherm
 * (bijv. de kop-tekst eindigt op x=338 px, ruim voorbij de rand van zijn eigen 84 px
 * brede kolom bij x=209 px, middenin de kolom van de metrics-tekst ernaast). Na de fix
 * staan beide blokken onder elkaar, elk over de volle breedte, geen overlap meer, op elke
 * geteste week (zowel concrete als roadmap-weken).
 *
 * Fix: forceer één kolom op #planner-week-heading, ongeacht welke van de concurrerende
 * regels anders zou winnen op welke breedte — dus zonder mediaquery-beperking, zodat dit
 * alle drie de foutieve varianten (783–1180 px, en >1180 px) in één keer dekt. Bovendien
 * krijgen de twee kind-blokken expliciet grid-column: 1 / -1 mee, zodat een eventuele
 * toekomstige regel die opnieuw een raster met meerdere kolommen oplegt deze twee blokken
 * alsnog over de volle breedte laat lopen. Geen bestaand bestand aangepast.
 *
 * CORRECTIE (22-09-2026, zelfde traject): de eerder geleverde versie van dit bestand
 * gebruikte een selector die begon met een herhaalde ":root"-keten, gevolgd door een
 * regeleinde en dan "html" als aparte selector-schakel — bijvoorbeeld
 * ":root:root:root:root:root:root:root:root:root:root" op de ene regel en
 * "html body.gtgf-v14 #planner-week-heading..." op de volgende. Een regeleinde in CSS
 * is gewoon witruimte, dus dit was in werkelijkheid ":root ... html body...", oftewel:
 * "zoek een element dat 'html' heet EN een afstammeling is van het root-element". Het
 * root-element ÍS het html-element, en het html-element kan nooit een afstammeling van
 * zichzelf zijn — dus deze selector kon nooit ergens op matchen. Bevestigd met een
 * headless-Chromium-test (element.matches() en een echte style-injectie): de eerder
 * geleverde regels pasten zich in de praktijk NERGENS toe, en de weekkop-overlap bestond
 * dus nog steeds, ondanks dat dit eerder als "live geverifieerd" is gemeld. Zie de
 * notitie (L1-NOTITIE.md) voor de volledige toelichting en excuses.
 *
 * De correctie hieronder gebruikt hetzelfde specificiteitsprincipe maar dan wél werkend:
 * "html" als GEWOON beginpunt van de selectorketen (matcht via de tag-naam, geen
 * ":root"-afstammelingsrelatie ernaartoe), gevolgd door de echte #planner-week-heading-ID
 * plus zes keer ":not(#nooit-bestaand-id)" voor extra, altijd-waar specificiteitsmarge
 * bovenop die ene ID. Elke concurrerende regel voor dit element gebruikt precies één
 * ID (#planner-week-heading) zonder verdere ID-boost, dus deze correctie wint gegarandeerd,
 * ongeacht de laadvolgorde. Geverifieerd met dezelfde headless-Chromium-test: het element
 * matcht nu wél, en de daadwerkelijke concurrerende regel uit desktop-premium-v1523.css
 * (regel 845, 783–1180px: "grid-template-columns: 1fr 1.4fr 1fr") wordt nu aantoonbaar
 * overschreven.
 *
 * Alleen geladen op /training-planner/ (is_page('training-planner')).
 *
 * Uitzetten: define( 'GTGF_LAYOUTFASE_L1', false ); in wp-config.php.
 */

html body.gtgf-v14 #planner-week-heading.planner-week-heading:not(#gtgf-l1-a):not(#gtgf-l1-b):not(#gtgf-l1-c):not(#gtgf-l1-d):not(#gtgf-l1-e):not(#gtgf-l1-f) {
  grid-template-columns: minmax(0px, 1fr) !important;
}

html body.gtgf-v14 #planner-week-heading.planner-week-heading:not(#gtgf-l1-a):not(#gtgf-l1-b):not(#gtgf-l1-c):not(#gtgf-l1-d):not(#gtgf-l1-e):not(#gtgf-l1-f) > .planner-week-heading__identity,
html body.gtgf-v14 #planner-week-heading.planner-week-heading:not(#gtgf-l1-a):not(#gtgf-l1-b):not(#gtgf-l1-c):not(#gtgf-l1-d):not(#gtgf-l1-e):not(#gtgf-l1-f) > .planner-week-heading__metrics {
  grid-column: 1 / -1 !important;
}
