/* ========================================================
   مدرسة آفاق - بشار | Custom Stylesheet
   Extends Tailwind CSS with brand styling, animations,
   scroll-reveal behaviour and form error states.
   ======================================================== */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: 'Tajawal', system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Scroll reveal (activated via IntersectionObserver) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helper for card grids */
.reveal[data-delay="1"] { transition-delay: 0.15s; }
.reveal[data-delay="2"] { transition-delay: 0.3s; }
.reveal[data-delay="3"] { transition-delay: 0.45s; }

/* ---------- Navbar states ---------- */
#navbar {
  background: transparent;
}

/* Applied when the user scrolls down the page */
#navbar.navbar-solid {
  background: rgba(15, 35, 80, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -15px rgba(6, 18, 43, 0.8);
}

/* ---------- Preloader ---------- */
#preloader.hidden-preloader {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Form field error state ---------- */
.input-invalid {
  border-color: #f87171 !important;
  background-color: #fef2f2 !important;
}

.input-invalid:focus {
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15) !important;
}

/* ---------- Counter number formatting ---------- */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #0f2350;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1e3777;
}

/* ========================================================
   Fully Responsive enhancements
   Mobile-first, with breakpoints for phones (<=600px),
   tablets (<=900px) and large desktops (>=1024px).
   ======================================================== */

/* ---------- Fluid media: images never break the layout ---------- */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Keep anchored sections clear of the fixed navbar */
section[id],
footer[id] {
  scroll-margin-top: 5rem;
}

/* ---------- Phones (max-width: 600px) ---------- */
@media (max-width: 600px) {
  /* Fluid hero heading (scales smoothly between ~29px and 38px) */
  #home h1 {
    font-size: clamp(1.8rem, 8.5vw, 2.4rem);
    line-height: 1.35;
  }

  /* Fluid section headings */
  #specialties h2,
  #stats h2,
  #testimonials h2,
  #register h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.05rem);
  }

  /* Compact floating action buttons */
  #whatsapp-btn .animate-ping,
  #whatsapp-btn .relative {
    height: 3.25rem;
    width: 3.25rem;
  }
  #whatsapp-btn {
    right: 1rem;
    bottom: 1rem;
  }
  #back-to-top {
    left: 1rem;
    bottom: 1rem;
    height: 3.25rem;
    width: 3.25rem;
  }
  #whatsapp-btn svg,
  #back-to-top svg {
    height: 1.5rem;
    width: 1.5rem;
  }

  /* Contact rows wrap gracefully on narrow screens */
  footer li {
    flex-wrap: wrap;
  }

  /* Documents list cards keep a comfortable radius/padding */
  #documents .group {
    padding: 1.25rem;
  }
}

/* ---------- Tablets (max-width: 900px) ---------- */
@media (max-width: 900px) {
  /* Tighter gutters in card grids */
  #specialties .mt-14.grid,
  #testimonials .mt-14.grid {
    gap: 1.5rem;
  }

  /* Keep buttons fully clickable and centered */
  #specialties .specialty-btn {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* Hero CTAs never outgrow the container */
  #home .mx-auto.max-w-7xl a {
    max-width: 100%;
  }
}

/* ---------- Large desktops (>=1024px) ---------- */
@media (min-width: 1024px) {
  /* Breathing room on very wide screens */
  body {
    font-size: 1rem;
  }
}