/* ═══════════════════════════════════════════════════════════
   THABAT ACADEMY — DONATE
   Standalone page stylesheet.
   Important: the root document is the ONLY page scroll container.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1a1a2e;
  --ink-soft: #2d2d4a;
  --gold: #c9a84c;
  --gold-lt: #e8d5a3;
  --gold-dim: rgba(201,168,76,.15);
  --cream: #faf8f3;
  --cream-dk: #f3f0e8;
  --white: #fff;
  --muted: #6b6b7a;
  --muted-lt: #9b9baa;
  --border: #e4e0d6;
  --border-lt: #eeebe3;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(26,26,46,.07);
  --shadow-lg: 0 12px 48px rgba(26,26,46,.12);
  --donate-red: #c93642;
  --donate-red-dark: #a9212c;
  --donate-red-soft: rgba(201,54,66,.10);
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
}

body.donate-page {
  min-height: 100%;
  overflow: visible;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

body.menu-open,
body.policy-open { overflow: hidden; }

img, svg, video { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
p { line-height: 1.75; }
.section-label { display:block; margin-bottom:10px; color:var(--gold); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

/* ── NAV ── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 20px;
  background: rgba(250,248,243,.98);
  border-bottom: 1px solid var(--border-lt);
  transition: box-shadow .2s ease;
}
nav.scrolled { box-shadow: 0 2px 20px rgba(26,26,46,.07); }
.nav-logo { display:flex; align-items:center; gap:3px; z-index:101; color:var(--ink); font-family:var(--serif); font-size:1.3rem; text-decoration:none; }
.nav-logo span { color: var(--gold); }
.nav-right { display:flex; align-items:center; gap:10px; z-index:101; }
.nav-social { display:flex; gap:7px; }
.nav-social a { width:34px; height:34px; border:1px solid var(--border); border-radius:var(--radius-sm); display:grid; place-items:center; text-decoration:none; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.nav-social a:hover { transform: translateY(-1px); }
.nav-social .instagram { color:#E1306C; border-color:rgba(225,48,108,.32); background:rgba(225,48,108,.06); }
.nav-social .facebook { color:#1877F2; border-color:rgba(24,119,242,.30); background:rgba(24,119,242,.06); }
.nav-social .whatsapp { color:#25D366; border-color:rgba(37,211,102,.30); background:rgba(37,211,102,.06); }
.nav-donate, .nav-cta { display:none; padding:9px 15px; border-radius:var(--radius-sm); text-decoration:none; font-size:.8rem; font-weight:600; white-space:nowrap; }
.nav-donate { color:#fff; background:var(--donate-red-dark); border:1px solid #8f1721; box-shadow:0 0 0 3px rgba(201,54,66,.10); }
.nav-cta { color:#fff; background:var(--ink); border:1px solid var(--ink); }
@media (min-width:600px) { .nav-donate, .nav-cta { display:inline-flex; align-items:center; } }

.hamburger { width:34px; height:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); background:transparent; cursor:pointer; }
.hamburger span { width:15px; height:1.5px; display:block; border-radius:2px; background:var(--ink); transition:transform .22s ease, opacity .22s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.menu-overlay { position:fixed; inset:0; z-index:98; opacity:0; visibility:hidden; pointer-events:none; background:rgba(26,26,46,.42); transition:opacity .2s ease, visibility .2s ease; }
.menu-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }
.menu-drawer {
  position:fixed; top:0; right:0; z-index:99;
  width:min(300px,85vw); height:100dvh;
  display:flex; flex-direction:column;
  padding:80px 24px 28px;
  transform:translateX(100%); visibility:hidden; pointer-events:none;
  overflow:hidden;
  background:var(--white); border-left:1px solid var(--border);
  box-shadow:-12px 0 48px rgba(26,26,46,.1);
  transition:transform .25s cubic-bezier(.4,0,.2,1), visibility .25s;
}
.menu-drawer.open { transform:translateX(0); visibility:visible; pointer-events:auto; overflow-y:auto; overscroll-behavior:contain; }
.menu-nav { list-style:none; margin-bottom:24px; }
.menu-nav li { border-bottom:1px solid var(--border-lt); }
.menu-nav a { display:block; padding:12px 0; color:var(--ink); font-family:var(--serif); font-size:1.12rem; text-decoration:none; }
.menu-nav a:hover { color:var(--gold); }
.menu-nav a.parent-link { color:#0f766e; font-family:var(--sans); font-size:.95rem; font-weight:700; }
.menu-nav a.highlight { color:var(--gold); }
.menu-cta { display:block; margin-bottom:16px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--ink); color:#fff; text-align:center; text-decoration:none; font-size:.88rem; font-weight:600; }
.menu-social { display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
.menu-social a { flex:1; min-width:88px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; font-size:.76rem; font-weight:600; }
.menu-social .instagram { color:#E1306C; border-color:rgba(225,48,108,.28); background:rgba(225,48,108,.04); }
.menu-social .facebook { color:#1877F2; border-color:rgba(24,119,242,.28); background:rgba(24,119,242,.04); }
.menu-social .whatsapp { color:#25D366; border-color:rgba(37,211,102,.28); background:rgba(37,211,102,.04); }

/* ── FOOTER ── */
.site-footer { background:var(--ink); color:rgba(255,255,255,.55); padding:52px 24px 28px; font-size:.78rem; font-weight:300; }
.footer-inner { max-width:940px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:32px; margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-col-title { display:block; margin-bottom:14px; color:rgba(255,255,255,.75); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.footer-links { display:flex; flex-direction:column; gap:9px; }
.footer-links a { color:rgba(255,255,255,.55); text-decoration:none; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
.footer-social { display:flex; gap:12px; margin-top:14px; }
.footer-social a { font-size:1.1rem; text-decoration:none; }
.footer-social .instagram { color:#F04C8B; }
.footer-social .facebook { color:#5B9BFF; }
.footer-social .whatsapp { color:#25D366; }

.wa-float { position:fixed; right:16px; bottom:20px; z-index:90; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#25D366; color:#fff; text-decoration:none; font-size:1.3rem; box-shadow:0 4px 20px rgba(37,211,102,.35); }

/* ── POLICY MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:300; display:none; overflow-y:auto; overscroll-behavior:contain; background:rgba(26,26,46,.68); }
.modal-overlay.active { display:block; }
.donate-policy-sheet { position:relative; width:min(680px,100%); min-height:100%; margin:0 auto; padding:44px 30px 60px; background:var(--white); }
.modal-close { position:sticky; top:12px; float:right; z-index:2; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--cream); color:var(--ink); font-size:1.25rem; cursor:pointer; }

/* ── LIGHTWEIGHT REVEALS ── */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .52s ease, transform .52s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; } }

.donate-hero {
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 155px 24px 100px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(26,26,46,0.98), rgba(35,28,48,0.96)),
    var(--ink);
}
.donate-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(30deg, var(--gold) 12%, transparent 12.5%, transparent 87%, var(--gold) 87.5%, var(--gold)),
    linear-gradient(150deg, var(--gold) 12%, transparent 12.5%, transparent 87%, var(--gold) 87.5%, var(--gold));
  background-size: 70px 120px;
  pointer-events: none;
}
.donate-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: none;
  opacity: .72;
  pointer-events: none;
}
.donate-glow-one { top: -180px; left: -130px; background: rgba(201,168,76,0.13); }
.donate-glow-two { right: -160px; bottom: -210px; background: rgba(201,54,66,0.16); }
.donate-hero-inner { width: min(900px, 100%); margin: 0 auto; position: relative; z-index: 2; }
.donate-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201,168,76,0.35);
  background: rgba(201,168,76,0.08);
  color: var(--gold-lt);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.donate-arabic-mark {
  margin-top: 25px;
  color: var(--gold);
  direction: rtl;
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
}
.donate-hero h1 {
  margin-top: 12px;
  color: var(--white);
  font-size: clamp(2.8rem, 7vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.donate-hero h1 em { color: var(--gold); }
.donate-hero-inner > p:not(.donate-arabic-mark):not(.donate-micro) {
  max-width: 710px;
  margin: 24px auto 0;
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  font-weight: 300;
}
.donate-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.donate-primary,
.donate-secondary {
  min-height: 52px;
  padding: 0 25px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.donate-primary {
  border: 1px solid var(--donate-red-dark);
  background: var(--donate-red);
  color: var(--white);
  box-shadow: 0 12px 30px rgba(201,54,66,0.28);
}
.donate-primary:hover {
  background: var(--donate-red-dark);
  border-color: #8f1721;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(201,54,66,0.34);
}
.donate-primary-small { margin-top: 24px; min-height: 47px; font-size: 0.8rem; }
.donate-secondary {
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  color: var(--white);
}
.donate-secondary:hover { border-color: var(--gold); background: rgba(201,168,76,0.09); transform: translateY(-2px); }
.donate-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 28px;
  color: rgba(255,255,255,0.42);
  font-size: 0.72rem;
}
.donate-trust-row i { color: var(--gold); margin-right: 5px; }
.donate-micro { margin-top: 16px; font-size: 0.68rem; color: rgba(255,255,255,0.28); }

.donate-container { width: min(1060px, 100%); margin: 0 auto; }
.sadaqah-section { padding: 96px 24px; background: var(--cream); }
.sadaqah-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 54px; align-items: center; }
.sadaqah-copy h2,
.donate-heading h2,
.donate-final h2,
.teaching-card h2 { font-size: clamp(2rem, 4.5vw, 3.15rem); }
.sadaqah-copy > p {
  margin-top: 14px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.8;
}
.hadith-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 38px 34px 34px;
  box-shadow: var(--shadow-lg);
}
.hadith-card::after {
  content: '';
  position: absolute;
  right: -55px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--donate-red-soft);
}
.quote-icon {
  position: absolute;
  top: 4px;
  right: 20px;
  color: rgba(201,168,76,0.16);
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1;
}
.hadith-arabic {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-family: Georgia, serif;
  direction: rtl;
  font-size: 1.28rem;
  line-height: 1.9;
  margin-bottom: 17px;
}
.hadith-card blockquote {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.55;
}
.quote-source { display: block; margin-top: 15px; color: var(--muted-lt); font-size: 0.74rem; }

.donate-section { padding: 92px 24px; }
.donate-impact { background: var(--white); }
.donate-heading { max-width: 680px; text-align: center; margin: 0 auto; }
.donate-heading > p { margin-top: 14px; color: var(--muted); font-weight: 300; }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.impact-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 29px 25px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.impact-card:hover { transform: translateY(-3px); border-color: var(--gold-lt); box-shadow: var(--shadow); }
.impact-number { color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; }
.impact-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-top: 18px;
  border-radius: 12px;
  background: var(--donate-red-soft);
  color: var(--donate-red);
  font-size: 1.05rem;
}
.impact-card h3 { margin-top: 16px; font-size: 1.2rem; }
.impact-card p { margin-top: 9px; color: var(--muted); font-size: 0.84rem; font-weight: 300; }

.ayah-section { padding: 80px 24px; background: var(--cream); }
.ayah-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink);
  padding: 58px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.ayah-card::before {
  content: '۞';
  position: absolute;
  left: 28px;
  top: 15px;
  color: rgba(201,168,76,0.10);
  font-size: 8rem;
}
.ayah-label { color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.ayah-arabic {
  max-width: 880px;
  margin: 20px auto 0;
  direction: rtl;
  color: var(--gold-lt);
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  line-height: 2;
}
.ayah-meaning {
  max-width: 700px;
  margin: 20px auto 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.9rem;
  line-height: 1.8;
  font-weight: 300;
}

.quran-teaching-section { padding: 12px 24px 88px; background: var(--cream); }
.teaching-card {
  display: flex;
  align-items: center;
  gap: 26px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: var(--shadow);
}
.teaching-emblem {
  flex: 0 0 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(201,168,76,0.12);
  color: var(--gold);
  font-size: 1.55rem;
}
.teaching-card h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.teaching-card p { margin-top: 7px; color: var(--muted-lt); font-size: 0.76rem; }

.donate-final { padding-top: 35px; background: var(--white); }
.donate-final-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 42px;
  background: linear-gradient(135deg, #fff, #fff8f8);
  border: 1px solid rgba(201,54,66,0.20);
  border-radius: 22px;
  padding: 48px;
  box-shadow: 0 16px 45px rgba(201,54,66,0.08);
}
.donate-final-card > div { max-width: 720px; }
.donate-final-card > div > p { margin-top: 14px; color: var(--muted); font-weight: 300; }
.donate-final-button { flex-shrink: 0; }
.tax-note {
  max-width: 900px;
  margin: 18px auto 0;
  color: var(--muted-lt);
  font-size: 0.7rem;
  line-height: 1.7;
  text-align: center;
}

.donate-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120px);
  width: min(500px, calc(100% - 30px));
  padding: 14px 18px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid rgba(201,54,66,0.6);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-size: 0.8rem;
  transition: transform 0.3s;
  z-index: 300;
}
.donate-toast.show { transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .sadaqah-grid { grid-template-columns: 1fr; gap: 36px; }
  .impact-grid { grid-template-columns: 1fr; }
  .donate-final-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .donate-hero { min-height: auto; padding: 130px 16px 78px; }
  .donate-actions, .donate-actions > * { width: 100%; }
  .donate-trust-row { gap: 10px 16px; }
  .sadaqah-section, .donate-section, .ayah-section { padding-left: 16px; padding-right: 16px; }
  .hadith-card { padding: 31px 23px; }
  .ayah-card { padding: 42px 22px; }
  .teaching-card { align-items: flex-start; padding: 30px 24px; }
  .teaching-emblem { flex-basis: 52px; height: 52px; font-size: 1rem; }
  .donate-final-card { padding: 34px 25px; }
  .donate-final-button { width: 100%; }
}


/* ── SCROLLER SAFETY ──
   Do not make both html and body independent overflow containers. Browsers can turn both
   boxes into independent vertical scroll containers. clip prevents horizontal
   paint overflow without creating a second scrolling box. */
html { overflow-x: clip !important; overflow-y: auto !important; }
body.donate-page:not(.menu-open):not(.policy-open) { overflow-x: clip !important; overflow-y: visible !important; width:auto !important; max-width:none !important; }
body.donate-page.menu-open,
body.donate-page.policy-open { overflow: hidden !important; }

@media (max-width:600px) {
  .nav-social { display:none; }
  nav { padding:12px 16px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:390px) {
  .footer-grid { grid-template-columns:1fr; }
  .menu-drawer { width:100vw; border-left:0; }
}


/* Mobile-only donation strip. Keeps the primary giving action visible even
   when the compact phone navbar hides its desktop Donate button. */
.mobile-donate-bar { display: none; }

@media (max-width: 599px) {
  body.mobile-donate-enabled { padding-top: 44px; }

  .mobile-donate-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    box-sizing: border-box;
    background: #1a1a2e;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .mobile-donate-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #cf3f4d, #ad2732);
    color: #fff;
    text-decoration: none;
    font-size: .79rem;
    font-weight: 700;
    box-shadow: 0 5px 16px rgba(201,54,66,.28);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-donate-bar a:active { transform: scale(.98); }
  .mobile-donate-bar i { font-size: .72rem; }
  body.mobile-donate-enabled > nav { top: 44px; }
}