/*
 * Mattos & Mattos Advogados — CSS de Alta Prioridade
 * Carregado DEPOIS do Elementor (priority 999 no functions.php).
 * Aqui ficam apenas as regras que o Customizer não consegue aplicar.
 * Versão 2.0 — Junho 2026
 */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --mm-navy:       #0c1f3a;
  --mm-navy-dark:  #080f1e;
  --mm-gold:       #c9a04a;
  --mm-gold-lt:    #e0bc72;
  --mm-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --mm-tr:         0.25s var(--mm-ease);
}

/* ── 1. HEADER — BOTÕES CTA PRÓXIMOS ─────────────────────── */
/*
 * Reduz o gap entre "ÁREA RESTRITA" e "FALE CONOSCO".
 * O Elementor coloca cada botão em uma coluna separada
 * com flex: 1; este override força flex: 0 0 auto.
 */
.elementor-location-header .elementor-column:has(.elementor-widget-button) {
  flex: 0 0 auto !important;
  padding-left:  6px !important;
  padding-right: 6px !important;
}

/* Remove spacer enorme entre nav e botões */
.elementor-location-header .elementor-widget-spacer {
  min-width: 0 !important;
  max-width: 24px !important;
}

/* ── 2. HERO — FULL-BLEED (foto cobre tudo, texto sobreposto) */
/*
 * Converte o split 50/50 em full-bleed:
 * a coluna da foto vai position:absolute cobrindo o hero inteiro,
 * e a coluna de texto fica z-index:2 flutuando sobre ela.
 * Não usa body:not(.elementor-editor-active) para garantir
 * que funcione independente do Elementor editor.
 */

/* Seção hero: garante position:relative e overflow:hidden */
section.elementor-section:first-of-type {
  min-height: 100dvh !important;
  position: relative !important;
  overflow: hidden !important;
}
section.elementor-section:first-of-type > .elementor-container {
  min-height: 100dvh !important;
  align-items: stretch !important;
  position: relative !important;
}

/* Coluna da IMAGEM: absoluta, cobre tudo */
section.elementor-section:first-of-type
  .elementor-column:last-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
section.elementor-section:first-of-type
  .elementor-column:last-child
  .elementor-widget-wrap {
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
section.elementor-section:first-of-type
  .elementor-column:last-child
  .elementor-widget-image {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
}
section.elementor-section:first-of-type
  .elementor-column:last-child
  .elementor-widget-image a,
section.elementor-section:first-of-type
  .elementor-column:last-child
  .elementor-widget-image figure {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

/* Foto: Ken Burns + cobre tudo */
@keyframes mm-kenburns {
  0%   { transform: scale(1.00) translate(0, 0);         }
  40%  { transform: scale(1.07) translate(-1%, -0.8%);   }
  70%  { transform: scale(1.09) translate( 0.8%, -1.2%); }
  100% { transform: scale(1.00) translate(0, 0);         }
}
section.elementor-section:first-of-type
  .elementor-column:last-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  max-width: none !important;
  border-radius: 0 !important;
  animation: mm-kenburns 24s ease-in-out infinite !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

/* Overlay: forte à esquerda (legibilidade) + sutil embaixo */
section.elementor-section:first-of-type
  .elementor-column:last-child
  .elementor-widget-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(
      to right,
      rgba(8, 15, 30, 0.93) 0%,
      rgba(8, 15, 30, 0.72) 36%,
      rgba(8, 15, 30, 0.32) 62%,
      rgba(8, 15, 30, 0.10) 100%
    ),
    linear-gradient(
      to top,
      rgba(8, 15, 30, 0.55) 0%,
      transparent 35%
    ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Coluna de TEXTO: z-index alto, flutua à esquerda */
section.elementor-section:first-of-type
  .elementor-column:first-child {
  position: relative !important;
  z-index: 2 !important;
  width: 56% !important;
  max-width: 56% !important;
  display: flex !important;
  align-items: center !important;
  padding: 80px 60px !important;
  background: transparent !important;
  pointer-events: all !important;
}

/* Fade-in dos elementos do hero */
@keyframes mm-fadein {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
section.elementor-section:first-of-type
  .elementor-column:first-child
  .elementor-widget-heading:first-child {
  animation: mm-fadein 0.8s ease both;
  animation-delay: 0.3s;
}
section.elementor-section:first-of-type
  .elementor-column:first-child
  .elementor-heading-title.elementor-size-xxl,
section.elementor-section:first-of-type
  .elementor-column:first-child
  .elementor-heading-title.elementor-size-xl {
  animation: mm-fadein 0.9s ease both;
  animation-delay: 0.6s;
}
section.elementor-section:first-of-type
  .elementor-column:first-child
  .elementor-widget-text-editor {
  animation: mm-fadein 0.9s ease both;
  animation-delay: 0.95s;
}
section.elementor-section:first-of-type
  .elementor-column:first-child
  .elementor-widget-button {
  animation: mm-fadein 0.8s ease both;
  animation-delay: 1.25s;
}

@media (prefers-reduced-motion: reduce) {
  section.elementor-section:first-of-type .elementor-column:last-child img,
  section.elementor-section:first-of-type .elementor-column:first-child * {
    animation: none !important;
  }
}

/* ── 3. BOTÕES ELEMENTOR ─────────────────────────────────── */
.elementor-button,
a.elementor-button {
  transition: transform var(--mm-tr), box-shadow var(--mm-tr) !important;
}
.elementor-button:hover,
a.elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(201, 160, 74, 0.28) !important;
}
.elementor-button:active,
a.elementor-button:active {
  transform: scale(0.98) !important;
}

/* ── 4. CARDS DE ÁREAS ───────────────────────────────────── */
.elementor-widget-icon-box {
  transition: transform var(--mm-tr), box-shadow var(--mm-tr) !important;
  border-radius: 6px !important;
}
.elementor-widget-icon-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.14) !important;
}

/* ── 5. ÁREA RESTRITA — HERO DO PLUGIN ───────────────────── */
.cnj-hero {
  background: linear-gradient(160deg, #0B3D6B 0%, #1a2744 55%, #111c33 100%) !important;
}
.cnj-hero::before {
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,255,255,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(201,160,74,.10) 0%, transparent 70%) !important;
}
.cnj-hero-icon {
  width: 48px !important; height: 48px !important;
  background: rgba(201,160,74,.12) !important;
  border: 1px solid rgba(201,160,74,.32) !important;
  position: relative !important;
}
.cnj-hero-icon svg { display: none !important; }
.cnj-hero-icon::after {
  content: '' !important;
  position: absolute !important; inset: 5px !important;
  background-image: url('https://mattosemattosadvogados.com.br/wp-content/uploads/2026/03/Logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: grayscale(1) brightness(0) invert(1) sepia(1) saturate(2.5) brightness(.90) !important;
}
.cnj-hero-stats {
  background: rgba(201,160,74,.10) !important;
  border-color: rgba(201,160,74,.28) !important;
}
.cnj-hero-logout {
  color: rgba(201,160,74,.80) !important;
  border-color: rgba(201,160,74,.22) !important;
  transition: color var(--mm-tr), background var(--mm-tr) !important;
}
.cnj-hero-logout:hover {
  color: var(--mm-gold-lt) !important;
  background: rgba(201,160,74,.08) !important;
}

/* ── 6. ÁREA RESTRITA — LOGIN ────────────────────────────── */
.cnj-login-logo {
  width: 220px !important; height: 72px !important;
  background-image: url('https://mattosemattosadvogados.com.br/wp-content/uploads/2026/05/Logo-nome.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin: 0 auto 20px !important;
}
.cnj-login-logo svg { display: none !important; }
.cnj-login-btn {
  background: #1a2744 !important;
  border-color: #1a2744 !important;
  transition: background var(--mm-tr), transform var(--mm-tr) !important;
}
.cnj-login-btn:hover {
  background: #0B3D6B !important;
  transform: translateY(-1px) !important;
}

/* ── 7. ÁREA RESTRITA — 3 COLUNAS ───────────────────────── */
.cnj-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1200px) {
  .cnj-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  .cnj-grid { grid-template-columns: 1fr !important; }
}
.cnj-grid > * {
  transition: box-shadow var(--mm-tr), transform var(--mm-tr) !important;
}
.cnj-grid > *:hover {
  box-shadow: 0 10px 28px rgba(26,39,68,.15) !important;
  transform: translateY(-3px) !important;
}
.cnj-item-lista {
  transition: box-shadow var(--mm-tr), transform var(--mm-tr) !important;
}
.cnj-item-lista:hover {
  box-shadow: 0 8px 24px rgba(11,61,107,.14) !important;
  transform: translateY(-2px) !important;
}
.cnj-item-tribunal, .cnj-modal-trib-badge {
  background: #1a2744 !important;
  color: #fff !important;
}
.cnj-busca-campo-wrap:focus-within {
  border-color: var(--mm-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,160,74,.16) !important;
}
.cnj-pag-btn.ativo { background: #1a2744 !important; border-color: #1a2744 !important; }
.cnj-novidades-banner-btn {
  background: var(--mm-gold) !important;
  color: #1a2744 !important;
  font-weight: 700 !important;
}
.cnj-novidades-banner-btn:hover { background: var(--mm-gold-lt) !important; }
.cnj-card-ia-btn:hover {
  box-shadow: 0 4px 16px rgba(201,160,74,.28) !important;
  transform: translateY(-1px) !important;
}

/* ── 8. CRIAR PEÇA — CORREÇÕES ───────────────────────────── */
#cnj-upload-btn, .cnj-btn-upload {
  background: #1E293B !important;
  color: #C9A84C !important;
  border-color: rgba(201,160,74,.35) !important;
}
#cnj-upload-btn:hover, .cnj-btn-upload:hover {
  background: #0d1e3a !important;
  border-color: #C9A84C !important;
}
.cnj-chat-input:focus {
  border-color: #1a2744 !important;
  box-shadow: 0 0 0 3px rgba(26,39,68,.08) !important;
  outline: none !important;
}
.cnj-btn-enviar {
  background: #1a2744 !important;
  transition: background var(--mm-tr), transform var(--mm-tr) !important;
}
.cnj-btn-enviar:hover { background: #0B3D6B !important; transform: translateY(-1px) !important; }
.cnj-btn-voltar { border-color: rgba(26,39,68,.25) !important; color: #1a2744 !important; }
.cnj-btn-voltar:hover { background: #1a2744 !important; color: #fff !important; }

/* ── 9. MOBILE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  section.elementor-section:first-of-type .elementor-column:last-child {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    pointer-events: auto !important;
  }
  section.elementor-section:first-of-type .elementor-column:first-child {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 24px !important;
    background: linear-gradient(180deg, #0c1f3a 60%, rgba(12,31,58,0)) !important;
  }
  section.elementor-section:first-of-type .elementor-column:last-child img {
    height: 55vw !important;
    animation-duration: 28s !important;
  }
  section.elementor-section:first-of-type .elementor-column:last-child .elementor-widget-image::after {
    background: linear-gradient(to bottom, rgba(8,15,30,.70) 0%, rgba(8,15,30,.20) 60%, transparent 100%) !important;
  }
  .cnj-grid { grid-template-columns: 1fr !important; }
  .cnj-grid > *:hover, .cnj-item-lista:hover { transform: none !important; }
}