/**
 * ARCHTELIER INTERIORS - Global Header Styles
 * Unified styling for the header component across all pages
 */

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--gold-primary, #D4AF37);
    color: #000;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 2000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 6px;
}

/* Page Layout Adjustments */
.main-content {
    padding-top: 80px; /* Account for fixed header */
}

/* Enhanced Mobile Support */
@media (max-width: 768px) {
    .main-content {
        padding-top: 70px;
    }
    
    .header-nav {
        padding: 12px 0;
    }
    
    .nav-container {
        padding: 0 15px;
    }
    
    .logo {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding-top: 65px;
    }
    
    .language-menu {
        right: -20px;
        min-width: 160px;
    }
    
    .auth-actions {
        display: none !important;
    }
}

/* Smooth Animations */
.header-nav {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.header-nav.scrolled {
    background: rgba(12, 12, 12, 0.98);
    backdrop-filter: blur(20px);
}

/* Print Styles */
@media print {
    .header-nav,
    .skip-link {
        display: none !important;
    }
    
    .main-content {
        padding-top: 0 !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .header-nav {
        background: #000 !important;
        border-bottom: 2px solid #fff !important;
    }
    
    .logo {
        color: #fff !important;
    }
    
    .nav-link {
        color: #fff !important;
    }
    
    .language-menu {
        background: #000 !important;
        border: 2px solid #fff !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .header-nav,
    .language-toggle,
    .nav-link,
    .auth-btn {
        transition: none !important;
    }
}