/* ==========================================================================
   HM2 LAYOUT: FUNDOS DE SEÇÃO
   -------------------------------------------------------------------------
   Fundos 1–3: universais e fixos (iguais em todos os modelos e paletas).
   Fundos 4–6: controlados pela paleta ativa via variáveis CSS:
     • Fundo 4 → --hm2-surface-light  (claro:  slot 4 da paleta)
     • Fundo 5 → --hm2-surface-medium (médio:  slot 5 — sempre cor clara/média)
     • Fundo 6 → --hm2-surface-dark   (escuro: slot 6 — sempre cor escura)

   CONVENÇÃO de paletas:
     Slot 5 deve ser sempre uma cor média/clara → suporta texto escuro.
     Slot 6 deve ser sempre uma cor escura      → recebe tratamento de
     contraste automático (texto e fios brancos).

   Especificidade: .layout.lp-fundo-N vence os fundos hardcoded das dobras.
   ========================================================================== */

/* ==========================================================================
   TOKENS DE CONTRASTE — adaptam o conteúdo ao fundo da seção
   -------------------------------------------------------------------------
   Dobras usam var(--hm2-on-surface-*) em vez de cores hardcoded.
   Aqui definimos os valores para fundos claros (padrão) e os sobrescrevemos
   para fundos escuros (lp-fundo-3 e lp-fundo-6).
   ========================================================================== */

/* Padrão e fundos claros (1=branco, 2=cinza, 4=claro custom, 5=médio custom) */
body:not(.path-admin) .layout,
body:not(.path-admin) .layout.lp-fundo-1,
body:not(.path-admin) .layout.lp-fundo-2,
body:not(.path-admin) .layout.lp-fundo-4,
body:not(.path-admin) .layout.lp-fundo-5,
body:not(.path-admin) .secao-site,
body:not(.path-admin) .secao-site.lp-fundo-1,
body:not(.path-admin) .secao-site.lp-fundo-2,
body:not(.path-admin) .secao-site.lp-fundo-4,
body:not(.path-admin) .secao-site.lp-fundo-5 {
  --hm2-on-surface:             #111827;
  --hm2-on-surface-muted:       #6b7280;
  --hm2-on-surface-title:       var(--hm2-heading-color, #0c2461);
  --hm2-on-surface-card-bg:     #ffffff;
  --hm2-on-surface-card-border: #e2e8f0;
  --hm2-on-surface-card-shadow: rgba(26, 86, 219, 0.06);
  --hm2-on-surface-accent:      var(--bs-primary, #1a56db);
  --hm2-on-surface-accent-hover: var(--bs-link-hover-color, #1040a8);
  --hm2-on-surface-accent-muted: rgba(26, 86, 219, 0.08);
  --hm2-on-surface-icon-bg:     rgba(26, 86, 219, 0.10);
  --hm2-on-surface-icon-border: rgba(26, 86, 219, 0.20);
  --hm2-on-surface-photo-border: rgba(0, 0, 0, 0.12);
  --hm2-on-surface-cargo:       var(--bs-primary, #1a56db);
  --hm2-on-surface-divider:     #e2e8f0;
}

/* Fundos escuros (3=preto, 6=cor escura da paleta) */
body:not(.path-admin) .layout.lp-fundo-3,
body:not(.path-admin) .layout.lp-fundo-6,
body:not(.path-admin) .secao-site.lp-fundo-3,
body:not(.path-admin) .secao-site.lp-fundo-6 {
  --hm2-on-surface:             #ffffff;
  --hm2-on-surface-muted:       rgba(255, 255, 255, 0.72);
  --hm2-on-surface-title:       #ffffff;
  --hm2-on-surface-card-bg:     rgba(255, 255, 255, 0.06);
  --hm2-on-surface-card-border: rgba(255, 255, 255, 0.18);
  --hm2-on-surface-card-shadow: rgba(0, 0, 0, 0.25);
  --hm2-on-surface-accent:      rgba(255, 255, 255, 0.90);
  --hm2-on-surface-accent-hover: #ffffff;
  --hm2-on-surface-accent-muted: rgba(255, 255, 255, 0.12);
  --hm2-on-surface-icon-bg:     rgba(255, 255, 255, 0.15);
  --hm2-on-surface-icon-border: rgba(255, 255, 255, 0.25);
  --hm2-on-surface-photo-border: rgba(255, 255, 255, 0.25);
  --hm2-on-surface-cargo:       #93c5fd;
  --hm2-on-surface-divider:     rgba(255, 255, 255, 0.18);
}

/* --- Variáveis padrão (sobrescritas pela paleta ativa via --hm2-surface-*) --- */
:root {
  --hm2-surface-light:  #faf6f1;
  --hm2-surface-medium: #e8d5be;
  --hm2-surface-dark:   #5c4228;
}

/* ==========================================================================
   FUNDOS UNIVERSAIS (fixos — independem de paleta)
   ========================================================================== */

/* Fundo 1 — Branco */
body:not(.path-admin) .layout.lp-fundo-1,
body:not(.path-admin) .secao-site.lp-fundo-1 {
  background-color: #ffffff !important;
}

/* Fundo 2 — Cinza muito claro (neutro) */
body:not(.path-admin) .layout.lp-fundo-2,
body:not(.path-admin) .secao-site.lp-fundo-2 {
  background-color: #f5f5f5 !important;
}

/* Fundo 3 — Preto */
body:not(.path-admin) .layout.lp-fundo-3,
body:not(.path-admin) .secao-site.lp-fundo-3 {
  background-color: #111111 !important;
}

/* ==========================================================================
   FUNDOS PERSONALIZADOS (valor vem da paleta ativa)
   ========================================================================== */

/* Fundo 4 — Claro */
body:not(.path-admin) .layout.lp-fundo-4,
body:not(.path-admin) .secao-site.lp-fundo-4 {
  background-color: var(--hm2-surface-light) !important;
}

/* Fundo 5 — Médio (paleta deve sempre usar cor clara/média aqui) */
body:not(.path-admin) .layout.lp-fundo-5,
body:not(.path-admin) .secao-site.lp-fundo-5 {
  background-color: var(--hm2-surface-medium) !important;
}

/* Fundo 6 — Escuro (paleta deve sempre usar cor escura aqui) */
body:not(.path-admin) .layout.lp-fundo-6,
body:not(.path-admin) .secao-site.lp-fundo-6 {
  background-color: var(--hm2-surface-dark) !important;
}

/* ==========================================================================
   CONTRASTE EM FUNDOS ESCUROS — fundo-3 (preto fixo) e fundo-6 (escuro)
   -------------------------------------------------------------------------
   Estes seletores usam especificidade .layout.lp-fundo-N + elemento-alvo,
   o que garante vitória sobre os injectors de dobra (20–90) mesmo quando
   este arquivo é carregado antes deles.
   ========================================================================== */

/* ── Título de seção ────────────────────────────────────────────────────── */
body:not(.path-admin) .layout.lp-fundo-3 .lp-section__titulo,
body:not(.path-admin) .layout.lp-fundo-6 .lp-section__titulo {
  color: #ffffff !important;
}

/* ── Subtítulo/descrição de seção ──────────────────────────────────────── */
body:not(.path-admin) .layout.lp-fundo-3 .lp-section__descricao,
body:not(.path-admin) .layout.lp-fundo-6 .lp-section__descricao {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── "Fio" decorativo abaixo do título (::after) ───────────────────────── */
body:not(.path-admin) .layout.lp-fundo-3 .lp-section__titulo::after {
  background-color: var(--bs-primary, #9d7b53) !important;
}

body:not(.path-admin) .layout.lp-fundo-6 .lp-section__titulo::after {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

/* ── Formulário de contato ─────────────────────────────────────────────── */
/* O bloco de contato tem fundo transparente; em seções escuras o texto
   hardcoded nos injectors de dobra ficaria invisível sem estas regras.
   A especificidade extra (.layout.lp-fundo-N .block-*) vence o dobra CSS. */

body:not(.path-admin) .layout.lp-fundo-3 .block-hm2-contact-form h2,
body:not(.path-admin) .layout.lp-fundo-6 .block-hm2-contact-form h2 {
  color: #ffffff !important;
}

body:not(.path-admin) .layout.lp-fundo-3 .block-hm2-contact-form label,
body:not(.path-admin) .layout.lp-fundo-6 .block-hm2-contact-form label {
  color: rgba(255, 255, 255, 0.9) !important;
}

body:not(.path-admin) .layout.lp-fundo-3 .block-hm2-contact-form input.btn-secondary,
body:not(.path-admin) .layout.lp-fundo-6 .block-hm2-contact-form input.btn-secondary {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ==========================================================================
   AJUSTES ESPECÍFICOS DE DOBRA EM FUNDOS ESCUROS
   ========================================================================== */

/* Badges Planos de Saúde sobre fundo escuro (fundo-3 e fundo-6) */
body:not(.path-admin) .layout.lp-fundo-3 .view-hm2-lp-planos-saude .views-row,
body:not(.path-admin) .layout.lp-fundo-6 .view-hm2-lp-planos-saude .views-row {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

body:not(.path-admin) .layout.lp-fundo-3 .view-hm2-lp-planos-saude .views-field-title .field-content,
body:not(.path-admin) .layout.lp-fundo-3 .view-hm2-lp-planos-saude .views-field-title a,
body:not(.path-admin) .layout.lp-fundo-6 .view-hm2-lp-planos-saude .views-field-title .field-content,
body:not(.path-admin) .layout.lp-fundo-6 .view-hm2-lp-planos-saude .views-field-title a {
  color: #ffffff !important;
}