html {
  /* De kop plakt bovenaan op elk scherm, dus een ankersprong moet eronder
     landen en niet erachter. De hoogte wordt gemeten in Base.astro en hier als
     --kop-hoogte gebruikt; het getal erachter is de terugval voor het geval het
     script nog niet gedraaid heeft. */
  scroll-padding-top: calc(var(--kop-hoogte, 130px) + 14px);
}

*, *::before, *::after { box-sizing: border-box; }

/* HIDDEN MOET OOK ECHT VERBERGEN
   De browser geeft [hidden] een display: none, maar een display in een eigen
   stijlregel wint daarvan. Zo bleef de knop "Laad meer" op /aanbod/ staan bij
   vier zoekresultaten: het blok stond op hidden en tegelijk op display: flex.
   Deze regel zet dat recht voor de hele site, zodat dezelfde val niet ergens
   anders opnieuw toeslaat (gemeld door Jasper, 19 september 2026). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* GEEN AFBREEKSTREEPJES IN KOPPEN
   Hier stond het automatisch afbreken aan, om te voorkomen dat een lang woord
   uit een kop zou lopen. Het gevolg was dat de browser koppen ging afbreken zodra het krap
   werd, en dan ook onze eigen naam: op /werken-bij/ stond "WERKEN BIJ OUTDOOR
   VAL-" met "LEY" op de volgende regel (Jasper, 9 september 2026: dat mag niet
   voorkomen). Een merknaam breek je niet af, en in een display-letter van 50
   pixels valt zo'n streepje extra op.

   Op manual laat de browser alleen afbreken waar wij zelf een zacht
   afbreekstreepje zetten, en dat doen we nergens; koppen wikkelen dus op de
   spaties. overflow-wrap: break-word blijft als vangnet voor een woord dat echt
   niet op een regel past, en dat breekt zonder streepje. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: manual;
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--text-title); line-height: var(--text-title-lh); }
h2 { font-size: var(--text-section); line-height: var(--text-section-lh); }
h3 { font-size: var(--text-card); line-height: var(--text-card-lh); }

p { margin: 0 0 var(--space-4); }

a { color: var(--text-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

:focus-visible { outline: var(--border-width-strong) solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-on); }

/* Markering — spaarzaam, nooit voor leestekst */
.ov-marker {
  font-family: var(--font-marker);
  font-size: var(--text-marker);
  color: var(--accent-ink);
}

/* Kicker — klein label in kapitalen */
.ov-kicker {
  font-family: var(--font-marker);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  opacity: 0.7;
}

/* Cijfers: tijden, prijzen, afstanden */
.ov-figure { font-weight: var(--weight-figure); font-variant-numeric: tabular-nums; }

/* Het merkteken als masker: kleur volgt color */
.ov-mark, .ov-mark-full {
  display: block;
  background: currentColor;
  flex: none;
}
.ov-mark {
  -webkit-mask: url("../assets/logo-outdoor-valley-kop.png") center / contain no-repeat;
  mask: url("../assets/logo-outdoor-valley-kop.png") center / contain no-repeat;
  aspect-ratio: 642 / 676;
}
.ov-mark-full {
  -webkit-mask: url("../assets/logo-outdoor-valley-volledig.png") center / contain no-repeat;
  mask: url("../assets/logo-outdoor-valley-volledig.png") center / contain no-repeat;
  aspect-ratio: 1;
}

/* KAARTEN (Jasper, 9 oktober 2026: "deze blokken op /feest zien er net even
   anders uit dan de blokken op /bedrijven. Maak dit consistent op de hele
   website.") Twee vormen, en elke kaart in een lichte sectie is een van de twee:
   - .ov-kaart: aanbod met een prijs of een knop. Wit, haarlijn, hoeken van 18,
     en een balk van 4 pixels in de accentkleur van het onderdeel: onder de foto
     (.ov-kaart-balk), of bovenaan als er geen foto is (.ov-kaart-balk--boven).
   - .ov-kaart--zacht: kleiner of doorverwijzend. Zand, geen rand, hoeken van 16.
   De pagina's zetten hun eigen inline-stijl; deze klassen gaan daar bewust
   overheen, zodat een afwijkende hoek of tint niet meer kan sluipen. Kaarten in
   een donkere sectie houden hun eigen vorm. */
.ov-kaart {
  position: relative;
  background: #fff !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: 18px !important;
  overflow: hidden;
}
.ov-kaart--zacht {
  position: relative;
  background: var(--ov-sand) !important;
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.ov-kaart-balk {
  display: block;
  flex: none;
  height: 4px !important;
  background: var(--accent) !important;
}
.ov-kaart-balk--boven { position: absolute; top: 0; left: 0; right: 0; }

/* MEEST GEKOZEN (Jasper, 9 oktober 2026)
   Eén manier om het meest gekozen arrangement, abonnement of ticket uit te
   lichten, overal hetzelfde. Eerst werd zo'n kaart helemaal donkerblauw, en dat
   was te hard. Nu een zachte tint van de accentkleur van het onderdeel, een rand
   in die kleur en een schaduw die er licht naar kleurt. Opvallend, maar het
   blijft dezelfde kaart als ernaast. De pil zegt waarom hij opvalt. */
.ov-favoriet {
  background: color-mix(in srgb, var(--accent) 8%, #fff) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 75%, #fff) !important;
  box-shadow: 0 1px 2px rgba(21, 33, 43, 0.06), 0 16px 32px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.ov-favoriet-pil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-marker);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ov-favoriet-pil svg { width: 12px; height: 12px; flex: none; }