/**
 * Mobile Header Fix
 * Ensures responsive text changes work correctly on mobile devices
 */

/* Force responsive text visibility for KYC status */
@media (max-width: 639px) {
    /* Hide desktop KYC text on mobile */
    .hidden.sm\:inline {
        display: none !important;
    }
    
    /* Show mobile KYC text on mobile */
    .sm\:hidden {
        display: inline !important;
    }
}

@media (min-width: 640px) {
    /* Show desktop KYC text on larger screens */
    .hidden.sm\:inline {
        display: inline !important;
    }
    
    /* Hide mobile KYC text on larger screens */
    .sm\:hidden {
        display: none !important;
    }
}

/* Force responsive text visibility for Weather Alerts */
@media (max-width: 639px) {
    /* Hide desktop Weather Alerts text on mobile */
    .text-xs.font-medium.hidden.sm\:inline {
        display: none !important;
    }
    
    /* Show mobile Weather Alerts text on mobile */
    .text-xs.font-medium.sm\:hidden {
        display: inline !important;
    }
}

@media (min-width: 640px) {
    /* Show desktop Weather Alerts text on larger screens */
    .text-xs.font-medium.hidden.sm\:inline {
        display: inline !important;
    }
    
    /* Hide mobile Weather Alerts text on larger screens */
    .text-xs.font-medium.sm\:hidden {
        display: none !important;
    }
}

/* Ensure proper spacing for mobile header elements */
@media (max-width: 639px) {
    .flex.items-center.space-x-6 {
        gap: 0.75rem !important;
    }
    
    /* Reduce padding on mobile for header elements */
    .flex.items-center.px-3.py-1\.5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
    }
}

/* Override any conflicting styles from other CSS files */
.mobile-header-responsive {
    /* Ensure our responsive classes take precedence */
}

/* Clear any potential caching issues */
.header-mobile-fix {
    content: "v1.0" !important;
}