/* ===== NAVBAR ===== */
#mainNav {
    background-color: transparent;
    transition: all var(--transition-base);
    padding: var(--space-md) 0;
}

/* Pages that explicitly request the homepage-like transparent navbar */
body.transparent-nav #mainNav,
body.transparent-nav #mainNav.navbar-dark-pages {
    background-color: transparent;
    box-shadow: none;
    border-bottom: none;
    padding: var(--space-md) 0;
}

body.transparent-nav #mainNav .navbar-nav .nav-link,
body.transparent-nav #mainNav .navbar-brand,
body.transparent-nav #mainNav .navbar-toggler-icon::before,
body.transparent-nav #mainNav .navbar-toggler-icon::after {
    color: var(--color-text-inverse);
}

/* Navbar nelle pagine non-homepage: sempre scura */
#mainNav.navbar-dark-pages {
    background-color: var(--color-surface-elevated, #f8f9fa);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-md);
}

#mainNav.navbar-scrolled {
    background-color: var(--color-surface-elevated, #f8f9fa);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-md);
}

/* When a page requests a transparent nav but the scrolled state is active,
   ensure the scrolled styles take precedence so the navbar becomes solid. */
body.transparent-nav #mainNav.navbar-scrolled {
    background-color: var(--color-surface-elevated, #f8f9fa);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-md);
}

body.transparent-nav #mainNav.navbar-scrolled .navbar-nav .nav-link,
body.transparent-nav #mainNav.navbar-scrolled .navbar-brand {
    color: var(--color-text-primary);
}

#mainNav.navbar-scrolled .navbar-nav .nav-link {
    color: var(--color-text-primary);
}

#mainNav.navbar-scrolled .navbar-nav .nav-link:hover,
#mainNav.navbar-scrolled .navbar-nav .nav-link.active,
#mainNav.navbar-dark-pages .navbar-nav .nav-link:hover,
#mainNav.navbar-dark-pages .navbar-nav .nav-link.active {
    color: var(--color-primary);
}

/* Logo */
#mainNav .navbar-brand {
    color: var(--color-text-inverse);
    transition: color var(--transition-base);
}

#mainNav.navbar-scrolled .navbar-brand,
#mainNav.navbar-dark-pages .navbar-brand {
    color: var(--color-text-primary);
}

.logo-header {
    height: 4rem;
    transition: height var(--transition-base);
}

/* Dual logo layout - Parchi Letterari is smaller */
.logo-header.logo-parchi {
    height: 3rem;
}

.logo-header.logo-parco {
    height: 4rem;
}

/* Logo nero nelle pagine non-homepage */
#mainNav.navbar-dark-pages .logo-header {
    height: 3rem;
}

#mainNav.navbar-dark-pages .logo-header.logo-parchi {
    height: 2.5rem;
}

#mainNav.navbar-scrolled .logo-header {
    height: 3rem;
}

#mainNav.navbar-scrolled .logo-header.logo-parchi {
    height: 2.5rem;
}

/* Link della navbar */
#mainNav .navbar-nav {
    align-items: center;
}

#mainNav .navbar-nav .nav-link {
    color: var(--color-text-inverse);
    font-weight: 400;
    padding: var(--space-sm) 0.75rem;
    /* Reduced width */
    margin: 0 0.25rem;
    /* Added spacing between items */
    transition: color var(--transition-fast);
    position: relative;
    opacity: 1;
    /* Forza visibilità piena */
}

/* Override stili Bootstrap navbar-dark che impostano opacità ridotta */
#mainNav.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1);
}

/* Quando navbar-dark viene scrollata, il testo deve diventare scuro */
#mainNav.navbar-dark.navbar-scrolled .navbar-nav .nav-link {
    color: var(--color-text-primary);
}

#mainNav.navbar-dark.navbar-scrolled .navbar-nav .nav-link:hover,
#mainNav.navbar-dark.navbar-scrolled .navbar-nav .nav-link.active {
    color: var(--color-primary);
}

#mainNav.navbar-dark.navbar-scrolled .navbar-brand {
    color: var(--color-text-primary);
}

/* Link scuri nelle pagine non-homepage */
#mainNav.navbar-dark-pages .navbar-nav .nav-link {
    color: var(--color-text-primary);
}

#mainNav .navbar-nav .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 2px !important;
    background-color: var(--color-primary) !important;
    transition: width var(--transition-base) !important;
    /* Reset proprietà freccia Bootstrap */
    border: none !important;
    margin: 0 !important;
    display: block !important;
}

#mainNav .navbar-nav .nav-link:hover {
    color: var(--color-primary-light);
}

#mainNav.navbar-dark-pages .navbar-nav .nav-link:hover {
    color: var(--color-primary);
}

#mainNav .navbar-nav .nav-link:hover::after {
    width: 80% !important;
}

#mainNav .navbar-nav .nav-link.active {
    color: var(--color-primary-light);
}

/* Fix active/open dropdown toggle background */
/* Fix active/open dropdown toggle background - Transparent State */
#mainNav:not(.navbar-scrolled):not(.navbar-dark-pages) .navbar-nav .nav-link.show,
#mainNav:not(.navbar-scrolled):not(.navbar-dark-pages) .navbar-nav .show>.nav-link {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: var(--color-text-inverse) !important;
    box-shadow: none !important;
}

/* Fix active/open dropdown toggle background - Scrolled/Solid State */
#mainNav.navbar-scrolled .navbar-nav .nav-link.show,
#mainNav.navbar-scrolled .navbar-nav .show>.nav-link,
#mainNav.navbar-dark-pages .navbar-nav .nav-link.show,
#mainNav.navbar-dark-pages .navbar-nav .show>.nav-link {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
    color: var(--color-primary-dark) !important;
    box-shadow: none !important;
}

/* Dropdown Menu */

/* Indicatore chevron per dropdown - usa ::before per non interferire con il trattino */
#mainNav .navbar-nav .dropdown-toggle::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    opacity: 0.7;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

#mainNav .navbar-nav .dropdown-toggle:hover::before {
    opacity: 1;
}

#mainNav .navbar-nav .dropdown.show .dropdown-toggle::before {
    transform: translateY(-30%) rotate(-135deg);
    opacity: 1;
}

/* Aggiunge spazio per il chevron */
#mainNav .navbar-nav .dropdown-toggle {
    padding-right: calc(var(--space-sm) + 10px) !important;
}

#mainNav .navbar-nav .dropdown-menu {
    background-color: var(--color-surface-elevated, #f8f9fa);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm);
    margin-top: var(--space-sm);
}

#mainNav .navbar-nav .dropdown-item {
    color: var(--color-text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

#mainNav .navbar-nav .dropdown-item:hover {
    background-color: var(--color-primary-pale);
    color: var(--color-primary-dark);
}

#mainNav .navbar-nav .dropdown-item:active {
    background-color: var(--color-primary-light);
    color: var(--color-text-inverse);
}

#mainNav .navbar-nav .dropdown-divider {
    border-top-color: var(--color-divider);
    margin: var(--space-sm) 0;
}

/* Pulsante Prenota/Contatti */
#mainNav .navbar-nav .nav-item .btn {
    padding: 0.6rem 1.75rem;
    /* Altezza più precisa per allineamento */
    border-radius: var(--radius-md);
    font-weight: 400;
    margin-left: var(--space-md);
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Enhanced Contact CTA Button Styles */
#mainNav .navbar-nav .nav-item .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

#mainNav .navbar-nav .nav-item .btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateY(-50%) skewX(-25deg);
    transition: none;
}

#mainNav .navbar-nav .nav-item .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}

#mainNav .navbar-nav .nav-item .btn-primary:hover::before {
    animation: shine-button 1s forwards;
}

@keyframes shine-button {
    100% {
        left: 200%;
    }
}

/* Pulsante Contatti Pulsing Animation (Subtle) */
#mainNav .navbar-nav .nav-item .btn-primary {
    animation: pulse-cta 3s infinite;
}

@keyframes pulse-cta {
    0% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 4px 25px color-mix(in srgb, var(--color-primary) 40%, transparent);
    }

    100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
}

/* Navbar Toggler (mobile) */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
    padding: var(--space-sm);
    transition: border-color var(--transition-base);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--color-primary-pale);
    border-color: var(--color-primary);
}

#mainNav.navbar-scrolled .navbar-toggler,
#mainNav.navbar-dark-pages .navbar-toggler {
    border-color: var(--color-border-strong);
}

.navbar-toggler-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    background-image: linear-gradient(var(--color-text-inverse), var(--color-text-inverse));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: center;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-text-inverse);
    transition: background-color var(--transition-fast);
}

.navbar-toggler-icon::before {
    top: 4px;
}

.navbar-toggler-icon::after {
    bottom: 4px;
}

#mainNav.navbar-scrolled .navbar-toggler-icon,
#mainNav.navbar-dark-pages .navbar-toggler-icon {
    background-image: linear-gradient(var(--color-text-primary), var(--color-text-primary));
}

#mainNav.navbar-scrolled .navbar-toggler-icon::before,
#mainNav.navbar-scrolled .navbar-toggler-icon::after,
#mainNav.navbar-dark-pages .navbar-toggler-icon::before,
#mainNav.navbar-dark-pages .navbar-toggler-icon::after {
    background-color: var(--color-text-primary);
}

/* Language Dropdown - usa variabili del tema */
#languageDropdown {
    font-size: 0.9rem;
}

#languageDropdown .bi-globe2 {
    font-size: 1.1rem;
}

/* Dropdown menu lingua - segue il tema */
#mainNav .navbar-nav .dropdown-menu[aria-labelledby="languageDropdown"] {
    min-width: auto;
    padding: var(--space-xs);
}

#mainNav .navbar-nav .dropdown-menu[aria-labelledby="languageDropdown"] .dropdown-item {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9rem;
}

#mainNav .navbar-nav .dropdown-menu[aria-labelledby="languageDropdown"] .dropdown-item.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

#mainNav .navbar-nav .dropdown-menu[aria-labelledby="languageDropdown"] .dropdown-item:hover:not(.active) {
    background-color: var(--color-primary-pale);
    color: var(--color-primary-dark);
}

/* Responsive */
@media (max-width: 991px) {
    #mainNav .navbar-collapse {
        background-color: var(--color-surface-elevated, #f8f9fa);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        margin-top: var(--space-md);
        box-shadow: var(--shadow-lg);
    }

    /* Centra il testo nel menu mobile */
    #mainNav .navbar-nav {
        text-align: center;
    }

    #mainNav .navbar-nav .nav-link {
        justify-content: center;
    }

    #mainNav .navbar-nav .dropdown-menu {
        text-align: center;
    }

    /* Fix: testo scuro nel menu mobile anche quando navbar è trasparente */
    #mainNav.navbar-dark .navbar-nav .nav-link,
    #mainNav.navbar-dark .dropdown-item {
        color: var(--color-text-primary);
    }

    #mainNav.navbar-dark .navbar-nav .nav-link:hover,
    #mainNav.navbar-dark .navbar-nav .nav-link.active {
        color: var(--color-primary);
    }

    #mainNav .navbar-nav .nav-item .btn {
        margin-left: auto;
        margin-right: auto;
        margin-top: var(--space-md);
        width: auto;
        min-width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #mainNav .navbar-nav .nav-link::after {
        display: none;
    }
}

/* Logo Toggling Logic */
/* Default (Transparent): Show White, Hide Black/Color */
.logo-header.logo-white {
    display: block;
}

.logo-header.logo-black,
.logo-header.logo-color {
    display: none;
}

/* Scrolled (Solid): Hide White, Show Black/Color */
#mainNav.navbar-scrolled .logo-header.logo-white {
    display: none;
}

#mainNav.navbar-scrolled .logo-header.logo-black,
#mainNav.navbar-scrolled .logo-header.logo-color {
    display: block;
}

/* Ensure darker pages (always solid) show Black/Color logo */
#mainNav.navbar-dark-pages .logo-header.logo-white {
    display: none;
}

#mainNav.navbar-dark-pages .logo-header.logo-black,
#mainNav.navbar-dark-pages .logo-header.logo-color {
    display: block;
}