/* Global sticky-header + anchor/hero spacing fix */
:root {
  /* Fallback height; real value is set by JS */
  --header-h: 64px;
}

/* Make your header sticky (works with your existing .site-header markup) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Push content below the sticky header once we’ve measured it */
body.has-fixed-header main {
  /* Account for iOS safe-area and dynamic header height */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

/* Headings/anchors must not hide under the sticky header when scrolled-to */
h1, h2, h3, h4, h5, h6, [id] {
  scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px);
}

/* Hero section spacing (so H1 never hides under header) */
.hero {
  padding-top: calc(var(--header-h) + 16px);
}

/* On smaller screens give even more breathing room */
@media (max-width: 600px) {
  .hero {
    padding-top: calc(var(--header-h) + 32px);
  }
}

/* Optional: when viewport is wide, reduce the anchor offset a bit */
@media (min-width: 900px) {
  h1, h2, h3, h4, h5, h6, [id] {
    scroll-margin-top: calc((var(--header-h) * 0.7) + 12px);
  }
}

/* --- Extra handling for heroes with illustration --- */
@media (max-width: 600px) {
  .hero.has-illu {
    padding-top: calc(var(--header-h) + 40px) !important; /* extra room */
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .hero.has-illu > div:first-child { order: 1; }
  .hero.has-illu #hero-illu-slot   { order: 2; justify-self: center; }
}

.hero.has-illu h1 {
  margin-top: 6px;
}

/* Hero illustration styling */
.hero-illu {
  max-width: 360px;
  height: auto;
  justify-self: end;
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}