/* Landing page polish (index.html only - admin.html doesn't load this).
   Ready-made classes a beheerder can type into a Scherm Elementen
   entity's HtmlBeginTag, e.g. <h1 class="hero-title">, on top of
   whatever id/class/style they want to write directly - see the chat
   this came out of, 2026-09-14 (deriving HtmlEindTag from the tag name
   instead of storing it separately). */

#schermInhoud {
  /* Dark overlay gradient layered over the true-size Africa/Europe map
     (images/africa_vs_europe.svg, built 2026-09-14 - see the chat this
     came out of) so title/body text stays readable regardless of exactly
     how "cover" crops the image at a given viewport width. Flat gradient
     kept as the final fallback if the image fails to load. */
  background-image:
    linear-gradient(160deg, rgba(15, 22, 38, 0.45) 0%, rgba(15, 22, 38, 0.6) 100%),
    url('/images/africa_vs_europe.svg');
  /* Per-layer: gradient still covers fully, but the map itself is sized
     independently - see the comment above this. A short, wide hero card
     (portrait phone: title+lead barely need any height) made plain
     "cover" zoom in on a thin vertical sliver of this 1267x704
     landscape-shaped map, cropping Africa - the entire point of the
     graphic - down to an unrecognizable fragment (Ron's report,
     2026-09-15). Switching to "contain" fixed the cropping but then read
     as too small on that same card (Ron's follow-up, same day) - on a
     card narrower than the map's own ~1.8:1 ratio, "contain" fits by
     matching the card's width, i.e. exactly what "100% auto" computes
     here too. "200% auto" is that same fit doubled - width auto still
     preserves the SVG's own aspect ratio, so this isn't a keyword, just
     twice the size, still centered and still never stretched. It now
     overflows the card on every side, cropped by the element's default
     background-clip (border-box) evenly via background-position:center,
     not lost off one particular edge the way plain "cover" was. */
  background-size: cover, 200% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 12%;
  background-color: #0f1626;
  color: #f4f6fb;
  border-radius: 1rem;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.6);
}

#schermInhoud a { color: #8fb8ff; }

/* Large opening title. */
.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Intro/lead paragraph directly under the title. */
.hero-lead {
  font-size: 1.15rem;
  color: #c7d0e8;
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 1.5rem;
}

/* Secondary heading further down the page. */
.hero-subtitle {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #f4f6fb;
  text-align: center;
}

/* Regular body paragraph. */
.hero-body {
  color: #dde3f5;
  line-height: 1.6;
}

/* Optional accent-colored text, for a single highlighted word/phrase. */
.hero-accent { color: #8fb8ff; }

/* Optional pale/muted variant, for fine print under the hero. */
.hero-muted { color: #9aa5c4; font-size: 0.9rem; }