/*
 * Globale front-end stijlen.
 * Tokens (kleuren, typografie, spacing) komen uit theme.json.
 * Houd dit bestand klein: blok-specifieke CSS hoort in blocks/<naam>/style.css.
 */

:root {
  scroll-behavior: smooth;
}

/* Zichtbare, toegankelijke focus-state. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary-bright);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   Vlaardingse vlag: absoluut op paginaniveau, achter de navigatie.
   Alleen op de homepage. Positie/opacity hier in één plek.
   --------------------------------------------------------------- */
.home .wp-site-blocks {
  position: relative;
  z-index: 0;
}

.home .wp-site-blocks::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 820px;
  background-image: url(../images/vlaardingse-vlag-header.svg);
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   Geen standaard tussenruimte (blockGap, 24px) tussen de secties.
   Elke sectie regelt zijn eigen verticale padding; zo verdwijnt
   de grijze balk tussen opeenvolgende (witte) secties.
   --------------------------------------------------------------- */
.is-layout-flow > .svv-hero,
.is-layout-flow > .svv-activiteiten,
.is-layout-flow > .svv-news,
.is-layout-flow > .svv-content,
.is-layout-flow > .svv-buddies,
.is-layout-flow > .svv-cta {
  margin-block-start: 0;
}

/* ---------------------------------------------------------------
   Smallere grid-marges op mobiel, zodat de content meer breedte
   pakt. Geldt site-breed voor alle __inner-wrappers.
   --------------------------------------------------------------- */
@media (max-width: 782px) {
  [class*="svv-"][class*="__inner"] {
    padding-inline: var(--wp--preset--spacing--30);
  }
}

@media (max-width: 480px) {
  [class*="svv-"][class*="__inner"] {
    padding-inline: var(--wp--preset--spacing--20);
  }
}