/* Paginagebonden CSS — page-pumps.css
   ------------------------------------------------------------------
   Verplaatst uit de inline <style>-blokken op 2026-09-04 (vervolg op A1).
   Wat hier staat is BEWUST niet naar base.css gegaan: het zijn overrides op
   gedeelde blokken (subhero, megapanel, mobilemenu, footer, midcta). Hun
   selectors matchen op 71 tot 172 andere pagina's, dus verhuizen naar de
   gedeelde laag zou die pagina's veranderen — precies de val die het
   A1-verslag beschrijft: meet op welke pagina's de selector MATCHT, niet op
   welke hij staat.

   Dit bestand hangt op dezelfde plek in de cascade als het inline blok stond
   (ná base.css en nav-chrome.css), dus het beeld is ongewijzigd.

   NOG OP TE LOSSEN: tien van deze regels conflicteren met base.css — een
   gedempte subhero-tekst, een andere schaduw, en een gecentreerde
   .midcta-variant. Dat zijn ontwerpbesluiten: kiezen tussen deze waarden en
   die van base.css, of ze als benoemde modifier vastleggen.
*/
/* =========================================================
     Resato — Overzichtspagina pompen (vervolgpagina)
     Bouwt op tokens.css + base.css + styleguide.html.
     Patroon: vervolg-header (gecentreerde variant) + intro +
     filter-pills + grote producttegels. Later herbruikbaar
     voor andere overzichten (snijkoppen, opties, …).
     ========================================================= */

  body { background: var(--mist); overflow-x: hidden; }

  /* ====================================================
     SECUNDAIR MENU (topbar) — regels: zie styleguide
     ==================================================== */
  .hero-wrap { margin: 0 clamp(16px, 1.6vw, 32px) 0; }
  /* rechts uitgelijnd op de CTA in de header: zelfde rechter-inzet als .subhero__nav */

  @media (max-width: 760px) { .topbar { display: none; } }

  /* ====================================================
     VERVOLG-HEADER (.subhero)
     Lage(re) blauwe kaart met nav + eyebrow + titel + lead.
     Hoger dan een kale balk, lager dan de home-hero.
     Breadcrumbs staan ALTIJD ónder de header (.crumbbar).
     ==================================================== */
  .subhero { position: relative; border-radius: clamp(20px, 2vw, 32px); background: var(--gradient-hero); color: #fff; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-high); }

  @media (max-width: 980px) { .subhero__menu { display: none; } }

  /* titelblok: eyebrow + grote titel + lead, links uitgelijnd op de container */

  .subhero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: var(--space-4); }

  .subhero__lead { margin-top: clamp(1rem, 2.4vh, 1.5rem); max-width: 52ch; color: rgba(255,255,255,0.8); font-size: var(--fs-lead); line-height: 1.55; }

  /* gecentreerde variant — voor overzichtspagina's */

  /* breadcrumbs — ALTIJD onder de header, op de mist */

  /* ============================================================
     UITKLAPBAAR HOOFDMENU (mega-menu)
     Toegevoegd t.o.v. acm-3060: triggers in de hero-nav én de
     floatnav openen gedeelde, fixed gepositioneerde panelen (zo
     worden ze niet geclipt door de hero-card). Volledig in de
     Liquid Force-taal — geen nieuwe kleuren of vormen.
     ============================================================ */

  /* triggers reuse de bestaande nav-link-look + een chevron */

  /* in de blauwe subhero-nav (witte tekst) */

  .subhero__menu .mega-trigger:hover, .subhero__menu .mega-trigger[aria-expanded="true"] { color: #fff; }
  .subhero__menu .mega-trigger:hover::after, .subhero__menu .mega-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

  /* in de witte floatnav-pill */

  /* gedeelde panel-laag — fixed onder de balk, nooit geclipt */
  /* top wordt per trigger in JS gezet (net onder de aangewezen nav); deze waarde is alleen fallback */
  /* geen centrering: het paneel wordt in JS horizontaal onder de actieve trigger gezet */

  /* Zachte, gelijkmatige dim over het hele scherm — geen blur, geen harde rand,
     vangt nooit de muis af (anders wordt de hover finicky). */

  /* foto vult de kolom; drukvat-blauwe gradient eroverheen houdt de tekst leesbaar */

  @media (max-width: 760px) { .megapanel { grid-template-columns: 1fr; } .megafeature { display: none; } }

  /* mobiel: accordions in het bestaande overlay-menu */

  .mm-sub.is-open { display: block; }

  /* ---------- MOBIEL MENU-OVERLAY ---------- */

  @media (min-width: 1025px) { .mobilemenu { display: none; } }

  /* burger (mobiel) in de subhero-nav */

  @media (max-width: 980px) { .subhero__cta { display: none; } .subhero__burger { display: inline-flex; margin-left: auto; } }

  /* ====================================================
     OVERZICHT — intro, filter-pills en producttegels
     ==================================================== */

  /* filter: label + pills; actieve pill = ignition */

  /* grote producttegels */

  @media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }

  /* variantenband onder het grid */

  /* ====================================================
     MID-CTA — donker afsluitmoment
     ==================================================== */
  .midcta-wrap { padding: clamp(3.5rem, 7vw, 6rem) clamp(16px, 1.6vw, 32px); }
  .midcta { position: relative; max-width: calc(var(--container) - 2 * clamp(0.5rem, 2.5vw, 2.5rem)); margin-inline: auto; background: var(--gradient-hero-reverse); color: #fff; border-radius: clamp(20px, 2vw, 32px); padding: clamp(3rem, 6vw, 5rem) clamp(1.75rem, 4vw, 3.5rem); overflow: hidden; box-shadow: var(--shadow-high); isolation: isolate; text-align: center; }
  .midcta::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse 65% 80% at 50% 20%, #000, transparent 90%); mask-image: radial-gradient(ellipse 65% 80% at 50% 20%, #000, transparent 90%); }
  .midcta > * { position: relative; z-index: 1; }
  .midcta .eyebrow { color: rgba(255,255,255,0.85); }
  .midcta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: var(--tracking-heading); color: #fff; max-width: 26ch; margin-inline: auto; margin-top: var(--space-4); }
  .midcta p { margin: var(--space-4) auto 0; max-width: 52ch; color: rgba(255,255,255,0.76); font-size: var(--fs-lead); line-height: 1.55; }

  .midcta .btn--glass { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); color: #fff; }
  .midcta .btn--glass:hover { background: rgba(255,255,255,0.18); }

  /* ====================================================
     FOOTER (structuur volgens Menu.md — zie styleguide)
     ==================================================== */

  .footer__social a:hover { background: var(--ignition); border-color: var(--ignition); color: #fff; }

  @media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
  @media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } }