/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Centered single-column hero -- H1/H2 stacked and centred near the
   top of the section, over the full-bleed background artwork. The
   section is deliberately much taller than its content: a large
   bottom padding keeps the text sitting on the artwork's pale "sky"
   area, clear of the coloured wave band, while giving the waves
   themselves room to show at full height underneath. */
@media only screen and (min-width: 0rem) {
  #hero {
    width: 100%;
    background-color: var(--parchment);
    background-image: url("../images/HEROBACKGROUND5.svg");
    background-size: cover;
    background-position: center;
  }
  #hero .cs-container {
    width: 100%;
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* Nav sits absolutely over the top of the page (see nav.css), so
       the extra top padding here clears it -- ~4.75rem of nav height
       plus the section's own breathing room. Bottom padding is much
       larger on purpose, see note above. */
    padding: calc(4.75rem + clamp(6rem, 10vw, 8rem)) 1.5rem clamp(20rem, 42vw, 28rem);
  }
  #hero .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
  }
  #hero .cs-title {
    font-family: var(--headingFont);
    font-weight: 400;
    line-height: 1.3em;
    /* 40px mobile */
    font-size: 2.5rem;
    max-width: 16ch;
    color: #006358;
    margin: 0;
  }
  #hero .cs-subhead {
    font-family: var(--bodyFont);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.7em;
    max-width: 32rem;
    margin: 0 auto;
    color: #006358;
  }
}

/* Desktop - 64rem */
@media only screen and (min-width: 64rem) {
  #hero .cs-container {
    max-width: 56rem;
    padding-top: calc(5.5rem + clamp(6rem, 10vw, 8rem));
    padding-bottom: clamp(24rem, 32vw, 34rem);
  }
  #hero .cs-title {
    /* 56px desktop */
    font-size: 3.5rem;
    max-width: 18ch;
  }
}