:root {

    --cassiopeia-color-primary: #428bca;
    --cassiopeia-color-link: 	#428bca;		
    --cassiopeia-color-hover:   #3876ac;

    --cassiopeia-font-family-body: "sourcesanspro-regular",""Roboto", sans-serif;
    --cassiopeia-font-family-headings: "sourcesanspro-bold","Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
}

.outer {
  .header {
     background-image: none;
  }
}

/* ==========================================================================
   Saved by Grace Shepherd Rescue — page heroes & intro bands
   Append to: media/templates/site/cassiopeia_cubecreativej5/css/user.css

   Markup lives in two places:
     • Hero text  → a single HTML layer inside each Smart Slider slide
     • Intro band → a Custom HTML module below the hero
   Both are plain markup, so everything below is yours to edit.
   ========================================================================== */

:root {
  --sbg-orange:       #D4792A;
  --sbg-orange-dark:  #B8651F;
  --sbg-navy:         #17335A;
  --sbg-cream:        #F5F0EC;
  --sbg-tan:          #D4A86B;
}

/* --------------------------------------------------------------------------
   HERO
   <div class="sbg-hero">
     <h1 class="sbg-hero__title">…</h1>
     <p  class="sbg-hero__sub">…</p>          (optional)
     <p  class="sbg-hero__actions">…</p>      (optional)
   </div>

   Add sbg-hero--inner for the shorter interior-page heroes.
   Add sbg-hero--left  to left-align (home mockup treatment).
   -------------------------------------------------------------------------- */

.sbg-hero {
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.sbg-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: var(--cassiopeia-font-weight-headings);
  line-height: 1.08;
  font-size: clamp(2rem, 5.2vw, 3.75rem);
}

.sbg-hero__sub {
  margin: .9rem auto 0;
  max-width: 52rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
}

/* Uppercase subhead, as drawn on the home comp */
.sbg-hero__sub--caps {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: clamp(.85rem, 1.15vw, 1rem);
  line-height: 1.45;
}

.sbg-hero__actions {
  margin: 1.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* Interior pages: shorter band, smaller headline, no subhead */
.sbg-hero--inner .sbg-hero__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

/* Left-aligned variant */
.sbg-hero--left { text-align: left; }
.sbg-hero--left .sbg-hero__sub { margin-left: 0; }
.sbg-hero--left .sbg-hero__actions { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.sbg-btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}

.sbg-btn--orange { background: var(--sbg-orange); color: #fff; }
.sbg-btn--orange:hover,
.sbg-btn--orange:focus { background: var(--sbg-orange-dark); color: #fff; }

.sbg-btn--light { background: var(--sbg-cream); color: var(--sbg-navy); }
.sbg-btn--light:hover,
.sbg-btn--light:focus { background: #fff; color: var(--sbg-navy); }

/* --------------------------------------------------------------------------
   INTRO BAND — the orange strip directly under each hero
   <div class="sbg-introband"><p>…</p></div>
   -------------------------------------------------------------------------- */

.sbg-introband {
  background: var(--sbg-orange);
  color: #fff;
}

.sbg-introband > * {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.sbg-introband a { color: #fff; text-decoration: underline; }

/* Breaks the band out to full width if the module position sits inside a
   constrained container. Drop this class if the position is already full-bleed. */
.sbg-introband--bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .sbg-hero__title { line-height: 1.15; }
  .sbg-hero__sub   { margin-top: .65rem; }
  .sbg-hero__actions { margin-top: 1.1rem; }
  .sbg-btn { padding: .6rem 1.1rem; font-size: .78rem; }
  .sbg-introband > * { padding: 1.15rem 1rem; }
}

/* --------------------------------------------------------------------------
   COLOUR GUARDS
   The template sets a dark colour on p / li, which beats inheritance from
   .sbg-hero, so the white is stated explicitly here.
   -------------------------------------------------------------------------- */

.sbg-hero p,
.sbg-hero li,
.sbg-hero__sub { color: #fff; }

.sbg-introband p,
.sbg-introband li { color: #fff; }