/* =========================================
   MEPRA – Mobile Header Login Fix
   Add this to your theme's style.css
   or enqueue as a separate file.
   ========================================= */

/* --- 1. Make the sign-in block visible on mobile --- */
@media (max-width: 768px) {

    /* The login block was likely hidden because #main-nav
       collapses or has overflow:hidden / display:none on mobile.
       Force it to show below the nav. */
    #sign-in {
        display: block !important;
        width: 100%;
        clear: both;
        padding: 10px 15px;
        background: #fff;          /* match your site's nav background */
        border-top: 1px solid #ddd;
        text-align: center;
    }

    /* If the entire #main-nav is hidden on mobile,
       show only the sign-in part by moving it outside the nav
       (see JS snippet below), OR show the nav wrapper itself: */
    #main-nav {
        display: block !important; /* override any JS/CSS that hides it */
    }

    /* Hide the full nav menu on mobile but keep #sign-in visible
       – only needed if your JS collapses .main-navigation */
    #main-nav .main-navigation > ul,
    #main-nav #cssmenu {
        /* leave these as your existing mobile menu controls them */
    }

    /* --- 2. Style the login form nicely on mobile --- */
    #sign-in .theme-my-login,
    #sign-in .tml-login {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    #sign-in input[type="text"],
    #sign-in input[type="password"] {
        width: 100%;
        max-width: 280px;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }

    #sign-in input[type="submit"],
    #sign-in .button {
        width: 100%;
        max-width: 280px;
        padding: 9px 12px;
        background: #c8102e;       /* adjust to your brand colour */
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
    }

    /* --- 3. Already-logged-in user link --- */
    #sign-in a {
        color: #c8102e;
        font-weight: 600;
        text-decoration: none;
    }

    /* --- 4. Search bar: keep it usable on mobile --- */
    .search-container {
        width: 100%;
        padding: 8px 15px;
        box-sizing: border-box;
    }

    .searchbox {
        width: 100%;
        display: flex;
    }

    .searchbox-input {
        flex: 1;
        padding: 8px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-right: none;
        border-radius: 4px 0 0 4px;
    }

    .searchbox-submit {
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 0 4px 4px 0;
        background: #c8102e;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
    }

    /* --- 5. Logo area tidy-up --- */
    #mepra-logo {
        display: block;
        text-align: center;
        padding: 10px 0;
    }

    #mepra-logo img {
        max-width: 160px;
        height: auto;
    }

    #mepra-name {
        display: none; /* hide the text-image duplicate on small screens */
    }

    #header-global {
        width: 100% !important;
        float: none !important;
    }
}

/* --- 6. Very small phones (< 480 px) --- */
@media (max-width: 480px) {
    #sign-in input[type="text"],
    #sign-in input[type="password"],
    #sign-in input[type="submit"],
    #sign-in .button {
        max-width: 100%;
    }
}