/* ─────────────────────────────────────────────────────────────
   SERVICE HUB HERO — prefix: shh-

   Structure only. Every editor-driven value arrives as a --shh-*
   custom property set by the scoped <style> block in module.html.
   Nothing here reads a module field, so this file declares real
   properties and owns the breakpoints outright.

   Font families are the one exception: brand-locked, never editable.
   ───────────────────────────────────────────────────────────── */

/* ── Full-bleed section ── */
.shh-section {
  --shh-heading-font: "akzidenz-grotesk", sans-serif;
  --shh-body-font: "brandon-grotesque", sans-serif;

  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: var(--shh-mt);
  margin-bottom: var(--shh-mb);
  padding: var(--shh-pt) var(--shh-pr) var(--shh-pb) var(--shh-pl);
  overflow-x: hidden;
  position: relative;
  text-align: center;
  background-color: var(--shh-bg);
}

.shh-section,
.shh-section *,
.shh-section *::before,
.shh-section *::after {
  box-sizing: border-box;
}

/* Decorative ambient wash — not configurable */
.shh-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 75% at 82% 50%, rgba(139, 92, 246, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 12% 45%, rgba(255, 255, 255, 0.45) 0%, transparent 65%);
}

.shh-inner {
  max-width: min(var(--shh-max-w), 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Rich text normalisation ──
   HubSpot wraps field output in <p>/<h*>. Inline contexts collapse those
   and inherit type, so a stray <h2> can't resize the badge or button. */
.shh-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.shh-rt > * + *::before {
  content: ' ';
}

/* ── Badge ── */
.shh-badge-wrap {
  margin-bottom: var(--shh-badge-gap);
  animation: shh-fadein 0.6s ease both;
}

.shh-badge {
  display: inline-block;
  max-width: 100%;
  padding: 6px 18px;
  border: 1.5px solid var(--shh-badge-border);
  border-radius: var(--shh-badge-radius);
  background-color: var(--shh-badge-bg);
  font-family: var(--shh-body-font);
  font-weight: 400;
  font-size: var(--shh-badge-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shh-badge-color);
  line-height: 1.4;
}

/* ── Heading ── */
.shh-heading {
  font-family: var(--shh-heading-font);
  /* Locked at 700. At 800+ the family drops out of the stack entirely
     and the heading falls back to Helvetica/Arial. */
  font-weight: 700;
  font-size: var(--shh-h-size);
  color: var(--shh-h-color);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--shh-h-gap);
  padding: 0;
  text-wrap: balance;
  animation: shh-fadein 0.65s ease 0.1s both;
}

/* Line 1 = No Highlight + Highlight, line 2 = Part 3. A block-level line
   beats <br>: the two halves stay welded, and each line wraps on its own. */
.shh-heading__line {
  display: block;
}

.shh-heading__line--inline {
  display: inline;
}

/* Solid colour first. In forced-colors mode, in print, or anywhere
   background-clip: text is not honoured, the highlighted words must still
   be readable rather than vanishing into transparent fill. */
.shh-heading__accent {
  display: inline;
  color: var(--shh-h-color);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .shh-heading__accent {
    background: var(--shh-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
/* No `color: transparent` here. -webkit-text-fill-color already paints the
       glyphs with the clipped gradient in every engine that honours
       background-clip: text, so zeroing `color` as well changes nothing on
       screen and only makes the computed colour transparent - which a contrast
       checker reads as a 1:1 ratio against any background. The solid colour
       above stays the computed value. */
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .shh-heading__accent {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* ── Subtitle ── */
.shh-subtitle {
  font-family: var(--shh-body-font);
  font-weight: 400;
  font-size: var(--shh-sub-size);
  color: var(--shh-sub-color);
  line-height: 1.65;
  margin: 0 auto var(--shh-sub-gap);
  padding: 0;
  max-width: min(var(--shh-sub-max), 100%);
  animation: shh-fadein 0.65s ease 0.2s both;
}

/* Subtitle keeps block flow — a rich text paragraph break is a real break */
.shh-subtitle > * {
  margin: 0 0 1em;
  font: inherit;
  color: inherit;
}

.shh-subtitle > *:last-child {
  margin-bottom: 0;
}

.shh-subtitle a {
  color: var(--shh-sub-link);
  text-decoration: underline;
}

/* ── CTA ── */
.shh-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  animation: shh-fadein 0.65s ease 0.3s both;
}

.shh-btn--primary {
/* Clears the fixed header when Tab scrolls the CTA into view. */
  scroll-margin-top: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  padding: var(--shh-btn-py) var(--shh-btn-px);
  border: 2px solid transparent;
  border-radius: var(--shh-btn-radius);
  background-color: var(--shh-btn-bg);
  color: var(--shh-btn-color) !important;
  font-family: var(--shh-body-font);
  font-weight: 400;
  font-size: var(--shh-btn-size);
  line-height: 1.3;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.shh-btn--primary:hover {
  transform: translateY(-2px);
  background-color: var(--shh-btn-bg-hover);
  color: var(--shh-btn-color-hover) !important;
  box-shadow: 0 8px 28px rgba(58, 46, 123, 0.38);
  text-decoration: none !important;
}

.shh-btn--primary:active {
  transform: translateY(0);
}

/* The module's only interactive element states its own focus style, since the
   theme ships no global one and the UA ring is unreliable over a solid purple
   pill. White ring inside the button, dark ring outside it, so the indicator
   survives whatever background colour an editor picks for the section. */
.shh-btn--primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px var(--shh-btn-bg);
}

.shh-subtitle a:focus-visible {
  outline: 2px solid var(--shh-sub-link);
  outline-offset: 2px;
}

/* Rich text inside the button never carries its own colour */
.shh-btn--primary .shh-rt > *,
.shh-btn--primary a {
  color: inherit !important;
  text-decoration: none !important;
}

@keyframes shh-fadein {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────
   Breakpoints. Type scales via the clamp() baked into each
   --shh-*-size, so no font size is redeclared until mobile.
   min()/max() keep the editor's padding authoritative when it is
   already tighter (or deliberately wider) than the cap.
───────────────────────────────────────── */

/* Large tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .shh-section {
    padding-top: min(var(--shh-pt), 88px);
    padding-bottom: min(var(--shh-pb), 80px);
    padding-left: max(var(--shh-pl), 32px);
    padding-right: max(var(--shh-pr), 32px);
  }

  .shh-heading {
    letter-spacing: -0.02em;
  }
}

/* Small tablet */
@media (min-width: 641px) and (max-width: 767px) {
  .shh-section {
    padding-top: min(var(--shh-pt), 72px);
    padding-bottom: min(var(--shh-pb), 64px);
    padding-left: max(var(--shh-pl), 24px);
    padding-right: max(var(--shh-pr), 24px);
  }

  .shh-heading {
    letter-spacing: -0.015em;
  }
}

/* Mobile — heading pushed UP so it still reads as a hero, subtitle and
   button pulled DOWN so they stop competing with it. Separate curves,
   not the tail of the desktop clamp. */
@media (max-width: 640px) {
  .shh-section {
    padding-top: min(var(--shh-pt), 64px);
    padding-bottom: min(var(--shh-pb), 56px);
    padding-left: max(var(--shh-pl), 20px);
    padding-right: max(var(--shh-pr), 20px);
  }

  .shh-heading {
    font-size: var(--shh-h-size-m);
    letter-spacing: -0.015em;
  }

  .shh-heading__line {
    overflow-wrap: break-word;
  }

  .shh-subtitle {
    font-size: var(--shh-sub-size-m);
    line-height: 1.6;
  }

  .shh-ctas {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  /* Still a hugged pill, just tighter. Only guard against a label
     longer than the screen. */
  .shh-btn--primary {
    width: auto;
    font-size: var(--shh-btn-size-m);
    padding: var(--shh-btn-py-m) var(--shh-btn-px-m);
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Small phone */
@media (max-width: 390px) {
  .shh-section {
    padding-top: min(var(--shh-pt), 52px);
    padding-bottom: min(var(--shh-pb), 48px);
    padding-left: max(var(--shh-pl), 16px);
    padding-right: max(var(--shh-pr), 16px);
  }

  .shh-badge {
    padding: 5px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shh-badge-wrap,
  .shh-heading,
  .shh-subtitle,
  .shh-ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .shh-btn--primary {
    transition: none;
  }
}