/* ============================================================
 * CoreVoice site chrome — nav, footer, and the documented mobile
 * hamburger. Built ON the design system (corevoice.css); uses only
 * --cv-* tokens. Per SKILL.md: shared nav/footer live here, never
 * duplicated per page. Page-only layout lives in each page's <style>.
 * ============================================================ */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cv-bg-page); color: var(--cv-ink-80); font-family: var(--cv-font-body); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; }
/* Every component (.btn, .cta-link, .m-nav-item, etc.) sets its own color +
   text-decoration explicitly, so this reset was never missed until a whole
   card got wrapped in one <a> (case-studies grid) and its unstyled children
   inherited the browser's default blue/underline link look. */
a { color: inherit; text-decoration: none; }

/* Vertical-rhythm utilities — used across index.html and services.html
   already (3+ uses), promoted here per patterns.md §2.5 instead of staying
   copy-pasted into every page's local <style> block. */
.stack-lg { margin-top: var(--cv-space-6); }
.stack-md { margin-top: var(--cv-space-5); }

/* ---------- Pill nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 16px var(--cv-gutter);
  background: rgba(246, 245, 242, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.site-nav__inner {
  max-width: var(--cv-w-wide); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--cv-space-4);
  background: var(--cv-white); border: 1px solid var(--cv-ink-15);
  border-radius: var(--cv-radius-pill);
  padding: 10px 12px 10px 22px;
}
.site-nav__brand { display: inline-flex; align-items: center; }
.site-nav__brand img { height: 28px; width: auto; display: block; }
.site-nav__links { display: flex; align-items: center; gap: var(--cv-space-5); }
.site-nav__cta { margin-left: var(--cv-space-2); }
.site-nav .btn { white-space: nowrap; }
/* The About trigger is a <button> using .m-nav-item — strip default button chrome */
.site-nav .m-nav-dropdown > .m-nav-item { background: transparent; border: 0; cursor: pointer; white-space: nowrap; }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  position: relative; display: none; width: 40px; height: 40px; border: 0; cursor: pointer;
  background: transparent; color: var(--cv-ink-100);
  align-items: center; justify-content: center; border-radius: var(--cv-radius-pill);
}
.nav-toggle:focus-visible { outline: 2px solid var(--cv-blue-500); outline-offset: 3px; }
/* .icon (corevoice.css) is display:inline-flex + width:1em, which flex-shrinks
   this 24px svg down to a sliver on its main axis — pin size so it can't. */
.nav-toggle .icon { width: 24px; height: 24px; flex-shrink: 0; }
.nav-toggle svg { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.nav-toggle .icon-open, .nav-toggle .icon-close {
  position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: rotate(-90deg) scale(0.5);
  transition: opacity var(--cv-dur-base) var(--cv-ease), transform var(--cv-dur-base) var(--cv-ease);
}
.nav-toggle .icon-open { opacity: 1; transform: rotate(0deg) scale(1); }
.site-nav.nav-open .nav-toggle .icon-open { opacity: 0; transform: rotate(90deg) scale(0.5); }
.site-nav.nav-open .nav-toggle .icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Mobile dropdown panel — floats over content (position:absolute) so opening
   it never pushes the page down and causes layout shift; opacity+transform
   transition (not display toggling) so it animates open/closed. */
.site-nav__panel {
  position: absolute; top: calc(100% + 8px); left: var(--cv-gutter-sm); right: var(--cv-gutter-sm);
  max-width: var(--cv-w-wide); margin: 0 auto;
  background: var(--cv-white); border: 1px solid var(--cv-ink-15);
  border-radius: var(--cv-radius-card);
  padding: var(--cv-space-2);
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--cv-shadow-hover);
  opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; visibility: hidden;
  transition: opacity var(--cv-dur-base) var(--cv-ease), transform var(--cv-dur-base) var(--cv-ease), visibility 0s linear var(--cv-dur-base);
}
.site-nav.nav-open .site-nav__panel {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible;
  transition: opacity var(--cv-dur-base) var(--cv-ease), transform var(--cv-dur-base) var(--cv-ease), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .icon, .site-nav__panel { transition: none !important; }
}
.site-nav__panel-link,
.site-nav__panel-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: 12px 14px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px;
  font-family: var(--cv-font-display); font-weight: 500;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cv-ink-80); text-decoration: none;
  transition: background var(--cv-dur-fast) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease);
}
.site-nav__panel-link:hover,
.site-nav__panel-group-toggle:hover { background: var(--cv-ink-5); color: var(--cv-ink-100); }
.site-nav__panel-link.active,
.site-nav__panel-group-toggle.active { color: var(--cv-ink-100); }
.site-nav__panel-group-toggle .caret { font-size: 10px; transition: transform var(--cv-dur-fast) var(--cv-ease); }
.site-nav__panel-group.open .site-nav__panel-group-toggle .caret { transform: rotate(180deg); }
.site-nav__panel-sub { display: none; flex-direction: column; padding: 2px 0 4px 12px; }
.site-nav__panel-group.open .site-nav__panel-sub { display: flex; }
.site-nav__panel-sub a {
  padding: 10px 14px; border-radius: 8px;
  font-family: var(--cv-font-body); font-size: 14px; color: var(--cv-ink-60); text-decoration: none;
  transition: background var(--cv-dur-fast) var(--cv-ease), color var(--cv-dur-fast) var(--cv-ease);
}
.site-nav__panel-sub a:hover { background: var(--cv-ink-5); color: var(--cv-ink-100); }
/* Non-link group caption inside the mobile Services sub-list (Retainer/Project) */
.site-nav__panel-sub-label {
  display: block; padding: 10px 14px 2px;
  font-family: var(--cv-font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-ink-40);
}
.site-nav__panel .btn { margin: var(--cv-space-2) 8px 6px; justify-content: center; }

/* Dark-variant bar (for dark heroes): only the translucent bar recolors; pill stays white */
.site-nav[data-variant="dark"] { background: rgba(25, 26, 28, 0.55); }

@media (max-width: 768px) {
  .site-nav { padding: 14px var(--cv-gutter-sm); }
  .site-nav__links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cv-bg-dark); color: var(--cv-white);
  padding: var(--cv-space-8) var(--cv-gutter) var(--cv-space-5);
}
.site-footer__inner {
  max-width: var(--cv-w-wide); margin: 0 auto;
  display: flex; justify-content: space-between; gap: var(--cv-space-7); flex-wrap: wrap;
  padding-bottom: var(--cv-space-6);
}
.site-footer__brand img { height: 28px; width: auto; display: block; }
.site-footer__tag { color: rgba(255,255,255,0.6); max-width: 280px; margin-top: var(--cv-space-3); }
.site-footer__cols { display: flex; gap: var(--cv-space-7); flex-wrap: wrap; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__h {
  font-family: var(--cv-font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px;
}
.site-footer__link {
  font-family: var(--cv-font-body); font-size: 14px; color: rgba(255,255,255,0.75); text-decoration: none;
  transition: color var(--cv-dur-fast) var(--cv-ease);
}
.site-footer__link:hover { color: var(--cv-white); }
.site-footer__link:focus-visible { outline: 2px solid var(--cv-blue-500); outline-offset: 3px; border-radius: 2px; }
.site-footer__base {
  max-width: var(--cv-w-wide); margin: 0 auto;
  display: flex; justify-content: space-between; padding-top: var(--cv-space-4); flex-wrap: wrap; gap: 12px;
}
.site-footer__base span { font-family: var(--cv-font-body); font-size: 14px; color: rgba(255,255,255,0.4); }
@media (max-width: 768px) { .site-footer { padding: var(--cv-space-7) var(--cv-gutter-sm) var(--cv-space-5); } }

/* ---- Podcast temporarily hidden (2026-07) — remove this rule to restore ---- */
.is-podcast-hidden { display: none !important; }