/* Basis: reset, body, typografie, keyframes (uit de helmet-stijlen van het design). */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--wm-font);
  background: var(--wm-navy);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Globale linkkleur, met lage specificiteit zodat componentklassen altijd winnen. */
:where(a) { color: var(--wm-navy); text-decoration: none; }
:where(a:hover) { color: var(--wm-navy-hover); }

button { font-family: inherit; }

/* Verborgen maar leesbaar voor screenreaders */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
[hidden] { display: none !important; }

/* Site-wrapper (het buitenste div uit het design) */
.site { background: var(--wm-navy); color: #fff; overflow-x: hidden; }

/* Keyframes */
@keyframes wm-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wm-pop { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wm-bob { 0%, 100% { transform: translateY(2.5px); } 50% { transform: translateY(-2.5px); } }

/* Verborgen scrollbar (carrousel) */
.wm-scroll::-webkit-scrollbar { display: none; }
.wm-scroll { scrollbar-width: none; }

/* Admin bar: fixed header eronder schuiven */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track, .ticker__bob { animation: none !important; }
}