/* =================
   HEADER RESPONSIVE CSS
   Mobile and Responsive Styles
   ================= */

/* Mobile Responsive - Large Mobile/Tablet */
@media (max-width: 768px) {
    /* Disable sticky and shrinking on mobile */
    .site-header {
        position: static !important; /* Force static positioning */
        min-height: auto !important;
        padding: 0;
        max-width: 100%;
        width: auto;
        /* Reset all shrinking variables */
        --shrink-phase1: 0 !important;
        --shrink-phase2: 0 !important;
    }
    
    /* Force reset all shrinking classes on mobile */
    .site-header.shrinking,
    .site-header.compact,
    .site-header.final {
        position: static !important;
        min-height: auto !important;
        padding: 1rem 0;
        /* Reset shrinking effects */
        --shrink-phase1: 0 !important;
        --shrink-phase2: 0 !important;
    }
    
    /* Show mobile hamburger button */
    .mobile-menu-open {
        display: block;
        cursor: pointer; /* Ensure it's clickable */
        transition: all 0.3s ease; /* Smooth transitions */
    }
    
    /* Visual feedback when hamburger is active */
    .mobile-menu-checkbox:checked ~ .mobile-menu-open,
    #mobile-menu-toggle:checked + .mobile-menu-open {
        background: rgba(212, 175, 55, 0.3) !important;
        border-color: rgba(212, 175, 55, 0.8) !important;
        color: #ffffff !important;
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.6) !important;
    }
    
    /* Ensure checkbox is properly hidden on mobile */
    .mobile-menu-checkbox {
        display: none !important;
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    
    /* Transform desktop navigation to mobile dropdown */
    .main-navigation {
        display: none; /* Hidden by default on mobile */
        position: static;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(212, 175, 55, 0.3);
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        padding: 0.5rem 0;
        margin: 0.5rem auto 0 auto;
        width: 90%;
        max-width: 320px;
        backdrop-filter: blur(8px);
    }
    
    /* CRITICAL: Show mobile menu when hamburger checkbox is checked */
    #mobile-menu-toggle:checked ~ .main-navigation {
        display: block !important;
        animation: slideDown 0.3s ease-out;
    }
    
    /* Alternative selector for safety */
    .mobile-menu-checkbox:checked + .mobile-menu-open + .main-navigation,
    .mobile-menu-checkbox:checked ~ .main-navigation {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }
    
    /* Optional: Smooth slide-down animation */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Transform desktop nav to mobile layout */
    .main-navigation .desktop-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .desktop-nav li {
        display: block !important;
        margin: 0;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    }
    
    .desktop-nav li:last-child {
        border-bottom: none;
    }
    
    .desktop-nav a,
    .desktop-nav .nav-link {
        display: block !important;
        padding: 0.75rem 1rem;
        color: #d4af37;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        transition: all 0.3s ease;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    
    .desktop-nav a:hover,
    .desktop-nav .nav-link:hover {
        color: #ffffff;
        background: rgba(212, 175, 55, 0.1);
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
    }
    
    /* Mobile nav wrapper */
    .nav-wrapper {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    /* Mobile header layout */
    .site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 2.5% 0 0 0; /* Remove side padding, only top for spacing */
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .logo-center {
        padding: 2% 0 0 0; /* Only top padding */
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
    }
    .nav-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 90%; /* 320px -> 90% */
        margin: 0 auto;
        box-sizing: border-box;
    }
    .logo {
        max-width: 80vw;
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    .desktop-nav a,
    .desktop-nav .nav-link {
        color: hsl(48, 100%, 87%) !important;
    }
}

/* Small Mobile - Phone Portrait */
@media (max-width: 480px) {
    .site-header {
        padding: 2.5% 3%; /* 10px 12px -> prozentual */
        max-width: 100%;
        width: auto;
    }
    
    .mobile-menu-open {
        font-size: 1.125rem; /* 18px -> rem */
        padding: 0.5rem 0.75rem; /* 8px 12px -> rem */
        margin: 1.5% auto; /* 6px -> prozentual */
        max-width: 85%; /* 280px -> 85% */
    }
    
    .nav-wrapper {
        max-width: 85%; /* 280px -> 85% */
    }
    
    .nav-wrapper .nav-menu {
        max-width: 85%; /* 280px -> 85% */
        padding: 0.5rem 0; /* 8px -> rem */
        margin: 1.5% auto 0 auto; /* 6px -> prozentual */
    }
    
    .nav-menu a,
    .nav-menu .nav-link {
        font-size: 0.875rem; /* 14px -> rem */
        padding: 0.625rem 1rem; /* 10px 16px -> rem */
        letter-spacing: 0.01875rem; /* 0.3px -> rem */
    }
    
    .logo {
        max-width: 85%;
    }
    
    .logo-center {
        padding: 2% 0; /* 8px -> prozentual */
        width: 100%;
    }
}

/* Very Small Mobile - Tiny Screens */
@media (max-width: 320px) {
    .site-header {
        padding: 2% 2.5%;
        max-width: 100%;
        width: auto;
    }
    
    .mobile-menu-open {
        font-size: 1rem;
        padding: 0.4rem 0.6rem;
        margin: 1% auto;
        max-width: 90%;
    }
    
    .nav-wrapper {
        max-width: 90%;
    }
    
    .nav-wrapper .nav-menu {
        max-width: 90%;
        padding: 0.4rem 0;
        margin: 1% auto 0 auto;
    }
    
    .nav-menu a,
    .nav-menu .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
        letter-spacing: 0.015rem;
    }
    
    .logo {
        max-width: 90%;
    }
    
    .logo-center {
        padding: 1.5% 0;
    }
}

/* Large Mobile/Small Tablet Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .site-header {
        padding: 1.5% 3%;
        max-width: 100%;
        width: auto;
    }
    
    .logo-center {
        padding: 1.5% 0;
    }
    
    .nav-wrapper .nav-menu {
        padding: 0.5rem 0;
    }
    
    .nav-menu a,
    .nav-menu .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.95rem;
    }
}