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

/* Two opt-in variants, picked by which modifier class sits on #hero:
   `cs-hero-split` (text column + full-bleed image column, 45/55, image
   right) or `cs-hero-centered` (full-width background, centered text
   column). Both keep the nav's dark ink so its white text/logo stay
   legible without needing a nav-level scrim -- the text column here is
   a dark panel, not the site's light cream, specifically so the
   transparent nav reads consistently over every part of the hero.

   Height is auto/content-driven on purpose -- no min-height: 100svh
   lock. No border-radius or box-shadow on hero images anywhere: full
   bleed only. */
@media only screen and (min-width: 0rem) {
  #hero {
    position: relative;
    overflow: hidden;
    background-color: var(--secondaryDark);
    background-image: linear-gradient(rgba(33, 42, 49, 0.6), rgba(33, 42, 49, 0.6)), url("../images/herobackgroundimage.jpg");
    background-size: cover;
    background-position: center;
    --cs-nav-text: #fff;
  }
  #hero .cs-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #hero .cs-content {
    width: 100%;
    max-width: 45rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Top padding gets an extra ~6rem on top of the matching bottom
       value -- the nav bar sits absolutely over the hero and eats into
       the top padding visually, so without this the content reads as
       closer to the top than the bottom even though the box padding
       itself is even. */
    padding: calc(clamp(11rem, 22vw, 14rem) + 6rem) 1.5rem clamp(11rem, 22vw, 14rem);
  }
  #hero .cs-topper {
    color: var(--primary);
  }
  #hero .cs-title {
    font-family: var(--headingFont);
    font-weight: 500;
    line-height: 1.15em;
    /* 44px mobile */
    font-size: 2.75rem;
    max-width: 17ch;
    color: #fff;
    margin: 0 0 1.25rem;
  }
  #hero .cs-subhead {
    font-family: var(--bodyFont);
    font-size: 1.25rem;
    line-height: 1.55em;
    max-width: 36rem;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8);
  }
}

/* Desktop - 64rem */
@media only screen and (min-width: 64rem) {
  #hero .cs-content {
    max-width: 52rem;
  }
  #hero .cs-title {
    /* 68px desktop */
    font-size: 4.25rem;
    max-width: 19ch;
  }
}

/*-- -------------------------- -->
<---     Centered variant        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
  #hero.cs-hero-centered .cs-content {
    width: 100%;
    max-width: 45rem;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    padding: calc(clamp(11rem, 22vw, 14rem) + 6rem) 1.5rem clamp(11rem, 22vw, 14rem);
  }
  #hero.cs-hero-centered .cs-title {
    max-width: 13ch;
  }
  #hero.cs-hero-centered .cs-subhead {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
}