/* Footer on tablets (md + lg: 768-1199px, e.g. iPad mini and iPad Pro portrait).

   There the logo took 4/12 of the row and the links 8/12, and inside that the Location and Quick Links
   columns were col-md-4 + col-md-3 of a col-md-8 - about 110px each, so the titles and links wrapped
   into each other. In this range only the column widths are rebalanced so it keeps the desktop
   structure (logo | Location | Quick Links | Need help?) on one row with readable columns.
   lg kept the same structure but its contact column was only ~210px, so the phone number wrapped.
   Desktop (xl, 1200px+) and phones (< md) are unchanged. The row is matched by .tp-footer-row because the
   .skeleton class on it is removed by app.js after load. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Logo | everything else */
    footer .main-footer .row.tp-footer-row > .col-md-4.col-lg-4 {
        flex: 0 0 auto;
        width: 20%;
    }

    footer .main-footer .row.tp-footer-row > .col-md-8 {
        flex: 0 0 auto;
        width: 80%;
    }

    /* Location + Quick Links | Need help? */
    footer .main-footer .row.tp-footer-row > .col-md-8 > .row > .col-md-8 {
        flex: 0 0 auto;
        width: 60%;
    }

    footer .main-footer .row.tp-footer-row > .col-md-8 > .row > .col-md-4 {
        flex: 0 0 auto;
        width: 40%;
    }

    /* app.css fixes the logo at 288x90, which squashed it in the narrower column: keep its ratio. */
    footer .main-footer .row.tp-footer-row .brand-logo img {
        width: 100%;
        max-width: 288px;
        height: auto;
    }

    /* The social icons carry an inline 20px gap, too wide for this column: keep them on one line. */
    footer .main-footer .row.tp-footer-row .contact-lists li {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    footer .main-footer .row.tp-footer-row .contact-lists li a {
        margin-right: 14px !important;
    }

    footer .main-footer .row.tp-footer-row .contact-lists li a:last-child {
        margin-right: 0 !important;
    }

    /* "855 5 TORQUE" broke into two lines in this column: a slightly smaller size keeps it on one. */
    footer .main-footer .row.tp-footer-row .footer-content h2,
    footer .main-footer .row.tp-footer-row .footer-content h2 span {
        font-size: 20px !important;
        white-space: nowrap !important;
    }

    /* Location | Quick Links */
    footer .main-footer .row.tp-footer-row > .col-md-8 > .row > .col-md-8 > .row > [class*="col-md-"] {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* iPad Pro portrait (lg: 992-1199px) has more room than the iPad mini: a larger logo, the regular
   icon gap and a larger phone number, so the row is filled instead of leaving space on the right. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    footer .main-footer .row.tp-footer-row > .col-md-4.col-lg-4 {
        width: 28%;
    }

    footer .main-footer .row.tp-footer-row > .col-md-8 {
        width: 72%;
    }

    footer .main-footer .row.tp-footer-row > .col-md-8 > .row > .col-md-8 {
        width: 62%;
    }

    footer .main-footer .row.tp-footer-row > .col-md-8 > .row > .col-md-4 {
        width: 38%;
    }

    footer .main-footer .row.tp-footer-row .contact-lists li a {
        margin-right: 20px !important;
    }

    footer .main-footer .row.tp-footer-row .footer-content h2,
    footer .main-footer .row.tp-footer-row .footer-content h2 span {
        font-size: 24px !important;
    }
}