/**
 * MOBILE HEADER SPACING OVERRIDE
 * Increases height and padding for a less "squeezed" look.
 */

@media (max-width: 768px) {
    :root {
        /* Increase from 50px to 60px for better vertical breathing room */
        --header-height: 60px !important;
    }

    /* Target the container to ensure it respects the new height and adds spacing */
    .universal-header {
        height: 60px !important;
        /* Add a tiny bit of vertical padding if flex centering isn't enough, 
           but usually height increase + flex align-items:center is sufficient. 
           Let's add 4px top/bottom just in case of content overflow */
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .universal-header__container {
        /* Ensure horizontal padding is adequate */
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}