/* UNIMES redesign — rodape. CSS puro, sem build. */

/* Rodape inteiro no escuro, como o prototipo pede. O corpo usa o navy de
   estrutura e a barra final desce para --navy-900, espelhando a faixa superior
   do cabecalho e fechando a pagina entre duas faixas mais escuras. */
.unimes-redesign-footer {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

.unimes-redesign-footer__main {
  padding-block: clamp(var(--unimes-space-8), 4vw, var(--unimes-space-12)) var(--unimes-space-6);
}

.unimes-redesign-footer__layout {
  display: grid;
  gap: var(--unimes-space-12);
}

.unimes-redesign-footer__institutional {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.unimes-redesign-footer__brand {
  display: inline-flex;
  /* A arte da logo reduzida tem ~24px; o alvo precisa dos 44px. */
  min-height: var(--unimes-space-control);
  align-items: center;
  color: var(--text-on-brand);
  text-decoration: none;
}

.unimes-redesign-footer__logo {
  display: block;
  width: auto;
  max-width: 10rem;
  height: auto;
  max-height: 3.5rem;
  object-fit: contain;
}

.unimes-redesign-footer__site-name {
  font-size: var(--unimes-font-h4-size);
  font-weight: var(--unimes-font-h4-weight);
  line-height: var(--unimes-font-h4-line-height);
}

.unimes-redesign-footer__description {
  max-width: 28rem;
  margin: var(--unimes-space-5) 0 0;
  color: var(--text-on-brand);
  font-size: var(--unimes-font-body-sm-size);
  line-height: var(--unimes-font-body-sm-line-height);
}

.unimes-redesign-footer__contact {
  display: grid;
  margin-top: var(--unimes-space-5);
  font-style: normal;
}

.unimes-redesign-footer__contact a,
.unimes-redesign-footer__menu-group a {
  overflow-wrap: anywhere;
}

.unimes-redesign-footer__contact a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--text-on-brand);
  font-size: var(--unimes-font-body-sm-size);
  font-weight: var(--fw-regular);
  line-height: var(--unimes-font-body-sm-line-height);
  text-decoration-color: var(--unimes-color-neutral-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
  transition: color var(--unimes-transition-fast) ease,
    text-decoration-color var(--unimes-transition-fast) ease;
}

.unimes-redesign-footer__contact a:hover {
  color: var(--text-on-brand);
  opacity: 0.78;
  text-decoration-color: currentColor;
}

.unimes-redesign-footer__social {
  margin-top: var(--unimes-space-5);
}

.unimes-redesign-footer__social ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unimes-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.unimes-redesign-footer__social li {
  margin: 0;
}

.unimes-redesign-footer__social a {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--unimes-color-neutral-300);
  border-radius: var(--unimes-radius-pill);
  color: var(--text-on-brand);
  text-decoration: none;
  transition: border-color var(--unimes-transition-fast) ease,
    color var(--unimes-transition-fast) ease,
    background-color var(--unimes-transition-fast) ease;
}

.unimes-redesign-footer__social a:hover {
  border-color: var(--text-on-brand);
  background: var(--unimes-color-neutral-50);
  color: var(--text-on-brand);
  opacity: 0.8;
}

.unimes-redesign-footer__social svg {
  fill: currentColor;
  stroke: none;
}

.unimes-redesign-footer__social svg rect,
.unimes-redesign-footer__social svg circle:not(.unimes-redesign-footer__social-icon-fill) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.unimes-redesign-footer__social .unimes-redesign-footer__social-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.unimes-redesign-footer__navigation {
  display: grid;
  min-width: 0;
  gap: var(--unimes-space-8);
}

.unimes-redesign-footer__menu-group {
  min-width: 0;
}

.unimes-redesign-footer__menu-group h3 {
  margin: 0 0 var(--unimes-space-3);
  color: var(--text-on-brand);
  font-size: var(--unimes-font-label-size);
  font-weight: var(--fw-regular);
  line-height: var(--unimes-font-label-line-height);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.unimes-redesign-footer__menu,
.unimes-redesign-footer__menu .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.unimes-redesign-footer__menu li {
  margin: 0;
}

.unimes-redesign-footer__menu a {
  display: inline-flex;
  /* 44px de alvo de toque, como o CLAUDE.md exige. Antes eram 30px. */
  min-height: var(--unimes-space-control);
  align-items: center;
  padding-block: var(--unimes-space-1);
  color: var(--text-on-brand);
  font-size: var(--unimes-font-body-sm-size);
  line-height: var(--unimes-font-body-sm-line-height);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
  transition: color var(--unimes-transition-fast) ease,
    text-decoration-color var(--unimes-transition-fast) ease;
}

.unimes-redesign-footer__menu a:hover,
.unimes-redesign-footer__menu .current-menu-item > a,
.unimes-redesign-footer__menu .current-menu-ancestor > a,
.unimes-redesign-footer__menu .current_page_item > a {
  color: var(--text-on-brand);
  text-decoration-color: currentColor;
}

.unimes-redesign-footer__menu a:hover {
  opacity: 0.78;
}

.unimes-redesign-footer__menu .sub-menu {
  margin-left: var(--unimes-space-3);
  padding-left: var(--unimes-space-3);
  border-left: 1px solid rgba(255, 255, 255, .24);
}

.unimes-redesign-footer__bar {
  background: var(--navy-900);
  color: var(--text-on-brand);
}

.unimes-redesign-footer__bar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--unimes-space-3);
  padding-block: var(--unimes-space-5);
}

.unimes-redesign-footer__bar p {
  margin: 0;
  color: var(--unimes-color-neutral-white);
  font-size: var(--unimes-font-caption-size);
  line-height: var(--unimes-font-caption-line-height);
}

.unimes-redesign-footer__bar a {
  align-self: flex-start;
  color: var(--unimes-color-neutral-white);
  font-size: var(--unimes-font-caption-size);
  font-weight: var(--fw-regular);
  line-height: var(--unimes-font-caption-line-height);
  text-decoration-color: rgb(255 255 255 / 0.7);
  text-underline-offset: 0.25rem;
}

.unimes-redesign-footer__bar a:hover {
  opacity: 0.82;
  text-decoration-thickness: 2px;
}

.unimes-redesign-footer__institutional-details {
  display: grid;
  gap: var(--unimes-space-8);
  margin-top: var(--unimes-space-8);
  padding-top: var(--unimes-space-8);
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.unimes-redesign-footer__institutional-details h3 {
  margin: 0 0 var(--unimes-space-3);
  color: var(--text-on-brand);
  font-size: var(--unimes-font-label-size);
  font-weight: var(--fw-regular);
  line-height: var(--unimes-font-label-line-height);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.unimes-redesign-footer__emec {
  display: flex;
  min-width: 0;
  align-items: center;
}

.unimes-redesign-footer__emec-link {
  display: inline-flex;
  min-height: var(--unimes-space-control);
  align-items: center;
  gap: var(--unimes-space-4);
  color: inherit;
  font-size: var(--unimes-font-body-sm-size);
  line-height: var(--unimes-font-body-sm-line-height);
  text-decoration: none;
}

/* A placa do e-MEC nao tinha regra nenhuma e saia no tamanho natural do anexo.
   A altura e fixa no teto de 100px e a largura fica em auto: carregada, vale a
   proporcao real do arquivo, entao uma dimensao errada nos atributos nao deforma
   a arte (o que ja aconteceu); antes de carregar, os atributos width/height do
   anexo dao a proporcao e a placa ja ocupa o seu espaco, sem deslocar a pagina.
   object-fit: contain protege a arte se o max-width apertar. Uma arte com menos
   de 100px de altura seria ampliada: a pendencia 2 de docs/REDESIGN.md pede
   200px ou mais. */
.unimes-redesign-footer__emec-image {
  width: auto;
  max-width: 100%;
  height: 6.25rem;
  max-height: 6.25rem;
  object-fit: contain;
}

.unimes-redesign-footer__emec-link:hover .unimes-redesign-footer__emec-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.unimes-redesign-footer__emec img {
  display: block;
  width: min(100%, 13.75rem);
  height: auto;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--unimes-radius-md);
}

/* Faixa institucional: marca e redes, selos e placa do e-MEC. Ate o desktop
   empilham nessa ordem; no desktop viram tres grupos numa linha so, centrados
   na vertical -- e o desalinhamento vertical entre eles que criava o vazio no
   meio do rodape. */
.unimes-redesign-footer__credibility {
  display: grid;
  gap: var(--unimes-space-6);
  align-items: center;
  padding-block: var(--unimes-space-6);
  border-top: 1px solid rgb(255 255 255 / 0.18);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
}

.unimes-redesign-footer__follow .unimes-redesign-footer__social {
  margin-top: var(--unimes-space-4);
}

.unimes-redesign-footer__brand-lockup {
  display: block;
  width: min(100%, 12.5rem);
  height: auto;
}

.unimes-redesign-footer__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--unimes-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.unimes-redesign-footer__marks li {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.unimes-redesign-footer__marks a {
  display: inline-flex;
  min-width: var(--unimes-space-control);
  min-height: var(--unimes-space-control);
  align-items: center;
  justify-content: center;
}

.unimes-redesign-footer__marks img {
  display: block;
  width: auto;
  max-width: 6.5rem;
  height: auto;
  max-height: 2.25rem;
  object-fit: contain;
}

.unimes-redesign-footer__follow {
  color: var(--unimes-color-neutral-white);
}

.unimes-redesign-footer__follow p {
  margin: 0 0 var(--unimes-space-2);
  color: inherit;
  font-size: var(--unimes-font-caption-size);
  font-weight: var(--fw-regular);
  line-height: var(--unimes-font-caption-line-height);
}

.unimes-redesign-footer__bar .unimes-redesign-footer__social {
  margin-top: 0;
}

.unimes-redesign-footer__bar .unimes-redesign-footer__social a {
  border-color: rgb(255 255 255 / 0.35);
  background: transparent;
  color: var(--unimes-color-neutral-white);
}

.unimes-redesign-footer__bar .unimes-redesign-footer__social a:hover {
  border-color: var(--unimes-color-neutral-white);
  background: rgb(255 255 255 / 0.08);
  color: var(--unimes-color-neutral-white);
  opacity: 0.82;
}

.unimes-redesign-footer__back-to-top {
  display: inline-flex;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--unimes-radius-pill);
  background: var(--unimes-color-neutral-white);
  color: var(--unimes-color-brand-deep) !important;
  text-decoration: none;
}

.unimes-redesign-footer__back-to-top:hover {
  opacity: 0.86;
}

.unimes-redesign-footer--institutional-preview .unimes-redesign-footer__navigation {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  /* A marca saiu daqui para a faixa: sobrou a navegacao, em largura cheia. */
  .unimes-redesign-footer__layout {
    gap: var(--unimes-space-10);
  }

  .unimes-redesign-footer__navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unimes-redesign-footer--institutional-preview .unimes-redesign-footer__navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .unimes-redesign-footer__institutional-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .unimes-redesign-footer__bar-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .unimes-redesign-footer__bar a {
    align-self: auto;
  }
}

@media (min-width: 1200px) {
  .unimes-redesign-footer__layout {
    gap: var(--unimes-space-12);
  }

  .unimes-redesign-footer__navigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .unimes-redesign-footer--institutional-preview .unimes-redesign-footer__navigation {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .unimes-redesign-footer__institutional-details {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(13.75rem, 0.9fr);
  }

  /* Desktop: duas colunas. A marca e as redes ficam a esquerda; os selos e a
     placa empilham a direita, alinhados pela borda direita. */
  .unimes-redesign-footer__credibility {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: start;
    row-gap: var(--unimes-space-5);
  }

  .unimes-redesign-footer__institutional {
    grid-row: 1 / 3;
    align-self: center;
  }

  .unimes-redesign-footer__marks {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .unimes-redesign-footer__emec {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
  }

  /* Com a coluna dimensionada pelo conteudo, a chamada cabe em uma linha. */
  .unimes-redesign-footer__emec-label {
    white-space: nowrap;
  }

  .unimes-redesign-footer__bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto 2.75rem;
  }
}