/* Mobile-specific styles for the site header */

/* Large Mobile/Tablet Styles (1024px and below) */
@media (max-width: 1024px) {
    /* General touch improvements */
    .site-header button,
    .site-header a.btn {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    /* Basic header styling */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: var(--dark-color);
        flex-direction: row !important; /* Force horizontal layout */
        height: auto !important; /* Let content determine height */
    }
    
    /* Container inside header */
    .site-header .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px;
        width: 100%;
        flex-wrap: nowrap !important; /* Prevent wrapping */
        position: relative; /* For absolute positioning of logo */
        height: 50px !important; /* Fixed height - original navbar height */
        overflow: visible !important; /* Allow logo to extend outside */
    }
    
    /* Logo styling */
    .logo {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto !important; /* Prevent shrinking */
        margin-bottom: 0 !important; /* Remove any bottom margin that might cause stacking */
        position: relative; /* Allow logo to extend beyond navbar */
        z-index: 10; /* Ensure logo is above other elements */
        height: 50px !important; /* Match container height */
        max-width: 40% !important; /* Limit logo width to prevent overlap */
    }
    
    .logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        position: relative !important;
    }
    
    .logo-image {
        max-height: 90px !important; /* Doubled from 45px to 90px */
        width: auto !important;
        position: absolute !important; /* Take out of normal flow */
        top: 50% !important; /* Center vertically */
        transform: translateY(-50%) !important; /* Adjust for vertical centering */
        z-index: 20 !important; /* Above other elements */
        left: 15px !important; /* Move logo to the right */
    }
    
    /* User actions area */
    .user-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important; /* Reduce gap to fit buttons */
        flex: 0 0 auto !important; /* Prevent shrinking */
        margin-top: 0 !important; /* Remove any top margin that might cause stacking */
        height: 50px !important; /* Match container height */
        justify-content: flex-end !important; /* Align items to the right */
        flex-wrap: nowrap !important; /* Prevent wrapping */
        width: 60% !important; /* Give more space to user actions */
    }
    
    /* Style for creator buttons */
    .user-actions .btn-small {
        padding: 5px 8px !important; /* Slightly smaller padding */
        font-size: 0.75rem !important; /* Slightly smaller font */
        white-space: nowrap !important; /* Prevent text wrapping */
        flex-shrink: 1 !important; /* Allow some shrinking if needed */
        text-align: center !important;
        min-width: 0 !important; /* Allow buttons to shrink */
    }
    
    /* User profile dropdown */
    .user-profile-dropdown {
        margin-left: 5px !important; /* Small margin to separate from buttons */
    }
    
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        padding: 10px;
        cursor: pointer;
        height: 50px !important; /* Match container height */
    }
}

/* Medium Mobile Styles (768px and below) */
@media (max-width: 768px) {
    /* Smaller container padding */
    .site-header .container {
        padding: 8px 12px;
        height: 45px !important; /* Original navbar height for this breakpoint */
    }
    
    /* Slightly smaller logo */
    .logo-image {
        max-height: 80px !important; /* Doubled from 40px to 80px */
        left: 12px !important; /* Move logo to the right */
    }
    
    /* Logo container */
    .logo, .user-actions, .mobile-menu-toggle {
        height: 45px !important; /* Match container height */
    }
    
    /* Tighter spacing between buttons */
    .user-actions {
        gap: 5px !important; /* Even smaller gap for smaller screens */
    }
    
    /* Smaller buttons */
    .user-actions .btn {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
    }
    
    /* User profile dropdown */
    .user-profile-dropdown {
        position: relative;
    }
    
    /* Only show the mobile menu toggle on pages that need it */
    .mobile-menu-needed .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* For pages that need a mobile menu, hide the user actions by default */
    .mobile-menu-needed .user-actions {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--dark-color);
        padding: 15px;
        flex-direction: column !important; /* Now we want column layout for the dropdown */
        align-items: center;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        height: auto !important; /* Reset height for dropdown */
    }
    
    /* Show user actions when menu is open */
    .mobile-menu-needed.mobile-menu-open .user-actions {
        display: flex;
    }
}

/* Small Mobile Styles (600px and below) */
@media (max-width: 600px) {
    /* Even smaller containers and elements */
    .site-header .container {
        padding: 6px 10px;
        height: 40px !important; /* Original navbar height for this breakpoint */
    }
    
    /* Logo container */
    .logo, .user-actions, .mobile-menu-toggle {
        height: 40px !important; /* Match container height */
    }
    
    .logo-image {
        max-height: 70px !important; /* Doubled from 35px to 70px */
        left: 10px !important; /* Move logo to the right */
    }
    
    /* Further reduce button size */
    .user-actions .btn {
        padding: 3px 5px !important;
        font-size: 0.65rem !important;
    }
    
    /* Adjust logo width for very small screens */
    .logo {
        max-width: 35% !important;
    }
    
    .user-actions {
        width: 65% !important;
    }
}

/* Extra Small Mobile Styles (400px and below) */
@media (max-width: 400px) {
    .site-header .container, .logo, .user-actions, .mobile-menu-toggle {
        height: 35px !important; /* Original navbar height for this breakpoint */
    }
    
    .logo-image {
        max-height: 60px !important; /* Doubled from 30px to 60px */
        left: 8px !important; /* Move logo to the right */
    }
    
    /* Adjust logo width for extremely small screens */
    .logo {
        max-width: 30% !important;
    }
    
    .user-actions {
        width: 70% !important;
    }
}