/* ==============================================
   Shared mobile fixes for header nav & footer
   ============================================== */

/* --- Header nav: reduce spacing on mobile --- */
@media screen and (max-width: 768px) {
    header nav {
        gap: 14px !important;
    }

    /* Shrink the Sign-up button on mobile to save space */
    header nav button {
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* Reduce nav link font-size */
    header nav > a,
    header nav .nav-game {
        font-size: 13px !important;
    }

    /* When user is logged in, prevent long names from blowing out the nav */
    header .user-dropdown a {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        font-size: 13px !important;
    }
}

/* Extra-small screens: further compact the header */
@media screen and (max-width: 380px) {
    header nav {
        gap: 10px !important;
    }

    header nav button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    header .user-dropdown a {
        max-width: 70px;
        font-size: 12px !important;
    }

    /* Hide Party Game text on very small screens */
    header nav .nav-game {
        display: none !important;
    }
}

/* --- Footer: App Store badge + social icons wrapping --- */
@media screen and (max-width: 768px) {
    /* Let the social-icons row wrap so the App Store badge drops to its own line */
    footer .social-icons {
        flex-wrap: wrap !important;
        gap: 16px !important;
        padding: 0 20px;
    }

    /* Make the App Store badge full-width on its own row, centered */
    footer .social-icons > a[aria-label="Download on the App Store"] {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-top: 8px;
    }

    /* Tighten footer link rows */
    footer .links {
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        padding: 0 20px;
    }
}