/* =========================================================
   Homepage Top Heroes — style.css (restored styling + locked hover)
   This version:
   - Keeps hero/card beige at all times (no white hover)
   - Re-styles CTA as a consistent button (so it doesn't rely on theme)
   - Prevents link/button colour changes on hover inside the hero card
   ========================================================= */

/* ============================
   HEADER BAR ABOVE HERO
   ============================ */
.hth-header-bar {
  background: #3F4144 !important;
  color: #FFFFFF !important;
  padding: 20px 26px !important;

  font-family: 'Stack Sans Headline', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 20px !important;
  letter-spacing: 0.5px !important;

  margin: 0 !important;
  border-radius: 0 !important;
}
.hth-header-bar h2 {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  color: #FFFFFF !important;
}

/* ============================
   HERO WRAPPER (BEIGE BOX)
   ============================ */
.hth-hero{
  display:flex;
  gap:40px;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
  padding-top:30px !important;

  background-color:#f7f5f3 !important; /* lock beige */
  transition:none !important;
}

/* Keep hero beige on hover/focus */
.hth-hero:hover,
.hth-hero:focus-within{
  background-color:#f7f5f3 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

/* ============================
   HERO IMAGE
   ============================ */
.hth-image{ flex:1; }
.hth-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ============================
   HERO CONTENT COLUMN
   ============================ */
.hth-content{
  flex:1;
  display:flex;
  align-items:center;
}

.hth-card{
  background-color:#f7f5f3 !important; /* lock beige */
  padding:40px;
  width:100%;
  transition:none !important;
}

.hth-card:hover,
.hth-card:focus-within{
  background-color:#f7f5f3 !important; /* lock beige */
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

.hth-card h2{
  margin-top:0;
  font-size:2rem;
}

.hth-text p{
  margin-bottom:12px;
}

/* ============================
   CTA BUTTON (do not depend on theme)
   ============================ */
a.dhb-btn.hth-btn{
  margin-top:20px;
  display:inline-block;

  background:#3F4144;
  border:2px solid #3F4144;
  color:#FFFFFF;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
}

/* Keep CTA identical on hover/focus/active */
a.dhb-btn.hth-btn:hover,
a.dhb-btn.hth-btn:focus,
a.dhb-btn.hth-btn:active,
a.dhb-btn.hth-btn:visited{
  background:#3F4144 !important;
  border-color:#3F4144 !important;
  color:#FFFFFF !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
}

/* ============================
   Links inside the hero card: do not colour-shift on hover
   (excludes the CTA button which is styled above)
   ============================ */
.hth-card a:not(.dhb-btn),
.hth-card a:not(.dhb-btn):visited,
.hth-card a:not(.dhb-btn):hover,
.hth-card a:not(.dhb-btn):focus,
.hth-card a:not(.dhb-btn):active{
  color: inherit !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:768px){
  .hth-hero{flex-direction:column;}
  .hth-card{padding:26px;}
}


/* ============================
   SQUARE CORNERS (no rounding)
   ============================ */
.hth-hero,
.hth-card,
.hth-header-bar,
.hth-image img,
a.dhb-btn.hth-btn{
  border-radius: 0 !important;
}