/* ==========================================================================
   RAJAI TV ORGANIZATION — MAIN STYLESHEET
   Design system: Islamic-modern NGO
   Palette:  --teal (primary) / --crimson (secondary, sparing) / --sand (accent)
             --gold (premium highlight, derived from sand) / --bg / --dark
   Type:     Poppins (display) · Open Sans (body) · Amiri (Arabic accents)
   ========================================================================== */

/* -------------------------------- Tokens -------------------------------- */
:root{
  --teal:        #008080;
  --teal-dark:   #045c5c;
  --teal-tint:   #e6f3f3;
  --crimson:     #DC143C;
  --crimson-dark:#a30f2d;
  --sand:        #AC9D87;
  --gold:        #c9a24b;
  --bg:          #F8F9FA;
  --dark:        #1F2937;
  --white:       #FFFFFF;

  --font-display: 'Poppins', sans-serif;
  --font-body:    'Open Sans', sans-serif;
  --font-arabic:  'Amiri', serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-soft: 0 10px 30px -12px rgba(31,41,55,.18);
  --shadow-lift: 0 20px 45px -15px rgba(0,128,128,.28);

  --transition: .3s cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}


/* -------------------------------- Base ----------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:#ffffff;
  color:var(--dark);
  line-height:1.7;
  transition:background var(--transition), color var(--transition);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:700; color:var(--dark); }
.font-arabic{ font-family:var(--font-arabic); }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:var(--white); }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.section-pad{ padding:6rem 0; }
@media (max-width:768px){ .section-pad{ padding:3.5rem 0; } }

.bg-soft{ background:var(--teal-tint); }
.bg-dark-section{ background:var(--dark); color:#fff; }
.bg-dark-section h2, .bg-dark-section h3, .bg-dark-section p{ color:#fff; }

/* eyebrow / kicker with crescent mark — signature motif */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:.78rem; color:var(--teal);
  margin-bottom:.75rem;
}
.eyebrow::before{
  content:"";
  width:18px; height:18px;
  background:var(--gold);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 9.8 12 8 8 0 1 1-9.8-12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 9.8 12 8 8 0 1 1-9.8-12z'/%3E%3C/svg%3E");
  mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat;
  flex-shrink:0;
}
.section-title{ font-size:clamp(1.9rem,3vw,2.6rem); margin-bottom:1rem; }
.section-sub{ color:#6b7280; max-width:640px; }
[data-theme="dark"] .section-sub{ color:#9aa4b2; }

/* geometric star divider — signature element, used between major sections */
.star-divider{
  height:34px; margin:0 auto; width:100%; max-width:1100px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34'%3E%3Cg fill='none' stroke='%23AC9D87' stroke-width='1.1' opacity='.55'%3E%3Cpath d='M10 17 L20 5 L30 17 L20 29 Z'/%3E%3Cpath d='M20 5 L40 5 L30 17 Z'/%3E%3Cpath d='M20 29 L40 29 L30 17 Z'/%3E%3Ccircle cx='60' cy='17' r='4' fill='%23c9a24b' stroke='none'/%3E%3Cpath d='M90 17 L100 5 L110 17 L100 29 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:center;
}

/* subtle geometric pattern watermark used on hero / cta backgrounds */
.pattern-veil{ position:relative; }
.pattern-veil::before{
  content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M70 4 L136 70 L70 136 L4 70 Z'/%3E%3Cpath d='M70 4 L70 136 M4 70 L136 70'/%3E%3Ccircle cx='70' cy='70' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
}

.btn{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.9rem; border-radius:50px; border:2px solid transparent;
  display:inline-flex; align-items:center; gap:.5rem; transition:all var(--transition);
  cursor:pointer;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-donate{ background:var(--crimson); color:#fff; }
.btn-donate:hover{ background:var(--crimson-dark); color:#fff; transform:translateY(-2px); }
.btn-outline-light{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--teal); }
.btn-gold{ background:var(--gold); color:#1a1a1a; }
.btn-gold:hover{ background:#b8912f; color:#1a1a1a; transform:translateY(-2px); }
.btn-outline-teal{ border-color:var(--teal); color:var(--teal); }
.btn-outline-teal:hover{ background:var(--teal); color:#fff; }

/* ------------------------------- Header ---------------------------------- */
.top-bar{
  background:var(--dark); color:#cfd8e3; font-size:.82rem; padding:.45rem 0;
}
.top-bar a{ color:#cfd8e3; }
.top-bar .divider{ opacity:.3; margin:0 .6rem; }

.navbar-main{
  background:var(--white); box-shadow:0 2px 18px rgba(0,0,0,.06);
  padding:.7rem 0; transition:padding var(--transition), background var(--transition);
}
.navbar-main.scrolled{ padding:.35rem 0; }
.navbar-brand-rajai{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--teal); }
.navbar-brand-rajai .brand-mark{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.2rem;
}
.brand-logo-footer{height:42px;}
.navbar-nav .nav-link{ font-weight:600; color:var(--dark) !important; margin:0 .5rem; position:relative; }
.navbar-nav .nav-link::after{
  content:""; position:absolute; left:0; bottom:2px; height:2px; width:0; background:var(--gold);
  transition:width var(--transition);
}
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after{ width:100%; }
.navbar-nav .nav-link.active{ color:var(--teal) !important; }

.nav-tool-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid #e5e7eb; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; color:var(--dark); transition:all var(--transition);
}
.nav-tool-btn:hover{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal); }

.lang-switch{ display:flex; gap:.3rem; background:var(--bg); border-radius:50px; padding:.25rem; }
.lang-switch button{
  border:none; background:transparent; padding:.3rem .55rem; border-radius:50px; font-size:.82rem; font-weight:700; color:#6b7280;
}
.lang-switch button.active{ background:var(--teal); color:#fff; }

/* ------------------------------- Hero ------------------------------------ */
.hero-slide{
  min-height:88vh; display:flex; align-items:center; position:relative;
  background-size:cover; background-position:center; color:#fff;
}
.hero-slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(0,45,45,.86), rgba(0,80,80,.55) 60%, rgba(220,20,60,.28));
}
.hero-slide .hero-inner{ position:relative; z-index:2; }

.hero-kicker{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35); padding:.4rem 1rem; border-radius:50px; font-size:.82rem; backdrop-filter:blur(6px);
  margin-bottom:1.3rem;
}
.hero-title{ font-size:clamp(2.3rem,5vw,4rem); line-height:1.12; margin-bottom:1.2rem;color:#fff; }
.hero-title .accent{ color:var(--gold); }
.hero-lede{ font-size:1.12rem; max-width:560px; opacity:.92; margin-bottom:2rem; }
.hero-stats-strip{
  position:relative; z-index:2; background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-md); margin-top:3rem; padding:1.4rem 1rem;
}
.hero-arch{
  position:absolute; bottom:-1px; left:0; width:100%; line-height:0; z-index:2;
}

.swiper-pagination-bullet{ background:#fff; opacity:.55; }
.swiper-pagination-bullet-active{ background:var(--gold); opacity:1; }
.swiper-button-next, .swiper-button-prev{ color:#fff !important; }

/* ------------------------------ Stat counters ----------------------------- */
.stat-card{ text-align:center; }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--teal); }
.stat-label{ font-size:.9rem; color:#6b7280; font-weight:600; }
[data-theme="dark"] .stat-label{ color:#9aa4b2; }

/* ------------------------------ Cards -------------------------------------- */
.card-elegant{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid rgba(0,0,0,.05);
  box-shadow:var(--shadow-soft); transition:transform var(--transition), box-shadow var(--transition); height:auto;
}
.card-elegant:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
.card-elegant .card-img{ height:210px; background-size:cover; background-position:center; position:relative; }
.card-elegant .card-cat{
  position:absolute; top:14px; left:14px; background:var(--crimson); color:#fff; font-size:.72rem; font-weight:700;
  padding:.3rem .75rem; border-radius:50px; letter-spacing:.04em;
}
.card-elegant .card-body{ padding:1.5rem; }
.icon-tile{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--teal-tint); color:var(--teal); font-size:1.4rem; margin-bottom:1rem;
}

/* progress bars for charity projects */
.progress-elegant{ height:10px; border-radius:50px; background:#e9ecef; overflow:hidden; }
.progress-elegant .bar{ height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:50px; }
.fund-meta{ display:flex; justify-content:space-between; font-size:.85rem; margin-top:.6rem; color:#6b7280; }
[data-theme="dark"] .fund-meta{ color:#9aa4b2; }

/* ------------------------------ Testimonials -------------------------------- */
.testi-card{ background:var(--white); border-radius:var(--radius-md); padding:2rem; box-shadow:var(--shadow-soft); }
.testi-avatar{ width:58px; height:58px; border-radius:50%; object-fit:cover; border:3px solid var(--teal-tint); }
.testi-stars{ color:var(--gold); font-size:.9rem; }

/* ------------------------------ Partners marquee ---------------------------- */
.marquee-track{ display:flex; gap:3.5rem; animation:scroll-x 28s linear infinite; align-items:center; }
.marquee-track img{ height:42px; filter:grayscale(1); opacity:.6; transition:.3s; }
.marquee-track img:hover{ filter:none; opacity:1; }
@keyframes scroll-x{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }

/* ------------------------------ Footer -------------------------------------- */
.site-footer{ background:var(--dark); color:#c7cedb; position:relative; }
.site-footer h6{ color:#fff; font-weight:700; margin-bottom:1.1rem; letter-spacing:.03em; }
.site-footer a{ color:#c7cedb; }
.site-footer a:hover{ color:var(--gold); }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem;
}
.footer-social a:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:1.2rem 0; font-size:.85rem; }

/* ------------------------------ Floating UI --------------------------------- */
.floating-stack{ position:fixed; right:22px; bottom:22px; z-index:1050; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end; }
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.25); transition:transform var(--transition); font-size:1.25rem;
}
.fab:hover{ transform:scale(1.08) translateY(-2px); color:#fff; }
.fab-whatsapp{ background:#25D366; }
.fab-donate{ background:var(--crimson); }
.fab-top{ background:var(--teal); opacity:0; pointer-events:none; }
.fab-top.show{ opacity:1; pointer-events:auto; }

.reading-progress{ position:fixed; top:0; left:0; height:3px; background:var(--gold); z-index:2000; width:0%; }

.announcement-bar{ background:var(--gold); color:#1a1a1a; font-size:.85rem; padding:.5rem 0; text-align:center; font-weight:600; }
.announcement-bar a{ text-decoration:underline; }

/* ------------------------------ Cookie consent ------------------------------ */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:560px; z-index:2100;
  background:var(--white); border-radius:var(--radius-md); box-shadow:0 25px 60px rgba(0,0,0,.25);
  padding:1.6rem; border:1px solid rgba(0,0,0,.06); transform:translateY(140%); transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.show{ transform:translateY(0); }

/* ------------------------------ Dark mode toggle ----------------------------- */
.theme-toggle{ position:relative; }
.theme-toggle .fa-sun{ display:none; }
[data-theme="dark"] .theme-toggle .fa-moon{ display:none; }
[data-theme="dark"] .theme-toggle .fa-sun{ display:inline-block; }

/* ------------------------------ Prayer / date widget ------------------------ */
.info-strip{ background:var(--teal-tint); border-radius:var(--radius-md); padding:1.4rem; }
.info-strip .item{ text-align:center; }
.info-strip .item .lbl{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; }
.info-strip .item .val{ font-family:var(--font-display); font-weight:700; color:var(--teal); }

/* ------------------------------ Utility --------------------------------- */
.text-teal{ color:var(--teal) !important; }
.text-gold{ color:var(--gold) !important; }
.bg-teal{ background:var(--teal) !important; }
.rounded-elegant{ border-radius:var(--radius-md) !important; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:.6rem 1rem; z-index:3000;
}
.skip-link:focus{ left:10px; top:10px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}