/**
 * Certification & Safety
 * Footer Navigation Stylesheet
 *
 * File:
 * /css/nbc-footer-navigation.css
 *
 * Created By:
 * Nuts and Bolts Coaching (NBC)
 *
 * Author:
 * Thomas L. Vaughn
 *
 * Date Created:
 * 2026-07-23
 *
 * Date Updated:
 * 2026-07-23
 *
 * Purpose:
 * Styles Divi Menu Modules used in the website footer.
 * Footer navigation links are displayed as a vertical,
 * left-aligned list rather than a horizontal navigation menu.
 *
 * Features:
 * - Displays footer menu links vertically.
 * - Left-aligns all footer navigation links.
 * - Removes unnecessary list spacing and borders.
 * - Hides the mobile hamburger menu in the footer.
 * - Preserves the same appearance for the current page link.
 * - Adjusts link spacing and font size on smaller screens.
 *
 * Dependencies:
 * - Divi Theme Builder footer
 * - Divi Menu Module
 * - The CSS class footer-nav-menu assigned to the footer menu module
 * - NBC stylesheet loader in functions.php
 *
 * Notes:
 * - This stylesheet affects only menu modules using the
 *   footer-nav-menu CSS class.
 * - The current page link is intentionally styled the same
 *   as the remaining footer navigation links.
 */


/*--------------------------------------------------------------
>>> FOOTER MENU ALIGNMENT
--------------------------------------------------------------*/

.footer-nav-menu .et_pb_menu__wrap {
    justify-content: flex-start !important;
}


/*--------------------------------------------------------------
>>> VERTICAL MENU STRUCTURE
--------------------------------------------------------------*/

.footer-nav-menu .et_pb_menu__menu {
    flex-direction: column !important;
    row-gap: 8px;
    width: 100%;
    margin: 0 !important;
}

.footer-nav-menu .et_pb_menu__menu ul {
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}


/*--------------------------------------------------------------
>>> INDIVIDUAL MENU ITEMS
--------------------------------------------------------------*/

.footer-nav-menu .et_pb_menu__menu ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
}

.footer-nav-menu .et_pb_menu__menu ul li a {
    display: block !important;
    padding: 6px 0 !important;

    white-space: normal;
    text-align: left;
}


/*--------------------------------------------------------------
>>> HIDE FOOTER MOBILE MENU
--------------------------------------------------------------*/

.footer-nav-menu .et_mobile_nav_menu {
    display: none !important;
}


/*--------------------------------------------------------------
>>> CURRENT PAGE LINK
--------------------------------------------------------------*/

.footer-nav-menu .current-menu-item,
.footer-nav-menu .current_page_item,
.footer-nav-menu .current-menu-ancestor {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    background: none !important;
    border: none !important;
}

.footer-nav-menu .current-menu-item > a,
.footer-nav-menu .current_page_item > a {
    margin: 0 !important;
    padding: 6px 0 !important;

    color: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}


/*--------------------------------------------------------------
>>> TABLET AND MOBILE
--------------------------------------------------------------*/

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

    /*
     * Keep the desktop menu visible in the footer.
     * Divi normally hides it and replaces it with a mobile menu.
     */
    .footer-nav-menu .et_pb_menu__menu {
        display: block !important;
        width: 100%;
        margin: 0 !important;
    }

    /*
     * The footer does not need a hamburger menu.
     */
    .footer-nav-menu .et_mobile_nav_menu {
        display: none !important;
    }

    .footer-nav-menu .et_pb_menu__menu > nav,
    .footer-nav-menu .et_pb_menu__menu > nav > ul {
        display: block !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-nav-menu .et_pb_menu__menu ul li {
        display: block !important;
        width: 100% !important;
    }

    .footer-nav-menu .et_pb_menu__menu ul li a,
    .footer-nav-menu .current-menu-item > a,
    .footer-nav-menu .current_page_item > a {
        display: block !important;
        padding: 4px 0 !important;
        font-size: 14px;
        white-space: normal;
    }
}

/*--------------------------------------------------------------
>>> HOME PAGE MOBILE FOOTER MENU FIX
--------------------------------------------------------------*/

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

    body.home .footer-nav-menu .et_pb_menu__menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    body.home .footer-nav-menu .et_pb_menu__menu > nav,
    body.home .footer-nav-menu .et_pb_menu__menu > nav > ul {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }

    body.home .footer-nav-menu .et_mobile_nav_menu {
        display: none !important;
    }
}