/*
 * ============================================================
 * SKYLINE MOTIF  —  skyline.css
 * ============================================================
 * A recurring low-opacity Springfield skyline silhouette used
 * as a background layer across sections, tying the whole site
 * back to one place instead of generic "nonprofit + trees"
 * imagery.
 *
 * How to add the skyline to a section
 * ------------------------------------
 * 1. Add position: relative + overflow: hidden to the section
 * 2. Add this markup as the section's first child:
 *
 *   <div class="rg-skyline" aria-hidden="true"></div>
 *
 * 3. Add class="rg-skyline--dark" if the section has a dark
 *    (green) background, so the tint stays visible without
 *    fighting the text sitting on top of it.
 *
 * The image itself lives at assets/img/skyline-silhouette.svg
 * and is loaded once as a CSS background — edit that file to
 * change the buildings, edit this file to change where/how
 * it's tinted.
 * ============================================================
 */

.rg-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  pointer-events: none;
  background-image: var(--rg-skyline-img);
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  opacity: var(--rg-skyline-opacity-light);
  z-index: 0;
}

.rg-skyline--dark {
  opacity: var(--rg-skyline-opacity-dark);
}

/* Sections using the skyline need their content raised above
   it and the section itself set to position:relative — done
   per-section below so existing layout is untouched.

   Note: .hero-section is NOT in this list. The hero now uses a
   real background photo (see hero.css) instead of the skyline
   silhouette, and handles its own position/z-index stacking. */

.mission-strip,
.site-footer {
  position: relative;
  overflow: hidden;
}

.mission-strip > *:not(.rg-skyline),
.site-footer > *:not(.rg-skyline) {
  position: relative;
  z-index: 1;
}

/* Shorter on smaller screens so it doesn't dominate compact
   sections like the mobile mission strip */
@media (max-width: 640px) {
  .rg-skyline {
    height: 90px;
  }
}