/* CSS Variables matching React project */
:root {
    --background: 222 47% 11%;
    --foreground: 0 0% 100%;
    --card: 222 47% 15%;
    --card-foreground: 0 0% 100%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 30% 18%;
    --secondary-foreground: 0 0% 100%;
    --muted: 222 30% 20%;
    --muted-foreground: 0 0% 60%;
    --border: 222 30% 25%;
    --input: 222 30% 18%;
    --ring: 217 91% 60%;
    --radius: 0.625rem;
}

* { border-color: hsl(var(--border)); box-sizing: border-box; }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; margin: 0; }
html { scroll-behavior: smooth; }

/* Utilities */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #60a5fa, #2563eb);
}

/* Scroll Animations (replaces Framer Motion) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.from-left { transform: translateX(-30px); }
.animate-on-scroll.from-right { transform: translateX(30px); }
.animate-on-scroll.from-scale { transform: scale(0.8); }
.animate-on-scroll.is-visible { opacity: 1; transform: none; }

/* Page load animations */
.animate-on-load {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}
.animate-on-load.from-right { transform: translateX(30px); animation-name: fadeInRight; }
.animate-on-load.delay-200 { animation-delay: 0.2s; }
.animate-on-load.delay-400 { animation-delay: 0.4s; }

@keyframes fadeInUp { to { opacity: 1; transform: none; } }
@keyframes fadeInRight { to { opacity: 1; transform: none; } }

/* Navbar */
.nav-item {
    position: relative;
}

.nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    transition-delay: 0.05s;       /* tiny delay before hiding so the mouse can cross */
    pointer-events: none;
    padding-top: 0.5rem;           /* 8px invisible hover-bridge zone above the panel */
}

/* Pseudo-element hover bridge: extends the dropdown's hover zone upward
   so there is no dead-zone between the trigger button and the panel.    */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -0.5rem;                  /* extend 8px above the dropdown container */
    left: 0;
    right: 0;
    height: 1rem;                  /* 8px above + 8px into the padding = 16px bridge */
    background: transparent;       /* invisible but still captures hover events */
}

.nav-item:hover .nav-dropdown,
.nav-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;          /* show immediately on hover (no delay) */
}

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Blue Gradient Utilities */
.blue-gradient-page {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 30%, #1e3a5f 50%, #1e293b 70%, #0f172a 100%);
}

.blue-gradient-hero {
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.2) 0%, rgba(15, 23, 42, 0.95) 50%, #0f172a 100%);
}

.blue-gradient-section {
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.blue-gradient-accent {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.03) 50%, transparent 100%);
}

.blue-gradient-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.15) 50%, transparent 100%);
    height: 1px;
}

.blue-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(120px);
    pointer-events: none;
}

.blue-glow-sm {
    width: 300px;
    height: 300px;
    background: rgba(59, 130, 246, 0.08);
}

.blue-glow-md {
    width: 500px;
    height: 500px;
    background: rgba(59, 130, 246, 0.06);
}

.blue-glow-lg {
    width: 800px;
    height: 600px;
    background: rgba(59, 130, 246, 0.1);
}

.blue-radial-bg {
    background: radial-gradient(ellipse at top, rgba(30, 58, 138, 0.15), transparent 70%);
}

.blue-radial-center {
    background: radial-gradient(ellipse at center, rgba(30, 58, 138, 0.1), transparent 70%);
}

/* RTL Support for Arabic */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .flex { direction: rtl; }
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .gap-2 { direction: rtl; }
[dir="rtl"] .gap-3 { direction: rtl; }
[dir="rtl"] .gap-4 { direction: rtl; }