/* KeeWanders — shared site header / navigation.
   Styling + behaviour are identical to the landing page (index.html), extracted here so the
   supporting pages (faq / privacy / terms) use one source of truth. Values are hard-coded
   (index's palette) rather than var()-based, so the header renders identically WITHOUT
   overriding each supporting page's own :root / body-content colours. */

/* Buttons (the "Join the waitlist" CTA) */
.btn{border:0;border-radius:12px;padding:15px 24px;font-size:15px;font-weight:800;cursor:pointer;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;transition:transform .15s ease,background .15s ease;line-height:1}
a.btn{display:inline-block;text-decoration:none;text-align:center}
.btn.gold{background:#c99a4e;color:#241802}
.btn.gold:hover{background:#d9a95a;transform:translateY(-1px)}

/* Top nav — sticky; hides on scroll-down, reveals on scroll-up.
   Full-width cream bar; calc() padding keeps the same 996px centred content column as index. */
.topnav{display:flex;justify-content:space-between;align-items:center;gap:16px;
  position:sticky;top:0;z-index:50;background:#f6f1e9;
  padding:20px max(22px, calc(50% - 498px));padding-top:calc(20px + env(safe-area-inset-top));
  transition:transform .35s ease;will-change:transform}
.topnav.nav-hidden{transform:translateY(-100%)}
.navbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#2a2233;font-weight:800;font-size:17px}
.navbrand .brandtxt{font-family:'Space Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.05}
.navlinks{display:flex;align-items:center;gap:28px}
.navlinks a{color:#1a1620;text-decoration:none;font-size:14.5px;font-weight:600;transition:color .15s}
.navlinks a:hover{color:#c99a4e}
.navlinks .navjoin{color:#241802;padding:11px 20px;font-size:14px}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.hamburger span{display:block;width:24px;height:2px;background:#2a2233;margin:0 auto;border-radius:2px;transition:transform .25s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer (plum full-screen sheet, smooth fade/slide) */
.drawer{position:fixed;inset:0;z-index:60;background:#241d2e;color:#fff;
   display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
   padding:calc(20px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
   opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
   transition:opacity .28s ease,transform .28s ease,visibility .28s}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.drawer-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:18px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.drawer-links{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:320px}
.drawer-links a{color:#eae4f0;text-decoration:none;font-size:22px;font-weight:600;font-family:'Georgia','Times New Roman',serif}
.drawer-links .btn{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;margin-top:6px;padding:14px 30px}
.drawer-links .drawer-legal{font-size:14px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#b7aec6;font-weight:500}
@media(max-width:820px){ .navlinks{display:none} .hamburger{display:flex} }

/* "Back to KeeWanders" CTA — the approved Privacy-page treatment, shared verbatim
   (plum text, 2px gold underline, weight 700, inline-block). */
.back{display:inline-block;margin-top:30px;font-weight:700;color:#2a2233;text-decoration:none;border-bottom:2px solid #c99a4e;padding-bottom:2px}

/* Primary "Join the waitlist" button (supporting pages) — gold, matches the site's CTAs. */
.cta{display:inline-block;margin-top:26px;background:#c99a4e;color:#241802;font-weight:800;border-radius:12px;padding:14px 22px;text-decoration:none;text-align:center}
.cta:hover{background:#d9a95a}

/* End-of-page action area — soft card (full content width, in line with the page's other
   cards) with the primary CTA stacked full-width over the centred back link, at every width.
   faq shows CTA + back; privacy/terms show the back link only. */
.actions{display:flex;flex-direction:column;align-items:center;gap:24px;
  margin-top:34px;padding:20px;
  background:#fffdf9;border:1px solid #e7ddd0;border-radius:16px}
.actions .cta{width:100%;margin-top:0}
.actions .back{margin-top:0}

/* Site footer — the dark plum block, identical to the landing page (hard-coded palette so it
   renders the same on the supporting pages without their own CSS variables). Full-width. */
footer{background:#3c3048;color:#cfc6da;text-align:center;padding:40px 22px calc(84px + env(safe-area-inset-bottom));font-size:13px}
footer .flogo{display:block;margin:0 auto 10px}
footer .flogo-link{display:inline-block;text-decoration:none;color:inherit}
footer .brand{color:#fff;font-size:20px;display:block;text-align:center;font-family:'Georgia','Times New Roman',serif}
footer .ftagline{margin:10px auto 4px;max-width:420px;color:#e9e3f0}
footer .fnote{margin:0 auto;font-size:12px;color:#9d93ab;letter-spacing:.02em}
footer .flinks{margin:16px auto 0;font-size:13px}
footer .flinks a{color:#e9e3f0;text-decoration:none;border-bottom:1px solid rgba(233,227,240,.4);padding-bottom:1px}
footer .fconsent{margin:12px auto 0;font-size:11.5px;color:#9d93ab;max-width:400px}

/* Reduced motion: drop the animated slide — the header still shows/hides, just instantly. */
@media(prefers-reduced-motion:reduce){ .topnav{transition:none} }