/* ============================================================
   HeartEase — shared mobile navigation
   Hamburger trigger + slide-out drawer for the TopNav component
   (TopNav.jsx). Linked by every page that uses <TopNav>, so the
   responsive nav behaves identically site-wide.
   Depends on tokens from colors_and_type.css.
   ============================================================ */

/* Hamburger trigger — hidden on desktop, shown when nav links collapse */
.hh-nav__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -6px -8px -6px 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--brand-navy);
}
.hh-nav__burger svg { width: 26px; height: 26px; }

/* Slide-out mobile drawer (always in DOM, revealed when .is-open) */
.hh-mobnav { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; overflow: hidden; /* contain the translateX(100%) panel so the closed drawer can never widen the page */ }
.hh-mobnav.is-open { visibility: visible; pointer-events: auto; }
.hh-mobnav__scrim {
  position: absolute; inset: 0; background: rgba(2,12,30,0.55);
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
.hh-mobnav.is-open .hh-mobnav__scrim { opacity: 1; }
.hh-mobnav__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(87vw, 372px);
  background: var(--parchment);
  box-shadow: -24px 0 60px rgba(2,29,66,0.32);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1);
}
.hh-mobnav.is-open .hh-mobnav__panel { transform: translateX(0); }
.hh-mobnav__bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--rule);
}
.hh-mobnav__brand-zh { font-family: var(--font-serif-cn); font-weight: 700; font-size: 20px; color: var(--brand-red); }
.hh-mobnav__brand-zh em { font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 18px; color: var(--brand-navy); margin-left: 8px; }
.hh-mobnav__close {
  width: 40px; height: 40px; margin: -8px -8px -8px 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--brand-navy);
}
.hh-mobnav__close svg { width: 22px; height: 22px; }
.hh-mobnav__scroll { flex: 1; overflow-y: auto; padding: 6px 0; -webkit-overflow-scrolling: touch; }
.hh-mobnav__group { border-bottom: 1px solid var(--rule); }
.hh-mobnav__row { display: flex; align-items: stretch; }
.hh-mobnav__link {
  flex: 1; display: flex; align-items: center; padding: 16px 20px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none;
}
.hh-mobnav__link:active { color: var(--brand-red); }
.hh-mobnav__exp {
  flex: none; width: 56px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-left: 1px solid var(--rule);
  cursor: pointer; color: var(--ink-mute);
}
.hh-mobnav__exp svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.hh-mobnav__exp[aria-expanded="true"] svg { transform: rotate(180deg); }
.hh-mobnav__sub { padding: 2px 0 10px; background: rgba(2,29,66,0.03); }
.hh-mobnav__sublink {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 20px 10px 28px; text-decoration: none;
}
.hh-mobnav__sublink span:first-child { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--brand-navy); }
.hh-mobnav__sub-cn { font-family: var(--font-serif-cn); font-size: 13px; color: var(--brand-red); flex: none; }
.hh-mobnav__foot { flex: none; padding: 18px 20px 24px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
.hh-mobnav__cta { justify-content: center; width: 100%; text-transform: none; font-size: 15px; padding: 15px; }
.hh-mobnav__contact { display: flex; flex-direction: column; gap: 10px; }
.hh-mobnav__contact a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.hh-mobnav__contact a svg { width: 15px; height: 15px; color: var(--brand-red); flex: none; }

/* --- Nav collapses to drawer when links no longer fit ---
   Selectors are scoped to .hh-nav (specificity 0,2,0) so they win
   over the base .hh-nav__links / .hh-nav__burger rules regardless of
   stylesheet load order across pages. */
@media (max-width: 960px) {
  .hh-nav .hh-nav__links { display: none; }
  .hh-nav > .hh-btn--primary { display: none; }
  .hh-nav .hh-nav__burger { display: inline-flex; }
}

/* --- Utility bar trims on phones (shared) ---
   Selectors are scoped to .hh-util (specificity 0,2,0 / 0,3,0) so they win over
   each page's own base rules (home.css / guide.css / services.css / inline
   <style>) regardless of stylesheet load order — same approach as the nav-drawer
   rules above. Without the bump those base rules (e.g. .hh-util__items{display:
   flex}) load later and win, so the items + full phone/email/WhatsApp contact
   set stay on screen and overflow the viewport (~900px) — which ALSO leaves the
   fixed welcome gate unable to cover the now horizontally-scrollable page.
   On phones we keep only the language switch + WhatsApp; the phone & email
   links remain reachable in the nav-drawer footer. */
@media (max-width: 540px) {
  .hh-util .hh-util__items { display: none; }
  .hh-util .hh-util__inner {
    justify-content: center;
    padding-left: 16px; padding-right: 16px;
    gap: 12px;
  }
  .hh-util .hh-util__contact { gap: 12px; }
  .hh-util .hh-util__contact .hh-util__phone { display: none; }
}

/* ============================================================
   Desktop megamenu: keep right-edge dropdowns inside the viewport
   The hover panels are 560px wide and anchored left:-24px. For the
   last two nav items (About, Contact) that pushes the closed panel
   past the right edge → a stray horizontal scrollbar site-wide.
   Right-anchor those so they open inward and never overflow.
   (Harmless on mobile: the links are display:none there.)
   ============================================================ */
.hh-nav__links li:nth-last-child(-n+2) .hh-megamenu { left: auto; right: -24px; }