/* ======================= أساس الهوية ======================= */
:root{
  --primary:#1a449e;   /* أزرق الهوية */
  --accent:#e5a40d;    /* ذهبي الهوية */
  --surface:#ffffff;
  --text:#111;
  --muted:#666;
  --ring:rgba(26,68,158,.14);
  --bg:#f7f8fb;
}

/* إعادة ضبط بسيطة */
*{margin:0;padding:0;box-sizing:border-box}

/* نص وروابط افتراضية */
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,'Segoe UI','Segoe UI Arabic','Arial','Arial Arabic',system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
}
a{color:#111;text-decoration:none}
a:hover{text-decoration:underline}

/* ================= الخلفية الرقمية المتحركة (شبكة أخبار) ================= */
.digital-news-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at -10% 110%, rgba(26,68,158,.10), transparent 60%),
    radial-gradient(850px 380px at 110% -10%, rgba(229,164,13,.08), transparent 60%),
    var(--bg);
}
.digital-news-bg::before{
  content:""; position:absolute; inset:-200% -200%;
  background:
    repeating-linear-gradient(115deg, rgba(26,68,158,.07) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(-115deg, rgba(229,164,13,.05) 0 1px, transparent 1px 26px);
  animation:bgDrift 28s linear infinite;
}
.digital-news-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation:scan 8s linear infinite;
}
@keyframes bgDrift { from{ transform:translate3d(0,0,0) } to{ transform:translate3d(20%,15%,0) } }
@keyframes scan    { 0% {transform:translateX(-100%)} 100% {transform:translateX(100%)} }
@media (prefers-reduced-motion:reduce){
  .digital-news-bg::before,.digital-news-bg::after{ animation:none }
}

/* ================= الحاوية العامة فوق الخلفية ================= */
.container{position:relative; z-index:1; max-width:960px; margin:0 auto; padding:20px}

/* ================= رأس/فوتر ================= */
.site-header, .site-footer{
  position:relative; z-index:1; /* يضمن الظهور فوق الخلفية */
  background:var(--surface);
  border:1px solid #eef0f5;
  border-radius:20px;
  box-shadow:0 8px 24px var(--ring);
  margin:16px auto;
  padding:18px;
}

/* الشعار والنص */
.logo-wrap{ text-align:center }
.main-logo{
  width:140px;height:140px;border-radius:50%;
  object-fit:cover;display:block;margin:0 auto 10px;
  background:linear-gradient(135deg,var(--primary),#274fb0);padding:5px;
  box-shadow:0 8px 24px var(--ring)
}
.brand-name{
  font-size:2rem;font-weight:800;
  background:linear-gradient(90deg,var(--accent),#ffd977);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.tagline{color:var(--muted);margin-top:4px}

/* شريط التنقل أسفل الشعار في سطر واحد قابل للتمرير */
.nav-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 4px;
  margin-top: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,68,158,.3) transparent;
}

/* شريط تمرير أنيق */
.nav-scroll::-webkit-scrollbar {
  height: 6px;
}
.nav-scroll::-webkit-scrollbar-thumb {
  background: rgba(26,68,158,.3);
  border-radius: 3px;
}

/* الأزرار نفسها */
.nav-scroll a {
  white-space: nowrap;
  background: linear-gradient(135deg, var(--primary), #274fb0);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: .9rem;
  text-decoration: none;
  transition: transform .2s, background .3s;
  box-shadow: 0 4px 12px var(--ring);
  flex-shrink: 0;
}
.nav-scroll a:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #274fb0, var(--primary));
}


/* ================= شبكة التصنيفات ================= */
.content-grid{ display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width:1024px){ .content-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:680px){  .content-grid{ grid-template-columns: repeat(2, 1fr); } } /* موبايل = عمودان */
@media (max-width:360px){  .content-grid{ grid-template-columns: repeat(2, 1fr); } }

.card{
  background:var(--surface);border-radius:18px;overflow:hidden;border:1px solid #eef0f5;
  box-shadow:0 6px 20px var(--ring);position:relative;cursor:pointer
}
/* إصلاح الشريط العلوي: لا تستخدم inset:0 مع height */
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
}
.card-content{padding:14px}
.card-title{font-weight:800;margin-bottom:6px}
.card-description{color:var(--muted);font-size:.92rem;line-height:1.6}

/* ===== صورة مربعة 100% مع قص الزوايا ===== */
.card-image{
  position:relative; width:100%;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,var(--primary),#274fb0);
  /* دعم حديث: */
  aspect-ratio:1/1;
}
/* دعم قديم: فعّل الـ before فقط إذا لم يتوفر aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .card-image::before{ content:""; display:block; padding-top:100%; }
}
/* تظهر الصورة فورًا حتى لو لم يعمل JS */
.category-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; border-radius:14px; display:block;
  opacity:1; /* ← بدلاً من 0 */
  transition:opacity .35s ease;
}

/* لو أردت تدرّج الظهور عند الاستبدال عبر JS استعمل هذه الكلاس اختيارياً */
.category-image.is-loading{ opacity:0 }


/* ===== شارة "مباشر الآن" — أحمر + أيقونة + وميض ===== */
.live-badge{
  --live-red:#e1162b; --live-red-dark:#b70f21;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(90deg,var(--live-red),var(--live-red-dark));
  color:#fff; font-weight:800; letter-spacing:.2px;
  padding:6px 12px; border-radius:999px; font-size:.9rem;
  box-shadow:0 0 0 0 rgba(225,22,43,.38);
  animation:livePulse 1.6s ease-out infinite;
}
.live-badge .live-text{ line-height:1 }
.live-badge .live-icon{ position:relative; width:14px; height:14px; flex:0 0 14px }
.live-badge .live-icon::before,
.live-badge .live-icon::after{ content:""; position:absolute; inset:0; border-radius:50% }
.live-badge .live-icon::before{ background:#fff; animation:liveDot 1.1s linear infinite alternate }
.live-badge .live-icon::after{ border:2px solid rgba(255,255,255,.9); animation:liveWaves 1.6s ease-out infinite }
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 rgba(225,22,43,.35)} 70%{box-shadow:0 0 0 12px rgba(225,22,43,0)} 100%{box-shadow:0 0 0 0 rgba(225,22,43,0)} }
@keyframes liveDot  { 0%{transform:scale(.9);opacity:1} 100%{transform:scale(.7);opacity:.6} }
@keyframes liveWaves{ 0%{transform:scale(.4);opacity:.95} 100%{transform:scale(1.8);opacity:0} }
@media (prefers-reduced-motion:reduce){
  .live-badge, .live-badge .live-icon::before, .live-badge .live-icon::after{ animation:none }
}

/* ===== عنوان آخر خبر ===== */
.latest-post-title{
  display:block;margin-top:10px;padding:10px 12px;border-radius:12px;
  background:rgba(26,68,158,.06);border-right:3px solid var(--primary);
  min-height:20px;font-weight:600;font-size:.9rem
}
.latest-post-title a{color:#000}
.latest-post-title a:hover{text-decoration:underline}

/* ================= قسم البرامج التلفزيونية ================= */
.programs-section{
  position:relative; z-index:1;
  margin:20px auto 0; padding:20px;
  background:var(--surface);
  border:1px solid #eef0f5; border-radius:24px; box-shadow:0 8px 24px var(--ring);
}
.programs-title{ text-align:center; font-size:1.4rem; font-weight:800; margin-bottom:16px }
.programs-grid{ display:grid; gap:14px; grid-template-columns:repeat(6,1fr) }
@media (max-width:1200px){ .programs-grid{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:1024px){ .programs-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:680px){  .programs-grid{ grid-template-columns:repeat(2,1fr) } } /* موبايل = عمودان */

.program-card{
  background:linear-gradient(180deg, rgba(26,68,158,.05), rgba(229,164,13,.05));
  border:1px solid #eef0f5; border-radius:20px; padding:14px; text-align:center;
  box-shadow:0 6px 16px var(--ring);
}
.program-thumb{
  width:72px; height:72px; border-radius:16px; overflow:hidden; margin:0 auto 10px;
  background:#fff; box-shadow:0 6px 16px var(--ring)
}
.program-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.program-subtitle{
  display:inline-block; background:#fff; padding:4px 8px; border-radius:10px; margin-bottom:6px;
  font-size:.86rem; color:#333; box-shadow:0 2px 8px var(--ring)
}
.program-name{ font-weight:700; color:#222 }

/* ================= الفوتر والشبكات الاجتماعية ================= */
.footer-note{color:var(--muted);font-size:.9rem;margin-top:10px;text-align:center}
.social{display:flex;justify-content:center;gap:12px;margin-top:8px}
.social a{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--primary),#274fb0);text-decoration:none;box-shadow:0 6px 16px var(--ring)
}

/* ===== تحسّينات وصول بسيطة ===== */
:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 55%, #fff);
  outline-offset:2px;
}