/* =========================================================
   Omniah Youth Center – Professional UI Kit (Main)
   يشمل: :root + الأساسيات + الأزرار + الهيرو + الأقسام + الفوتر
   (بدون الهيدر – موجود في header.css)
   ========================================================= */

/* -------------------- Root & Tokens -------------------- */
:root{
  /* Brand Palette */
  --tg-ink:#2C2C2C;        /* text */
  --tg-dark:#5AB5E8;       /* brand blue */
  --tg-green:#A6D864;      /* brand green */
  --tg-green-2:#B9E98C;    /* lighter green */
  --tg-yellow:#FCD65A;     /* accent yellow */
  --tg-orange:#E94E77;     /* accent pink/red */

  /* Surfaces & Borders */
  --tg-surface:#FFFFFF;
  --tg-surface-2:#F8FAFC;
  --tg-border:#E6EAF0;

  /* Effects */
  --shadow-sm:0 8px 22px rgba(16,24,40,.06);
  --shadow-md:0 16px 44px rgba(16,24,40,.10);
  --ring: 0 0 0 3px rgba(90,181,232,.25);

  /* Radii */
  --radius-xs:8px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;

  /* Sizing / Layout */
  --container:1220px;
  --nav-h:70px;
  --btn-h:44px;
  --gutter:20px;

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-100:12px;
  --fs-200:13px;
  --fs-300:14px;
  --fs-400:16px;
  --fs-500:18px;
  --fs-600:20px;
  --fs-700:28px;
  --fs-800:32px;
  --fs-900:48px;

  /* Z-layers */
  --z-header:70;
  --z-dropdown:80;
  --z-modal:1000;
}

/* -------------------- Base -------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--tg-ink);
  background:var(--tg-surface-2);
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--container); margin:auto; padding:0 var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Focus visibility (عام) */
:where(a,button,[role="button"],[tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

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

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); padding:0 18px;
  border-radius:12px; font-weight:700; cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
  border:0; background:transparent; color:inherit;
}
.btn-primary{
  background:linear-gradient(135deg,var(--tg-dark),#7ECBF0);
  color:#fff; box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost{
  background:#fff; color:#0f172a; border:1px solid var(--tg-border);
}
.btn-ghost:hover{ background:#f8fafc; }

/* -------------------- Hero (Video/Image) -------------------- */
.hero{ position:relative; padding:24px 0 0; }
.hero-wrap{
  position:relative; border-radius:var(--radius-2xl);
  overflow:hidden; box-shadow:var(--shadow-md); background:#dbeafe;
}
.hero-media{ position:relative; height:min(68vh,720px); min-height:440px; }
.hero-video, .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,14,28,.55) 0%, rgba(10,14,28,.15) 60%, rgba(10,14,28,0) 100%);
}
.hero-content{ position:absolute; inset:0; display:flex; align-items:center; }
.hero-box{ max-width:760px; padding:0 56px; color:#fff; }
.kicker{
  display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  padding:6px 12px; border-radius:999px; margin-bottom:14px; font-weight:600;
}
.hero h1{
  margin:0 0 10px; font-size:clamp(28px,4.6vw,48px); font-weight:800; line-height:1.12;
}
.hero p{ margin:0 0 18px; font-size:clamp(15px,2.2vw,18px); color:#E6F0F8; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* -------------------- Sections & Headings -------------------- */
.section{ padding:68px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px;
}
.section-title{ margin:0; font-size:var(--fs-700); font-weight:800; }
.section-sub{ color:#475467; font-size:var(--fs-400); }

/* -------------------- About (Pillars) -------------------- */
.pillars{ display:grid; gap:16px; }
@media(min-width:860px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar{
  background:var(--tg-surface); border:1px solid var(--tg-border);
  border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm);
}
.pillar h3{ margin:0 0 8px; font-size:var(--fs-600); }
.pillar p{ margin:0; color:#475467; }

/* -------------------- Impact (Stats) -------------------- */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:14px; margin-top:18px;
}
@media(min-width:980px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{
  background:#fff; border:1px solid var(--tg-border);
  border-radius:var(--radius-lg); padding:18px; text-align:center; box-shadow:var(--shadow-sm);
}
.stat .num{ font-size:30px; font-weight:800; }
.stat .label{ color:#667085; }

/* -------------------- Programs (Cards Grid) -------------------- */
.grid{ display:grid; gap:18px; }
@media(min-width:980px){ .grid{ grid-template-columns:repeat(4,1fr); } }
.card{
  background:#fff; border:1px solid var(--tg-border);
  border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:10px;
}
.card h3{ margin:0; font-size:var(--fs-600); }
.card p{ margin:0; color:#475467; font-size:var(--fs-400); }
.badge{
  display:inline-block; border:1px solid #CFE9FF; background:#EFF8FF; color:#0B3A55;
  padding:6px 10px; border-radius:999px; font-weight:600; font-size:var(--fs-300);
}

/* -------------------- Testimonials -------------------- */
.testimonials{ display:grid; gap:18px; }
@media(min-width:980px){ .testimonials{ grid-template-columns:repeat(3,1fr); } }
.quote{
  background:#fff; border:1px solid var(--tg-border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-sm);
}
.quote p{ margin:0 0 10px; }
.quote .who{ color:#667085; font-weight:600; }

/* -------------------- Events List -------------------- */
.events{ display:grid; gap:14px; }
.event{
  display:flex; gap:16px; align-items:center;
  background:#fff; border:1px solid var(--tg-border); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow-sm);
}
.date{
  min-width:88px; text-align:center; border-radius:12px; padding:10px 8px;
  background:#EFF8FF; border:1px solid #DBEAFE;
}
.date .d{ font-size:22px; font-weight:800; line-height:1; }
.date .m{ color:#475467; }
.event h4{ margin:0 0 6px; font-size:var(--fs-500); }
.event p{ margin:0; color:#475467; }
.event .btn-ghost{ margin-inline-start:auto; }

/* -------------------- Partners Strip -------------------- */
.partners{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; align-items:center; justify-items:center;
  background:var(--tg-surface); border:1px solid var(--tg-border);
  border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);
}
.partners img{ max-height:56px; opacity:.95; }

/* -------------------- CTA Band -------------------- */
.cta-band{
  background:linear-gradient(135deg,var(--tg-dark),#7FCDF1); color:#fff;
  border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:14px;
  align-items:flex-start; box-shadow:var(--shadow-md);
}
@media(min-width:860px){ .cta-band{ flex-direction:row; justify-content:space-between; align-items:center; } }
.cta-band h3{ margin:0; font-size:clamp(20px,3.2vw,28px); }

/* -------------------- Footer -------------------- */


/* -------------------- Reveal on scroll -------------------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }