/* Mobile fixes for YesWeRun website */

/* Media query for mobile devices */
@media (max-width: 767px) {
    /* Fix for language selector - show only flag on mobile */
    #languageButton {
        min-width: auto !important; /* Allow natural width */
        width: auto !important; /* Allow natural width */
        padding: 8px !important; /* Increased padding for better touch target */
        font-size: 0 !important; /* Hide text by setting font size to 0 */
        display: flex !important; /* Use flexbox for better alignment */
        align-items: center !important; /* Center items vertically */
        justify-content: center !important; /* Center items horizontally */
        cursor: pointer !important; /* Ensure cursor shows it's clickable */
    }
    
    /* Keep the dropdown arrow visible but remove its margin */
    #languageButton::after {
        margin-left: 0 !important; /* Remove margin for dropdown arrow */
        font-size: 10px !important; /* Make dropdown arrow visible */
        display: inline-block !important; /* Ensure it's displayed */
    }
    
    /* Make the flag icon visible and properly sized */
    #languageButton .flag-icon {
        font-size: 20px !important; /* Larger flag icon for better visibility */
        display: inline-block !important; /* Ensure it's displayed */
    }
    
    /* Fix for dropdown menu positioning */
    .dropdown-menu {
        min-width: 120px !important; /* Ensure dropdown menu has reasonable width */
        margin-top: 2px !important; /* Add some space between button and menu */
    }
    
    /* Fix for h1 and h2 in header - make them full width */
    .position-absolute.top-50.start-50.translate-middle.text-center.text-white {
        width: 100% !important; /* Full width */
        padding: 0 15px !important; /* Add horizontal padding */
        box-sizing: border-box !important; /* Include padding in width calculation */
    }
    
    /* Ensure h1 and h2 don't overflow */
    .position-absolute.top-50.start-50.translate-middle.text-center.text-white h1,
    .position-absolute.top-50.start-50.translate-middle.text-center.text-white h2 {
        width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Fix for images in homepage cards - maintain aspect ratio */
    .card-img-top {
        height: auto !important; /* Let height adjust automatically */
        object-fit: cover !important;
        aspect-ratio: 3/2 !important; /* Maintain 3:2 aspect ratio */
    }
    
    /* Fix for text inside images */
    .position-absolute.top-50.start-50.translate-middle.text-white.fw-bold.fs-3.text-center {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        font-size: 1.25rem !important; /* Smaller font size on mobile */
    }

    /* Small spacing between footer buttons on mobile */
    footer .btn {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}