/* =========================================================
   WorldCupSpain V7 — Mobile Country Brand Hotfix
   Keeps WORLD CUP 2030 and SPAIN · PORTUGAL · MOROCCO tidy
   in both header and footer.
   ========================================================= */

/* Base brand structure */
.brand > span {
    min-width: 0;
}

.brand .brand-countries {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    gap: 3px !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    line-height: 1 !important;
}

.brand .brand-countries > span {
    display: inline !important;
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    line-height: 1 !important;
}

/* Header and footer separators always stay between country names */
.brand .brand-countries .country-separator {
    display: inline-block !important;
    margin: 0 1px !important;
    opacity: .75;
}

/* =========================================================
   MOBILE HEADER
   ========================================================= */
@media (max-width: 700px) {

    .topbar .brand {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 8px !important;

        min-width: 0 !important;
        max-width: 100% !important;
    }

    .topbar .brand > span {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

        min-width: 0 !important;
        width: auto !important;
    }

    .topbar .brand b {
        display: block !important;

        margin: 0 !important;

        font-size: clamp(18px, 5vw, 25px) !important;
        line-height: 1.02 !important;
        letter-spacing: .01em !important;

        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    .topbar .brand .brand-countries {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        font-size: clamp(8px, 2.25vw, 10px) !important;
        line-height: 1 !important;
        letter-spacing: -.01em !important;

        white-space: nowrap !important;
    }

    .topbar .brand .brand-countries > span {
        display: inline !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   MOBILE FOOTER
   ========================================================= */
@media (max-width: 700px) {

    footer .footer .brand {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        gap: 8px !important;

        text-align: left !important;
    }

    footer .footer .brand > span {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

        min-width: 0 !important;
        width: auto !important;
    }

    footer .footer .brand b {
        display: block !important;

        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.05 !important;

        white-space: nowrap !important;
    }

    footer .footer .brand .brand-countries {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: auto !important;

        margin-top: 3px !important;

        gap: 3px !important;

        font-size: 9px !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    footer .footer .brand .brand-countries > span {
        display: inline !important;
        white-space: nowrap !important;
    }
}


/* Smaller phones */
@media (max-width: 420px) {

    .topbar .brand {
        gap: 6px !important;
    }

    .topbar .brand img {
        width: 38px !important;
        height: 45px !important;
        flex: 0 0 38px !important;
    }

    .topbar .brand b {
        font-size: clamp(16px, 5vw, 21px) !important;
    }

    .topbar .brand .brand-countries {
        font-size: clamp(7.2px, 2.15vw, 9px) !important;
        gap: 2px !important;
    }

    footer .footer .brand .brand-countries {
        font-size: 8.3px !important;
        gap: 2px !important;
    }
}


/* Very narrow phones */
@media (max-width: 350px) {

    .topbar .brand b {
        font-size: 15px !important;
    }

    .topbar .brand .brand-countries {
        font-size: 6.8px !important;
        gap: 1px !important;
    }

    footer .footer .brand .brand-countries {
        font-size: 7.5px !important;
        gap: 1px !important;
    }
}