/* ==========================================================================
   demo-strook.css — de demonstratiebanner boven de twee Molen & Boon-demo's
   ==========================================================================

   Deze banner is content van A11y Agency, niet van de demo-webshop. Hij wordt
   ná de eigen stylesheet van de webshop ingeladen en is volledig gescoped
   binnen .demo-strook, zodat hij:

     - zichzelf bereikbaar en leesbaar maakt (eigen focusring, eigen contrast),
     - en NIETS repareert of maskeert aan de webshop eronder. In de
       "voor"-versie staat sitebreed `:focus { outline: none }`; die regel
       blijft daar gewoon staan en werken — alleen binnen deze strook geldt
       een eigen, zichtbare focusring.

   Contrast, nagerekend met de WCAG-formule (relatieve luminantie):
     #FFFFFF op #1C2B33 : 14,56:1  (banner-tekst)          AA + AAA
     #8ED9CB op #1C2B33 :  8,97:1  (links in de banner)    AA + AAA
     #E9EFF2 op #1C2B33 : 12,54:1  (de kleine fictie-regel) AA + AAA
     focusring #FFFFFF op #1C2B33 : 14,56:1 (eis niet-tekst >= 3:1)
   ========================================================================== */

.demo-strook {
  background: #1c2b33;
  color: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.9rem 0;
  border-bottom: 4px solid #8ed9cb;
}

.demo-strook-binnen {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.demo-strook p {
  margin: 0 0 0.35rem;
  max-width: 70ch;
  color: inherit;
}

.demo-strook p:last-child {
  margin-bottom: 0;
}

.demo-strook strong {
  font-weight: 700;
}

.demo-strook-links a {
  color: #8ed9cb;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 600;
}

.demo-strook-links a:hover {
  text-decoration-thickness: 0.15em;
}

/* Eigen, zichtbare focusring binnen de strook. Hogere specificiteit dan de
   `:focus { outline: none }` van de voor-versie, dus deze wint — maar
   uitsluitend hier. */
.demo-strook a:focus {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: none;
}

.demo-strook a:focus:not(:focus-visible) {
  outline: none;
}

.demo-strook a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.demo-strook-scheiding {
  padding-inline: 0.4rem;
  color: #e9eff2;
}

.demo-strook-klein {
  font-size: 0.9rem;
  color: #e9eff2;
}

@media (prefers-reduced-motion: reduce) {
  .demo-strook * {
    transition: none !important;
    animation: none !important;
  }
}