/*!
 * Ekhbary News Front UI v1.0.0
 * الواجهة الرئيسية لموقع وكالة أنباء إخباري
 * المبرمج: عبد الفتاح يوسف إسماعيل
 * الشركة: واي ار سايت - YRSite
 * الموقع: https://www.yrsite.net
 * هاتف: +201000909887 - مصر
 */

/* ===========================
   المتغيرات العامة والخطوط
   =========================== */
:root {
  --primary-red: #c40021;
  --dark-gray: #222831;
  --mid-gray: #393e46;
  --light-gray: #f5f5f5;
  --white: #ffffff;
  --accent-yellow: #ffcc00;
  --accent-green: #1dbf73;
}

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

body {
  margin: 0;
  direction: rtl;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Cairo", sans-serif;
  background: var(--light-gray);
  color: #111;
  padding-bottom: 55px; /* مساحة للتيكر */
}

img {
  max-width: 100%;
  display: block;
}

/* ===========================
   الشريط العلوي
   =========================== */
.top-bar {
  background: var(--mid-gray);
  color: var(--white);
  font-size: 0.85rem;
  padding: 0.4rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar .sep {
  margin: 0 0.4rem;
  opacity: 0.6;
}

/* ===========================
   الهيدر الرئيسي والقائمة
   =========================== */
.main-header {
  background: var(--dark-gray);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 900;
}
.logo {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--primary-red);
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
}
.main-nav li.has-sub {
  position: relative;
}
.sub-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  color: #111;
  min-width: 190px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.2s;
  z-index: 800;
}
.main-nav li.has-sub:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub-menu li {
  padding: 0;
}
.sub-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: #111;
}
.sub-menu .has-sub:hover > .sub-menu {
  top: 0;
  right: 100%;
}

/* ===========================
   تخطيط الصفحة
   =========================== */
.layout {
  display: grid;
  /* التعديل الأول: تغيير النسب 
     كانت 2.5fr وأصبحت 3.5fr لزيادة عرض الجزء الرئيسي
     وتم تعديل الجزء الجانبي قليلاً للحفاظ على التناسق
  */
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 1.2fr);
  
  gap: 1.5rem; /* زيادة المسافة قليلاً لتتناسب مع الحجم الجديد */
  padding: 1.5rem 2rem;
  
  /* التعديل الثاني (الأهم): زيادة العرض الكلي للحاوية 
     إذا كان العرض السابق 1200px، فإن 1600px تمثل زيادة بحوالي 30%
  */
  width: 98%; /* لضمان عدم التصاقها بالحواف في الشاشات المتوسطة */
  max-width: 1600px; /* هذا السطر هو المسؤول عن تكبير "الكل" */
  margin: 0 auto; /* لتوسيط الحاوية في الشاشة */
}
 
 
/* badges */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.badge-breaking {
  background: var(--accent-yellow);
  color: #111;
}
.badge-featured {
  background: var(--primary-red);
  color: var(--white);
}
.badge-latest {
  background: #008cff;
  color: var(--white);
}

/* عناصر تحكم السلايدر */
.slider-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: none;
  color: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
}
.slider-control.prev { right: 50px; }
.slider-control.next { right: 12px; }

.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 14px;
  display: flex;
  gap: 6px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.dot.active {
  background: var(--primary-red);
}

/* ===========================
   الإعلانات
   =========================== */
.ad-slot {
  background: var(--white);
  border-radius: 10px;
  border: 1px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.85rem;
}
.ad-hero {
  min-height: 120px;
}
.ad-inline {
  margin-top: 1.5rem;
  min-height: 90px;
}
.ad-sidebar {
  min-height: 250px;
}

/* ===========================
   المحتوى الأساسي
   =========================== */
.section-header h3 {
  margin: 0 0 0.7rem;
  color: var(--primary-red);
  border-right: 4px solid var(--primary-red);
  padding-right: 0.5rem;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.news-card {
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.news-body {
  padding: 0.6rem 0.8rem 0.9rem;
}
.news-body h4 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}
.news-body p {
  margin: 0;
  font-size: 0.85rem;
  color: #555;
}

/* ===========================
   الشريط الجانبي
   =========================== */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.social-box {
  background: var(--white);
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
}
.social-box h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.social-icon {
  flex: 1 1 45%;
  text-align: center;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--white);
  text-decoration: none;
}
.social-icon.fb { background:#1877f2; }
.social-icon.x  { background:#111; }
.social-icon.yt { background:#ff0000; }
.social-icon.tg { background:#0088cc; }

.publisher-login {
  display: block;
  margin-top: 0.3rem;
  text-align: center;
  padding: 0.4rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--primary-red);
  color: var(--primary-red);
  text-decoration: none;
  font-size: 0.85rem;
}

/* ===========================
   استجابة عامة
   =========================== */
@media (max-width: 992px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-slider {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .main-header {
    padding-inline: 1rem;
  }
  .nav-toggle {
    display: block;
  }
  .main-nav {
    position: fixed;
    inset-block: 0;
    right: -260px;
    width: 260px;
    background: var(--dark-gray);
    transition: 0.25s;
    padding-top: 3.2rem;
  }
  .main-nav.open {
    right: 0;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .main-nav li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .main-nav a {
    display: block;
    padding: 0.75rem 1.2rem;
  }
  .sub-menu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: #111;
  }
  .sub-menu a {
    padding-right: 2.2rem;
    color: var(--white);
  }
  .slide img {
    height: 260px;
  }
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .top-bar {
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
  }
  .news-ticker {
    font-size: 0.78rem;
  }
}
 

/* تنسيق الموبايل للشارات */
@media (max-width: 768px) {
  .ticker-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
  }
}