/*!
 * Huntsville Commute Home Finder — STYLES
 * ===========================================================================
 * Everything is scoped under `.hhf` so the app can drop into any WordPress
 * theme without inheriting (or leaking) theme styles.
 * ===========================================================================
 */

/* =========================================================================
   TOKENS
   ========================================================================= */
/* ---------------------------------------------------------------------------
   BRAND
   KW Red   #CE011F  (Pantone 200)  — the single accent. Selected states,
                                      primary actions, active map emphasis.
   KW Gray  #828282  (Pantone 424)  — the neutral the whole gray ramp is
                                      derived from.
   Charcoal ground + white surfaces carry the rest, so red only ever appears
   where something is chosen or actionable.

   Note on error color: validation and API messages use an amber/ochre warning
   family, NOT red. Red is spoken for as the brand's "this is selected" signal,
   and reusing it for failure would make the two read as the same thing.
   --------------------------------------------------------------------------- */
.hhf {
  /* Dark ground (formerly navy) */
  --navy-900: #121212;
  --navy-800: #1c1c1c;
  --navy-700: #262626;
  --navy-600: #3a3a3a;

  /* KW Red ramp (token names kept so the cascade stays stable) */
  --teal-600: #ce011f;  /* KW Red */
  --teal-500: #e01329;
  --teal-400: #e4677a;
  --teal-050: #fdf2f4;

  /* Active / emphasis — also KW Red, against gray defaults */
  --amber-500: #ce011f;
  --amber-050: #fdf7ec;

  /* Neutrals derived from KW Main Gray */
  --ink: #1c1c1c;
  --body: #4f4f4f;
  /* KW Main Gray is 3.84:1 on white — below the 4.5:1 AA floor for body
     text. It stays exact for borders, map pins and icons (--gray-brand);
     small text uses a darkened step of the same hue at 5.33:1. */
  --gray-brand: #828282;  /* KW Main Gray, exact */
  --muted: #6b6b6b;
  --gray-mid: #6e6e6e;

  --line: #e2e2e2;
  --line-soft: #efefef;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --bg: #f1f1f1;

  /* Warning family — deliberately not red */
  --danger: #8a5a00;
  --danger-bg: #fdf7ec;
  --danger-line: #f0dcb4;

  --success: #ce011f;   /* a red check reads as "done" in KW's palette */

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);
  --sh-lg: 0 18px 40px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .07);
  --sh-xl: 0 32px 70px rgba(0, 0, 0, .16), 0 8px 22px rgba(0, 0, 0, .09);

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --focus: 0 0 0 3px #ffffff, 0 0 0 6px var(--teal-500);

  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------- scoped reset -------------------------
   Every element list below is wrapped in :where() so the reset contributes
   ZERO specificity beyond `.hhf`. Without it, an element-qualified selector
   like `.hhf a` is (0,1,1) and silently out-specifies any single-class
   component rule like `.hhf-btn--cta` (0,1,0) — which is exactly how the
   primary button ended up with grey text on red, the card CTA with red text
   on charcoal, and the hero title with dark navy on dark navy.
   Keep new reset rules inside :where(). ---------------------------------- */
.hhf *,
.hhf *::before,
.hhf *::after { box-sizing: border-box; }

.hhf :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.hhf :where(ul, ol) { padding: 0; list-style: none; }
.hhf :where(fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }
.hhf :where(legend) { padding: 0; }
.hhf :where(img, svg) { max-width: 100%; }
.hhf :where(button, input) { font: inherit; color: inherit; }
.hhf :where(a) { color: var(--teal-600); }

/* The `hidden` attribute only takes effect through the UA rule
   [hidden] { display: none }, and ANY author display declaration outranks
   the UA origin regardless of specificity. Several components below set
   display (flex/grid), which silently defeated `hidden` on the preview
   banner, the validation error and the step checkmarks. Fixed once here.
   Scoped to .hhf so it cannot reach the surrounding WordPress theme. */
.hhf [hidden],
.hhf[hidden] { display: none !important; }

.hhf :where(h1, h2, h3) {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.hhf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hhf-shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hhf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(158deg, #4a4a4a 0%, #3a3a3a 46%, #2c2c2c 100%);
  color: #e4e4e4;
  padding-block: clamp(56px, 9vw, 104px) clamp(96px, 13vw, 150px);
}

.hhf-hero__bg { position: absolute; inset: 0; z-index: -1; }

.hhf-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.hhf-hero__glow--a {
  width: 46vw; height: 46vw;
  min-width: 340px; min-height: 340px;
  top: -18%; right: -8%;
  background: radial-gradient(circle, rgba(214,10,42,.62) 0%, rgba(214,10,42,0) 70%);
}
.hhf-hero__glow--b {
  width: 40vw; height: 40vw;
  min-width: 300px; min-height: 300px;
  bottom: -26%; left: -10%;
  background: radial-gradient(circle, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 70%);
}
.hhf-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 42%, transparent 100%);
}

.hhf-hero__inner { position: relative; text-align: center; }

.hhf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #dcdcdc;
}
.hhf-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 0 3px rgba(206,1,31,.28);
}
.hhf-eyebrow--dark {
  background: var(--teal-050);
  border-color: #f3d3d8;
  color: var(--teal-600);
  backdrop-filter: none;
}

.hhf-hero__title {
  margin-top: 26px;
  color: #fff;
  font-size: clamp(2.3rem, 6.4vw, 4.15rem);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hhf-hero__lede {
  margin: 20px auto 0;
  max-width: 660px;
  font-size: clamp(1.03rem, 1.9vw, 1.2rem);
  color: #dcdcdc;
  text-wrap: pretty;
}

.hhf-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 4vw, 46px);
  margin-top: 38px;
}
.hhf-hero__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 110px;
}
.hhf-hero__stats strong {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.hhf-hero__stats span {
  font-size: .8rem;
  color: #cfcfcf;
  letter-spacing: .01em;
}

.hhf-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.26);
  color: #e4e4e4;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.hhf-hero__scroll svg { width: 17px; height: 17px; }
.hhf-hero__scroll:hover { background: rgba(255,255,255,.22); transform: translateY(1px); }
.hhf-hero__scroll:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--navy-900), 0 0 0 6px var(--teal-500); }

.hhf-br { display: none; }
@media (min-width: 560px) { .hhf-br { display: inline; } }

/* =========================================================================
   MAIN / BANNERS
   ========================================================================= */
.hhf-main { padding-bottom: 88px; }

.hhf-banner {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-top: -56px;
  margin-bottom: 20px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--amber-050);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  box-shadow: var(--sh-md);
  font-size: .9rem;
  position: relative;
  z-index: 3;
}
.hhf-banner__icon { width: 21px; height: 21px; flex: none; margin-top: 1px; }
.hhf-banner strong { display: block; font-weight: 700; margin-bottom: 2px; }
.hhf-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: rgba(138,90,0,.10);
  padding: 1px 5px;
  border-radius: 4px;
}
.hhf-banner--error {
  background: #fdf2f4;
  border-color: #f0c9cf;
  color: #8a0114;
}

/* =========================================================================
   TOOL CARD
   ========================================================================= */
.hhf-tool {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}
.hhf-banner:not([hidden]) + .hhf-tool,
.hhf-main > .hhf-banner:not([hidden]) ~ .hhf-tool { margin-top: 0; }

.hhf-step {
  padding: clamp(24px, 3.6vw, 40px);
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 20px;
}

.hhf-step__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 22px;
}

.hhf-step__num {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
  transition: background .2s ease, box-shadow .2s ease;
}
.hhf-step.is-complete .hhf-step__num {
  background: var(--success);
  box-shadow: 0 3px 8px rgba(206,1,31,.26);
}

.hhf-step__title { font-size: clamp(1.24rem, 2.5vw, 1.62rem); }
.hhf-step__hint { margin-top: 5px; font-size: .93rem; color: var(--muted); text-wrap: pretty; }

.hhf-step__check {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--success);
}
.hhf-step__check svg { width: 17px; height: 17px; }

/* ---------------------- workplace preset groups ---------------------- */
.hhf-wp-groups { display: grid; gap: 22px; }

.hhf-wp-group__head { margin-bottom: 11px; }
.hhf-wp-group__title {
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.hhf-wp-group__note { font-size: .87rem; color: var(--muted); margin-top: 3px; }

.hhf-wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 10px;
}

.hhf-wp { display: block; cursor: pointer; }

.hhf-radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

.hhf-wp__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  height: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.hhf-wp:hover .hhf-wp__inner {
  border-color: var(--teal-400);
  background: var(--surface-2);
}
.hhf-wp__inner:active { transform: translateY(1px); }

.hhf-wp__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: transparent;
  transition: all .16s ease;
}
.hhf-wp__tick svg { width: 13px; height: 13px; }

.hhf-wp__name {
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.32;
}

.hhf-radio:checked + .hhf-wp__inner {
  border-color: var(--teal-600);
  border-width: 1.5px;
  background: var(--teal-050);
  box-shadow: 0 0 0 1.5px var(--teal-600), var(--sh-sm);
}
.hhf-radio:checked + .hhf-wp__inner .hhf-wp__tick {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: #fff;
}
.hhf-radio:focus-visible + .hhf-wp__inner { outline: none; box-shadow: var(--focus); }

/* ------------------------------- or divider ------------------------------ */
.hhf-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 16px;
  color: var(--muted);
  font-size: .87rem;
  font-weight: 500;
}
.hhf-or::before, .hhf-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --------------------------------- search -------------------------------- */
.hhf-search { position: relative; }
.hhf-search__icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--muted);
  pointer-events: none;
  z-index: 2;
}
.hhf-search__host { display: block; }

.hhf-search__input,
.hhf-search__host gmp-place-autocomplete,
.hhf-autocomplete-el {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 15px 16px 15px 45px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.hhf-search__input::placeholder { color: var(--muted); }
.hhf-search__input:hover { border-color: var(--teal-400); }
.hhf-search__input:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(206,1,31,.15);
}
.hhf-search__input:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* Google's autocomplete web component */
.hhf-autocomplete-el {
  --gmp-place-autocomplete-input-padding-inline-start: 45px;
  padding: 0;
}
.hhf-search__host .pac-target-input { padding-left: 45px; }

.hhf-search__note {
  margin-top: 9px;
  font-size: .86rem;
  color: var(--muted);
}

/* ------------------------------- selection ------------------------------- */
.hhf-selection { margin-top: 16px; font-size: .93rem; }
.hhf-selection__empty { color: var(--muted); }
.hhf-selection__ok {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}
.hhf-selection__ok svg { width: 16px; height: 16px; flex: none; color: var(--teal-600); }
.hhf-selection__ok strong { color: var(--ink); font-weight: 700; }
.hhf-selection__addr {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 400;
}

/* ---------------------------- option cards ---------------------------- */
.hhf-options { display: grid; gap: 11px; }
/* 190px keeps all three bands on one row down to the 760px breakpoint, where
   they stack to full width. A 2-then-1 split would make the three ranges look
   unequal, which matters when the whole point is comparing them. */
.hhf-options--commute { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hhf-options--price   { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.hhf-opt { display: block; cursor: pointer; }

.hhf-opt__inner {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  min-height: 72px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.hhf-opt:hover .hhf-opt__inner {
  border-color: var(--teal-400);
  background: var(--surface-2);
}
.hhf-opt__inner:active { transform: translateY(1px); }

.hhf-opt__mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #cfcfcf;
  background: var(--surface);
  position: relative;
  transition: all .16s ease;
}
.hhf-opt__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}

.hhf-opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hhf-opt__title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.hhf-opt__sub { font-size: .84rem; color: var(--muted); line-height: 1.4; }

.hhf-radio:checked + .hhf-opt__inner {
  border-color: var(--teal-600);
  background: var(--teal-050);
  box-shadow: 0 0 0 1.5px var(--teal-600), var(--sh-sm);
}
.hhf-radio:checked + .hhf-opt__inner .hhf-opt__mark {
  border-color: var(--teal-600);
  background: var(--teal-600);
}
.hhf-radio:checked + .hhf-opt__inner .hhf-opt__mark::after { transform: scale(1); }
.hhf-radio:checked + .hhf-opt__inner .hhf-opt__title { color: var(--navy-700); }
.hhf-radio:focus-visible + .hhf-opt__inner { outline: none; box-shadow: var(--focus); }

/* =========================================================================
   SUBMIT
   ========================================================================= */
.hhf-submit {
  padding: clamp(22px, 3.4vw, 34px) clamp(24px, 3.6vw, 40px);
  background: linear-gradient(180deg, var(--surface-2) 0%, #eef4f9 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.hhf-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: .87rem;
  color: var(--muted);
}
.hhf-summary__item {
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  transition: all .18s ease;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hhf-summary__item.is-filled {
  background: var(--surface);
  border-color: var(--teal-400);
  color: var(--navy-700);
  font-weight: 600;
}
.hhf-summary__sep { color: #b9c6d3; }

.hhf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease,
              background .16s ease, opacity .16s ease;
}
.hhf-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.hhf-btn--primary {
  position: relative;
  min-width: 260px;
  background: linear-gradient(135deg, var(--teal-600) 0%, #a50118 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(206,1,31,.28);
}
.hhf-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(206,1,31,.36);
}
.hhf-btn--primary:active:not(:disabled) { transform: translateY(0); }
/* Two different disabled states share this button: incomplete (gated) and
   busy (mid-search). Only the gated one goes grey; busy keeps the red so it
   still reads as working rather than switched off. */
.hhf-btn--primary:disabled:not(.is-busy) {
  background: #e4e4e4;
  color: #5c5c5c;            /* 5.26:1 on #e4e4e4 */
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}
.hhf-btn--primary:disabled.is-busy { cursor: progress; opacity: .82; }
.hhf-btn--primary.is-ready { box-shadow: 0 10px 26px rgba(206,1,31,.34); }

.hhf-btn--sm { padding: 11px 22px; font-size: .92rem; min-width: 0; }

.hhf-btn__spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2.4px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hhf-spin .7s linear infinite;
}
.hhf-btn.is-busy .hhf-btn__spinner { display: block; }
@keyframes hhf-spin { to { transform: rotate(360deg); } }

.hhf-formerror {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  font-size: .9rem;
  font-weight: 600;
}

/* =========================================================================
   RESULTS
   ========================================================================= */
.hhf-results { margin-top: 56px; scroll-margin-top: 20px; }
.hhf-results:focus { outline: none; }

.hhf-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}
.hhf-results__title { margin-top: 12px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

.hhf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hhf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy-700);
  box-shadow: var(--sh-sm);
}
.hhf-chip svg { width: 14px; height: 14px; color: var(--teal-600); }
.hhf-chip--workplace { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.hhf-chip--workplace svg { color: #ff8193; }

.hhf-results__count { font-size: .95rem; color: var(--body); margin-bottom: 22px; }
.hhf-results__count strong { color: var(--ink); font-weight: 700; }

.hhf-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.hhf-tag--preview { background: var(--amber-050); color: var(--danger); border: 1px solid var(--danger-line); }

.hhf-results__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 22px;
  align-items: start;
}

.hhf-results__list { display: grid; gap: 12px; min-width: 0; }

/* ------------------------------ result card ------------------------------ */
.hhf-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  padding: 19px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hhf-card:hover {
  border-color: var(--teal-400);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.hhf-card.is-active {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 1.5px var(--teal-600), var(--sh-lg);
}

.hhf-card__rank {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--navy-700);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  transition: all .18s ease;
}
.hhf-card.is-active .hhf-card__rank {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: #fff;
}

.hhf-card__body { min-width: 0; }

.hhf-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.hhf-card__name { font-size: 1.16rem; letter-spacing: -0.015em; }

.hhf-card__time {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--teal-050);
  border: 1px solid #f3d3d8;
  color: var(--teal-600);
}
.hhf-card__time strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navy-700);
}
.hhf-card__time span { font-size: .76rem; font-weight: 600; }

.hhf-card__note {
  margin-top: 6px;
  font-size: .88rem;
  color: var(--muted);
  text-wrap: pretty;
}

.hhf-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.hhf-card__facts dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.hhf-card__facts dd {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1px;
}

.hhf-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
}

.hhf-btn--cta {
  padding: 11px 20px;
  font-size: .92rem;
  background: var(--navy-700);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.hhf-btn--cta svg { width: 16px; height: 16px; }
.hhf-btn--cta:hover { background: var(--navy-600); transform: translateY(-1px); }

.hhf-btn--disabled {
  padding: 11px 20px;
  font-size: .9rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px dashed #d5d5d5;
  color: var(--muted);
  cursor: default;
}

.hhf-card__locate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--body);
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .16s ease;
}
.hhf-card__locate svg { width: 15px; height: 15px; color: var(--teal-600); }
.hhf-card__locate:hover { border-color: var(--teal-400); background: var(--teal-050); color: var(--navy-700); }
.hhf-card__locate:focus-visible { outline: none; box-shadow: var(--focus); }

/* ------------------------------- skeleton ------------------------------- */
.hhf-skeleton {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  padding: 19px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
}
.hhf-skeleton__rank { width: 36px; height: 36px; border-radius: 11px; }
.hhf-skeleton__body { display: grid; gap: 9px; align-content: start; }
.hhf-skeleton__line { height: 11px; border-radius: 6px; }
.hhf-skeleton__line--title { height: 17px; width: 48%; }
.hhf-skeleton__line--short { width: 62%; }
.hhf-skeleton__rank,
.hhf-skeleton__line {
  background: linear-gradient(90deg, #f0f0f0 25%, #e2e2e2 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: hhf-shimmer 1.3s ease-in-out infinite;
}
@keyframes hhf-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------- empty / error --------------------------- */
.hhf-empty, .hhf-error {
  padding: clamp(30px, 5vw, 46px) 26px;
  text-align: center;
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
}
.hhf-empty__icon, .hhf-error__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}
.hhf-empty__icon svg, .hhf-error__icon svg { width: 27px; height: 27px; }
.hhf-empty h3, .hhf-error h3 { font-size: 1.2rem; margin-bottom: 8px; }
.hhf-empty p, .hhf-error p { font-size: .94rem; max-width: 46ch; margin-inline: auto; }
.hhf-empty__hint { margin-top: 10px !important; color: var(--muted); font-size: .88rem !important; }
.hhf-error { border-color: var(--danger-line); background: #fffdf8; }
.hhf-error__icon { background: var(--danger-bg); color: var(--danger); }
.hhf-error .hhf-btn { margin-top: 18px; }

/* =========================================================================
   MAP
   ========================================================================= */
.hhf-mapwrap { position: sticky; top: 18px; }

.hhf-mapwrap__inner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-lg);
  background: var(--surface-2);
}

.hhf-map, .hhf-fallbackmap {
  width: 100%;
  height: clamp(380px, 58vh, 620px);
}

.hhf-mapwrap__hint {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

/* Advanced-marker pins */
.hhf-pin {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: var(--gray-mid);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 9px rgba(6,24,38,.32);
  transition: all .18s ease;
}
.hhf-pin__num {
  transform: rotate(45deg);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
}
.hhf-pin.is-active {
  background: var(--teal-600);
  width: 38px; height: 38px;
  box-shadow: 0 5px 14px rgba(6,24,38,.4);
}
.hhf-pin.is-active .hhf-pin__num { color: #fff; }
.hhf-pin--workplace {
  border-radius: 50%;
  transform: none;
  background: var(--navy-700);
  width: 26px; height: 26px;
  box-shadow: 0 0 0 8px rgba(38,38,38,.18), 0 3px 9px rgba(0,0,0,.3);
}
.hhf-pin__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ------------------------- static fallback map ------------------------- */
.hhf-fallbackmap {
  position: relative;
  background:
    radial-gradient(circle at 22% 18%, rgba(206,1,31,.08) 0%, transparent 48%),
    radial-gradient(circle at 78% 82%, rgba(130,130,130,.12) 0%, transparent 48%),
    linear-gradient(180deg, #fafafa 0%, #ededed 100%);
}
.hhf-fallbackmap::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hhf-fallbackmap__label {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 3;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  box-shadow: var(--sh-sm);
}
.hhf-fallbackmap__canvas { position: absolute; inset: 0; }
.hhf-fallbackmap__empty {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

.hhf-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.hhf-dot__pip {
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--gray-mid);
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 800;
  box-shadow: 0 2px 7px rgba(0,0,0,.26);
  transition: all .18s ease;
}
.hhf-dot__label {
  font-size: .67rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hhf-dot:hover .hhf-dot__pip { transform: scale(1.12); }
.hhf-dot.is-active { z-index: 4; }
.hhf-dot.is-active .hhf-dot__pip {
  background: var(--teal-600);
  color: #fff;
  transform: scale(1.24);
  box-shadow: 0 4px 12px rgba(0,0,0,.34);
}
.hhf-dot:focus-visible { outline: none; }
.hhf-dot:focus-visible .hhf-dot__pip { box-shadow: var(--focus); }

.hhf-dot--workplace { z-index: 5; cursor: default; }
.hhf-dot--workplace .hhf-dot__pip {
  background: var(--navy-700);
  width: 22px; height: 22px;
  box-shadow: 0 0 0 7px rgba(38,38,38,.16), 0 2px 7px rgba(0,0,0,.28);
}
.hhf-dot--workplace .hhf-dot__label { background: var(--navy-700); color: #fff; }

/* ------------------------------ disclaimer ------------------------------ */
.hhf-disclaimer {
  margin-top: 22px;
  padding: 15px 19px;
  border-left: 3px solid var(--teal-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: .87rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* =========================================================================
   EXPLANATORY COPY / FAQ
   ========================================================================= */
.hhf-copy { margin-top: 76px; }
.hhf-copy__title { font-size: clamp(1.5rem, 3vw, 2.05rem); }
.hhf-copy__lede {
  margin-top: 14px;
  max-width: 66ch;
  font-size: 1.03rem;
  text-wrap: pretty;
}

.hhf-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.hhf-how__card {
  position: relative;
  padding: 26px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.hhf-how__num {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 13px;
  border-radius: 9px;
  background: var(--teal-050);
  border: 1px solid #f3d3d8;
  color: var(--teal-600);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
}
.hhf-how__card h3 { font-size: 1.06rem; margin-bottom: 7px; }
.hhf-how__card p { font-size: .92rem; text-wrap: pretty; }

.hhf-note {
  margin-top: 24px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #3f3f3f 0%, #2e2e2e 100%);
  color: #dcdcdc;
}
.hhf-note h3 { color: #fff; font-size: 1.08rem; margin-bottom: 9px; }
.hhf-note p { font-size: .95rem; max-width: 78ch; text-wrap: pretty; }

.hhf-faq { margin-top: 60px; }
.hhf-faq__item {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.hhf-faq__item:first-of-type { margin-top: 22px; }
.hhf-faq__item[open] { border-color: var(--teal-400); box-shadow: var(--sh-sm); }
.hhf-faq__item summary {
  padding: 17px 48px 17px 20px;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.hhf-faq__item summary::-webkit-details-marker { display: none; }
.hhf-faq__item summary::after {
  content: '';
  position: absolute;
  right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--teal-600);
  border-bottom: 2px solid var(--teal-600);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.hhf-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.hhf-faq__item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--teal-500); }
.hhf-faq__item p {
  padding: 0 20px 19px;
  font-size: .93rem;
  max-width: 76ch;
  text-wrap: pretty;
}

.hhf-footer {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hhf-footer__disclaimer { font-size: .86rem; color: var(--muted); max-width: 78ch; }
.hhf-footer__meta { margin-top: 9px; font-size: .8rem; color: var(--muted); }
.hhf-footer__copyright {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================================
   WORDPRESS EMBED MODES
   -------------------------------------------------------------------------
   .hhf--embedded  shortcode mode="tool": hero and copy/FAQ removed, so the
                   tool sits inside a page that supplies its own headline.
   .hhf--fullbleed shortcode fullbleed="yes": lets the hero escape a
                   constrained theme container and run edge to edge.
   ========================================================================= */

/* Embedded: no hero above it, so the tool card must not pull upward into one,
   and the app should take the host page's background rather than paint its own
   full-width panel. */
.hhf--embedded { background: transparent; }
.hhf--embedded .hhf-main { padding-bottom: 0; }
.hhf--embedded .hhf-shell { padding-inline: 0; max-width: none; }
.hhf--embedded .hhf-tool { margin-top: 0; }
.hhf--embedded .hhf-banner { margin-top: 0; }
.hhf--embedded .hhf-results { margin-top: 40px; }

/* Full-bleed: break out of the theme's content column. The inner .hhf-shell
   still re-centers the content, so only the background runs edge to edge. */
.hhf--fullbleed .hhf-hero {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1040px) {
  .hhf-results__layout { grid-template-columns: minmax(0, 1fr); }
  .hhf-mapwrap { position: static; order: -1; }
  .hhf-map, .hhf-fallbackmap { height: clamp(320px, 46vh, 440px); }
}

@media (max-width: 760px) {
  .hhf-hero { padding-block: 46px 88px; }
  .hhf-hero__stats { gap: 20px 28px; }
  .hhf-hero__stats strong { font-size: 1.5rem; }
  .hhf-tool { border-radius: var(--r-lg); margin-top: -52px; }
  .hhf-step__head { grid-template-columns: auto 1fr; gap: 13px; }
  .hhf-step__check { grid-column: 2; grid-row: 1; justify-self: end; }
  .hhf-wp-grid { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }
  .hhf-options--commute, .hhf-options--price { grid-template-columns: 1fr; }
  .hhf-btn--primary { width: 100%; min-width: 0; }
  .hhf-results__head { flex-direction: column; align-items: flex-start; }
  .hhf-card__top { flex-direction: row; }
  .hhf-card__actions .hhf-btn--cta,
  .hhf-card__actions .hhf-btn--disabled { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 480px) {
  .hhf-card { grid-template-columns: 1fr; gap: 12px; }
  .hhf-card__rank { width: 30px; height: 30px; font-size: .85rem; }
  .hhf-card__facts { gap: 6px 16px; }
  .hhf-dot__label { display: none; }
  .hhf-summary__item { max-width: 100%; }
}

/* =========================================================================
   MOTION / CONTRAST PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hhf *, .hhf *::before, .hhf *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  .hhf { --line: #8f8f8f; --muted: #3d3d3d; --gray-brand: #5a5a5a; }
  .hhf-radio:checked + .hhf-wp__inner,
  .hhf-radio:checked + .hhf-opt__inner { box-shadow: 0 0 0 3px var(--navy-700); }
}

@media print {
  .hhf-hero, .hhf-submit, .hhf-faq, .hhf-mapwrap, .hhf-card__locate { display: none !important; }
  .hhf-tool { box-shadow: none; margin-top: 0; }
  .hhf-results__layout { grid-template-columns: 1fr; }
}