/* =========================================
   Footer (New) - brand/intro block, nav columns,
   contact card, bottom bar. Mobile collapses nav
   columns to an accordion.
   Colours/fonts reused from ModularPageBuilderBaseStyles.css
   Spec source: Footer/*.png (Adobe XD, Jul 2026)
========================================= */

.tfoot {
    font-family: 'Raleway', sans-serif;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tfoot__top {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 50px 40px 40px;
}

/* ---------- Brand / intro ---------- */

.tfoot__brand {
    flex: 0 0 320px;
    max-width: 320px;
}

.tfoot__logo {
    display: inline-flex;
    margin-bottom: 28px;
}

.tfoot__logo img {
    display: block;
    height: 42px;
    width: auto;
}

.tfoot__logo-text {
    font-size: 28px;
    font-weight: 400;
    color: var(--color-off-black, #1e1e1e);
}

.tfoot__intro-heading {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-off-black, #1e1e1e);
}

.tfoot__intro-text {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.6;
    color: #656565;
}

.tfoot__badges {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------- Nav columns ---------- */

.tfoot__cols {
    display: flex;
    flex: 1;
    gap: 28px;
}

.tfoot__col {
    flex: 1;
    min-width: 110px;
}

.tfoot__col-heading {
    margin: 0 0 24px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-off-black, #1e1e1e);
}

.tfoot__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfoot__col-list li + li {
    margin-top: 14px;
}

.tfoot__col-list a {
    font-size: 15px;
    color: var(--color-off-black, #1e1e1e);
    text-decoration: none;
}

.tfoot__col-list a:hover {
    color: var(--color-medium-teal, #25837D);
    text-decoration: underline;
}

/* Accordion toggle only shows on mobile */
.tfoot__col-toggle {
    display: none;
}

/* ---------- Contact card ---------- */

.tfoot__contact {
    flex: 0 0 300px;
    max-width: 300px;
    box-sizing: border-box;
    padding: 25px 33px;
    border: 1px solid var(--color-teal, #67D1CE);
    border-radius: 20px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

.tfoot__contact-heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-medium-teal, #25837D);
    text-decoration: none;
}

.tfoot__contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--color-off-black, #1e1e1e);
    text-decoration: none;
}

.tfoot__contact-row i {
    color: var(--color-medium-teal, #25837D);
    width: 16px;
    text-align: center;
}

.tfoot__social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.tfoot__social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    flex-shrink: 0;
}

.tfoot__social-icon span {
    font-weight: 700;
    font-size: 16px;
}

.tfoot__social-icon--facebook { background: #1877F2; }
.tfoot__social-icon--x { background: #000; }
.tfoot__social-icon--youtube { background: #FF0000; }
.tfoot__social-icon--linkedin { background: #0A66C2; }

/* ---------- Bottom bar ---------- */

.tfoot__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px 30px;
    font-size: 14px;
    color: #656565;
}

.tfoot__bottom p {
    margin: 0;
}

.tfoot__bottom-links a {
    color: #656565;
    text-decoration: none;
}

.tfoot__bottom-links a:hover {
    color: var(--color-medium-teal, #25837D);
    text-decoration: underline;
}

/* =========================================
   Tablet (Footer 1280 / Footer 1024) -
   brand + contact sit side by side, columns
   wrap to their own row underneath.
========================================= */

@media (max-width: 1280px) {
    .tfoot__top {
        flex-wrap: wrap;
        padding: 40px 30px 30px;
    }

    /* Explicit order (rather than relying on DOM order) so brand + contact
       share the first flex line and .tfoot__cols - which forces itself onto
       its own line via flex-basis: 100% - wraps to a second line underneath
       both of them, not just the item that happens to follow it in markup. */
    .tfoot__brand {
        order: 1;
        flex: 1 1 380px;
    }

    .tfoot__contact {
        order: 2;
        flex: 0 0 300px;
        margin-left: auto;
    }

    .tfoot__cols {
        order: 3;
        flex: 1 1 100%;
        flex-wrap: wrap;
        margin-top: 30px;
    }

    .tfoot__col {
        flex: 1 1 150px;
    }

    .tfoot__bottom {
        padding: 0 30px 30px;
    }
}

/* =========================================
   Mobile (Footer mobile) - nav columns become
   a single-open-at-a-time accordion, matching
   the Components/main_nav mobile accordion.
========================================= */

@media (max-width: 767px) {
    .tfoot__top {
        flex-direction: column;
        padding: 40px 20px 20px;
    }

    .tfoot__brand,
    .tfoot__contact {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .tfoot__cols {
        /* Reset flex/flex-wrap from the >767px tablet rule above - left as-is
           they make this wrapping flex container shrink to its widest child's
           content width instead of stretching to fill the viewport. */
        flex: none;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0;
        margin-top: 32px;
        border-top: 1px solid #eee;
    }

    .tfoot__col {
        /* Reset the flex: 1 1 150px from the >767px tablet rule above - in a
           column-direction flex container that flex-basis applies to height,
           forcing every closed accordion row to stretch to ~150px tall. */
        flex: none;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .tfoot__col-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 0;
        background: none;
        border: 0;
        font-family: 'Raleway', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--color-off-black, #1e1e1e);
        text-align: left;
    }

    .tfoot__col-chevron {
        transition: transform 0.2s ease;
    }

    .tfoot__col--accordion.is-open .tfoot__col-chevron {
        transform: rotate(180deg);
    }

    .tfoot__col-heading {
        display: none;
    }

    .tfoot__col-list {
        display: none;
        padding-bottom: 18px;
    }

    .tfoot__col--accordion.is-open .tfoot__col-list {
        display: block;
    }

    .tfoot__contact {
        margin-top: 32px;
    }

    .tfoot__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0 20px 30px;
    }
}