/**
 * Custom Header Styles
 * Additional styles for mobile header and menu
 */

/* Header Main Styles */
.site-header {
    position: relative;
    z-index: 40;
}

.header-main {
    min-height: 60px;
}

/* Desktop Header Styles */
.desktop-header {
    min-height: 80px;
}

.desktop-menu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.desktop-menu-content {
    max-height: 100vh;
    overflow-y: auto;
}

.desktop-menu-header {
    min-height: 80px;
}

.desktop-menu-item {
    transition: all 0.3s ease;
}

.desktop-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.desktop-menu-item svg {
    transition: transform 0.3s ease;
}

.desktop-menu-item:hover svg {
    transform: translateX(4px);
}

.submenu-item {
    transition: all 0.3s ease;
}

.submenu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

/* Logo Styles */
.logo-icon svg {
    filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.3));
}

.logo-text {
    font-family: 'Inter Tight', sans-serif;
    letter-spacing: 0.5px;
}

/* Mobile Menu Styles */
.mobile-menu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Menu header now uses the same .header-main class as the main header */

.menu-items ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-items ul li:last-child {
    border-bottom: none;
}

.menu-item {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 4px 0;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.menu-item svg {
    transition: transform 0.3s ease;
}

.menu-item:hover svg {
    transform: translateX(4px);
}

/* Submenu Styles */
.submenu {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.submenu-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenu-items ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submenu-items ul li:last-child {
    border-bottom: none;
}

.submenu-item {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 4px 0;
}

.submenu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

/* Button Hover Effects */
.mobile-menu-toggle:hover,
.close-menu:hover,
.back-button:hover,
.close-submenu:hover {
    opacity: 0.8;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Language Selector Hover */
.language-selector:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* User Icon Hover */
.user-icon:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Animation Classes */
.mobile-menu.translate-x-0 {
    transform: translateX(0);
}

.mobile-menu.translate-x-full {
    transform: translateX(100%);
}

.submenu.translate-x-0 {
    transform: translateX(0);
}

.submenu.translate-x-full {
    transform: translateX(100%);
}

/* Navigation Link Styles */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #ef4444;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Desktop Menu Toggle Styles */
.desktop-menu-toggle:hover,
.desktop-menu-close:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.user-section {
    white-space: nowrap;
}

/* User Section Hover */
.user-section:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Language Selector Hover */
.language-selector:hover {
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 375px) {
    .header-main {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .logo-text {
        font-size: 0.75rem;
    }
    
    .logo-text .text-sm {
        font-size: 0.75rem;
    }
    
    .logo-text .text-xs {
        font-size: 0.625rem;
    }
}

@media (max-width: 768px) {
    .desktop-header {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-header {
        display: none !important;
    }
}

/* Focus States for Accessibility */
.mobile-menu-toggle:focus,
.close-menu:focus,
.back-button:focus,
.close-submenu:focus {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}