/*
 * ============================================================
 * DIVI 5 MOBILE FOOTER RESPONSIVE FIX
 * ============================================================
 *
 * Purpose:
 * Corrects a responsive display problem with the Global Footer
 * on mobile devices.
 *
 * Problem:
 * The Divi 5 Global Footer is built with three columns:
 * Get In Touch, Navigation, and Legal Policy.
 *
 * Divi assigns the mobile class:
 * et_flex_column_24_24_phone
 *
 * to the footer columns, indicating that the columns should
 * display at full width on phones. On the published website,
 * however, the columns continued to use their narrower desktop
 * widths. This caused all three columns to remain on the same
 * row and made the footer content extremely narrow.
 *
 * Testing:
 * The problem was reproduced using Firefox Responsive Design
 * Mode at a 320px viewport.
 *
 * Firefox Inspector confirmed that:
 * 1. The correct Divi 5 phone classes were present in the HTML.
 * 2. The footer row needed to be allowed to wrap.
 * 3. Setting the footer column width to 100% corrected the
 *    mobile display during browser testing.
 *
 * What This CSS Does:
 * At screen widths of 767px or less:
 * - Allows the Global Footer row to wrap.
 * - Forces each footer column to use 100% of the available width.
 * - Causes the three footer sections to stack vertically instead
 *   of being compressed into a single row.
 * - Does not change the desktop footer layout.
 *
 * Created: August 27, 2026
 * Updated: August 27, 2026
 * Author: Nuts and Bolts Coaching
 * Website: howtoreducemydebt.com
 *
 * ============================================================
 */

@media only screen and (max-width: 767px) {

    .et_pb_row_0_tb_footer {
        flex-wrap: wrap !important;
    }

    .et_pb_row_0_tb_footer > .et_pb_column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

}

/*
 * ============================================================
 * DIVI 5 MOBILE FOOTER MENU FIX
 * ============================================================
 *
 * Purpose:
 * Keeps the Navigation and Legal Policy menus expanded in the
 * Global Footer on mobile devices instead of displaying the
 * Divi mobile hamburger menu.
 *
 * Problem:
 * Divi 5 converts Menu modules to the mobile hamburger menu at
 * smaller screen widths. In the footer, this is not desirable
 * because the footer links should remain visible without
 * requiring an additional tap.
 *
 * What This CSS Does:
 * At screen widths of 767px or less:
 * - Hides the mobile hamburger menu toggle.
 * - Forces the regular footer menu links to remain visible.
 * - Keeps the footer navigation usable as a normal link list.
 * - Does not change the desktop menu presentation.
 *
 * Created: August 28, 2026
 * Updated: August 28, 2026
 * Author: Nuts and Bolts Coaching
 *
 * ============================================================
 */

@media only screen and (max-width: 767px) {

    /* Hide Divi mobile hamburger toggle in footer menus */
    footer .et_mobile_nav_menu {
        display: none !important;
    }

    /* Keep the normal footer menu visible on mobile */
    footer .et_pb_menu__menu {
        display: flex !important;
    }

    /* Allow footer menu links to stack vertically */
    footer .et_pb_menu__menu > nav > ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

}