/* ==========================================================================
   Header Component
   ========================================================================== */

.mp-header {
    transition: all var(--mp-transition-normal);
}

.mp-header.mp-backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.85);
}

/* Nav Menu Styles (Desktop) */
.mp-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-nav-menu li {
    position: relative;
}

.mp-nav-menu a {
    color: var(--mp-text-dark);
    font-size: var(--mp-text-sm);
    font-weight: var(--mp-fw-bold);
    text-decoration: none;
    padding: var(--mp-spacing-2) var(--mp-spacing-3);
    border-radius: var(--mp-radius-sm);
    transition: all var(--mp-transition-fast);
}

.mp-nav-menu a:hover,
.mp-nav-menu li.current-menu-item > a {
    color: var(--mp-primary-600);
    background-color: var(--mp-primary-50);
}

/* Mobile Nav Overlay */
.mp-mobile-nav {
    display: flex;
    flex-direction: column;
}

.mp-nav-menu-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-nav-menu-mobile a {
    display: block;
    color: var(--mp-text-dark);
    font-size: var(--mp-text-base);
    font-weight: var(--mp-fw-bold);
    text-decoration: none;
    padding: var(--mp-spacing-3) var(--mp-spacing-4);
    border-radius: var(--mp-radius-md);
    transition: all var(--mp-transition-fast);
}

.mp-nav-menu-mobile a:hover {
    color: var(--mp-primary-600);
    background-color: var(--mp-primary-50);
}

/* Mobile Nav States */
body.mp-mobile-nav-open {
    overflow: hidden;
}

body.mp-mobile-nav-open .mp-mobile-nav {
    transform: translateX(0) !important;
}

body.mp-mobile-nav-open .mp-mobile-backdrop {
    opacity: 0.5 !important;
    pointer-events: auto !important;
}

/* User Dropdown */
.mp-user-dropdown:hover .mp-dropdown-menu,
.mp-dropdown-menu.is-active {
    display: block !important;
    animation: mpFadeInUp 0.2s ease-out;
}

.mp-dropdown-item {
    transition: background-color var(--mp-transition-fast);
}
.mp-dropdown-item:hover {
    background-color: var(--mp-gray-50);
}
.mp-dropdown-item--danger:hover {
    background-color: var(--mp-danger-50);
}

@keyframes mpFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}