/* ========================================
   تناسق بين Navbar و Hero Slider
   Navbar & Hero Harmony
   ======================================== */

/* تحسين التناسق اللوني */
nav:not(.scrolled) {
    /* Glassmorphism effect */
    background: linear-gradient(
        180deg,
        rgba(79, 0, 140, 0.15) 0%,
        rgba(79, 0, 140, 0.08) 100%
    );
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Hero Slider integration */
.hero-slider {
    margin-top: -80px; /* Pull hero up under navbar */
    padding-top: 80px; /* Add padding to compensate */
}

/* Better gradient for hero */
.hero-slide-overlay {
    background: linear-gradient(
        135deg,
        rgba(79, 0, 140, 0.95) 0%,
        rgba(79, 0, 140, 0.85) 30%,
        rgba(46, 16, 101, 0.8) 60%,
        rgba(168, 85, 247, 0.5) 100%
    ) !important;
}

/* Enhanced navbar on dark hero */
nav:not(.scrolled) {
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* Links glow effect */
nav:not(.scrolled) a {
    transition: all 0.3s ease;
}

nav:not(.scrolled) a:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(132, 204, 22, 0.4));
}

/* Logo icon enhancement */
nav:not(.scrolled) .material-symbols-outlined {
    filter: drop-shadow(0 0 10px rgba(132, 204, 22, 0.6));
}

/* Perfect color harmony */
:root {
    --navbar-blur: blur(15px);
    --navbar-transparency: rgba(79, 0, 140, 0.12);
    --hero-primary: rgba(79, 0, 140, 0.95);
}

/* Smooth transition between states */
nav {
    transition: 
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced scrolled state */
nav.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: 
        0 2px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Dark mode harmony */
.dark nav:not(.scrolled) {
    background: linear-gradient(
        180deg,
        rgba(30, 41, 59, 0.4) 0%,
        rgba(15, 23, 42, 0.3) 100%
    );
}

.dark nav.scrolled {
    background: rgba(30, 41, 59, 0.98);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    nav:not(.scrolled) {
        background: linear-gradient(
            180deg,
            rgba(79, 0, 140, 0.9) 0%,
            rgba(79, 0, 140, 0.85) 100%
        );
        backdrop-filter: blur(10px);
    }
    
    .hero-slider {
        margin-top: -70px;
        padding-top: 70px;
    }
}

/* Loading animation enhancement */
.hero-loading {
    background: rgba(132, 204, 22, 0.2) !important;
}

.hero-loading::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(132, 204, 22, 0.8),
        #84cc16
    ) !important;
}

/* Dots harmony with navbar */
.hero-dot {
    border-color: rgba(255, 255, 255, 0.8);
}

.hero-dot.active {
    background: #84cc16;
    box-shadow: 0 0 15px rgba(132, 204, 22, 0.6);
}

/* Better contrast for content */
nav:not(.scrolled) .flex.items-center.gap-2 {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Improve readability */
nav:not(.scrolled) {
    font-weight: 500;
    letter-spacing: 0.01em;
}