/* ========================================================
   مدرسة إبن باديس - بشار | Custom CSS
   يكمل Tailwind (CDN). الطبقات المخصصة التي يعتمد عليها
   index.html / announcements.html / script.js.
   ======================================================== */

/* NAVBAR — خلفية صلبة + ظل عند التمرير (يُضاف كلاس navbar-solid من JS) */
#navbar.navbar-solid {
  background-color: rgba(8, 47, 73, 0.96); /* navy-950 */
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* NAV LINK — نقي في الحالة العادية فوق hero الكحلي؛ يبقى مقروءًا فوق
   الخلفية الصلبة لأنه أبيض فوق navy تظل سليمة. */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

/* PRELOADER — يخفي الشعار بشفافية + تعطيل التفاعل (يُضاف من JS) */
#preloader.hidden-preloader {
  opacity: 0;
  pointer-events: none;
}
#preloader {
  transition: opacity 0.7s ease;
}

/* SCROLL REVEAL — يبدأ مخفيًا ثم يظهر مع is-visible (يُدار من JS) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FORM VALIDATION — إطار أحمر للحقول غير الصالحة (يُضاف من JS) */
.input-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* MOBILE NAV LINK — مؤشر تفاعل سلس */
.mobile-nav-link {
  transition: background-color 0.2s ease, color 0.2s ease;
}