/* Mobile Header Overrides - Load this LAST to fix header padding issues */
/* This file fixes double padding and oversized headers on mobile devices */

:root { 
    --header-h: 56px; /* Standard mobile header height */
}

/* Ensure mobile menu is hidden by default */
[x-cloak] { 
    display: none !important; 
}

/* Force hide mobile menu until Alpine loads and takes control */
/* DISABLED - This was preventing the mobile menu from working
#dashboard-header [x-show="mobileMenuOpen"]:not([style*="block"]) {
    display: none !important;
}
*/

@media (max-width: 768px) {
    /* Kill duplicate body padding offsets */
    body { 
        padding-top: 0 !important; 
    }

    /* Let sticky be sticky, not fixed */
    .sticky.top-0 { 
        position: sticky !important; 
        top: 0 !important; 
    }

    /* Ensure content clears the header once, not twice */
    main { 
        padding-top: var(--header-h) !important; 
    }

    /* Optional: if you show a mobile banner sometimes */
    .has-mobile-banner main { 
        padding-top: calc(var(--header-h) + 44px) !important; 
    }

    /* Tighter header typography */
    h1 { 
        font-size: clamp(1.25rem, 5vw, 1.625rem); 
        margin-bottom: .5rem; 
    }
    
    h2 { 
        font-size: clamp(1.125rem, 4.5vw, 1.375rem); 
        margin-bottom: .75rem; 
    }

    /* Ensure tab navigation doesn't overlap with header */
    .tab-navigation, nav[role="tablist"] { 
        position: sticky; 
        top: var(--header-h); 
        z-index: 40;
    }
}

/* Small mobile screens (under 640px) */
@media (max-width: 640px) {
    /* Even more compact for very small screens */
    :root { 
        --header-h: 48px; 
    }
    
    h1 { 
        font-size: 1.25rem; 
    }
    
    h2 { 
        font-size: 1.125rem; 
    }
}