/* Demobalk voor de drie Rijschool Vrije Baan-sites (Basis, Plus, Compleet).
   De balk wordt door demobar.js toegevoegd, alleen als de site niet in een voorbeeld-iframe draait.
   Zolang er geen balk is, is --demobar-h 0 en blijven de sites precies zoals ze ontworpen zijn. */
:root { --demobar-h: 0px; }

.zw-demobar { position: sticky; top: 0; z-index: 35; background: #12211c; color: #e8efe9; font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
.zw-demobar .zw-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px clamp(12px, 3vw, 32px); }
.zw-demobar a { color: inherit; text-decoration: none; }
.zw-demobar a:focus-visible { outline: 2px solid #ff8a61; outline-offset: 2px; border-radius: 6px; }
.zw-tag { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.zw-tag i { width: 8px; height: 8px; border-radius: 50%; background: #e2572b; flex: none; }
.zw-tag b { color: #fff; font-weight: 700; }
.zw-pk { display: flex; gap: 4px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }
.zw-pk a { padding: 6px 12px; border-radius: 999px; min-height: 30px; display: inline-flex; align-items: center; }
.zw-pk a:hover { background: rgba(255,255,255,.1); }
.zw-pk a[aria-current="page"] { background: #e2572b; color: #fff; font-weight: 700; }
.zw-back { white-space: nowrap; }
.zw-back a:hover { color: #fff; text-decoration: underline; }
.zw-short { display: none; }
@media (max-width: 760px) {
  .zw-tag, .zw-long { display: none; }
  .zw-short { display: inline; font-weight: 700; color: #fff; }
  .zw-back { order: -1; }
}

/* Sticky, vaste en schermhoge onderdelen van de sites een balkhoogte lager zetten */
html.has-zw-demobar { scroll-padding-top: calc(var(--demobar-h) + 12px); }

/* Basis: de kop staat vast (position: fixed) en schuift bij naar beneden scrollen weg.
   De balk ligt erboven (z 50 → 55), de kop plakt eronder en schuift helemaal achter de balk weg. */
html.zw-basis { scroll-padding-top: calc(80px + var(--demobar-h)); }
html.zw-basis .zw-demobar { z-index: 55; }
html.zw-basis .top { top: var(--demobar-h); }
html.zw-basis .top.is-hidden { transform: translateY(calc(-100% - var(--demobar-h))); }
html.zw-basis .hero { height: calc(100svh - var(--demobar-h)); }

/* Plus */
html.zw-plus .hero { height: calc(100svh - var(--demobar-h)); }
html.zw-plus .plan__side { top: calc(40px + var(--demobar-h)); }
html.zw-plus .faq__title { top: calc(96px + var(--demobar-h)); }
@media (max-width: 860px) { html.zw-plus .hero { height: auto; min-height: calc(100svh - var(--demobar-h)); } }

/* Compleet: kop (z 50) plakt onder de balk (z 51), het telefoonmenu (z 120) gaat over alles heen */
html.zw-compleet { scroll-padding-top: calc(90px + var(--demobar-h)); }
html.zw-compleet .zw-demobar { z-index: 51; }
html.zw-compleet .top { top: var(--demobar-h); }
html.zw-compleet .top.is-hidden { transform: translateY(calc(-100% - var(--demobar-h))); }
html.zw-compleet .hero { height: calc(100svh - 76px - var(--demobar-h)); }
@media (max-width: 860px) { html.zw-compleet .hero { height: calc(100svh - 64px - var(--demobar-h)); } }
html.zw-compleet .faq__title,
html.zw-compleet .reviews__title,
html.zw-compleet .book__side { top: calc(110px + var(--demobar-h)); }