/* Structurele regels die altijd nodig zijn, ook als in het CMS een aangepaste
   stylesheet is gepubliceerd. Kleuren komen uit die stylesheet. */

/* Toetsenbordgebruikers slaan de vaste navigatie over en houden overal een
   duidelijke focusring. De link blijft buiten beeld totdat hij focus krijgt. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--accent, #f5a623);
  color: #1a1d24;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-hover, #ffbf47);
  outline-offset: 3px;
}

#hoofdinhoud:focus { outline: none; }

#nav-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text, #e0e3f0);
  cursor: pointer;
}

@media (max-width: 767px) {
  #nav-toggle { display: flex; padding: 8px; }

  /* Interne pagina's starten sneller met hun inhoud; de homepage behoudt de
     ruimere campagnehero. */
  .public-page:not(.page-home) .hero {
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .public-page:not(.page-home) .hero + section.py-12,
  .public-page:not(.page-home) .hero + section.py-16,
  .public-page:not(.page-home) .hero + section.py-20 {
    padding-top: 32px;
  }
}

@media (min-width: 768px) {
  .public-page:not(.page-home) .hero {
    padding-top: 72px;
    padding-bottom: 56px;
  }
}