/* ============================================================
   Hearthstone Mortgages — header, top bar, nav, progress bar
   ============================================================ */

/* The template-part wrapper must not generate a box, or it becomes the
   sticky containing block (only header-tall) and the header scrolls away.
   display:contents makes .hm-header-shell stick relative to the page. */
.hm-header-part { display: contents; }

.hm-header-shell { position: sticky; top: 0; z-index: 100; }

/* --- Top bar (deep blue, hidden on mobile) --- */
.hm-topbar {
  background: var(--hm-blue-950);
  padding: 0.5rem var(--section-padding-x);
  font-family: var(--font-body);
}
.hm-topbar__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hm-topbar__left { display: flex; align-items: center; gap: 1.5rem; font-size: 0.73rem; color: rgba(255,255,255,0.78); }
.hm-topbar__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.hm-topbar__link { color: rgba(255,255,255,0.78); text-decoration: none; }
.hm-topbar__link:hover { color: var(--hm-gold-500); }
.hm-topbar__ico { color: var(--hm-gold-500); display: inline-flex; }
.hm-topbar__right { display: flex; align-items: center; gap: 1.5rem; }
.hm-topbar__rating { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255,255,255,0.78); }
.hm-topbar__stars { display: inline-flex; gap: 1px; color: var(--hm-gold-500); }
.hm-topbar__phone {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--hm-gold-500); text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.03em;
}

/* --- Header (sticky, frosted white) --- */
.hm-header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--hm-blue-100);
  transition: box-shadow 220ms var(--ease-out);
  position: relative;
  padding-inline: var(--section-padding-x);
}
.hm-header.is-scrolled { box-shadow: var(--shadow-sm); }
.hm-header__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hm-header__logo { line-height: 0; flex-shrink: 0; display: inline-flex; }
.hm-header__logo img { height: 34px; width: auto; }

.hm-nav { display: flex; align-items: center; gap: 0; margin-left: auto; min-width: 0; }
.hm-nav__link {
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 0.78rem; color: var(--hm-ink);
  text-decoration: none; padding: 0.5rem 0.55rem; border-radius: var(--radius-pill);
  white-space: nowrap; transition: color 160ms var(--ease-out);
}
.hm-nav__link:hover { color: var(--hm-blue-600); }

/* Areas-we-serve dropdown */
.hm-nav__group { position: relative; display: inline-flex; }
.hm-nav__link--drop { display: inline-flex; align-items: center; gap: 0.25rem; }
.hm-nav__caret { display: inline-flex; transition: transform 160ms var(--ease-out); }
.hm-nav__group:hover .hm-nav__caret, .hm-nav__group:focus-within .hm-nav__caret { transform: rotate(180deg); }
.hm-nav__drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 230px; background: var(--hm-white); border: 1px solid var(--hm-slate-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); z-index: 50;
}
/* Invisible bridge over the gap so the dropdown does not close as the cursor moves down into it */
.hm-nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; }
.hm-nav__group:hover .hm-nav__drop, .hm-nav__group:focus-within .hm-nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.hm-nav__drop-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.78rem; color: var(--hm-ink); text-decoration: none; }
.hm-nav__drop-link svg { color: var(--hm-gold-500); }
.hm-nav__drop-link:hover { background: var(--hm-blue-50); color: var(--hm-blue-700); }
.hm-nav__drop-all { margin-top: 0.25rem; padding: 0.6rem 0.7rem; border-top: 1px solid var(--hm-slate-200); font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; color: var(--hm-blue-600); text-decoration: none; }
.hm-nav__drop-all:hover { color: var(--hm-blue-800); }
/* Mobile sub-links */
.hm-mobile-nav__sub { display: flex; flex-direction: column; padding: 0 0 0.5rem 0.75rem; }
.hm-mobile-nav__sublink { font-family: var(--font-body); font-size: 0.85rem; color: var(--hm-slate-600); text-decoration: none; padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--hm-blue-50); }
@media (prefers-reduced-motion: reduce) { .hm-nav__drop, .hm-nav__caret { transition: none; } }

.hm-header__cta { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.75rem; flex-shrink: 0; }

/* --- Scroll-progress bar (thin gold, under header) --- */
.hm-progress {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
  background: var(--hm-gradient-gold);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* --- Mobile nav toggle (hamburger) --- */
.hm-nav-toggle {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: none; cursor: pointer; padding: 10px;
}
.hm-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--hm-ink); border-radius: 2px; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.hm-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hm-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.hm-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile nav panel --- */
.hm-mobile-nav {
  display: none; flex-direction: column; gap: 0.25rem;
  background: var(--hm-white); border-bottom: 1px solid var(--hm-blue-100);
  padding: 1rem var(--section-padding-x) 1.5rem;
  box-shadow: var(--shadow-md);
}
.hm-mobile-nav__link {
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 0.95rem; color: var(--hm-ink);
  text-decoration: none; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--hm-blue-50);
}
.hm-mobile-nav__cta { margin-top: 1rem; width: 100%; }

/* --- Responsive --- */
@media (max-width: 980px) {
  .hm-topbar { display: none; }
  .hm-nav, .hm-header__cta { display: none; }
  .hm-nav-toggle { display: flex; }
  /* Only show the mobile nav when the toggle has opened it (removed [hidden]). */
  .hm-mobile-nav:not([hidden]) { display: flex; }
}
/* Belt-and-braces: the hidden attribute always wins, at any width. */
.hm-mobile-nav[hidden] { display: none; }