/* Science Meets Gym — shared, site-wide styles.
   Loaded on EVERY page via site-sync (see tools/site-sync/). This is the single
   home for CSS that applies across the whole site. Keep page-specific design in
   each page's own <style> block; only put genuinely universal rules here. */

/* Outbound Kensui product CTA hook.
   Every kensui.com/products link carries class="kensui-cta" as a stable
   GTM/analytics selector. Intentionally NO visual override here so each page
   keeps styling its own button. Add a site-wide CTA rule below only if you want
   it to apply to every CTA on every page. */
.kensui-cta { /* analytics selector only — no visual styling on purpose */ }

/* =====================================================================
   Canonical NAV + FOOTER — one look for every page (site-sync manages the
   markup; this styles it). Loaded after each page's inline <style>, so these
   rules win and unify the header/footer across all designs. Colors are
   hardcoded here (not CSS vars) so they render the same regardless of a page's
   own palette. Edit the site's header/footer look ONLY here.
   ===================================================================== */

/* ---- NAV ---- */
.nav { background:#fff; position:sticky; top:0; z-index:100; border-bottom:1px solid #e0e0e0; padding:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.nav-accent { height:3px; background:linear-gradient(90deg,#16a34a 0%,#2563eb 100%); }
.nav-main { max-width:1100px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:inline-flex; }
.nav-logo img { height:40px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.nav-links li { list-style:none; margin:0; }
/* All typography props set explicitly so no page's inline nav CSS bleeds through. */
.nav-links a { font-size:.85rem; font-weight:500; color:#777; letter-spacing:.01em; text-transform:none; padding:6px 14px; border-radius:6px; text-decoration:none; transition:all .2s; }
.nav-links a:hover { color:#1a1a1a; background:#fafafa; text-decoration:none; }
.nav-links a.active { color:#15803d; background:#dcfce7; font-weight:600; }
.nav-mobile-toggle { display:none; background:none; border:none; color:#444; font-size:1.4rem; cursor:pointer; padding:4px; }

/* ---- FOOTER ---- */
.footer { background:#1a1a1a; border-top:1px solid rgba(255,255,255,.06); padding:32px 24px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-logo { display:inline-flex; }
.footer-logo img { height:28px; width:auto; display:block; opacity:.45; filter:brightness(0) invert(1); }
.footer-links { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.footer-links li { list-style:none; margin:0; }
.footer-links a { font-size:.78rem; color:#777; text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:#ccc; text-decoration:none; }
.footer-copy { font-size:.72rem; color:#555; }

/* ---- Mobile: collapse nav to a toggle, stack the footer ---- */
@media (max-width:768px) {
  .nav-links {
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; padding:12px 24px 20px; gap:4px;
    border-top:1px solid #e0e0e0; box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  .nav-links.open { display:flex; }
  .nav-mobile-toggle { display:block; }
  .footer-inner { flex-direction:column; gap:16px; text-align:center; }
  .footer-links { flex-wrap:wrap; justify-content:center; }
}