/* ==========================================================================
   Componente: footer — todos os seletores começam por .c-footer
   Duas partes no mesmo componente (compartilham o fundo):
   1) .c-footer__contact  — título + formulário (Umbraco Forms, tema contact-us-ds)
   2) .c-footer__sitemap  — logo, grupos de links e links legais
   Valores do Figma normalizados (componentes copiados com escala 1,088: 19,59→18, 26,12→24,
   43,53→40, 15,24→14).
   ========================================================================== */

/* ---------- mobile (base, Figma 390) ---------- */
.c-footer {
  --footer-content-max: 112rem;                 /* 1792px — igual ao header */
  --footer-link-gap: 1.25rem;                   /* 20 */
  --footer-bg-position: 75% bottom;             /* enquadramento da imagem de fundo */

  /* contato */
  --contact-title-size: 3rem;                   /* 48 */
  --contact-subtitle-size: 1.25rem;             /* 20 */
  --contact-subtitle-lh: 1.35;

  /* sitemap */
  --sitemap-logo-height: 4rem;                  /* 64 */

  position: relative;
  overflow: hidden;
  background-color: var(--tp-ds-bg-black);
  color: var(--tp-ds-body-inverse);
}

/* ===================== Fundo único (atravessa contato e sitemap) ===================== */
.c-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.c-footer__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--footer-bg-position);
}

/* Escurece o topo (área do título), como no Figma */
.c-footer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--tp-ds-bg-black), rgb(0 0 0 / 0) 60%);
}

/* ===================== Contato ===================== */
.c-footer__contact {
  position: relative;
  z-index: 1;
  padding: 3.5rem 0 2.5rem;                     /* 56 / 40 */
}

.c-footer__contact-inner {
  display: flex;
  flex-direction: column;
  gap: 10rem;                                   /* 160 — deixa o fundo aparecer entre título e form */
  width: 100%;
  max-width: var(--footer-content-max);
  margin-inline: auto;
}

.c-footer__invitation {
  display: flex;
  flex-direction: column;
  gap: var(--tp-ds-space-5);                    /* 24 */
  padding-inline: 2rem;                         /* 32 */
}

.c-footer__title {
  margin: 0;
  font-family: var(--tp-ds-font-regular);       /* Regular em todos os breakpoints (confirmado) */
  font-size: var(--contact-title-size);
  font-weight: normal;
  line-height: 1.05;
  letter-spacing: var(--tp-ds-ls-normal);
  color: var(--tp-ds-title-inverse);
}

.c-footer__subtitle {
  margin: 0;
  font-family: var(--tp-ds-font-light);
  font-size: var(--contact-subtitle-size);
  line-height: var(--contact-subtitle-lh);
  color: var(--tp-ds-body-inverse);
}

.c-footer__form-panel {
  padding: var(--tp-ds-space-5) 2rem;           /* 24 / 32 */
  background-color: var(--tp-ds-bg-black);
}

/* ---------- Umbraco Forms (tema contact-us-ds) ---------- */
.c-footer .umbraco-forms-page {
  display: flex;
  flex-direction: column;
  gap: var(--tp-ds-space-5);                    /* 24 entre linhas de campos */
}

.c-footer .umbraco-forms-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-footer .umbraco-forms-container + .umbraco-forms-container {
  margin-top: var(--tp-ds-space-5);             /* empilhado no mobile */
}

.c-footer .umbraco-forms-field + .umbraco-forms-field {
  margin-top: var(--tp-ds-space-5);
}

.c-footer .umbraco-forms-field-wrapper {
  padding: 0 0 var(--tp-ds-space-2);            /* 8 abaixo da linha */
}

.c-footer .umbraco-forms-field input.text,
.c-footer .umbraco-forms-field input[type="email"],
.c-footer .umbraco-forms-field input[type="tel"],
.c-footer .umbraco-forms-field select,
.c-footer .umbraco-forms-field textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--tp-ds-space-2) 0 calc(var(--tp-ds-space-2) + 1px); /* 8 acima / 8 + linha de 1px */
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: inset 0 -1px 0 var(--tp-ds-border-white);
  color: var(--tp-ds-body-inverse);
  font-family: var(--tp-ds-font-light);
  font-size: var(--tp-ds-fs-body-md);
  font-weight: normal;
  line-height: var(--tp-ds-lh-body-md);
  appearance: none;
  transition: box-shadow var(--tp-ds-duration-fast) var(--tp-ds-ease-standard);
}

.c-footer .umbraco-forms-field input::placeholder,
.c-footer .umbraco-forms-field textarea::placeholder {
  color: var(--tp-ds-body-inverse);
  opacity: 1;
}

/* Foco: linha de 2px (estado "ativo" do Figma) */
.c-footer .umbraco-forms-field input:focus,
.c-footer .umbraco-forms-field select:focus,
.c-footer .umbraco-forms-field textarea:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--tp-ds-border-white);
}

.c-footer .umbraco-forms-field select {
  padding-right: var(--tp-ds-space-6);
  background-image: url("../../assets/img/icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.64375rem 0.4139rem;        /* 10.3 × 6.62 */
  cursor: pointer;
}

.c-footer .umbraco-forms-field select option {
  background-color: var(--tp-ds-bg-black);
  color: var(--tp-ds-body-inverse);
}

/* Uma linha, como no Figma; cresce com o texto (footer.js) */
.c-footer .umbraco-forms-field textarea {
  min-height: calc(var(--tp-ds-lh-body-md) + 2 * var(--tp-ds-space-2) + 1px);
  overflow: hidden;
  resize: none;
}

/* Validação (classes do jQuery unobtrusive usadas pelo Umbraco Forms) */
.c-footer .umbraco-forms-field .input-validation-error {
  box-shadow: inset 0 -2px 0 var(--tp-ds-color-danger);
}

.c-footer .umbraco-forms-field .field-validation-error {
  display: block;
  margin-top: var(--tp-ds-space-1);
  font-family: var(--tp-ds-font-regular);
  font-size: var(--tp-ds-fs-body-sm);
  line-height: var(--tp-ds-lh-body-sm);
  color: var(--tp-ds-color-danger);
}

.c-footer .umbraco-forms-field .field-validation-valid:empty {
  display: none;
}

/* Consentimento */
.c-footer .dataconsent .umbraco-forms-field-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 var(--tp-ds-space-3);                  /* 12 */
  padding-bottom: 0;
}

.c-footer .dataconsent input[type="checkbox"] {
  display: grid;
  place-content: center;
  flex: none;
  width: 1.0625rem;                             /* 17 */
  height: 1.0625rem;
  margin: 0;
  border: 1.3px solid var(--tp-ds-border-white);
  border-radius: var(--tp-ds-radius-sm);
  background-color: transparent;
  appearance: none;
  cursor: pointer;
}

/* Estado marcado: PROVISÓRIO (não há no Figma) */
.c-footer .dataconsent input[type="checkbox"]:checked {
  background-color: var(--tp-ds-bg-default);
}

.c-footer .dataconsent input[type="checkbox"]:checked::before {
  content: "";
  width: 0.5625rem;
  height: 0.3125rem;
  border-bottom: 1.5px solid var(--tp-ds-title-default);
  border-left: 1.5px solid var(--tp-ds-title-default);
  transform: translateY(-1px) rotate(-45deg);
}

.c-footer .dataconsent label {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--tp-ds-font-regular);
  font-size: var(--tp-ds-fs-body-sm);           /* 14 */
  line-height: var(--tp-ds-lh-body-sm);         /* 18 */
  color: var(--tp-ds-body-inverse);
  cursor: pointer;
}

.c-footer .dataconsent label a {
  font-family: var(--tp-ds-font-light);
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.c-footer .dataconsent .field-validation-error {
  flex-basis: 100%;
}

.c-footer .umbraco-forms-navigation {
  margin-top: var(--tp-ds-space-4);             /* 24 (gap) + 16 = 40 até o botão */
}

/* ===================== Sitemap ===================== */
/* Sem fundo próprio: a imagem do .c-footer passa por trás, desfocada pelo glass */
.c-footer__sitemap {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.5rem 2rem;                  /* 40 / 24 / 32 */
}

/* "Glass treatment" do Figma (blur de fundo 20px + véu escuro + borda sutil) */
.c-footer__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.084), rgb(0 0 0 / 0.2) 45%, rgb(0 0 0 / 0.344));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  pointer-events: none;
}

.c-footer__sitemap-inner {
  display: flex;
  flex-direction: column;
  gap: 5rem;                                    /* 80 */
  width: 100%;
  max-width: var(--footer-content-max);
  margin-inline: auto;
}

.c-footer__main {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.c-footer__logo {
  display: inline-flex;
  align-self: flex-start;
}

.c-footer__logo-img {
  display: block;
  width: auto;
  height: var(--sitemap-logo-height);
}

.c-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 5rem;                                    /* 80 entre grupos no mobile */
}

.c-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--footer-link-gap);
}

.c-footer__group-title {
  margin: 0;
  font-family: var(--tp-ds-font-bold);
  font-size: var(--tp-ds-fs-body-md);           /* 18 */
  font-weight: normal;
  line-height: var(--tp-ds-lh-body-md);         /* 24 */
  letter-spacing: var(--tp-ds-ls-normal);
  color: var(--tp-ds-body-inverse);
}

.c-footer__links,
.c-footer__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--footer-link-gap);
}

.c-footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tp-ds-space-2);                    /* 8 */
  font-family: var(--tp-ds-font-light);
  font-size: var(--tp-ds-fs-body-md);
  line-height: var(--tp-ds-lh-body-md);
  color: var(--tp-ds-title-inverse);
  text-decoration: none;
}

.c-footer__link img {
  flex: none;
  width: 1.25rem;                               /* 20 */
  height: 1.25rem;
}

/* Linha sob o link (componente "Link" do Figma) — exibida no hover/foco */
.c-footer__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.3125rem;                           /* gap 4 + linha 1 */
  left: 0;
  height: 1px;
  background-color: var(--tp-ds-bg-neutral-strong);
  opacity: 0;
  transition: opacity var(--tp-ds-duration-fast) var(--tp-ds-ease-standard);
}

.c-footer__link:hover,
.c-footer__link:focus-visible {
  color: var(--tp-ds-title-inverse);
}

.c-footer__link:hover::after,
.c-footer__link:focus-visible::after {
  opacity: 1;
}

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem var(--tp-ds-space-5);           /* 10 / 24 */
}

.c-footer__legal-link {
  display: inline-block;
  font-family: var(--tp-ds-font-regular);
  font-size: var(--tp-ds-fs-body-sm);           /* 14 */
  line-height: var(--tp-ds-lh-body-md);         /* 24 */
  color: var(--tp-ds-body-inverse);
  text-decoration: none;
}

.c-footer__legal-link:hover,
.c-footer__legal-link:focus-visible {
  color: var(--tp-ds-body-inverse);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .c-footer .umbraco-forms-field input,
  .c-footer .umbraco-forms-field select,
  .c-footer .umbraco-forms-field textarea,
  .c-footer__link::after {
    transition: none;
  }
}

/* ---------- tablet (Figma 768) ---------- */
@media (min-width: 768px) {
  .c-footer {
    --footer-link-gap: var(--tp-ds-space-5);    /* 24 */
    --contact-title-size: 4rem;                 /* 64 */
    --sitemap-logo-height: 4.5rem;              /* 72 */
  }

  /* contato */
  .c-footer__contact {
    padding: 5rem 2.5rem 6rem;                  /* 80 / 40 / 96 */
  }

  .c-footer__contact-inner {
    gap: 4rem;                                  /* 64 */
  }

  .c-footer__invitation {
    gap: var(--tp-ds-space-6);                  /* 32 */
    padding-inline: 0;
  }

  .c-footer__form-panel {
    padding: 2.5rem;                            /* 40 */
  }

  .c-footer .umbraco-forms-container + .umbraco-forms-container {
    margin-top: 0;                              /* lado a lado (col-md-6) */
  }

  /* sitemap */
  .c-footer__sitemap {
    padding: 3rem 2.5rem 2.25rem;               /* 48 / 40 / 36 */
  }

  .c-footer__nav {
    flex-direction: row;
    gap: var(--tp-ds-space-6);                  /* 32 */
  }

  .c-footer__group--company,
  .c-footer__group--solutions {
    flex: 0 0 10.75rem;                         /* 172 */
  }

  .c-footer__group--industries {
    flex: 0 0 17.5rem;                          /* 280 */
  }

  .c-footer__legal {
    gap: 1.125rem var(--tp-ds-space-5);         /* 18 / 24 */
  }
}

/* ---------- desktop (Figma 1440) ---------- */
@media (min-width: 1440px) {
  .c-footer {
    --contact-title-size: 4.875rem;             /* 78 */
    --contact-subtitle-size: 1.5rem;            /* 24 */
    --contact-subtitle-lh: 2rem;                /* 32 */
    --sitemap-logo-height: 5.157rem;            /* 82.5 */
  }

  /* contato */
  .c-footer__contact {
    padding: 7rem 3.75rem 6.5625rem;            /* 112 / 60 / 105 */
  }

  .c-footer__contact-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 4.5rem;                                /* 72 */
  }

  .c-footer__invitation {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--tp-ds-space-5);                  /* 24 */
    padding-top: var(--tp-ds-space-8);          /* 48 */
  }

  .c-footer__form-panel {
    flex: none;
    width: 35rem;                               /* 560 */
    margin-right: 3.25rem;                      /* 60 + 52 = 112 da borda */
  }

  /* sitemap */
  .c-footer__sitemap {
    display: flex;
    flex-direction: column;
    min-height: 35.8125rem;                     /* 573 */
    padding: 7.5rem 3.75rem 2.5rem;             /* 120 / 60 / 40 */
  }

  .c-footer__sitemap-inner {
    flex: 1 0 auto;
    justify-content: space-between;
  }

  .c-footer__main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .c-footer__logo {
    margin: 0.3125rem 0 0 2rem;                 /* posição do hexágono no bloco "Identity" */
  }

  .c-footer__nav {
    gap: 2.5rem;                                /* 40 */
  }

  .c-footer__group--company,
  .c-footer__group--solutions {
    flex-basis: 13.125rem;                      /* 210 */
  }

  .c-footer__group--industries {
    flex-basis: 19.5rem;                        /* 312 */
  }
}

/* ---------- wide / > 1991 (Figma 2560) ---------- */
@media (min-width: 1990px) {
  .c-footer {
    --contact-title-size: 6rem;                 /* 96 */
  }

  .c-footer__sitemap {
    padding-top: 5rem;                          /* 80 */
  }
}