/* Xander Community – styles.css (v16) */
:root{
  --brand:#6D28D9;
  --brand-600:#5B21B6;
  --accent:#10B981;
  --ink:#111827;
  --muted:#6B7280;
  --bg:#FAFAFF;
  --card:#ffffff;
  --danger:#DC2626;
  --success:#059669;
  --radius:16px;
  --shadow:0 10px 24px rgba(17,24,39,.08);
}

/* ========== Base / Reset ========== */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:16px;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* ========== Layout helpers ========== */
.container{max-width:1120px;margin-inline:auto;padding:24px; background: #fff;}
.container--wide{max-width:1280px}
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr}}
.section{padding:40px 0}
.section h2{font-size:clamp(22px,3vw,32px);margin:0 0 10px}
.text-center{text-align:center}
.muted{color:var(--muted)}
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.statbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.stat .num{font-size:24px;font-weight:800}
.stat .label{color:var(--muted)}

/* ========== Header & Nav ========== */
.header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(17,24,39,.06)}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between; position: fixed; height: 157px;}
.nav__brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;color:var(--ink);flex:0 0 auto;min-width:0}
.nav__links{display:flex;gap:14px;flex-wrap:wrap}
.nav__links a{padding:10px 12px;border-radius:12px}
.nav__links a.active,.nav__links a:hover{background:#f1eeff}

/* Logo sizing (no squish) */
.logo-img--header{width:350px;height:auto;display:block;flex-shrink:0}
@media (max-width:480px){.logo-img--header{width:70vw}}
.logo-img--footer{width:220px;height:auto;display:block}
.footer img{height:auto}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;border:0;font-weight:700;cursor:pointer;background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--brand);box-shadow:none;border:2px solid var(--brand)}
.btn--light{background:#f1eeff;color:var(--brand);box-shadow:none}
.btn--accent{background:var(--accent);color:#0b3a2e}

/* ========== Hero ========== */
.hero{
  background:
    radial-gradient(1200px 500px at 20% -10%, #ede9ff, transparent 70%),
    radial-gradient(900px 400px at 100% 10%, #e6fff7, transparent 70%);
  padding:64px 0 32px;
}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px;max-width:62ch}

/* Portrait hero video: 500x667 on desktop, responsive below */
#story .video-wrap{
  background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:3/4; /* portrait by default (mobile/tablet) */
  width:100%;
}
#story .video-wrap video{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
  #story .video-wrap{width:500px;height:667px;aspect-ratio:auto;margin-left:auto;align-self:start}
  #story .video-wrap video{width:100%;height:100%}
}

/* ========== Forms ========== */
.input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #d7d8e5;background:#fff}
.label{display:block;font-weight:600;margin:8px 0 6px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:#f2f2f8;border-radius:8px;padding:2px 6px}

/* Donate amounts & progress (kept for future) */
.donate-options{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.amount{padding:10px 12px;border-radius:12px;border:2px solid #e3e2f8;cursor:pointer;background:#fff;font-weight:700}
.amount.active{border-color:var(--brand);background:#f7f4ff}
.progress{height:12px;background:#ececf6;border-radius:8px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent);width:0%}

/* ========== Footer ========== */
.footer{background:#0f1020;color:#c9c9e9;margin-top:40px}
.footer a{color:#d2d2ff}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr}}

/* ========== Mobile Menu (accessible hamburger) ========== */
.mobile-only{display:inline-flex !important}
.desktop-only{display:none !important}
.nav__toggle{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #e7e7f3;background:#fff;color:var(--ink);
  padding:10px 12px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)
}
.nav__toggle .icon-close{display:none}
.mobile-menu{position:relative}
.mobile-menu::before{
  content:"";position:fixed;inset:0;background:rgba(15,16,32,.28);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease
}
.mobile-menu__panel{
  position:fixed;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid #ececf6;
  display:grid;gap:10px;padding:16px 20px;transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:transform .2s ease,opacity .2s ease;z-index:60
}
.mobile-menu__panel a{padding:10px 8px;border-radius:10px}
.mobile-menu__panel a:hover{background:#f7f4ff}
.mobile-menu.is-open::before{opacity:1;pointer-events:auto}
.mobile-menu.is-open .mobile-menu__panel{transform:translateY(0);opacity:1;pointer-events:auto}
.nav__toggle[aria-expanded="true"] .icon-burger{display:none}
.nav__toggle[aria-expanded="true"] .icon-close{display:inline}
@media (min-width:920px){
  .mobile-only{display:none !important}
  .desktop-only{display:flex !important}
}

/* ========== Mission card background image + overlay ========== */
#mission .card--mission-bg{position:relative;background:transparent !important;overflow:hidden}
#mission .card--mission-bg::before{
  content:"";position:absolute;inset:0;
  background:url("/images/xander-friends-img.jpg") center/cover no-repeat;z-index:0
}
#mission .card--mission-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.92) 40%,
    rgba(255,255,255,.98) 100%)
}
#mission .card--mission-bg>*{position:relative;z-index:2}

/* ========== Utilities ========== */
.hidden{display:none !important}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eefbf5;color:#065f46;font-weight:700;font-size:12px}

/* Ensure mobile/desktop visibility is correct */
.mobile-only  { display: inline-flex !important; }
.desktop-only { display: none !important; }
@media (min-width: 920px){
  .mobile-only  { display: none !important; }
  .desktop-only { display: flex !important; }
}

/* Prevent the large logo from pushing the hamburger off-screen */
.nav { flex-wrap: nowrap; }
.nav__brand { flex: 1 1 auto; min-width: 0; }
.nav__toggle.mobile-only { flex: 0 0 auto; }

/* On narrow screens, cap brand width so the toggle always fits */
@media (max-width: 480px){
  .nav__brand { max-width: calc(100% - 64px); } /* leaves room for the button */
  .logo-img--header { width: 65vw !important; } /* gentle shrink on tiny phones */
}

/* Make the toggle visible and tappable */
.nav__toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #e7e7f3; background:#fff; color:var(--ink);
  padding:10px 12px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow);
  z-index: 70; /* above gradients etc */
}
.nav__toggle .icon-close{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-burger{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-close{ display:inline; }

/* Mobile menu panel behavior (kept for clarity) */
.mobile-menu{ position:relative; }
.mobile-menu::before{
  content:""; position:fixed; inset:0; background:rgba(15,16,32,.28);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mobile-menu__panel{
  position:fixed; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid #ececf6;
  display:grid; gap:10px; padding:16px 20px; transform:translateY(-12px);
  opacity:0; pointer-events:none; transition:transform .2s ease,opacity .2s ease; z-index:60;
}
.mobile-menu.is-open::before{ opacity:1; pointer-events:auto; }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* Ensure mobile/desktop visibility is correct */
.mobile-only  { display: inline-flex !important; }
.desktop-only { display: none !important; }
@media (min-width: 920px){
  .mobile-only  { display: none !important; }
  .desktop-only { display: flex !important; }
}

/* Prevent the 350px logo from pushing the hamburger off-screen */
.nav { flex-wrap: nowrap; }
.nav__brand { flex: 1 1 auto; min-width: 0; }
.nav__toggle.mobile-only { flex: 0 0 auto; }

/* On narrow phones, cap brand width so the toggle always fits */
@media (max-width: 480px){
  .nav__brand { max-width: calc(100% - 64px); } /* room for button */
  .logo-img--header { width: 65vw !important; } /* graceful shrink */
}

/* Toggle button visuals */
.nav__toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #e7e7f3; background:#fff; color:var(--ink);
  padding:10px 12px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow);
  z-index:70;
}
.nav__toggle .icon-close{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-burger{ display:none; }
.nav__toggle[aria-expanded="true"] .icon-close{ display:inline; }

/* Mobile menu panel behavior */
.mobile-menu{ position:relative; }
.mobile-menu::before{
  content:""; position:fixed; inset:0; background:rgba(15,16,32,.28);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mobile-menu__panel{
  position:fixed; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid #ececf6;
  display:grid; gap:10px; padding:16px 20px; transform:translateY(-12px);
  opacity:0; pointer-events:none; transition:transform .2s ease,opacity .2s ease; z-index:60;
}
.mobile-menu.is-open::before{ opacity:1; pointer-events:auto; }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* Backdrop should start *below* the header so the logo stays visible */
.mobile-menu::before{
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;   /* was inset:0; now starts below the header */
  bottom: 0;
  background: rgba(15,16,32,.28);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 0;  /* below the panel */
}

/* Panel sits above the backdrop; header (logo) stays above both */
.mobile-menu__panel{ z-index: 1; }
.header{ z-index: 1000; height: 157px; }  /* ensure header is on top */

/* ---- Sticky header height token ---- */
:root { --header-h: 157px; }             /* adjust if your header is taller */

/* Keep header above everything */
.header { position: sticky; top: 0; z-index: 1000; }

/* Backdrop starts BELOW the header so logo stays visible */
.mobile-menu::before{
  content:"";
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);                  /* start below header */
  bottom: 0;
  background: rgba(15,16,32,.28);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 0;
}

/* Panel is fixed and sticks to the top, under the header */
.mobile-menu__panel{
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h);                  /* sits just under header */
  background: #fff;
  border-bottom: 1px solid #ececf6;
  display: grid; gap: 10px;
  padding: 16px 20px;
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 1;
}

/* Open state */
.mobile-menu.is-open::before{ opacity: 1; pointer-events: auto; }
.mobile-menu.is-open .mobile-menu__panel{ transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Ensure the toggle button is always tappable above panel */
.nav__toggle{ z-index: 1100; position: relative; }