/* Footer and pre-footer subsystem */

.ta-pre-footer {
    background: var(--ta-pre-footer-bg);
    border-top: var(--ta-footer-border-width) solid var(--ta-pre-footer-border-color);
    padding-block: var(--ta-pre-footer-padding-block);
    margin-top: var(--ta-space-12);
}

.ta-pre-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-pre-footer-gap);
}

.ta-pre-footer__content {
    display: grid;
    gap: var(--ta-footer-link-list-gap);
    max-width: var(--ta-pre-footer-content-max-width);
}

.ta-pre-footer__title {
    margin: 0;
    font-size: var(--ta-pre-footer-title-font-size);
    color: var(--ta-footer-heading-color);
}

.ta-pre-footer__text {
    margin: 0;
    color: var(--ta-pre-footer-text-color);
}

.ta-pre-footer__actions {
    flex: 0 0 auto;
}

.ta-pre-footer__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ta-footer-action-min-height);
    padding: var(--ta-footer-action-padding-block) var(--ta-footer-action-padding-inline);
    border: var(--ta-footer-border-width) solid var(--ta-footer-border-color);
    border-radius: var(--ta-radius);
    color: var(--ta-footer-link-color);
    text-decoration: none;
    transition: var(--ta-transition-interactive);
}

.ta-pre-footer__action:hover,
.ta-pre-footer__action:focus-visible {
    color: var(--ta-footer-link-hover-color);
    border-color: var(--ta-footer-link-hover-color);
    transform: translateY(var(--ta-footer-action-hover-shift));
}

.ta-site-footer {
    margin-top: var(--ta-space-12);
    background: var(--ta-footer-bg);
    color: var(--ta-footer-color);
    border-top: var(--ta-footer-border-width) solid var(--ta-footer-border-color);
}


/* Designed page footer handoff.
   Terminal related/next sections already provide the page-end rhythm, so the
   footer must not add its generic top margin on those templates. */
body.ta-template-service .ta-site-footer,
body.ta-template-how-it-works .ta-site-footer {
    margin-top: 0;
}

.ta-site-footer__main {
    background: var(--ta-footer-main-bg);
}

.ta-site-footer__main-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ta-footer-main-column-min), 1fr));
    gap: var(--ta-footer-row-gap) var(--ta-footer-main-grid-gap);
    padding-block-start: var(--ta-footer-main-padding-block-start);
    padding-block-end: var(--ta-footer-main-padding-block-end);
}

.ta-site-footer__section {
    display: grid;
    align-content: start;
    gap: var(--ta-footer-section-gap);
    min-width: 0;
}

.ta-site-footer__section--brand {
    max-width: var(--ta-footer-brand-max-width);
    gap: var(--ta-footer-brand-gap);
}

.ta-site-footer__brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ta-space-3);
    margin-block-start: var(--ta-footer-brand-offset-block-start, 0);
    color: var(--ta-footer-brand-text-color);
    text-decoration: none;
    font-weight: 700;
}

.ta-site-footer__brand-link:hover,
.ta-site-footer__brand-link:focus-visible {
    color: var(--ta-footer-link-hover-color);
}

.ta-site-footer__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ta-footer-brand-mark-color);
}

.ta-site-footer__brand-mark svg {
    display: block;
    width: auto;
    max-width: var(--ta-footer-brand-logo-max-width);
    height: var(--ta-footer-brand-logo-height);
    color: inherit;
}

.ta-site-footer__brand-name {
    font-size: var(--ta-footer-brand-title-font-size);
    color: var(--ta-footer-brand-text-color);
}


.ta-site-footer__heading {
    margin: 0;
    font-size: var(--ta-footer-heading-font-size);
    font-weight: 700;
    letter-spacing: var(--ta-footer-heading-letter-spacing);
    color: var(--ta-footer-heading-color);
}

.ta-site-footer__section-descriptor {
    margin: 0;
    color: var(--ta-footer-muted-color);
    font-size: var(--ta-footer-meta-font-size);
    line-height: var(--ta-footer-meta-line-height);
    overflow-wrap: break-word;
    word-break: normal;
}

.ta-site-footer__section-descriptor--local {
    max-width: var(--ta-footer-local-descriptor-max-width);
}


.ta-site-footer__nav {
    min-width: 0;
}

.ta-site-footer__brand-link:focus-visible,
.ta-footer-nav a:focus-visible,
.ta-footer-link-list-link:focus-visible,
.ta-site-footer__bottom-nav .ta-footer-link-list-link:focus-visible,
.ta-pre-footer__action:focus-visible {
    outline: var(--ta-footer-focus-outline-width) solid var(--ta-footer-focus-outline-color);
    outline-offset: var(--ta-footer-focus-outline-offset);
    border-radius: var(--ta-footer-focus-radius);
}

.ta-footer-nav,
.ta-footer-link-list {
    display: grid;
    gap: var(--ta-footer-link-list-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ta-footer-nav .menu-item,
.ta-footer-link-list-item {
    margin: 0;
}

.ta-footer-nav a,
.ta-footer-link-list-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ta-footer-link-min-height);
    color: var(--ta-footer-link-color);
    text-decoration: none;
    font-size: var(--ta-footer-body-font-size);
    line-height: var(--ta-footer-link-line-height);
    overflow-wrap: break-word;
    word-break: normal;
}

.ta-footer-nav a:hover,
.ta-footer-nav a:focus-visible,
.ta-footer-link-list-link:hover,
.ta-footer-link-list-link:focus-visible {
    color: var(--ta-footer-link-hover-color);
    text-decoration: underline;
    text-underline-offset: var(--ta-footer-link-underline-offset);
}

.ta-site-footer__section--ecosystem .ta-footer-nav,
.ta-site-footer__section--ecosystem .ta-footer-link-list {
    gap: var(--ta-footer-ecosystem-group-gap);
}

.ta-site-footer__section--local .ta-footer-nav,
.ta-site-footer__section--local .ta-footer-link-list {
    gap: var(--ta-footer-local-group-gap);
}

.ta-site-footer__section--legal .ta-footer-nav,
.ta-site-footer__section--legal .ta-footer-link-list {
    gap: var(--ta-footer-legal-group-gap);
}

.ta-site-footer__section--legal .ta-footer-nav a,
.ta-site-footer__section--legal .ta-footer-link-list-link {
    font-size: var(--ta-footer-legal-link-font-size);
    max-width: var(--ta-footer-legal-link-max-width);
}

.ta-site-footer__bottom {
    background: var(--ta-footer-bottom-bg);
    border-top: none;
}

.ta-site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-footer-bottom-gap);
    padding-block: var(--ta-footer-bottom-padding-block);
    font-size: var(--ta-footer-bottom-font-size);
    color: var(--ta-footer-bottom-color);
}

.ta-site-footer__bottom-copy {
    display: grid;
    gap: var(--ta-footer-bottom-copy-gap);
    color: var(--ta-footer-bottom-color);
    line-height: var(--ta-footer-meta-line-height);
}

.ta-site-footer__bottom-copy-line {
    color: var(--ta-footer-bottom-color);
}

.ta-site-footer__bottom-meta {
    font-size: var(--ta-footer-bottom-meta-font-size);
    color: var(--ta-footer-bottom-color);
}

.ta-site-footer__bottom-nav .ta-footer-link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ta-footer-bottom-gap);
}

.ta-site-footer__bottom-nav .ta-footer-link-list-link {
    font-size: var(--ta-footer-bottom-font-size);
    color: var(--ta-footer-bottom-link-color);
}

.ta-site-footer__bottom-nav .ta-footer-link-list-link:hover,
.ta-site-footer__bottom-nav .ta-footer-link-list-link:focus-visible {
    color: var(--ta-footer-link-hover-color);
}


/* Footer compact grid uses the governed footerCompact query: 540px-1100px. */
@media (min-width: 540px) and (max-width: 1100px) {
    .ta-site-footer__main-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "brand local"
            "ecosystem legal";
    }

    .ta-site-footer__section--brand {
        grid-area: brand;
        max-width: none;
    }

    .ta-site-footer__section--local {
        grid-area: local;
    }

    .ta-site-footer__section--ecosystem {
        grid-area: ecosystem;
    }

    .ta-site-footer__section--legal {
        grid-area: legal;
    }
}

/* Footer stacked layout uses the governed footerStacked query: <= 539px. */
@media (max-width: 539px) {
    .ta-pre-footer__inner,
    .ta-site-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ta-site-footer__main-inner {
        grid-template-columns: 1fr;
        gap: var(--ta-footer-mobile-section-gap);
    }

    .ta-site-footer__section {
        gap: var(--ta-footer-mobile-section-inner-gap);
    }

    .ta-site-footer__section + .ta-site-footer__section {
        padding-block-start: var(--ta-footer-mobile-heading-gap);
        border-top: var(--ta-footer-border-width) solid var(--ta-footer-divider-color);
    }

    .ta-site-footer__heading {
        margin-bottom: 0;
    }

    .ta-site-footer__section-descriptor--local {
        max-width: var(--ta-footer-local-descriptor-max-width-mobile);
    }

    .ta-site-footer__section--brand {
        max-width: none;
    }

    .ta-site-footer__section--local {
        order: 1;
    }

    .ta-site-footer__section--ecosystem {
        order: 2;
    }

    .ta-site-footer__section--legal {
        order: 3;
    }

    .ta-site-footer__bottom-inner {
        gap: var(--ta-footer-bottom-mobile-gap);
    }

    .ta-site-footer__bottom-nav .ta-footer-link-list {
        justify-content: flex-start;
        gap: var(--ta-footer-mobile-stack-gap);
    }

    .ta-footer-nav a,
    .ta-footer-link-list-link {
        min-height: var(--ta-footer-mobile-link-min-height);
        padding-block: var(--ta-footer-mobile-link-padding-block);
    }
}