/* ========== THEME ========== */
:root{
  --bg:#0f0e0d;         /* deep warm black */
  --text:#ffffff;       /* white */
  --muted:#cdbfa6;      /* soft beige for notes/links */
  --card:#171513;       /* card surface */
  --line:#3a322b;       /* hairline */
  --beige:#e9d3a8;      /* primary */
  --beige-press:#dfc68e;
}

/* ========== BASE (neutral, no layout here) ========== */
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Inter,Roboto,Segoe UI,sans-serif }
a{ color:var(--beige); text-decoration:underline; text-underline-offset:3px }

/* simple utilities */
.visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  padding:0!important; border:0!important; height:1px!important; width:1px!important; overflow:hidden
}

/* ========== HOME ONLY ========== */
body.home .wrap{
  max-width: 720px;
  margin: 8vh auto 24px;
  padding: 0 16px;
  display:flex; flex-direction:column; align-items:stretch;
}

body.home .hero{ text-align:center; margin:0 0 16px }
body.home .hero h1{ font-size:2.2rem; margin:0 0 6px; line-height:1.15 }
body.home .tag{ opacity:.95; margin:0 }

body.home .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  margin:16px auto 0;
  max-width:640px;
}

/* inputs + main button */
body.home .input{
  width:100%; padding:14px 16px; border-radius:16px;
  border:1px solid var(--line); background:#12100e; color:var(--text);
  text-align:center; outline:none; font-size:16px; /* stop iOS zoom */
}
body.home .input::placeholder{ color:#b7b0a1 }
body.home .btn{
  width:100%; margin-top:12px; padding:14px 16px; border:0; border-radius:16px;
  background:var(--beige); color:#1b1917; font-weight:700; cursor:pointer; font-size:16px;
}
body.home .btn:active{ background:var(--beige-press) }

/* quick actions */
body.home .actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:.25rem }
body.home .action-link{ background:none; border:0; color:#fff; cursor:pointer; padding:0; font-size:1rem; font-weight:600 }
body.home .dot{ opacity:.45 }
body.home #walletNote.hint{ margin-top:6px; text-align:center; font-size:.95rem; color:var(--muted) }

/* bottom nav (centered, beige) */
body.home .nav{ margin:22px auto 0; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; opacity:.95 }
body.home .nav a{ color:var(--beige); font-weight:600 }

/* wallet modal (home) */
body.home .modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:16px; z-index:1000 }
body.home .modal.show{ display:flex }
body.home .modal-card{ width:min(560px, 92vw); background:#1a1d23; border:1px solid #2c313a; border-radius:16px; padding:16px }
body.home .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
body.home .close{ background:transparent; border:0; font-size:1.5rem; line-height:1; color:#EAE6DA; cursor:pointer }
body.home .modal-body .field{ margin:10px 0 }
body.home .modal-body .lbl{ display:block; margin-bottom:6px; opacity:.85 }
body.home #backupWords{ width:100%; background:#121418; color:#EAE6DA; border:1px solid #2c313a; border-radius:10px; padding:10px }
body.home .btn-secondary{ background:#D6C4A3; color:#000; border:0; border-radius:12px; padding:10px 12px; font-weight:600; cursor:pointer }
body.home .btn-danger{ background:#b14b4b; color:#fff; border:0; border-radius:12px; padding:10px 12px; font-weight:600; cursor:pointer }

/* home mobile tweaks */
@media (max-width:480px){
  body.home .hero h1{ font-size:1.9rem }
  body.home .card{ padding:16px }
}

/* ========== CONTENT PAGES ONLY (About/Vision/Mission/Future/Donate) ========== */
body.page .wrap{
  max-width: 900px;
  margin: 44px auto 40px;
  padding: 0 20px;
}

body.page .hero{ text-align:left; margin:0 0 18px }
body.page .hero h1{ margin:0 0 6px; font-size:2.2rem }
body.page .tag{ margin:0; opacity:.95; text-align:left }

body.page .content{ text-align:left }
body.page .content p,
body.page .content ul,
body.page .content li{ max-width:62ch }

/* bottom nav (centered, beige) */
body.page .nav{ margin:24px auto 0; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; opacity:.95 }
body.page .nav a{ color:var(--beige); font-weight:600 }

/* content page mobile tweaks */
@media (max-width:480px){
  body.page .hero h1{ font-size:1.9rem }
}
/* === Add extra breathing room before bottom nav === */

/* Home page */
body.home .nav {
  margin-top: 60px; /* was smaller — now more gap */
}

/* Content pages (About, Vision, Mission, Future, Donate) */
body.page .nav {
  margin-top: 80px; /* adds more space from last paragraph */
}
/* === GLOBAL, FIXED BOTTOM NAV — SAME ON ALL PAGES === */
:root { --safe-b: env(safe-area-inset-bottom, 0px); }

/* Reserve space so content never hides behind the fixed nav */
.wrap {
  padding-bottom: 96px !important;  /* room for the bar */
}

/* Pin the nav */
.nav.fixed {
  position: fixed !important;
  left: 0; right: 0;
  bottom: calc(18px + var(--safe-b)) !important;  /* iOS safe area */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;

  background: rgba(15,14,13,.85);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  z-index: 1000;
}

/* Consistent link look */
.nav.fixed a {
  color: var(--beige) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kill older per-page nav spacing so this one wins */
body.home .nav,
body.page .nav {
  margin-top: 0 !important;
}

/* Optional: slightly tighter on small phones */
@media (max-width: 480px) {
  .wrap { padding-bottom: 104px !important; }
  .nav.fixed { bottom: calc(22px + var(--safe-b)) !important; gap: 16px !important; }
}
/* === Smaller font for bottom navigator === */
.nav.fixed a {
  font-size: 0.9rem !important; /* slightly smaller text */
  letter-spacing: 0.3px;
}

/* Optional: even smaller on mobile */
@media (max-width: 480px) {
  .nav.fixed a {
    font-size: 0.85rem !important;
  }
}
/* Compact font + spacing for the fixed bottom nav (all pages) */
.nav.fixed a{
  font-size: 0.90rem !important;
  letter-spacing: .3px;
}

/* Home: give extra breathing room below the card so bar sits lower */
body.home .wrap{ padding-bottom: 110px; } /* was smaller */
@media (max-width:480px){
  .nav.fixed a{ font-size: 0.85rem !important; }
  body.home .wrap{ padding-bottom: 120px; }
}
/* ===== Add top breathing space on inner pages ===== */
body.page .wrap {
  margin-top: 48px;  /* around 7 vertical “spaces” */
}

/* Optional: a bit less on mobile for balance */
@media (max-width: 480px) {
  body.page .wrap {
    margin-top: 36px;
  }
}
/* ===== Add more vertical space below the tagline on content pages ===== */
body.page .hero .tag {
  margin-bottom: 64px; /* ~8 vertical spaces for breathing room */
}

/* Slightly less space on mobile for better fit */
@media (max-width: 480px) {
  body.page .hero .tag {
    margin-bottom: 48px;
  }
}