/* Home Angels — site styles
   Covers the helper classes used in the page copy, plus a handful of corrections to Divi's
   defaults. Loaded on every page by the ha-interactives mu-plugin.

   Deliberately narrow in scope: everything structural is set through Divi's own decoration
   attributes so it stays editable in the Visual Builder. What lives here is only what Divi
   has no field for. */

:root {
  --ha-primary: #0C7264;
  --ha-primary-dark: #08544A;
  --ha-primary-tint: #E8F2F0;
  --ha-ink: #1F2A2E;
  --ha-body: #42525A;
  --ha-sand: #F6F2EC;
  --ha-line: #DFE5E3;
}

/* ---------- helper classes used in page copy ---------- */

.ha-eyebrow {
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--ha-primary) !important;
  margin-bottom: 14px !important;
}

.ha-stat {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 4.4vw, 2.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--ha-primary) !important;
  margin-bottom: 6px !important;
}

.ha-stat-cap {
  font-size: .95rem !important;
  line-height: 1.45 !important;
  color: var(--ha-body) !important;
  margin-bottom: 0 !important;
}

.ha-note {
  color: #6B7A80 !important;
  font-size: .93rem !important;
  line-height: 1.6 !important;
}

.ha-package-when {
  color: var(--ha-primary-dark) !important;
  font-weight: 600 !important;
  font-size: .97rem !important;
  margin-bottom: 12px !important;
}

.ha-contact-line { margin-bottom: 18px !important; }
.ha-contact-line strong {
  display: block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: none;
  color: var(--ha-primary-dark);
  margin-bottom: 3px;
}

.ha-fact-label {
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: none;
  color: var(--ha-primary-dark) !important;
  margin-bottom: 8px !important;
}

.ha-fact {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--ha-ink) !important;
}

/* Links inside the teal enquiry band. */
.ha-band-alt { margin-bottom: 0 !important; }
.ha-band-alt a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- body copy ---------- */

/* Divi's reset leaves list markers hanging outside the text column and kills the spacing. */
.et_pb_text ul,
.et_pb_blurb_description ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 18px;
}

.et_pb_text ul li,
.et_pb_blurb_description ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  line-height: 1.65;
}

.et_pb_text ul li::before,
.et_pb_blurb_description ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ha-primary);
}

.et_pb_text ul li:last-child { margin-bottom: 0; }

/* In-copy links need to look like links — Divi inherits body colour by default. */
.et_pb_text a:not(.et_pb_button),
.et_pb_blurb_description a {
  color: var(--ha-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.et_pb_text a:not(.et_pb_button):hover,
.et_pb_blurb_description a:hover { color: var(--ha-primary); }

/* ---------- buttons ---------- */

/* Button grouping is handled further down, under "button groups" — it needs the column's
   flex context, not a display change on the wrapper. */

.et_pb_button { transition: background-color .15s ease, transform .15s ease; }
.et_pb_button:hover { transform: translateY(-1px); }
.et_pb_button::after { display: none !important; }  /* Divi's arrow glyph on hover */

/* ---------- cards ---------- */

/* Images at the top of a card should meet its edges rather than float in padding. */
.et_pb_column .et_pb_image { margin-bottom: 22px; }
.et_pb_column .et_pb_image img { width: 100%; object-fit: cover; }

/* Keep card images a consistent height so a row of cards lines up. */
.et_pb_column .et_pb_image .et_pb_image_wrap { display: block; }
.et_pb_column .et_pb_image .et_pb_image_wrap img { aspect-ratio: 3 / 2; }

/* ---------- accessibility ---------- */

/* Divi suppresses focus rings in several places. The enquiry path has to be keyboard
   operable, and the audience for this site skews towards people who need that. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid var(--ha-primary-dark) !important;
  outline-offset: 3px !important;
}

.ha-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 14px 22px;
  background: var(--ha-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.ha-skip-link:focus {
  left: 0;
  top: 0;
}

/* ---------- misc ---------- */

/* Long words and email addresses must not force horizontal scroll at 390px. */
.et_pb_text, .et_pb_blurb_description { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .et_pb_button:hover { transform: none; }
}

/* ---------- header ---------- */

/* Divi's default menu blue has nothing to do with this brand. */
#top-menu a,
.et_mobile_menu a { color: var(--ha-ink) !important; font-weight: 500; }
#top-menu a:hover,
.et_mobile_menu a:hover { color: var(--ha-primary) !important; opacity: 1; }
#top-menu li.current-menu-item > a,
.et_mobile_menu li.current-menu-item > a { color: var(--ha-primary) !important; font-weight: 600; }
#et_top_search .et-search-form input { color: var(--ha-ink); }
#et_search_icon::before { color: var(--ha-ink); }
#main-header { box-shadow: 0 1px 0 var(--ha-line); }

/* ---------- button groups ---------- */

/* Divi 5 columns are flex containers, so a button wrapper's `display` is blockified and
   `inline-block` has no effect — two buttons in one column stack. Where a column holds two
   adjacent buttons, flip that column to a wrapping row and push everything else onto its
   own full-width line. Scoped by :has() so it only touches columns that actually have a
   button pair; browsers without :has() fall back to stacked buttons, which is untidy but
   not broken.

   justify-content must be restated. Divi writes it on the column for *vertical* alignment
   (valign="center" in the generator), and flipping flex-direction to row silently reinterprets
   that same declaration as horizontal centring — which is what pushed the hero buttons into
   the middle of the column. */
.et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) {
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start !important;
  column-gap: 14px;
}

.et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper)
  > *:not(.et_pb_button_module_wrapper) {
  flex: 0 0 100%;
}

.et_pb_button_module_wrapper { margin-bottom: 12px; }

@media (max-width: 480px) {
  /* Full-width buttons are easier to hit, and two pills side by side wrap badly at 390px. */
  .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) {
    flex-flow: column nowrap;
  }
  .et_pb_button { display: block; text-align: center; }
}

/* ---------- hero secondary action ---------- */

.ha-hero-alt { margin: 6px 0 0 !important; }
.ha-hero-alt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ha-primary-dark) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--ha-primary-tint);
  padding-bottom: 3px;
  min-height: 44px;
}
.ha-hero-alt a::after { content: "\2192"; transition: transform .15s ease; }
.ha-hero-alt a:hover { border-bottom-color: var(--ha-primary); }
.ha-hero-alt a:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ha-hero-alt a:hover::after { transform: none; }
}

/* ---------- measure ---------- */

/* Constrains line length without knocking the block off centre. Replaces Divi's
   sizing.maxWidth, which sets a max-width but no auto margins. */
.ha-measure {
  margin-inline: auto;
  width: 100%;
}

/* ---------- vertical rhythm ---------- */

/* Divi gives every module a 30px bottom margin, including the last one in a column, which
   leaves an uneven gap above each section's padding. */
.et_pb_column > *:last-child { margin-bottom: 0 !important; }

/* Headings introducing a section need more air beneath them than Divi's default. */
.et_pb_text h2 { margin-bottom: 18px; }
.et_pb_text h2:last-child { margin-bottom: 0; }
.et_pb_text h3 { margin-top: 30px; margin-bottom: 12px; }
.et_pb_text h3:first-child { margin-top: 0; }
.et_pb_text p:last-child { margin-bottom: 0; }

/* Rows sit tighter than the section padding implies; give stacked rows real separation. */
.et_pb_row + .et_pb_row { margin-top: 34px; }

@media (max-width: 980px) {
  .et_pb_row + .et_pb_row { margin-top: 26px; }
  /* Stacked columns need space between them, which flex-wrap does not add. */
  .et_pb_column + .et_pb_column { margin-top: 26px; }
}

/* ---------- card rows ---------- */

/* Columns in a row are flex items; stretch them so cards in the same row match height
   regardless of copy length, then push the trailing button to the bottom so the CTAs line
   up across the row instead of floating at three different heights. */
.et_pb_row { align-items: stretch; }

.et_pb_column > .et_pb_button_module_wrapper:last-child { margin-top: auto; }
.et_pb_column > .et_pb_button_module_wrapper:last-child .et_pb_button { margin-top: 8px; }

/* Card images should fill the card's width and keep a consistent crop. */
.et_pb_column .et_pb_image,
.et_pb_column .et_pb_image .et_pb_image_wrap { width: 100%; }
.et_pb_column .et_pb_image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* The hero and image+text photographs are not cards — let them keep their real proportions. */
.et_pb_column:not([class*="_card"]) > .et_pb_image:only-child img { aspect-ratio: auto; }

/* ---------- full-bleed card images ---------- */

/* An image at the top of a padded card looks undersized floating inside the padding.
   Pull it out to the card edges and round only its top corners so it reads as part of the
   card rather than an inset thumbnail. The negative margins mirror the padding the
   generator sets on card columns (34px vertical, 30px horizontal).

   Scoped to .ha-card, which divi5.column(card=True) writes onto the column. Targeting all
   columns would catch the hero and image-and-text photographs too and drag them outside
   their columns — and Divi emits column padding into its stylesheet rather than inline, so
   there is no attribute selector that can tell a card from a plain column. */
.ha-card > .et_pb_image:first-child {
  margin: -34px -30px 24px;
  width: auto;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.ha-card > .et_pb_image:first-child img {
  border-radius: 16px 16px 0 0;
}

/* ---------- footer ---------- */

.ha-footer {
  background: var(--ha-ink);
  color: #C9D4D6;
  font-size: 16px;
  line-height: 1.7;
}

.ha-footer__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 64px 24px 44px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

/* Inline-block so the logo's own bottom margin is respected inside the link. */
.ha-footer__logo-link { display: inline-block; }

.ha-footer__logo {
  width: auto;
  height: 80px;
  margin-bottom: 18px;
  /* The logo is teal-on-transparent; on the dark footer it needs lifting. */
  filter: brightness(0) invert(1);
  opacity: .92;
}

.ha-footer__brand p { max-width: 34ch; margin: 0; }

.ha-footer__col h2 {
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: none;
  color: #fff;
  margin: 0 0 16px;
}

.ha-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ha-footer__col li { margin-bottom: 10px; }

.ha-footer a {
  color: #C9D4D6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ha-footer a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); }

.ha-footer__meta { color: #8FA0A4; font-size: .92rem; }

.ha-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .88rem;
  color: #8FA0A4;
}

.ha-footer__legal .ha-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
}

.ha-footer__legal p { margin: 0; }

@media (max-width: 980px) {
  .ha-footer__inner { grid-template-columns: 1fr 1fr; gap: 34px; }
  .ha-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .ha-footer__inner { grid-template-columns: 1fr; padding: 48px 22px 34px; }
  .ha-footer__legal .ha-footer__inner { flex-direction: column; text-align: center; }
}

/* The child theme's footer.php renders #footer-bottom with the copyright, the Hotspot
   Digital credit and the legal links. Style it to sit under our footer rather than hide it. */
#main-footer { background: var(--ha-ink); padding: 0; }
#main-footer > .container { display: none; }   /* empty footer widget area */

#footer-bottom {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 0;
}
#footer-bottom .container { padding: 20px 24px; max-width: 1180px; width: auto; }
#footer-bottom #footer-info,
#footer-bottom #footer-info a {
  float: none;
  color: #8FA0A4;
  font-size: .88rem;
  padding: 0;
}
#footer-bottom #footer-info a { border-bottom: 1px solid transparent; }
#footer-bottom #footer-info a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); }

/* --- Testimonials ---------------------------------------------------------------------
   Attribution is name-only, so divi5.testimonial() omits the jobTitle attribute. Divi may
   still emit the .et_pb_testimonial_meta wrapper; an empty one leaves a stray gap under the
   author. Belt-and-braces — harmless if Divi drops the wrapper on its own. */
.et_pb_testimonial_meta:empty { display: none; }

/* Divi's testimonial module is built to stand alone: it draws its own #f5f5f5 panel, its
   own 30px padding (10% at the top) and a quote glyph pinned half outside that panel with
   `.et_pb_testimonial:before`. Dropped inside our .ha-card column that renders as a box
   inside a box, with the glyph stranded between the two. Strip the module back to plain
   text and let the card be the only container. */
.ha-card .et_pb_testimonial {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.ha-card .et_pb_testimonial::before { display: none; }

/* Our own quote mark instead — a real typographic one, set in the brand teal and sitting on
   the text's left margin rather than floating over the card edge. */
.ha-card .et_pb_testimonial_description_inner::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.2rem;
  line-height: .72;
  color: var(--ha-primary);
  opacity: .3;
  margin-bottom: 10px;
}

/* Quotes run from 20 to 110 words. Two cards in a Divi row are flex children and stretch to
   a shared height, so the shorter of a pair would otherwise sit against the top with all the
   slack below it. Push the attribution to the bottom so a pair reads as a set. */
.ha-card .et_pb_testimonial,
.ha-card .et_pb_testimonial_inner,
.ha-card .et_pb_testimonial_description { height: 100%; }
.ha-card .et_pb_testimonial_description {
  display: flex !important;   /* Divi re-declares `display: block` at tablet and below */
  flex-direction: column;
}
.ha-card .et_pb_testimonial_description_inner { flex: 1 0 auto; }

/* Beats `.et_pb_testimonial.et_block_module .et_pb_testimonial_author` (0,3,0). */
.ha-card .et_pb_testimonial .et_pb_testimonial_author {
  margin-top: 22px;
  color: var(--ha-ink);
  font-size: .95rem;
}
.ha-card .et_pb_testimonial_author::before { content: "— "; }