/* =============================================
   Dakahlia Governorate — Custom Styles
   ============================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

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

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Cairo', sans-serif;
  background-color: #fff;
  color: #111827;
  -webkit-font-smoothing: antialiased;
}

body[dir="rtl"] {
  font-family: 'Cairo', 'Inter', sans-serif;
}

::selection {
  background-color: rgba(26, 95, 63, 0.2);
}

*:focus-visible {
  outline: 2px solid #1a5f3f;
  outline-offset: 2px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #1a5f3f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #145030; }

/* ---- Keyframes ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(26, 95, 63, 0.3); }
  50%       { box-shadow: 0 0 40px rgba(26, 95, 63, 0.6); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ping-slow {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---- Utility animation classes ---- */
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-float-delay1 { animation: float 3s ease-in-out infinite; animation-delay: 1s; }
.animate-float-delay2 { animation: float 3s ease-in-out infinite; animation-delay: 2s; }
.animate-pulse-glow   { animation: pulse-glow 2s ease-in-out infinite; }
.animate-slide-up     { animation: slide-up 0.6s ease-out forwards; }
.animate-slide-up-d1  { animation: slide-up 0.6s 0.1s ease-out forwards; opacity: 0; }
.animate-slide-up-d2  { animation: slide-up 0.6s 0.2s ease-out forwards; opacity: 0; }
.animate-slide-up-d3  { animation: slide-up 0.6s 0.3s ease-out forwards; opacity: 0; }
.animate-ping-slow    { animation: ping-slow 3s ease-out infinite; }

/* ---- Transition helpers ---- */
.transition-all-300 { transition: all 0.3s ease; }
.transition-all-500 { transition: all 0.5s ease; }

/* ---- Stat / Feature card entrance animation ---- */
.card-hidden  { opacity: 0; transform: translateY(32px); }
.card-visible { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; }

/* ---- Nav scrolled state ---- */
nav.scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ---- Mobile menu ---- */
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: block;
}

/* ---- Hero grid overlay ---- */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ---- CTA grid overlay ---- */
.cta-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Feature card hover gradient colours ---- */
.feature-green  { --feat-from: #1a5f3f; --feat-to: #0d3d28; }
.feature-gold   { --feat-from: #d4af37; --feat-to: #b8941f; }
.feature-red    { --feat-from: #c41e3a; --feat-to: #9a1830; }
.feature-blue   { --feat-from: #2563eb; --feat-to: #1d4ed8; }

.feature-icon {
  background: linear-gradient(135deg, var(--feat-from), var(--feat-to));
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(3deg);
}

.feature-card:hover .feature-learn-more {
  opacity: 1;
  transform: translateX(0);
}

.feature-learn-more {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

[dir="rtl"] .feature-learn-more {
  transform: translateX(10px);
}

/* ---- District card ---- */
.district-card:hover .district-pin-icon {
  background-color: #1a5f3f;
}
.district-card:hover .district-pin-icon svg {
  color: #fff;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}