/*
 * ============================================================
 * M.H College
 * File: 94-responsive-footer.css
 * Purpose:
 * Responsive footer and floating WhatsApp button
 * ============================================================
 */

/*
 * ============================================================
 * Tablet and mobile
 * Maximum width: 820px
 * ============================================================
 */

@media (max-width: 820px) {
    /*
     * Footer columns
     */

    .footer-grid {
        grid-template-columns: 1fr;
    }

    /*
     * Footer bottom row
     */

    .footer-bottom {
        flex-direction: column;

        gap: 4px;
    }
}

/*
 * ============================================================
 * Small mobile
 * Maximum width: 560px
 * ============================================================
 */

@media (max-width: 560px) {
    /*
     * Floating WhatsApp button
     */

    .floating-whatsapp span {
        display: none;
    }

    .floating-whatsapp {
        width: 54px;
        height: 54px;

        padding: 0;

        justify-content: center;

        inset-inline-start: 12px;

        bottom: calc(
            12px + env(safe-area-inset-bottom, 0px)
        );
    }

    .floating-whatsapp .icon {
        width: 24px;
        height: 24px;
    }
}