/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * CreditasFooter — dark site footer: multi-column link lists, ABCD note,
 * social links, legal text and a bottom row of secondary links. Ports
 * legacy `creditas-site/src/components/CreditasFooter`.
 *
 * Tokens inlined from @creditas-ui standard:
 *   colors.neutral.90 = #292929  (bg)
 *   colors.neutral.0  = #ffffff  (links / section titles)
 *   colors.neutral.40 = #9fada7  (categories / legal / social / divider)
 *   colors.neutral.60 = #52605a  (social icon glyph)
 *   radius.sm = 4px
 *   body.lg = 18px/700 (section title)  body.md = 16px (category)
 *   body.sm = 14px (link)  body.xs = 12px (legal / secondary / ABCD)
 *   breakpoints.2xl = 600px
 */

.creditas-footer,
.creditas-footer *,
.creditas-footer *::before,
.creditas-footer *::after {
  box-sizing: border-box;
}

.creditas-footer {
  background-color: #292929; /* neutral.90 */
  padding: 50px 0;
  color: #ffffff;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ----- compliance logos (additive, optional) --------------------
   * Regulator/compliance logo row (e.g. Buró, CONDUSEF, CNBV for MX).
   * Only rendered when at least one logo image is provided. */

  .logos {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
  }

  .logo {
    display: inline-flex;
    align-items: center;

    img {
      display: block;
      height: 32px;
      width: auto;
    }
  }

  /* Non-link informational rows (MX address / hours). Same type scale as
     links but not interactive. */
  .text {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3px;
    padding: 2px 0;
  }

  /* MX copyright line under the secondary links. */
  .copyright {
    margin: 1rem 0 0;
    color: #9fada7; /* neutral.40 */
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3px;
  }

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

  .columns {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-flow: row wrap;

    > * {
      flex: auto;
      width: fit-content;
    }
  }

  .col-title {
    margin: 0 0 1rem;
    color: #ffffff; /* neutral.0 */
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
  }

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

    > li:not(:last-child) {
      margin-bottom: 0.5rem;
    }
  }

  .category {
    display: block;
    margin: 1rem 0 0.25rem;
    color: #9fada7; /* neutral.40 */
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
  }

  .link {
    display: block;
    width: fit-content;
    margin-bottom: 0.33rem;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 4px; /* radius.sm */
    color: #ffffff; /* neutral.0 */
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus-visible {
      background: rgba(255, 255, 255, 0.12);
      outline: none;
    }
  }

  /* ----- social row ------------------------------------------------ */

  .social-row {
    margin: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-flow: column wrap;

    @media (min-width: 600px) {
      flex-flow: row nowrap;
    }
  }

  .abcd {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-flow: column wrap;
    text-align: center;

    @media (min-width: 600px) {
      flex-flow: row nowrap;
      text-align: left;
    }
  }

  /* ABCD "Membro Associado" seal (legacy renders it at 142x40). */
  .abcd-logo {
    display: block;
    width: 142px;
    height: 40px;
    flex-shrink: 0;
  }

  .abcd-text {
    margin: 0;
    color: #9fada7; /* neutral.40 */
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
  }

  .social {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-flow: row nowrap;
  }

  .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    color: #52605a; /* neutral.60 — legacy social glyph color */
    transition: color 0.2s ease, background-color 0.2s ease;

    &:hover,
    &:focus-visible {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.12);
      outline: none;
    }

    /* Legacy renders the icons at 33px. */
    svg {
      display: block;
      width: 33px;
      height: 33px;
      fill: currentColor;
    }
  }

  /* ----- legal ----------------------------------------------------- */

  .legal {
    margin: 3rem 0 0;
    color: #9fada7; /* neutral.40 */
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    white-space: pre-line;

    @media (min-width: 600px) {
      column-count: 2;
      column-gap: 2rem;
    }
  }

  /* ----- bottom secondary links ------------------------------------ */

  .extra {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #9fada7; /* neutral.40 */
    display: flex;
    gap: 1rem;
    flex-flow: row wrap;
    list-style: none;
    padding-left: 0;

    .link {
      margin-bottom: 0;
      color: #9fada7; /* neutral.40 */
      font-size: 12px;
      line-height: 16px;

      &:hover {
        color: #ffffff;
      }
    }
  }
}