/* --- Root Variables for Colors (Extracted from Logo) --- */
:root {
  --primary-color: #005673;
  /* Dark Teal/Blue - from the book in the logo */
  --secondary-color: #7ac142;
  /* Green - from leaves in the logo */
  --accent-color: #f2a200;
  /* Orange/Yellow - from leaves in the logo */
  --text-dark: #4a4a4a;
  /* Dark Grey for main text */
  --text-light: #6c757d;
  /* Lighter Grey for meta text */
  --bg-light: #f8f8f8;
  /* Light background for cards/sections */
  --bg-white: #ffffff;
  /* Pure white for backgrounds */
  --blue-circle: #00b8d4;
  /* Cyan-like blue from circles */
}

/* --- Global Styles --- */
body {
  font-family: "Cairo", sans-serif;
  /* Using Cairo for better Arabic display */
  margin: 0;
  padding: 0;
  direction: rtl;
  /* Right-to-left for Arabic */
  text-align: right;
  /* Default text alignment */
  background-color: var(--bg-light);
  /* Light background for the whole page */
  color: var(--text-dark);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--accent-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
  margin-top: 0;
}

/* --- Header Styling --- */
header {
  background-color: var(--bg-white);
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  height: 60px;
  /* Adjust as needed */
  max-width: 100%;
}

.logo-link {
  display: flex;
  /* To ensure the image is centered if it doesn't fill the link */
  align-items: center;
  justify-content: center;
}

nav a {
  margin-right: 15px;
  /* Adjust spacing for RTL */
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--primary-color);
}

nav a:hover {
  color: var(--accent-color);
}

/* --- Main Content Area --- */
main {
  padding: 20px 0;
}

/* --- Single Article Page (article.html) Styling --- */
#article-page-container {
  background-color: var(--bg-white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

#article-title {
  color: var(--primary-color);
  font-size: 2rem;
  margin-bottom: 10px;
}

#article-date {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 20px;
  display: block;
  /* Ensure it takes its own line */
}

#article-content p {
  line-height: 1.8;
  margin-bottom: 1.2em;
  color: var(--text-dark);
  font-size: 1.1rem;
  text-align: justify; /* ✅ أضف هذا السطر */
}

#article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  /* Center images */
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Specific styling for numbered images (from app.js) */
#article-content figure {
  margin: 20px 0;
  /* Add margin around figures */
}

.image-number {
  /* This class is added by app.js */
  background-color: var(--primary-color) !important;
  /* Override with primary color */
  /* Other styles for .image-number are applied by JS */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  #articles-container {
    /* عمودان على الشاشات المتوسطة */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #articles-container {
    /* عمود واحد على الشاشات الصغيرة */
    grid-template-columns: 1fr;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
  }

  nav {
    margin-top: 15px;
  }

  nav a {
    margin: 0 10px;
  }

  #article-title {
    font-size: 1.5rem;
  }

  #article-page-container {
    padding: 15px;
  }
}

/* --- New Image Gallery Grid Styling --- */
.gallery-grid {
  display: grid;
  /* Create 4 columns on large screens, adjusting for smaller ones */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  /* Space between thumbnails */
  margin-top: 30px;
  /* Space between article text and gallery */
}

.gallery-grid .gallery-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  aspect-ratio: 1 / 1;
  /* Make thumbnails square */
}

.gallery-grid .gallery-item:hover {
  transform: scale(1.05);
}

.gallery-grid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop image to fit the square */
}

/* --- Advanced GLightbox Counter Styling --- */

.gcounter {
  /* --- Default style for LARGE screens --- */
  background-color: rgba(255, 255, 255, 0.9);
  /* White with slight transparency */
  color: #333;
  /* Dark text */
  border: none;
  /* Remove the previous border */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* A more pronounced shadow */

  /* Positioning at the bottom center */
  top: auto;
  /* Remove the default top positioning */
  bottom: 20px;
  /* 20px from the bottom of the screen */
  left: 50%;
  transform: translateX(-50%);
  /* This perfectly centers the element */

  /* Shape and Font */
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
}

/* --- Style for SMALL screens (e.g., mobile phones) --- */
@media (max-width: 768px) {
  .gcounter {
    background-color: rgba(0, 0, 0, 0.8);
    /* Black with slight transparency */
    color: white;
    /* White text */
    bottom: 10px;
    /* A bit closer to the edge on mobile */
  }
}

/* --- Custom GLightbox Theme (from School Logo) --- */

/* Change the background overlay color */
.goverlay {
  background-color: rgba(0, 86, 115, 0.95);
  /* Dark Teal from your logo with transparency */
}

/* Style the title and counter */
.gslide-title {
  color: #ffffff;
  /* White text for the title */
  font-family: "Tajawal", sans-serif;
  /* Use your title font */
}

.gcounter {
  color: #ffffff;
  /* White text for the counter */
  font-family: "Cairo", sans-serif;
}

/* Style the close and navigation buttons */
.gclose,
.gnext,
.gprev {
  background-color: rgba(255, 255, 255, 0.2) !important;
  /* Semi-transparent white background */
  border-radius: 50%;
}

.gclose svg,
.gnext svg,
.gprev svg {
  fill: #ffffff !important;
  /* Make the icons inside the buttons white */
}

/* Force GLightbox elements to be visible */
.goverlay {
  background-color: rgba(0, 86, 115, 0.95) !important;
}

.gclose,
.gnext,
.gprev,
.gcounter {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* أضف هذه الأنماط في نهاية الملف */

/* --- Styling for categories and tags on article cards --- */
.card-meta-tags {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* مسافة بين العناصر */
}

.article-card-category,
.article-card-tag {
  font-size: 0.75rem;
  /* حجم خط صغير */
  padding: 3px 8px;
  border-radius: 15px;
  /* حواف دائرية */
  font-weight: bold;
}

.article-card-category {
  background-color: var(--accent-color);
  /* اللون البرتقالي من الشعار */
  color: var(--bg-white);
}

.article-card-tag {
  background-color: #e9ecef;
  /* لون رمادي فاتح */
  color: var(--text-dark);
}

/* --- ✅ أكواد جديدة أضفها في نهاية الملف --- */

/* لإضافة هوامش للمحتوى الرئيسي في الصفحات العامة */
main .container {
  background-color: var(--bg-white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* لتنسيق الشعار بجانب عنوان المقال */
.article-header {
  display: flex;
  align-items: center;
  gap: 15px;
  /* مسافة بين الشعار والعنوان */
  margin-bottom: 10px;
}

.header-logo-small {
  height: 50px;
  /* حجم مناسب للشعار */
  width: 50px;
  border-radius: 50%;
  /* يجعله دائرياً */
  object-fit: cover;
}

/* --- Announcement Bar Styles (Sequential Fading Version) --- */
#announcement-bar {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 0;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  text-align: center; /* لمحاذاة المحتوى في الوسط */
  height: 45px; /* ارتفاع ثابت لمنع اهتزاز الصفحة */
  display: flex; /* لسهولة المحاذاة */
  align-items: center;
  justify-content: center;
}

#announcement-bar .announcement-item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* يبدأ شفافًا */
  transition: opacity 0.8s ease-in-out; /* حركة ظهور واختفاء ناعمة */
}

#announcement-bar .announcement-item.active {
  opacity: 1; /* يظهر العنصر النشط */
}

#announcement-bar .logo-separator {
  height: 20px; /* حجم مناسب للشعار */
  margin: 0 15px;
  vertical-align: middle;
}

/* --- Social Icons in Header --- */
#social-icons-container {
  display: flex;
  align-items: center;
  gap: 15px;
}
#social-icons-container a {
  color: var(--primary-color);
  font-size: 1.3rem;
  transition: transform 0.2s, color 0.2s;
}
#social-icons-container a:hover {
  color: var(--accent-color);
  transform: scale(1.2);
}
nav {
  display: flex;
  align-items: center;
  gap: 25px; /* مسافة بين الرئيسية والأيقونات */
}

/* --- Card Layout for Homepage (Updated for Equal Height) --- */
#articles-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.article-card {
  background-color: var(--bg-white);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-dark);
  display: flex; /* ✅ لجعل البطاقة مرنة */
  flex-direction: column; /* ✅ لترتيب المحتوى بشكل عمودي */
  height: 100%; /* ✅ لجعل البطاقة تملأ المساحة المتاحة */
  transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* ✅ لجعل هذا القسم ينمو ويملأ الفراغ */
  text-align: justify;
}

.card-content h3 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: var(--primary-color);
}

.card-meta {
  display: flex;
  justify-content: flex-end; /* ✅ محاذاة العناصر إلى اليمين */
  gap: 15px; /* ✅ إضافة مسافة بين التاريخ والاسم */
  font-size: 0.85rem;
  color: var(--text-light);
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: auto;
}

.card-meta span {
  display: flex;
  align-items: center;
}

.card-meta i {
  margin-left: 5px;
  color: var(--blue-circle);
}

/* --- Styling for Meta Links Inside the Card (Updated) --- */
.card-tags {
  margin-bottom: 15px; /* مسافة بين الوسوم وبقية المحتوى */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.meta-link {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  text-decoration: none;
  transition: transform 0.2s;
}

.meta-link:hover {
  transform: translateY(-2px);
}

.category-link {
  background-color: #f2a200; /* Yellow from logo */
  color: #fff;
}

.tag-link {
  background-color: #6c757d; /* Grey */
  color: #fff;
}

/* --- Footer Styling --- */
footer {
  background-color: #e9ecef; /* لون رمادي فاتح وأنيق */
  color: #6c757d; /* لون نصي أغمق قليلاً للوضوح */
  text-align: center; /* ✅ توسيط المحتوى */
  padding: 25px 0; /* إضافة مساحة داخلية */
  margin-top: 40px; /* إضافة مسافة علوية لفصله عن المحتوى */
  border-top: 1px solid #dee2e6; /* خط علوي رفيع للفصل */
}

footer p {
  margin: 0;
  font-size: 0.9rem;
}

/* --- Single Article Page Styling (Updated) --- */
#article-page-container {
  background-color: var(--bg-white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.article-header {
  border-bottom: 2px solid #f2a200; /* خط فاصل باللون الأصفر */
  padding-bottom: 20px;
  margin-bottom: 25px;
}

#article-title {
  color: var(--primary-color);
  font-size: 2.2rem;
  font-family: "Tajawal", sans-serif;
  margin-bottom: 15px;
  text-align: justify; /* ✅ أضف هذا السطر */
}

.article-meta-info {
  display: flex;
  gap: 20px;
  color: var(--text-light);
  font-size: 0.9rem;
}

.article-meta-info span {
  display: flex;
  align-items: center;
}

.article-meta-info i {
  margin-left: 8px;
  color: var(--primary-color);
}

#article-content p {
  line-height: 1.8;
  margin-bottom: 1.2em;
  color: var(--text-dark);
  font-size: 1.1rem;
}

/* ✅ جعل الصور داخل المقال قابلة للنقر */
#article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 25px auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer; /* تغيير شكل المؤشر للإشارة إلى أنها قابلة للنقر */
  transition: transform 0.2s;
}
#article-content img:hover {
  transform: scale(1.02);
}

/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 768px) {
  #articles-container {
    /* ✅ عرض المقالات في عمود واحد على الشاشات الصغيرة */
    grid-template-columns: 1fr;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
  }

  nav {
    margin-top: 15px;
  }

  nav a {
    margin: 0 10px;
  }

  #article-title {
    font-size: 1.5rem;
  }

  #article-page-container {
    padding: 15px;
  }
}

/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 768px) {
  /* ... (الكود القديم الخاص بـ #articles-container وغيرها يبقى كما هو) ... */

  /* ✅ الإضافات الجديدة لشريط الإعلانات على الجوال */
  #announcement-bar {
    height: auto; /* السماح للارتفاع بالزيادة حسب المحتوى */
    min-height: 45px; /* تحديد أقل ارتفاع ممكن */
    padding: 8px 15px; /* إضافة حشوة داخلية مناسبة */
    text-align: center;
  }

  #announcement-bar .announcement-item {
    font-size: 0.9rem; /* تصغير حجم الخط قليلاً */
    white-space: normal; /* السماح للنص بالالتفاف على عدة أسطر */
  }

  #announcement-bar .logo-separator {
    height: 16px; /* تصغير حجم الشعار قليلاً */
  }
}

/* --- Logo and Site Name Styling --- */
.logo-link {
  display: flex; /* ✅ لترتيب الشعار والنص أفقيًا */
  align-items: center; /* ✅ لمحاذاة الشعار والنص عموديًا */
  gap: 15px; /* ✅ مسافة بين الشعار والنص */
  text-decoration: none; /* إزالة الخط تحت الرابط */
}

.logo-text h2 {
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
  font-family: "Tajawal", sans-serif; /* استخدام خط جميل */
}

/* --- Responsive Adjustments for Mobile (FINAL FIX) --- */
@media (max-width: 768px) {
  #articles-container {
    grid-template-columns: 1fr;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
  }

  nav {
    margin-top: 15px;
  }

  nav a {
    margin: 0 10px;
  }

  #article-page-container {
    padding: 15px;
  }

  /* Announcement bar fixes */
  #announcement-bar {
    height: auto;
    min-height: 45px;
    padding: 8px 15px;
    text-align: center;
  }
  #announcement-bar .announcement-item {
    font-size: 0.9rem;
    white-space: normal;
  }
  #announcement-bar .logo-separator {
    height: 16px;
  }

  /* Logo fixes */
  .logo-text h2 {
    font-size: 1.2rem;
  }

  /* ✅ FINAL FIX FOR ARTICLE HEADER ON MOBILE */
  .article-header {
    display: block; /* Override flex behavior */
  }

  #article-title {
    font-size: 1.6rem;
    margin-bottom: 20px; /* Add space below the title */
  }

  .article-meta-info span {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between author and date */
  }
}

/* --- Video Responsive Containers --- */
.video-container-wide,
.video-container-tall {
  position: relative;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 25px auto; /* إضافة هوامش وتوسيط */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 1. التنسيق العرضي (16:9) - مناسب للشاشات الكبيرة */
.video-container-wide {
  padding-bottom: 56.25%; /* (9 / 16) * 100 */
}

/* 2. التنسيق الطولي (9:16) - مناسب للجوال */
.video-container-tall {
  padding-bottom: 177.77%; /* (16 / 9) * 100 */
  max-width: 400px; /* تحديد عرض أقصى لجعله يبدو كشاشة جوال */
}

/* لجعل الفيديو يملأ الحاوية بالكامل */
.video-container-wide iframe,
.video-container-tall iframe,
.video-container-wide video,
.video-container-tall video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}