/* universal styles css */
/* ====== HAMBURGER MENU (matches site palette) ====== */

:root{
  /* fallbacks if your theme vars aren't loaded on a page */
  --brand: #0b3b79;
  --brand-2: #0ea5e9;
  --ink: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --ring: #e5e7eb;
  --bg:#0d1b2a; --accent:#1b9aaa; --text:#0a0a0a; --soft:#5f738a;
      --card:#fff; --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
body{margin:0; overflow-x: hidden; font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:#f7f8fb; line-height:1.55}
    
.brand{display:flex; align-items:center; gap:10px; font-weight:900; color:#0d1b2a}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--brand)}

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--ring);
}

/* used to be grid-template-columns: 1fr auto 1fr but took out last 1fr so hamburger menu is right justified */
.header-inner{
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .75rem; max-width: 1100px; margin: 0 auto; padding: .75rem 1rem;
}

.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 800; color: var(--brand);
  text-decoration: none; font-size: 1.1rem;
}
.brand-logo{
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display:grid; place-items:center; color:#fff; font-size: .95rem; font-weight:900;
}

.primary-nav{ display:none; }
.primary-nav a{
  color: var(--ink); text-decoration: none; font-weight: 700;
  padding: .4rem .6rem; border-radius: 10px;
}
.primary-nav a:hover{ background: #f1f5f9; }
.primary-nav a.active{ color: var(--brand-2); background: #f0f9ff;}

.hamburger{
  justify-self: end;
  display:inline-grid; place-items:center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid rgba(0,0,0,.08); color:#fff;
  cursor:pointer;
}
.hamburger svg{ width: 24px; height: 24px; }
.hamburger[aria-expanded="true"] .icon-menu{ display:none; }
.hamburger[aria-expanded="true"] .icon-close{ display:block; }
.icon-close{ display:none; }

/* Overlay + Drawer */
.nav-overlay{
  position: fixed; inset: 0; background: rgba(2,6,23,.45);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}

.mobile-drawer{
  position: fixed; inset: 0 0 0 auto; width: 86%;
  max-width: 380px; background: var(--card); box-shadow: -10px 0 30px rgba(2,6,23,.2);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding: 1rem .9rem;
  border-left: 1px solid var(--ring);
}
.mobile-drawer header{ display:flex; align-items:center; justify-content:space-between; }
.mobile-drawer .title{ font-weight: 800; color: var(--brand); }
.mobile-drawer nav a{
  display:block; padding: .9rem .6rem; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 700;
}
.mobile-drawer nav a + a{ margin-top:.1rem; }
.mobile-drawer nav a:hover{ background: #f1f5f9; }
.mobile-drawer nav a.active{ color: var(--brand); background: #f0f9ff; }

.mobile-drawer .cta{
  margin-top: auto; display:grid; gap:.6rem; padding-top: .8rem;
  border-top: 1px dashed var(--ring);
}
.mobile-drawer .btn{
  display:inline-block; text-align:center; padding:.9rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; font-weight:800; text-decoration:none;
}

/* Open state */
.menu-open .nav-overlay{ opacity:1; pointer-events:auto; }
.menu-open .mobile-drawer{ transform: translateX(0); }

/* Desktop layout */
@media (min-width: 960px){
  .hamburger{ display:none; }
  .primary-nav{ display:flex; gap:.35rem; justify-self: end; }
  .nav-overlay, .mobile-drawer{ display:none; }
  .header-inner{ grid-template-columns: auto 1fr auto; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-overlay, .mobile-drawer{ transition: none; }
}

/* Optional: lock body scroll when menu open */
.menu-open{ overflow:hidden; }

/* Small utility */
.hide-visually{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* === Shared FOOTER (match homepage) === */
footer{
  background: var(--bg);
  color: #e3e9f2;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
footer a{ color:#e3e9f2; text-decoration:none }
footer a:hover{ text-decoration:underline }
.footer-wrap{ max-width:1100px; margin:0 auto; padding:0 18px }
.footer-grid{
  display:grid; gap:18px; grid-template-columns: 2fr 1fr 1fr;
}

/* Footer badge - added for pill shape around donation amount */
.footer-badge{
display:inline-flex; align-items:center; gap:8px;
background:#14324a; color:#fff; padding:6px 10px; border-radius:999px;
font-weight:800; box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:14px;
}
.footer-badge .emoji{ filter:saturate(1.1); }

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand{ font-weight:900; display:flex; align-items:center; gap:10px }
.footer-brand .dot{ width:12px; height:12px; border-radius:999px; background:var(--brand) }
.footer-small{ color:#b9c6d4; font-size:14px; margin-top:10px }
.footer-col h4{ margin:0 0 8px; font-size:16px; color:#ffffff; }
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col li{ margin:6px 0 }
.footer-bottom{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); font-size:14px; color:#cfd8e3 }
@media (max-width:700px){ .footer-bottom{ flex-direction:column; align-items:flex-start } }