/*
 * ST. MARY'S IOC COVENTRY
 * MOBILE TOP BAR COMPACT SOCIAL FIX V1
 *
 * Frontend only.
 * Load LAST after all existing CSS.
 *
 * Goals:
 * - Keep email + phone visible on mobile
 * - Reduce contact text size/spacing
 * - Restore social media icons on mobile
 * - Keep the top bar compact and balanced
 */

@media (max-width: 767px) {

    /* Compact overall top bar */
    .top-bar {
        padding: 7px 0 8px !important;
        min-height: 0 !important;
    }

    .top-bar .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .top-bar .row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Contact area takes full row, but stays compact */
    .top-contact,
    .top-bar .top-contact,
    .top-bar .col-md-4.top-contact {
        display: flex !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;

        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 4px 14px !important;

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

        border-bottom: 1px solid rgba(84,203,244,.55) !important;
        text-align: center !important;
    }

    /* Override legacy "display:block + large margin" mobile rules */
    .top-contact .list,
    .top-bar .top-contact .list {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;

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

        color: rgba(255,255,255,.82) !important;

        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
    }

    .top-contact .list a,
    .top-bar .top-contact .list a {
        color: rgba(255,255,255,.86) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
    }

    .top-contact .list i,
    .top-bar .top-contact .list i {
        margin-right: 6px !important;
        color: rgba(255,255,255,.78) !important;
        font-size: 11px !important;
    }

    /* Restore social block that style.css hides on very small screens */
    .top-social,
    .top-bar .top-social,
    .top-bar .col-md-8.top-social {
        display: flex !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;

        align-items: center !important;
        justify-content: center !important;

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

        text-align: center !important;
    }

    .top-social ul,
    .top-bar .top-social ul {
        display: inline-flex !important;
        float: none !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

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

        list-style: none !important;
    }

    .top-social ul li,
    .top-bar .top-social ul li {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .top-social ul li a,
    .top-bar .top-social ul li a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;

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

        border: 1px solid rgba(255,255,255,.20) !important;
        border-radius: 50% !important;

        background: rgba(255,255,255,.03) !important;
        color: #fff !important;
    }

    .top-social ul li a i,
    .top-bar .top-social ul li a i {
        margin: 0 !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .top-social ul li a:hover,
    .top-social ul li a:focus {
        border-color: rgba(255,255,255,.34) !important;
        background: rgba(255,255,255,.10) !important;
    }
}


/* Extra compact layout for narrow phones */
@media (max-width: 420px) {

    .top-bar {
        padding-top: 6px !important;
        padding-bottom: 7px !important;
    }

    .top-contact,
    .top-bar .top-contact,
    .top-bar .col-md-4.top-contact {
        gap: 3px 10px !important;
        padding-bottom: 5px !important;
    }

    .top-contact .list,
    .top-contact .list a {
        font-size: 11px !important;
    }

    .top-contact .list i {
        font-size: 10px !important;
        margin-right: 5px !important;
    }

    .top-social,
    .top-bar .top-social,
    .top-bar .col-md-8.top-social {
        padding-top: 6px !important;
    }

    .top-social ul,
    .top-bar .top-social ul {
        gap: 7px !important;
    }

    .top-social ul li a,
    .top-bar .top-social ul li a {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    .top-social ul li a i {
        font-size: 11px !important;
    }
}