/* Scope: ONLY the Articles hero module */
.newsflash-hero {
  position: relative;
  color: #fff;

  /* tweakables */
  --scc-hero-band-bg: rgba(35, 53, 102, 0.92);
  --scc-hero-pad-x: clamp(16px, 2vw, 32px);
  --scc-hero-pad-top: 1rem;     /* space above title */
  --scc-hero-pad-bottom: 1rem; /* space below body text */
}

/* Image full width */
.newsflash-hero .newsflash-hero__figure { margin: 0; }
.newsflash-hero .newsflash-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Positioning context */
.newsflash-hero .newsflash-hero__item { position: relative; }

/* Caption band (mobile-first: below the image) */
.newsflash-hero .newsflash-caption {
  background: var(--scc-hero-band-bg);
  padding: var(--scc-hero-pad-top) var(--scc-hero-pad-x) var(--scc-hero-pad-bottom);
}

/* Title + paragraph */
.newsflash-hero .newsflash-title {
  margin: 0 0 0.25rem 0;
  font-size: clamp(1.375rem, 6vw, 2rem);
  line-height: 1.15;
  font-weight: 700;
}
.newsflash-hero .newsflash-caption p {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  font-weight: 400;
}

/* Links */
.newsflash-hero .newsflash-caption a { color: #fff; }
.newsflash-hero .newsflash-caption p a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.newsflash-hero .newsflash-title a {
  text-decoration: none;
}
.newsflash-hero .newsflash-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.newsflash-hero .newsflash-caption a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Desktop/tablet: overlay caption at bottom of image */
@media (min-width: 641px) {
  .newsflash-hero .newsflash-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .newsflash-hero .newsflash-title {
    font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  }
}
/* -------------------------------------------------
   0) Normalize the CTA header block (real culprits)
   ------------------------------------------------- */

/* Your user.css sets padding: .4rem 0 ... → remove just the bottom on home */
.container.site-header__utility-row { padding-bottom: 0 !important; }

/* Default margins on <nav> / <ul> create vertical gaps — zero them */
.header-cta-nav { margin: 0 !important; }
.header-cta-list { margin: 0 !important; padding-left: 0; }

/* If <li> have display:block and own bottom margins, neutralize on the header row */
.header-cta-list > li { margin-bottom: 0 !important; }

/* Keep the gold bar seam tight */
.scc-gold-bar { margin-bottom: 0 !important; }
header { margin-bottom: 0 !important; }

/* The hero should not add spacing from above */
#maincontent.site-main.container { margin-top: 0 !important; padding-top: 0 !important; }
.newsflash-hero { margin-top: 0 !important; position: relative; z-index: 1; }

/* -----------------------------------------------
   1) Desktop ≥1200px: float CTA over the hero
   ----------------------------------------------- */

@media (min-width: 1200px) {
  /* Tune how far the CTA overlaps onto the hero */
  :root { --cta-overlap: 180px; } /* try 160–220 */

  /* Put header/CTA above the hero in the stacking order */
  header { position: relative; z-index: 40; }
  .container.site-header__utility-row,
  .site-header__cta-group { position: relative; z-index: 45; }

  /* Option A (most robust with your DOM):
     Pull the entire header down over the hero by using a NEGATIVE bottom margin,
     and give <main> equal top padding so the page flow stays stable. */
  header { margin-bottom: calc(-1 * var(--cta-overlap)) !important; }
  #maincontent.site-main.container { padding-top: var(--cta-overlap) !important; }

  /* Ensure the blue caption band sits above the image but below the CTA */
  .newsflash-hero .newsflash-caption { position: relative; z-index: 2; }
}

/* ---------------------------
   2) (Optional) absolute CTA
   ---------------------------
   If you prefer ONLY the CTA group to overlap (not the whole header),
   use this instead of the negative header margin above:

@media (min-width: 1200px) {
  header { position: relative; z-index: 30; }
  .container.site-header__utility-row { position: relative; z-index: 35; padding-bottom: 0 !important; }
  .site-header__cta-group {
    position: absolute;
    right: clamp(16px, 2vw, 32px);
    bottom: calc(-1 * var(--cta-overlap));
    z-index: 45;
  }
  #maincontent.site-main.container { padding-top: var(--cta-overlap) !important; }
}
*/