@import "fonts_v2.css";

/* Footer Pre-Login Redesigned Styles */

/* Base Variables */
.global-footer,
.global-footer * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
    /* Colors */
    --color-neutral-black: #281805;
    --color-neutral-white: #f2f2f2;
    --color-warm-black: #281805;
    --color-neutral-white-000: #fff;
    --color-white: #fff;
    --color-blue: #0061f4;
    --color-focus: #e0ecfe;
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 72px;
    /* Typography */
    --font-primary: "Forever Forma Variable", Arial, sans-serif;
    --font-body: "Forever Forma Body Text", Arial, sans-serif;
}


.icon {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
}

.toggle-icon {
    display: none;
}

/* Base Text Styles */
.text-base {
  font-feature-settings: "liga" off, "clig" off;
  font-style: normal;
  line-height: 150%;
}

/* Layout */
.global-footer {
  display: flex;
  padding: var(--spacing-xl) var(--spacing-xxl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  background: var(--color-neutral-black);
  width: 100%;
  padding: var(--spacing-xl) var(--page-gutter);
}

.TA-logo--footer {
  width: 150px;
  height: 36px;
}

.footer__columns-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%; /* Spans the full width of the screen */
    gap: 32px; /* Spacing between your columns */
    align-items: flex-start; /* Keeps headers aligned at the top */
}

.footer__column {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1; /* Makes both columns take equal width */
    min-width: 0; /* Prevents overflow issues */
    gap: var(--spacing-sm);
}
/* Typography */
.footer__column__title {
  color: var(--color-neutral-white);
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
}

.footer__column__menu__item {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer__legal-copy {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

/* Interactive Elements */

/* Lists */
.footer__column__menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-self: stretch;
  list-style: none;
  padding-left: 0;
}

/* Media Queries */
@media screen and (min-width: 1920px) {

}

@media screen and (min-width: 1440px) {
  .footer__columns-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1280px) {
  .footer__columns-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 959px) {
  .footer__columns-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
  }
  .footer__column__menu{
    padding-bottom: 24px;
  }
  .footer__column__title{
    border-top: 1px solid var(--color-neutral-white);
  }
}

@media screen and (min-width: 960px) and (max-width: 1439px) {

}

@media screen and (min-width: 600px) and (max-width: 959px) {
    .global-footer {
        padding: 48px;
    }

    .footer__column {
        width: 100%;
    }
        .footer__column h2 {
            padding: 8px 0px 8px 0px;
        }
    .icon-expand-arrow {
        display: inline-block;
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.9999 15.0537L6.34619 9.39994L7.39994 8.34619L11.9999 12.9462L16.5999 8.34619L17.6537 9.39994L11.9999 15.0537Z' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .is-active .icon-expand-arrow {
        transform: rotate(180deg);
    }

    .footer__column__title {
        color: var(--color-neutral-white);
        font-family: var(--font-primary);
        font-size: 20px;
        font-weight: 500;
        line-height: 150%;
    }

    .footer__columns-wrapper .footer__column:first-of-type.is-active .footer__column__menu li:last-child {
        margin-bottom: 8px;
    }

    .accordion-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
        box-sizing: border-box;
        padding: 16px 0;
    }

    .footer__column.is-active .toggle-icon {
        transform: rotate(45deg);
    }

    .footer__column__menu {
        display: none !important;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
        overflow: hidden;
        margin: 0 !important;
        gap: 0 !important;
    }

    .footer__column.is-active .footer__column__menu {
        display: flex !important;
        grid-template-rows: 1fr;
        visibility: visible;
        gap: var(--spacing-xs) !important;
    }

    .footer__column.is-active .footer__column__menu > li {
        visibility: visible;
    }
}

    @media screen and (min-width: 375px) and (max-width: 599px) {
        .global-footer {
            padding: 48px 30px 48px 30px;
        }
        .icon-expand-arrow {
            display: inline-block;
            width: 24px;
            height: 24px;
            transition: transform 0.3s ease;
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.9999 15.0537L6.34619 9.39994L7.39994 8.34619L11.9999 12.9462L16.5999 8.34619L17.6537 9.39994L11.9999 15.0537Z' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
        }

        .is-active .icon-expand-arrow {
            transform: rotate(180deg);
        }

        .footer__column__title {
            color: var(--color-neutral-white);
            font-family: var(--font-primary);
            font-size: 20px;
            font-weight: 500;
            line-height: 150%;
        }

        .footer__columns-wrapper .footer__column:first-of-type.is-active .footer__column__menu li:last-child {
            margin-bottom: 8px;
        }

        .accordion-trigger {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            cursor: pointer;
            box-sizing: border-box;
            padding: 16px 0;
        }

        .footer__column.is-active .toggle-icon {
            transform: rotate(45deg);
        }

        .footer__column__menu {
            display: none !important;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease-out;
            overflow: hidden;
            margin: 0 !important;
            gap: 0 !important;
        }

        .footer__column.is-active .footer__column__menu {
            display: flex !important;
            grid-template-rows: 1fr;
            visibility: visible;
            gap: var(--spacing-xs) !important;
            padding-top: 16px !important;
        }

        .footer__column.is-active .footer__column__menu > li {
            visibility: visible;
        }
    }



    /* High Contrast Mode */
    @media (forced-colors: active) {
        .interactive:focus-visible {
            outline: 2px solid ButtonText;
        }
    }