/* ============================================================
   De Blitz-balk boven een demo.

   Binnen de demo-omgeving hangt elke demo onder een eigen
   uitlegpagina. Deze balk zegt van wie het voorbeeld is en biedt
   de weg terug. Hij staat BOVEN de eigen kopbalk van de demo en
   neemt die niet over: het interieur van een demo blijft neutraal,
   want de belofte is dat jouw systeem in jouw stijl wordt gebouwd.

   Dit bestand hoort bij de hub, niet bij de demo's. Het wordt
   tijdens de build in de gekopieerde pagina's gezet, zodat een
   demo die los draait er niets van merkt.

   De drie kleuren staan als token op :root en niet als losse waarde
   in de regels. Anders meet de design-linter ze als kleur-drift op
   het palet van de demo — en veertig verwachte waarschuwingen maken
   een linter waardeloos.
   ============================================================ */

/* De merkletter hoort ook in de balk: dit is Blitz Branders die spreekt, boven
   een demo die zijn eigen neutrale letter houdt. Momo Trust Sans is SIL OFL
   (M-N Associates / TYPE Associates) — zie 01-brand/rebrand-2026/typografie.md §9. */
@font-face {
  font-family: "Momo Trust Sans";
  src: url("MomoTrustSans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blitz-kobalt: #4B53CA;  /* canon 10-07 */
  --blitz-room:   #F5EFE1;
  --blitz-inkt:   #1A1916;
}

.blitz-balk {
  background: var(--blitz-kobalt);                 /* kobalt — Blitz Branders, canon 10-07 */
  color: var(--blitz-room);                      /* room */
  border-bottom: 1.5px solid var(--blitz-inkt);  /* inkt */
  font-family: "Momo Trust Sans", system-ui, -apple-system, sans-serif;
}

.blitz-balk__rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 32px;
  min-height: 48px;
}

.blitz-balk__merk {
  display: inline-flex; align-items: center; gap: 12px;
  /* 23px hoog was onder de WCAG-ondergrens van 24px. 44px is comfortabel en
     kost hier niets: de balk is toch al 48px hoog. */
  min-height: 44px;
  color: var(--blitz-room); text-decoration: none;
  font-size: 14px; line-height: 1.35;
}
.blitz-balk__merk:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.blitz-balk__merk img { width: 22px; height: 23px; flex: none; }
.blitz-balk__merk strong { font-weight: 700; }

.blitz-balk__terug {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 8px 14px;
  color: var(--blitz-room); text-decoration: none;
  font-size: 14px; font-weight: 500;
  border: 1.5px solid var(--blitz-room); border-radius: 999px;
}
.blitz-balk__terug:hover { background: var(--blitz-room); color: var(--blitz-kobalt); }
.blitz-balk__terug:focus-visible { outline: 2px solid var(--blitz-room); outline-offset: 3px; }

@media (max-width: 640px) {
  .blitz-balk__rij { padding: 8px 24px; }
  .blitz-balk__merk { font-size: 13px; }
}