/* ===================================================================
   Footer menu layout - assets/css/footer-menu.css

   Loaded on every page (see wtl_footer_menu_styles() in functions.php)
   because the footer comes from the [custom_footer] shortcode.

   Markup it styles (custom_footer_shortcode() in functions.php):
       .footer .row
         .col-md-4  >  .copright-text
         .col-md-4  >  .footer-gstin
         .col-md-4  >  nav.footer-nav > ul.footer-nav-list > li > a

   The menu used to render as a vertical stack because wp_nav_menu() was
   called with a malformed 'menu_class text-right' key, so no layout class
   ever reached the <ul>. The list is now a real flex row.
=================================================================== */

.footer .footer-nav {
    width: 100%;
}

.footer .footer-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    /* row-gap column-gap - the column gap leaves room for the dot separator */
    gap: 8px 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer .footer-nav-list > li {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* dot separator between items, never after the last one */
.footer .footer-nav-list > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--border-color);
    transform: translateY(-50%);
}

.footer .footer-nav-list > li > a {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--font-color);
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s ease;
}

.footer .footer-nav-list > li > a:hover,
.footer .footer-nav-list > li.current-menu-item > a,
.footer .footer-nav-list > li.current_page_item > a {
    color: var(--heading-color);
}

/* the three footer columns share one baseline */
.footer .copright-text,
.footer .footer-gstin {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Tablet: the three columns are still side by side (col-md- kicks in at 768px),
   so tighten the menu instead of letting it push the GSTIN column */
@media only screen and (max-width: 991px) {
    .footer .footer-nav-list {
        gap: 6px 20px;
    }

    .footer .footer-nav-list > li:not(:last-child)::after {
        right: -12px;
    }

    .footer .footer-nav-list > li > a {
        font-size: 13px;
    }
}

/* Mobile: columns stack full width - centre all three and drop the dots */
@media only screen and (max-width: 767px) {
    .footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer .row > [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 18px;
    }

    .footer .copright-text,
    .footer .footer-gstin {
        text-align: center;
    }

    .footer .footer-nav-list {
        justify-content: center;
        gap: 10px 22px;
    }

    .footer .footer-nav-list > li > a {
        font-size: 14px;
    }
}

@media only screen and (max-width: 575px) {
    .footer .footer-nav-list {
        gap: 8px 18px;
    }

    .footer .footer-nav-list > li:not(:last-child)::after {
        right: -11px;
    }
}