/* ============================================================
   Owambe Planner — shared site chrome (header + footer)
   Single source of truth, loaded on EVERY page (home + legal).
   Markup is injected by /partials.js. Relies on the page's own
   :root tokens (--coral, --line, --ink, --muted, --glass-line …),
   which both home.css and styles.css define.
   ============================================================ */

.o-wrap { margin:0 auto; max-width:1160px; padding:0 24px; width:100%; }

/* clear the fixed nav on non-home pages (home hero sits under it on purpose) */
body:not(.o-page) { padding-top:74px; }

/* ---------------- Nav (transparent -> solid on scroll) ---------------- */
.o-nav { background:transparent; border-bottom:1px solid transparent; position:fixed; top:0; left:0; right:0; z-index:60; padding-top:12px; padding-bottom:8px; transition:background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; }
.o-nav.scrolled { -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); background:rgba(18,10,14,0.92); border-bottom:1px solid var(--line); }
.o-nav__inner { align-items:center; display:flex; gap:18px; justify-content:space-between; padding:14px 24px 16px; }

.o-brand { align-items:center; display:flex; gap:11px; text-decoration:none; }
.o-brand img { border-radius:11px; height:42px; width:42px; object-fit:cover; }
.o-brand__word { display:flex; flex-direction:column; line-height:1; }
.o-brand__word b { color:#fff; font-size:18px; font-weight:900; letter-spacing:-0.3px; }
.o-brand__word i { color:rgba(255,255,255,0.72); font-size:9.5px; font-weight:800; letter-spacing:0.34em; text-transform:uppercase; font-style:normal; margin-top:4px; }

/* nav logo: horizontal flip every 5s */
.o-nav .o-brand { perspective:520px; }
.o-nav .o-brand img { animation:logoFlip 5s ease-in-out infinite; backface-visibility:visible; }
@keyframes logoFlip { 0%,80%{ transform:rotateY(0deg); } 90%{ transform:rotateY(180deg); } 100%{ transform:rotateY(360deg); } }

.o-nav__links { align-items:center; display:flex; gap:30px; }
.o-nav__links a { color:rgba(255,255,255,0.82); font-size:14.5px; font-weight:700; text-decoration:none; transition:color 0.15s ease; }
.o-nav__links a:hover { color:var(--coral-light); }

/* Get Started CTA — self-contained liquid-glass coral (no dependency on home.css buttons) */
.o-nav__cta { align-items:center; border-radius:999px; cursor:pointer; display:inline-flex; font-family:inherit; font-size:15px; font-weight:900; gap:9px; justify-content:center; padding:13px 24px; text-decoration:none; position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(180deg, rgba(250,92,76,0.88) 0%, rgba(216,69,58,0.80) 100%);
  border:1px solid rgba(255,255,255,0.26);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.55), inset 0 -3px 8px rgba(170,46,38,0.5), 0 8px 22px rgba(250,92,76,0.22);
  transition:transform 0.15s ease, background 0.15s ease; }
.o-nav__cta::before { content:""; position:absolute; left:0; right:0; top:0; height:48%; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.42), transparent); }
.o-nav__cta:hover { transform:translateY(-2px); background:linear-gradient(180deg, rgba(250,92,76,0.95), rgba(216,69,58,0.88)); }

/* ---------------- Footer ---------------- */
.o-footer { background:#0C0609; border-top:1px solid var(--line); color:#A7A2A6; }
.o-footer__inner { display:grid; gap:36px; grid-template-columns:1.4fr 1fr 1fr 1fr; padding:60px 24px 34px; }
.o-footer__brand img { border-radius:12px; height:44px; width:44px; }
.o-footer__brand p { font-size:14px; line-height:1.6; margin:14px 0 0; max-width:260px; color:#A7A2A6; }
.o-social { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.o-social a { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#C9C2C6; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); transition:color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.o-social a:hover { color:#fff; background:var(--coral); border-color:var(--coral); transform:translateY(-2px); }
.o-social svg { width:17px; height:17px; }
.o-footer__logo { align-items:center; display:flex; gap:11px; text-decoration:none; }
.o-fcol h4 { color:#fff; font-size:13px; font-weight:900; letter-spacing:0.1em; margin:6px 0 16px; text-transform:uppercase; }
.o-fcol a { color:#A7A2A6; display:block; font-size:14.5px; font-weight:600; margin-bottom:11px; text-decoration:none; }
.o-fcol a:hover { color:var(--coral-light); }
.o-footer__bottom { border-top:1px solid var(--line); color:#A7A2A6; font-size:13px; padding:22px 24px 40px; text-align:center; }

@media (max-width:1024px) { .o-footer__inner { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) {
  .o-nav__links { display:none; }
  .o-footer__inner { grid-template-columns:1fr; gap:26px; }
}
@media (prefers-reduced-motion: reduce) { .o-nav .o-brand img { animation:none; } }