/* ngs-afwerking.css — de afwerking bovenop het ontwerp uit de handoff.
 *
 * ngs.css en ngs-ui.css komen uit de handoff en worden bij elke import
 * overschreven. Wat hier staat, overleeft dat: scripts/afwerking.mjs hangt dit
 * bestand na ngs-ui.css in elke pagina, in de rauwe head en in elke helmet.
 *
 * Het verandert de look niet. Het maakt hem strakker: woorden die los staan,
 * geen leestekens alleen op een regel, niets dat op mobiel uitsteekt.
 * De nummers verwijzen naar het rapport "Design-inconsistenties" (oktober 2026).
 */

:root {
  --ws-display: .1em;
}

/* DES-01 · Clash Display heeft een smalle spatie (0,154em), en met de negatieve
   letter-spacing van de koppen blijft daar 0,12em van over. Op 72 px is dat
   8,9 px: "Klinktdit bekend?". Met 0,1em erbij wordt het 16 px. */
.h-hero, .h1, .h2, .h3, .h4,
.quote-card blockquote, .faq summary, .toolmark,
[style*="--font-display"] {
  word-spacing: var(--ws-display);
}
.px { word-spacing: normal; }

/* DES-02 · het laatste woord, het leesteken en de sticker blijven samen.
   De spans zet scripts/afwerking.mjs rond de staart van elke kop. */
.nowrap { white-space: nowrap; }

/* DES-04 · horizontaal scrollen op mobiel */

/* Home, "Zo verdwijnt het overtypen": de container is een grid zonder kolommen.
   De impliciete kolom nam de min-content van de stappenlijst over (391 px). */
[data-film] .container { grid-template-columns: minmax(0, 1fr); }

/* Het vangnet uit het rapport, pas nadat de oorzaken hierboven en in
   scripts/afwerking.mjs weg waren. clip en niet hidden: hidden maakt van html
   een scrollcontainer en dan werken de sticky secties niet meer. */
html, body { overflow-x: clip; }

/* Lange knopteksten ("Liever dat wij het invullen? Boek een gesprek") mogen op
   een smal scherm afbreken in plaats van de kolom breder te duwen. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.25;
    text-align: center;
  }
  .btn--lg { min-height: 48px; }
}


/* ==========================================================================
   P1 · naar één systeem
   ========================================================================== */

/* DES-06 · één typografische schaal: 12 · 14 · 16 · 18 · 22 · 28 · 36 · 48,
   plus de kopmaten (h2, display, hero) en hun pixelwoord. Losse waarden in de
   pagina's zet scripts/afwerking.mjs op de dichtstbijzijnde stap.
   Vier families, elk met een rol: Clash Display voor koppen, Jersey 15 voor het
   ene accentwoord per kop en grote cijfers, JetBrains Mono voor labels in
   hoofdletters, Inter voor al de rest. */
:root {
  --fs-label: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-body-l: 18px;
  --fs-h4: 22px;
  --fs-h3: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-display: clamp(44px, 6.4vw, 96px);   /* de H1 bovenaan een vervolgpagina */
}
@media (max-width: 640px) { :root { --fs-h3: 22px; } }

.intro { font-size: var(--fs-body-l); }
.intro .brand { font-size: var(--fs-h4); }
.btn--lg { font-size: var(--fs-body); }
.tag, .announce { font-size: var(--fs-label); }
.mega__desc, .quote-card .role { font-size: var(--fs-small); }
.mega__promo .px { font-size: var(--fs-3xl); }
.quote-card blockquote { font-size: clamp(22px, 2.4vw, 28px); }
.person-card__name { font-size: var(--fs-3xl); }
.person-card__quote p, .faq .answer { font-size: var(--fs-body-l); }
.step-num { font-size: var(--fs-4xl); }
/* 700 kwam één keer voor; de site gebruikt 400, 500 en 600 */
b, strong { font-weight: 600; }

/* DES-07 · ritme. Eén maat voor de ruimte boven en onder een sectie, en een
   kleinere voor secties die bij elkaar horen. */
:root {
  --section-y: clamp(72px, 10vw, 144px);
  --section-y-sm: clamp(48px, 6vw, 88px);
}
.section--tight { padding: var(--section-y-sm) 0; }

/* Geen ruimte onderaan de ene sectie én bovenaan de volgende: de volgende sectie
   zorgt ervoor, de vorige laat haar onderkant vallen. Alleen tussen secties
   zonder eigen achtergrond; met een achtergrond hoort de ruimte bij het vlak.
   Niet als de volgende sectie haar bovenkant inline zelf regelt.
   !important omdat veel paddings inline in de pagina's staan. */
main section:not(.section--light, .bg-grid, [style*="background"]):has(+ :is(.section, .section--tight):not(.section--light, .bg-grid, [style*="background"], [style*="padding:"], [style*="padding: "], [style*="padding-top"])) {
  padding-bottom: 0 !important;
}
/* De afsluiter onderaan elke pagina had 120 tot 180 px bovenaan, na een sectie
   die zelf al --section-y onderaan had: tot 324 px leegte. */
main section[data-screen-label$="Afsluiter"] { padding-top: var(--section-y) !important; }
main section:not(.section--light, .bg-grid, [style*="background"]):has(+ section[data-screen-label$="Afsluiter"]:not([style*="background"])) {
  padding-bottom: 0 !important;
}

/* /contact: het formulier is korter dan de kolom ernaast. Het blijft staan
   terwijl je langs de rechterkolom scrolt, zodat er geen leeg vlak onder valt. */
@media (min-width: 1024px) {
  [data-screen-label="Gesprek"] > .container > :first-child { position: sticky; top: 88px; }
}

/* Voettekst: drie plus twee linkkolommen, nooit één kolom alleen op een tweede
   rij. Vijf naast elkaar werd te krap naast het logoblok ("Mail-assistent" brak).
   !important omdat het raster inline staat. */
@media (min-width: 641px) {
  nav[aria-label="Voettekst"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* DES-17 · de vier diensten op home: op desktop een raster van 2 × 2, zodat je
   ze alle vier ziet zonder te klikken. Op tablet en gsm blijft de carrousel. */
@media (min-width: 1024px) {
  #rail1 {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding: 0 var(--rail-pad);
  }
  .rail-controls:has([data-for="rail1"]) { display: none; }
}

/* DES-08 · vier afrondingen. --r-s 8 (knoppen, velden, tegeltjes), --r-m 12
   (kleine kaarten), --r-l 20 (kaarten, visuals, secties), --r-pill (chips).
   De waarden in de pagina's zet scripts/afwerking.mjs op deze tokens. */
:root {
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 20px;
  --r-xl: var(--r-l);
}


/* ==========================================================================
   P2 · details
   ========================================================================== */

/* DES-13 · één skiplink voor elke pagina, bovenaan de navigatie. Onzichtbaar
   tot je met Tab naar binnen komt. */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-s);
  background: #fff; color: #0A0A0A; font-weight: 600; font-size: var(--fs-small);
}
.skip-link:focus { top: 16px; }

/* DES-14 · de menulabels zijn nu <p> in plaats van <h6>; zelfde plaats */
.mega__col > p.eyebrow { margin: 4px 10px 10px; }

/* DES-16 · tekstlinks zijn op een gsm 18 tot 21 px hoog. Het raakvlak wordt
   44 px zonder dat de link er anders uitziet. */
@media (max-width: 760px) {
  .link, a[href^="tel:"]:not(.btn), a[href^="mailto:"]:not(.btn) { position: relative; }
  .link::before, a[href^="tel:"]:not(.btn)::before, a[href^="mailto:"]:not(.btn)::before {
    content: ""; position: absolute; inset: -12px -6px;
  }
}

/* DES-12 · één kleur per dienst, als token. Dezelfde kleur staat achter het
   icoon van die dienst in het menu en op de dienstkaart op home, zodat je het
   verband met de gekleurde kop van de dienstpagina ziet. */
:root {
  --c-ai: #613392;        /* AI-automatisaties */
  --c-software: #0B4BA0;  /* Software op maat */
  --c-care: #0E6031;      /* Care */
}
.mega__link:is([href="/ai-automatisaties"], [href="/software-op-maat"], [href="/onderhoud"]) .mega__title img,
#rail1 article:has(a[href="/ai-automatisaties"], a[href="/software-op-maat"], a[href="/onderhoud"]) .card__icon {
  box-sizing: content-box; padding: 4px; border-radius: var(--r-s);
}
.mega__link[href="/ai-automatisaties"] .mega__title img, #rail1 article:has(a[href="/ai-automatisaties"]) .card__icon { background: var(--c-ai); }
.mega__link[href="/software-op-maat"] .mega__title img, #rail1 article:has(a[href="/software-op-maat"]) .card__icon { background: var(--c-software); }
.mega__link[href="/onderhoud"] .mega__title img, #rail1 article:has(a[href="/onderhoud"]) .card__icon { background: var(--c-care); }


/* ==========================================================================
   CRO-rapport (oktober 2026)
   ========================================================================== */

/* CRO-02 · op een gsm een smalle kaart onderaan: tekst en knoppen naast elkaar */
@media (max-width: 640px) {
  [role="dialog"][aria-label="Cookies"] {
    left: 8px !important; right: 8px; bottom: 8px !important; width: auto !important;
    padding: 12px 12px 12px 14px !important; gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  }
  [role="dialog"][aria-label="Cookies"] img { display: none; }
  [role="dialog"][aria-label="Cookies"] .btn { min-height: 40px; padding: 0 12px; }
}

/* CRO-10 · "Kies met 1 tot 4 of met de pijltjes" heeft alleen zin met een toetsenbord */
.alleen-toetsenbord { display: none; }
@media (hover: hover) and (pointer: fine) { .alleen-toetsenbord { display: block; } }

/* CRO-03 · de citaten op de site zijn van de zaakvoerders zelf. Ze kregen de
   opmaak van een klanttestimonial (blauwe kaart, foto's, logo). Nu zijn het
   gewoon uitspraken: kleiner, met een lijn ervoor, zonder kaart. */
.quote-card {
  background: transparent; border-radius: 0; overflow: visible;
  padding: 2px 0 2px clamp(16px, 2vw, 24px); border-left: 2px solid var(--ngs-blue-400);
}
.quote-card canvas.dots, .quote-card figcaption img { display: none; }
.quote-card blockquote { font-size: clamp(18px, 1.72vw, 22px) !important; max-width: 52ch; }
.quote-card figcaption { margin-top: 12px; }
.quote-card .role { opacity: 1; color: var(--text-2); }

/* Een visual (1200 × 750) die haar vak volledig vult, zoals een video met
   object-fit: cover. Voor vakken die niet 16:10 zijn. */
.vak-dekkend { container-type: size; }
.vak-dekkend > iframe {
  inset: auto !important; left: 50% !important; top: 50% !important;
  width: max(100cqw, 160cqh) !important; height: max(100cqh, 62.5cqw) !important;
  transform: translate(-50%, -50%);
}

/* SEO-10 · afbeeldingen hebben nu width en height (geen verspringende layout).
   Zonder deze regel zou de hoogte uit het attribuut een verkleind beeld
   uitrekken. :where() geeft ze geen gewicht: elke bestaande regel wint. */
:where(img[width][height]) { height: auto; }