/* ============================================================================
   DP SITE — compatibilidade com o Elementor.

   Carregado só quando o Elementor está ativo (inc/elementor/compat.php).

   Duas responsabilidades, e nenhuma a mais:

   1. Impedir que o CSS do tema vaze sobre o conteúdo do builder.
   2. Dar aos widgets nativos do Elementor a aparência do design system, para
      que um formulário montado no builder não destoe do resto do site.

   Regra de ouro: nada aqui usa seletor de elemento dentro de .elementor.
   Só classes do próprio Elementor.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Contenção
   --------------------------------------------------------------------------- */

/*
 * Numa página construída no builder, o Elementor injeta o conteúdo dentro de
 * .entry-content — e as regras de prosa do tema passariam a valer sobre os
 * widgets. A classe vem de dp_elementor_body_class().
 */
.dp-built-with-elementor .entry-content {
  max-width: none;
  font-size: inherit;
  line-height: inherit;
}

.dp-built-with-elementor .entry-content > * + * { margin-top: 0; }

/* O tema limita a largura da prosa; o builder controla a própria largura. */
.dp-built-with-elementor .dp-prose { max-width: none; }

/* ---------------------------------------------------------------------------
   2. Widgets do Elementor no visual do design system
   --------------------------------------------------------------------------- */

/* ---- Formulário (Elementor Pro) ---------------------------------------- */

.elementor-field-group .elementor-field-label {
  margin-bottom: var(--dp-gap-field);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-primary);
}

.elementor-field-group .elementor-field-textual {
  height: var(--dp-field-height);
  padding-inline: var(--dp-space-4);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-text-primary);
  background: var(--dp-white);
  border: var(--dp-border-width) solid var(--dp-graphite-300);
  border-radius: var(--dp-radius-sm);
  transition:
    border-color var(--dp-dur-fast) var(--dp-ease-out),
    box-shadow var(--dp-dur-fast) var(--dp-ease-out);
}

.elementor-field-group textarea.elementor-field-textual {
  height: auto;
  min-height: var(--dp-textarea-min-height);
  padding-block: var(--dp-space-3);
  line-height: var(--dp-leading-normal);
}

.elementor-field-group .elementor-field-textual::placeholder { color: var(--dp-placeholder); }

.elementor-field-group .elementor-field-textual:focus {
  outline: none;
  border-color: var(--dp-blue-600);
  box-shadow: var(--dp-shadow-focus);
}

/*
 * ESCOPADO AO FORMULÁRIO, de propósito.
 *
 * A versão anterior mirava `.elementor-button` solto, e com isso o tema passava
 * por cima de TODO botão montado no builder — inclusive os que o editor
 * colorisse no painel. Tema não manda em widget do Elementor: aqui só o botão
 * de formulário, que não tem controle de estilo próprio no widget de Forms.
 */
.elementor-form .elementor-button,
.elementor-field-group .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dp-space-2);
  height: var(--dp-btn-height);
  padding-inline: var(--dp-space-5);
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  line-height: 1;
  color: var(--dp-white);
  background: var(--dp-brand);
  border: var(--dp-border-width) solid transparent;
  border-radius: var(--dp-radius-sm);
  /* <button> nao e link: o padrao do navegador e `default`, nao `pointer`. */
  cursor: pointer;
  transition: background var(--dp-dur-fast) var(--dp-ease-out);
}

/*
 * So o fundo muda no hover.
 *
 * Redeclarar `color` aqui era heranca da versao anterior e briga com a Cor do
 * Texto que o editor escolhe no painel: o botao guarda a tinta do estado normal
 * e o hover a trocava por branco.
 */
.elementor-form .elementor-button:hover,
.elementor-field-group .elementor-button:hover {
  background: var(--dp-brand-hover);
}

/* O anel de foco vale para qualquer botão: acessibilidade não é decoração, e
   o Elementor não garante indicador visível por conta própria. */
.elementor-button:focus-visible {
  outline: var(--dp-focus-outline) solid var(--dp-focus-ring);
  outline-offset: var(--dp-focus-outline);
}

.elementor-message.elementor-message-danger { color: var(--dp-critical-600); }
.elementor-message.elementor-message-success { color: var(--dp-accent-result-ink); }

/* ---- Widgets do tema ----------------------------------------------------- */

.dp-elementor-faq { max-width: var(--dp-container-md); }

.dp-faq__item { border-top: var(--dp-border-width) solid var(--dp-hairline); }
.dp-faq__item:last-child { border-bottom: var(--dp-border-width) solid var(--dp-hairline); }

.dp-faq__trigger {
  display: flex;
  gap: var(--dp-space-4);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--dp-space-5);
  font-family: var(--dp-font-display);
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-semibold);
  line-height: var(--dp-leading-snug);
  text-align: left;
  color: var(--dp-text-primary);
  cursor: pointer;
}

.dp-faq__trigger:hover { color: var(--dp-link); }

.dp-faq__trigger:focus-visible {
  outline: var(--dp-focus-outline) solid var(--dp-focus-ring);
  outline-offset: calc(var(--dp-focus-outline) * -1);
}

/* O SVG vem de dp_get_icon(), que emite .dp-icon--chevron — nao ha
   .dp-faq__icon. Mirar a classe do helper evita regra que casa com nada. */
.dp-faq__trigger .dp-icon {
  flex: 0 0 auto;
  transition: transform var(--dp-dur-fast) var(--dp-ease-out);
}

.dp-faq__trigger[aria-expanded="true"] .dp-icon { transform: rotate(180deg); }

.dp-faq__panel { padding-bottom: var(--dp-space-5); }
.dp-faq__panel[hidden] { display: none; }

.dp-faq__panel > * { max-width: 68ch; color: var(--dp-text-secondary); }

/* Sem JS o acordeão fica todo aberto, em vez de inalcançável. */
.dp-no-js .dp-faq__panel { display: block; }
.dp-no-js .dp-faq__trigger { cursor: default; }

/* ---- Card de área de atuação -------------------------------------------- */

.dp-elementor-area { height: 100%; }

.dp-area-card {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
  height: 100%;
  padding: var(--dp-space-6);
  background: var(--dp-surface-alt);
  border-radius: var(--dp-radius-card);
}

.dp-area-card__n {
  margin: 0;
  font-family: var(--dp-font-numeric);
  font-size: var(--dp-text-lg);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-accent-strategic);
}

.dp-area-card__title { margin: 0; font-size: var(--dp-text-xl); }
.dp-area-card__desc { margin: 0; color: var(--dp-text-secondary); }
.dp-area-card__link { margin-top: auto; padding-top: var(--dp-space-4); }

/* ---- Bloco de perfil ----------------------------------------------------- */

.dp-profile { display: grid; gap: var(--dp-space-6); }

@media (min-width: 768px) {
  .dp-profile { grid-template-columns: 260px 1fr; gap: var(--dp-space-8); }
}

.dp-profile__photo { margin: 0; }
.dp-profile__photo img { width: 100%; border-radius: var(--dp-radius-card); }
.dp-profile__name { margin: var(--dp-space-3) 0 var(--dp-space-2); font-size: var(--dp-text-2xl); }
.dp-profile__role { margin: 0 0 var(--dp-space-5); color: var(--dp-text-secondary); }
.dp-profile__oab { font-size: var(--dp-text-sm); color: var(--dp-text-secondary); }

/* ---- Lista de publicações (widget) --------------------------------------- */

/* O número de colunas vem do painel, por custom property inline no elemento. */
@media (min-width: 768px) {
  .dp-widget-posts.dp-posts--grade {
    grid-template-columns: repeat(var(--dp-widget-cols, 3), minmax(0, 1fr));
  }
}

/* No card do widget a estrutura vem do conteúdo, não de moldura: sem
   preenchimento, sem borda. O que separa um card do outro é o intervalo da
   grade — regra "sem molduras" do brand book. */
.dp-widget-posts.dp-posts--grade .dp-post {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-3);
  padding: 0;
  border: 0;
  /* `.dp-card` pinta --dp-surface-alt. Aqui o card e chapado sobre o fundo da
     secao: sem preenchimento, o off-white virava uma faixa cinza atras do texto
     que terminava onde a imagem terminava — parecia defeito, e era. */
  background: none;
}

.dp-widget-posts .dp-thumb { margin-bottom: var(--dp-space-2); }

.dp-widget-posts .dp-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* Data e categoria. Fica ACIMA do título, e é a única linha em azul do card —
   o azul aqui é sinal de "onde isto se encaixa", não decoração. */
.dp-cardmeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2) var(--dp-space-5);
  align-items: center;
  margin: 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-link);
}

.dp-cardmeta__item {
  display: inline-flex;
  gap: var(--dp-space-2);
  align-items: center;
}

.dp-cardmeta a { color: inherit; }
.dp-cardmeta a:hover { text-decoration: underline; }

/* O ícone acompanha o texto e não deve encolher no flex. */
.dp-cardmeta .dp-icon {
  flex: 0 0 auto;
  color: var(--dp-link);
}

.dp-widget-posts .dp-post__title {
  margin: 0;
  font-size: var(--dp-text-xl);
  line-height: var(--dp-leading-tight);
}

.dp-widget-posts .dp-post__excerpt {
  max-width: none;
  margin: 0;
  font-size: var(--dp-text-sm);
  color: var(--dp-text-secondary);
}

/* ---- Bloco de contato (widget) ------------------------------------------- */

.dp-elementor-contato--escuro {
  padding: var(--dp-space-7);
  color: var(--dp-text-on-dark-dim);
  background: var(--dp-surface-dark);
  border-radius: var(--dp-radius-card);
}

/* Sobre fundo claro, os tons do bloco escuro não servem: o rótulo perde
   contraste e o valor sumiria em branco sobre branco. */
.dp-elementor-contato:not(.dp-elementor-contato--escuro) .dp-contact__icon {
  color: var(--dp-accent-strategic);
  background: var(--dp-surface-alt);
}

.dp-elementor-contato:not(.dp-elementor-contato--escuro) .dp-contact__label {
  color: var(--dp-text-secondary);
}

.dp-elementor-contato:not(.dp-elementor-contato--escuro) .dp-contact__value {
  color: var(--dp-text-primary);
}

.dp-elementor-contato:not(.dp-elementor-contato--escuro) a.dp-contact__value:hover {
  color: var(--dp-link);
}

/* ---- Perfil sem retrato -------------------------------------------------- */

@media (min-width: 768px) {
  .dp-profile--sem-foto { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   3. Utilitários de opt-in
   Nesta versão do Elementor os widgets de heading, texto e imagem não têm mais
   controle de alinhamento — ele migrou para o container, que alinha a CAIXA,
   não o texto dentro dela. Estas classes são acionadas pelo campo "Classes CSS"
   do widget: opt-in explícito, nunca seletor global do tema sobre o builder.
   --------------------------------------------------------------------------- */

.dp-el-center { text-align: center; }
.dp-el-center .elementor-heading-title { text-align: center; }

/* Link dentro de conteudo do builder sobre fundo grafite.
   O azul de link do tema (--dp-link) da 3,02:1 sobre o grafite — reprova o
   minimo de 4,5:1 para texto. Aqui o link vira branco e GANHA sublinhado.

   O sublinhado nao e enfeite: sobre o grafite o corpo do texto e #D9DDE4 e o
   link e #FFFFFF, uma diferenca fraca demais para ser o unico sinal de que
   aquilo e clicavel (WCAG 1.4.1). O prefixo `.elementor` existe porque o
   proprio Elementor emite `.elementor a { text-decoration: none }`, de mesma
   especificidade — sem o prefixo, quem carrega por ultimo vence, e vence ele. */
.elementor .dp-el-on-dark a {
  color: var(--dp-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.elementor .dp-el-on-dark a:hover { color: var(--dp-accent-result); }

/* Cartão de identificação sobre a foto da abertura.
   A classe cai no WRAPPER do widget; o texto fica dentro de
   .elementor-widget-container > p, e é lá que o empilhamento precisa valer. */
/* A classe fica no proprio wrapper do widget; nesta versao nao ha
   .elementor-widget-container intermediario. */
.dp-el-namecard {
  display: inline-block;
  width: auto;
  padding: var(--dp-space-3) var(--dp-space-4);
  background: var(--dp-graphite-900);
  border-radius: var(--dp-radius-sm);
}

.dp-el-namecard > * { margin: 0; }

.dp-el-namecard__nome,
.dp-el-namecard__papel { display: block; }

.dp-el-namecard__nome {
  font-family: var(--dp-font-display);
  font-size: 16px;
  font-weight: var(--dp-weight-bold);
  letter-spacing: var(--dp-tracking-wide);
  line-height: 1.2;
  color: var(--dp-white);
}

.dp-el-namecard__papel {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-xs);
  line-height: 1.4;
  color: var(--dp-graphite-300);
}

.dp-el-namecard__handle { color: var(--dp-accent-strategic-dark); }

/* Botão secundário: fio, sem preenchimento.
   O widget de botão desta versão não expõe controle de borda — só o wrapper
   tem, e ali a borda envolveria a caixa inteira do widget, não o botão. Daí a
   classe utilitária, acionada pelo campo "Classes CSS". */
.dp-el-btn-outline .elementor-button {
  border: var(--dp-border-width) solid var(--dp-graphite-300);
}

.dp-el-btn-outline .elementor-button:hover {
  border-color: var(--dp-graphite-900);
}

/* ============================================================================
   BLOG NO THEME BUILDER — barra lateral ligada e desligada
   Um template so para cada location; o que muda e esta regra. O Elementor grava
   as larguras das colunas em porcentagem no CSS do proprio documento, entao o
   override precisa de !important — nao ha como vencer por especificidade uma
   regra que o construtor emite com id de elemento.
   ============================================================================ */

.dp-single-sem-barra .dp-el-barra,
.dp-arquivo-sem-barra .dp-el-barra { display: none; }

.dp-single-sem-barra .dp-el-conteudo,
.dp-arquivo-sem-barra .dp-el-conteudo { width: 100% !important; }

/* Sem barra o artigo nao deve esticar ate 1120px: 68ch e a medida de leitura
   do design system, e e ela que vale quando nada disputa a largura. */
.dp-single-sem-barra .dp-el-conteudo > .elementor-widget-theme-post-content {
  max-width: var(--dp-measure, 68ch);
  margin-inline: auto;
}

/* A barra acompanha a rolagem no desktop; no celular ela vai para baixo do
   conteudo e sticky nao faz sentido. */
@media (min-width: 1024px) {
  .dp-el-barra { position: sticky; top: calc(var(--dp-header-height) + var(--dp-space-5)); }
}