/* visitabcoude.com overrides on top of the visitkijkduin.com design.
   The Kijkduin hero is sized for a two-word title; Abcoude keeps its long original H1 and intro
   (ranking content), so the hero grows with its content instead of clipping it under the header. */
.hero {
  height: auto;
  min-height: 100svh;
}

.hero-content {
  padding-top: clamp(96px, 14vh, 140px);
}

.hero-title {
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.02;
}

/* Footer column titles are <p role="heading"> (not real h2s); keep the h2 look from base.css */
.footer-col-title {
  font-family: var(--font-serif);
  line-height: 1.1;
}

/* Legibility over the photo hero (seo-deploy-gate phase 3): the Kijkduin CSS only shadows
   .page-hero-eyebrow. Measured p5 contrast of the intro text was below 4.5 without it. */
.hero-content,
.page-hero-wrap {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.35);
}

/* Extra left-side darkening where the hero text sits. Worst-case intro-text contrast
   (text vs lightest 5% of the photo behind it) went from 4.52 to 6.98 at 1366px, 5.38 at 390px. */
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(15, 33, 43, 0.55) 0%, rgba(15, 33, 43, 0.35) 45%, rgba(15, 33, 43, 0) 75%),
    linear-gradient(180deg, rgba(15, 33, 43, 0.68) 0%, rgba(15, 33, 43, 0.58) 40%, rgba(15, 33, 43, 0.55) 70%, rgba(15, 33, 43, 0.85) 100%);
}