/* ============================================================
   ithouse — site-chrome glue (light DOM)
   Makes <site-header>/<site-footer> render correctly on every
   page, including the static marketing pages that are NOT
   wrapped in .hv-page. Pair with hosting.css + responsive-v5.css.
   ============================================================ */

site-header, site-footer { display: block; }

/* desktop nav is position:absolute (top:32px) — anchor it to the header host */
site-header { position: relative; z-index: 50; }

/* token + reset context for chrome used outside .hv-page */
site-header, site-footer {
  font-family: var(--sans), sans-serif;
  letter-spacing: -.025em;
}
site-header *, site-footer * { box-sizing: border-box; margin: 0; }
site-header a, site-footer a { color: inherit; text-decoration: none; }

/* Align static-page content gutter (48px at desktop) with the nav logo + the
   React pages (.hv-wrap = 48px). The marketing/legal pages wrap content in
   `.max-w-340 px-6` (24px), which left the logo and content misaligned. */
@media (min-width: 1024px) {
  .max-w-340 { padding-left: 48px !important; padding-right: 48px !important; }
}

/* (No persistent "active" highlight on nav links — it read as a stuck hover state.
   The `active` class is still set on the current page's link for future styling hooks,
   but intentionally has no background.) */

/* the mobile sheet/mega are toggled via the [hidden] attribute in JS — make sure
   that beats the responsive `display:flex !important` rule so they stay closed
   until opened (and the desktop mega stays hidden until hover). */
.hv-nav-sheet[hidden] { display: none !important; }
.hv-mega-wrap[hidden] { display: none !important; }

/* shiny sweeping label on the desktop nav “Contact us” pill (white button, dark text) */
.hv-nav-contact .shiny-txt {
  color: rgba(24,24,27,.58);
  background-image: linear-gradient(120deg, rgba(24,24,27,0) 40%, rgba(24,24,27,.95) 50%, rgba(24,24,27,0) 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: shinyText 2.4s linear infinite;
}
@keyframes shinyText { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hv-nav-contact .shiny-txt { animation: none; color: #18181b; }
}

/* ------------------------------------------------ footer: phone + chat panel */
.hv-footer-grid--chat { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; }

.ft-phone { margin-top: 8px; }
.ft-phone-row { display: flex; align-items: baseline; gap: 10px; }
.ft-phone-pre { font-size: 24px; color: var(--fg-3); letter-spacing: .02em; }
.ft-phone-num {
  font-family: var(--space, "Space Grotesk", var(--sans));
  font-size: 36px; line-height: 1; font-weight: 500; letter-spacing: -.02em;
  color: #fff; display: inline-block; white-space: nowrap;
  transition: color .2s var(--ease);
}
.ft-phone-num:hover { color: var(--cyan); }
.ft-resp { font-size: 14px; color: var(--fg-3); margin-top: 10px; }

.ft-chatpanel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 180px; }
.ft-chat-label {
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-3);
}
.ft-chat {
  display: inline-flex; align-items: center; gap: 9px; font-size: 24px; font-weight: 500;
  letter-spacing: -.02em; color: var(--cyan); white-space: nowrap;
}
.ft-chat svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s var(--ease); }
.ft-chat:hover svg { transform: translate(2px, -2px); }

/* responsive: the responsive-v5 rules force the grid to 2 columns; let the
   phone column span full width and drop the chat panel into the flow below. */
@media (max-width: 900px) {
  .hv-footer-grid--chat { grid-template-columns: 1fr 1fr !important; }
  .hv-footer-grid--chat > .ft-chatpanel { grid-column: 1 / -1; }
}