/* ============================================================
   Hearthstone Mortgages — base layer
   ------------------------------------------------------------
   theme.json owns the token VALUES. This file:
   1. Aliases the design-system `--hm-*` names onto the WP preset
      custom properties, so design-reference / DS CSS pastes in
      unchanged (~33 `--hm-slate-500` refs etc. all resolve).
   2. Adds primitives theme.json cannot express: dot-grid overlay,
      motion shorthands, section/container helpers, base resets.
   Loaded first; every other stylesheet depends on it.
   ============================================================ */

:root {
  /* --- Blue scale --- */
  --hm-blue:      var(--wp--preset--color--blue);
  --hm-blue-950:  var(--wp--preset--color--blue-950);
  --hm-blue-900:  var(--wp--preset--color--blue-900);
  --hm-blue-800:  var(--wp--preset--color--blue-800);
  --hm-blue-700:  var(--wp--preset--color--blue-700);
  --hm-blue-600:  var(--wp--preset--color--blue-600);
  --hm-blue-500:  var(--wp--preset--color--blue-500);
  --hm-blue-400:  var(--wp--preset--color--blue-400);
  --hm-blue-300:  var(--wp--preset--color--blue-300);
  --hm-blue-200:  var(--wp--preset--color--blue-200);
  --hm-blue-100:  var(--wp--preset--color--blue-100);
  --hm-blue-50:   var(--wp--preset--color--blue-50);

  /* --- Gold scale --- */
  --hm-gold:      var(--wp--preset--color--gold);
  --hm-gold-900:  var(--wp--preset--color--gold-900);
  --hm-gold-800:  var(--wp--preset--color--gold-800);
  --hm-gold-700:  var(--wp--preset--color--gold-700);
  --hm-gold-600:  var(--wp--preset--color--gold-600);
  --hm-gold-500:  var(--wp--preset--color--gold-500);
  --hm-gold-400:  var(--wp--preset--color--gold-400);
  --hm-gold-300:  var(--wp--preset--color--gold-300);
  --hm-gold-200:  var(--wp--preset--color--gold-200);
  --hm-gold-100:  var(--wp--preset--color--gold-100);
  --hm-gold-50:   var(--wp--preset--color--gold-50);

  /* --- Warm neutrals --- */
  --hm-ink:        var(--wp--preset--color--ink);
  --hm-charcoal:   var(--wp--preset--color--charcoal);
  --hm-slate-800:  var(--wp--preset--color--slate-800);
  --hm-slate-700:  var(--wp--preset--color--slate-700);
  --hm-slate-600:  var(--wp--preset--color--slate-600);
  --hm-slate-500:  var(--wp--preset--color--slate-500);
  --hm-slate-400:  var(--wp--preset--color--slate-400);
  --hm-slate-300:  var(--wp--preset--color--slate-300);
  --hm-slate-200:  var(--wp--preset--color--slate-200);
  --hm-warm-white: var(--wp--preset--color--warm-white);
  --hm-cream:      var(--wp--preset--color--cream);
  --hm-cream-100:  var(--wp--preset--color--cream-100);
  --hm-cream-200:  var(--wp--preset--color--cream-200);
  --hm-white:      var(--wp--preset--color--white);

  /* --- Functional --- */
  --hm-success: var(--wp--preset--color--success);
  --hm-warning: var(--wp--preset--color--warning);
  --hm-error:   var(--wp--preset--color--error);

  /* --- Gradients --- */
  --hm-gradient-hero: var(--wp--preset--gradient--hero);
  --hm-gradient-mid:  var(--wp--preset--gradient--mid);
  --hm-gradient-gold: var(--wp--preset--gradient--gold);
  --hm-gradient-warm: var(--wp--preset--gradient--warm);

  /* --- Semantic aliases (from DS colors.css) --- */
  --color-bg:            var(--hm-white);
  --color-bg-subtle:     var(--hm-cream);
  --color-bg-warm:       var(--hm-cream-100);
  --color-surface:       var(--hm-white);
  --color-surface-blue:  var(--hm-blue-950);
  --color-text:          var(--hm-slate-700);
  --color-text-strong:   var(--hm-ink);
  --color-text-muted:    var(--hm-slate-600);
  --color-text-invert:   var(--hm-white);
  --color-text-on-gold:  var(--hm-blue-950);
  --color-heading:       var(--hm-ink);
  --color-heading-invert:var(--hm-white);
  --color-link:          var(--hm-blue-600);
  --color-link-hover:    var(--hm-blue-800);
  --color-border:        var(--hm-cream-200);
  --color-border-strong: var(--hm-slate-300);
  --color-cta-primary:        var(--hm-gold-500);
  --color-cta-primary-text:   var(--hm-ink);
  --color-cta-secondary:      var(--hm-blue-600);
  --color-cta-secondary-text: var(--hm-white);
  --color-focus-ring:    var(--hm-gold-500);

  /* --- Typography aliases --- */
  --font-heading: var(--wp--preset--font-family--gilroy);
  --font-body:    var(--wp--preset--font-family--inter);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heading: 900;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --text-5xl: 3rem; --text-6xl: 3.75rem;
  --h1: clamp(2.6rem, 6vw, 5.25rem);
  --h2: clamp(2rem, 4vw, 3.5rem);
  --h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --h4: 1.25rem;
  /* One H1 scale for inner-page hero titles (area, service, blog, FAQ, archive
     heroes). The homepage hero is intentionally larger (flagship). */
  --hm-h1: clamp(2rem, 4.2vw, 3.4rem);
  /* One H2 scale site-wide (section headings). Smaller, consistent. */
  --hm-h2: clamp(1.7rem, 2.8vw, 2.5rem);
  --hm-h3: clamp(1.15rem, 1.6vw, 1.35rem);
  --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5;
  --leading-relaxed: 1.65; --leading-loose: 1.75;
  --tracking-heading: var(--wp--custom--tracking--heading);
  --tracking-label:   var(--wp--custom--tracking--label);
  --tracking-normal: 0;

  /* --- Radius / shadow aliases --- */
  --radius-sm:   var(--wp--custom--r--sm);
  --radius-md:   var(--wp--custom--r--md);
  --radius-lg:   var(--wp--custom--r--lg);
  --radius-xl:   var(--wp--custom--r--xl);
  --radius-pill: var(--wp--custom--r--pill);
  --shadow-sm:    var(--wp--custom--shadow--sm);
  --shadow-md:    var(--wp--custom--shadow--md);
  --shadow-lg:    var(--wp--custom--shadow--lg);
  --shadow-gold:  var(--wp--custom--shadow--gold);
  --shadow-blue:  var(--wp--custom--shadow--blue);

  /* --- Motion --- */
  --ease-out: var(--wp--custom--ease);
  --dur-fast: var(--wp--custom--duration--fast);
  --dur-base: var(--wp--custom--duration--base);
  --dur-slow: var(--wp--custom--duration--slow);

  /* --- Layout --- */
  --section-padding-y: var(--wp--custom--section--padding-y);
  --section-padding-x: var(--wp--custom--section--padding-x);
  --container-lg: var(--wp--custom--container--lg);
  --container-xl: var(--wp--custom--container--xl);

}

/* ------------------------------------------------------------
   Base resets / brand defaults
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Drop the inherited WP block-gap (TTF sets margin-block-start: 1.2rem on every
   flow child) so sections sit flush — each section owns its own padding. */
:root .wp-site-blocks > *,
:root .hm-main > * { margin-block-start: 0; }

/* overflow clipping on an ancestor breaks position:sticky — keep it off. */
html, body { overflow-x: clip; }

/* Visible focus ring everywhere (brand a11y rule: 3px gold) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}


/* ------------------------------------------------------------
   Section + container helpers
   ------------------------------------------------------------ */
.hm-section {
  padding-block: var(--section-padding-y);
  padding-inline: var(--section-padding-x);
}
.hm-container {
  max-width: var(--container-xl);
  margin-inline: auto;
  width: 100%;
}

/* Background treatments (sections alternate between these) */
.hm-bg-white  { background: var(--hm-white); }
.hm-bg-blue50 { background: var(--hm-blue-50); }
.hm-bg-dark {
  position: relative;
  background: var(--hm-gradient-hero);
  color: var(--color-text-invert);
}
.hm-bg-mid {
  position: relative;
  background: var(--hm-gradient-mid);
  color: var(--color-text-invert);
}
.hm-bg-dark > *, .hm-bg-mid > * { position: relative; z-index: 1; }
.hm-bg-dark :is(h1,h2,h3,h4) { color: var(--color-heading-invert); }

/* ------------------------------------------------------------
   Buttons — pill, uppercase. Gold = primary (navy text),
   blue = secondary (white text), ghost = outline. Shared UI.
   ------------------------------------------------------------ */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  font-size: var(--text-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.hm-btn:hover { transform: translateY(-2px); }
.hm-btn svg { flex-shrink: 0; }

.hm-btn--gold {
  background: var(--hm-gold-500);
  color: var(--hm-ink);
  box-shadow: var(--shadow-gold);
}
.hm-btn--gold:hover { background: var(--hm-gold-400); }

.hm-btn--blue {
  background: var(--hm-blue-600);
  color: var(--hm-white);
}
.hm-btn--blue:hover { background: var(--hm-blue-700); }

.hm-btn--ghost {
  background: transparent;
  color: var(--hm-blue-600);
  border-color: var(--hm-slate-300);
}
.hm-btn--ghost:hover { border-color: var(--hm-blue-600); background: var(--hm-blue-50); }
/* Ghost on dark surfaces (deep-blue sections + the CtaBand gradient panel) */
.hm-bg-dark .hm-btn--ghost,
.hm-bg-mid .hm-btn--ghost,
.hm-cta-band .hm-btn--ghost {
  color: var(--hm-white);
  border-color: rgba(255,255,255,0.6);
}
.hm-bg-dark .hm-btn--ghost:hover,
.hm-bg-mid .hm-btn--ghost:hover,
.hm-cta-band .hm-btn--ghost:hover { border-color: var(--hm-white); background: rgba(255,255,255,0.08); }

.hm-btn--sm { padding: 0.6rem 1.1rem; font-size: var(--text-xs); }
.hm-btn--lg { padding: 1rem 2rem; font-size: var(--text-base); }
.hm-btn--block { width: 100%; }

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

/* ------------------------------------------------------------
   Scroll-reveal (IntersectionObserver adds .is-revealed)
   ------------------------------------------------------------ */
.hm-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.hm-reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hm-reveal { opacity: 1; transform: none; transition: none; }
}

/* Honeypot — hidden from humans, bots fill it and are dropped server-side. */
.hm-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------
   Adviser carousel — auto-rotating portraits that open the bio modal.
   Shared: used by the service/area hero spotlight and the homepage hero
   panel, so it lives here rather than in the page-specific sheets.
   ------------------------------------------------------------------ */
.hm-advcarousel__slide { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 900ms ease-in-out, visibility 900ms ease-in-out; }
.hm-advcarousel__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hm-advcarousel__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hm-advcarousel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem; background: linear-gradient(to top, rgba(6,34,60,0.88), transparent); color: #fff; text-align: left; display: flex; flex-direction: column; gap: 0.1rem; }
.hm-advcarousel__cap strong { font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; line-height: 1.1; }
.hm-advcarousel__cap span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.hm-advcarousel__slide:focus-visible { outline: 3px solid var(--hm-gold-500); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .hm-advcarousel__slide { transition: none; } }
.hm-advcarousel__cap { padding-bottom: 1.75rem; }
.hm-advcarousel__dots { position: absolute; left: 0; right: 0; bottom: 0.6rem; z-index: 2; display: flex; justify-content: center; gap: 0.4rem; }
.hm-advcarousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; transition: background 150ms var(--ease-out), transform 150ms var(--ease-out); }
.hm-advcarousel__dot:hover { background: rgba(255,255,255,0.85); }
.hm-advcarousel__dot.is-active { background: var(--hm-gold-500); transform: scale(1.3); }
.hm-advcarousel__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------
   Hero trust marks — shared by the homepage and every inner hero.
   Marks, not buttons: the filled pill they used to carry read as a
   third tier of CTA next to the gold and ghost buttons above them.
   ------------------------------------------------------------------ */
.hm-trust-marks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: clamp(1.4rem, 2.5vw, 2rem) 0 1.5rem; }
/* On a dark hero the marks follow stats or buttons, which are also small
   uppercase type. A hairline keeps the two groups from reading as one block. */
.hm-bg-dark .hm-trust-marks {
  padding-top: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid rgba(255,255,255,0.14);
}
.hm-trust-mark {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; border-radius: 0; padding: 0;
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.63rem; color: rgba(255,255,255,0.72);
  text-decoration: none; transition: color 150ms var(--ease-out);
}
a.hm-trust-mark:hover, a.hm-trust-mark:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hm-trust-mark__ico { color: var(--hm-gold-500); display: inline-flex; }
/* The award and FCA lines are long: give each its own row. */
.hm-trust-mark--wide { flex-basis: 100%; }