/* ==========================================================================
   60 · THEME BUILDER (header e footer globais)

   O Divi gera CSS por instancia de modulo, com seletor do tipo
   .et_pb_menu_0_tb_header .et-menu li a { color: #000 }
   Isso ganha de qualquer seletor de classe do tema. Por isso aqui,
   e SO aqui, o !important e legitimo: e a unica forma de devolver o
   controle da cor para as variaveis de modo.

   Os layouts do Theme Builder vivem dentro de .et-l--header / .et-l--footer.
   ========================================================================== */

/* --- ESTRUTURA -----------------------------------------------------------
   Seções e linhas ficam transparentes para o fundo do body aparecer.
   A cor e a borda passam a morar no wrapper. */
.et-l--header,
.et-l--footer{
  background-color: var(--mf-bg) !important;
  transition: background-color .45s ease;
}
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row,
.et-l--footer .et_pb_column{
  background-color: transparent !important;
}

.et-l--header{ border-bottom: 2px solid var(--mf-ink) !important; box-shadow: none !important; }
.et-l--footer{ border-top: 1px solid var(--mf-line) !important; }

/* estado sticky: o Divi troca o fundo sozinho quando o header gruda */
.et-l--header .et_pb_sticky,
.et-l--header .et_pb_section.et_pb_sticky_module{
  background-color: var(--mf-bg) !important;
}

/* --- TEXTO E LINKS DO MENU ----------------------------------------------- */
.et-l--header .et_pb_menu .et-menu > li > a,
.et-l--header .et_pb_menu .et-menu li a,
.et-l--header .et_pb_menu__wrap .et-menu li a,
.et-l--header .et_pb_text,
.et-l--header .et_pb_text *,
.et-l--header p,
.et-l--header h1,
.et-l--header h2,
.et-l--header h3,
.et-l--footer .et_pb_text,
.et-l--footer .et_pb_text *,
.et-l--footer p{
  color: var(--mf-ink) !important;
}

.et-l--header .et_pb_menu .et-menu li a{
  font-family: var(--mf-font-mono) !important;
  font-size: .66rem !important;
  font-weight: 500 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.et-l--header .et_pb_menu .et-menu li a:hover,
.et-l--header .et_pb_menu .et-menu li.current-menu-item > a,
.et-l--header .et_pb_menu .et-menu li.current_page_item > a{
  color: var(--mf-rosa) !important;
  opacity: 1 !important;
}
html[data-mf-modo="cidade"] .et-l--header .et_pb_menu .et-menu li.current-menu-item > a{
  text-shadow: 0 0 18px rgba(255, 46, 136, .6);
}

/* o sublinhado animado nativo do Divi nao combina com o sistema */
.et-l--header .et_pb_menu .et-menu li a::after{ display: none !important; }

/* --- SUBMENU ------------------------------------------------------------- */
.et-l--header .et_pb_menu .et-menu li ul.sub-menu,
.et-l--header .nav li ul{
  background-color: var(--mf-surface) !important;
  border: 1px solid var(--mf-line) !important;
  border-top: 3px solid var(--mf-rosa) !important;
  box-shadow: var(--mf-shadow) !important;
}
.et-l--header .et_pb_menu .sub-menu li a{
  color: var(--mf-ink) !important;
  text-transform: none !important;
  letter-spacing: .04em !important;
}

/* --- MENU MOBILE ---------------------------------------------------------
   E aqui que o preto-no-preto costuma sobreviver: o Divi pinta o painel
   mobile separado do menu de desktop. */
.et-l--header .et_mobile_menu,
.et-l--header .et_pb_menu .et_mobile_menu{
  background-color: var(--mf-surface) !important;
  border-top: 3px solid var(--mf-rosa) !important;
  box-shadow: var(--mf-shadow) !important;
}
.et-l--header .et_mobile_menu li a{
  color: var(--mf-ink) !important;
  border-bottom: 1px solid var(--mf-line) !important;
}
.et-l--header .mobile_menu_bar::before,
.et-l--header .mobile_menu_bar::after,
.et-l--header .et_pb_menu__icon,
.et-l--header .et_pb_menu__search-button,
.et-l--header .et_pb_menu__close-search-button{
  color: var(--mf-rosa) !important;
}

/* --- BUSCA --------------------------------------------------------------- */
.et-l--header .et_pb_menu__search-input,
.et-l--header .et_pb_searchform input{
  background-color: transparent !important;
  color: var(--mf-ink) !important;
  border-bottom: 1px solid var(--mf-line) !important;
}
.et-l--header .et_pb_menu__search-input::placeholder{ color: var(--mf-muted) !important; }

/* --- MARCA ---------------------------------------------------------------
   O SVG usa currentColor nas linhas de vida. Se o modulo pai tiver cor
   fixa, a marca some no escuro. Aqui ela volta a seguir o modo. */
.et-l--header .mf-marca,
.et-l--header .mf-marca__nome,
.et-l--footer .mf-marca,
.et-l--footer .mf-marca__nome{
  color: var(--mf-ink) !important;
}
.et-l--header .mf-marca__nome small{ color: var(--mf-muted) !important; }
.et-l--header .mf-marca svg line:not([stroke="#FF2E88"]):not([stroke="#00CFE0"]){
  stroke: currentColor;
}

/* --- LOGO EM IMAGEM ------------------------------------------------------
   Se voce mantiver um PNG/SVG de arquivo no lugar do shortcode, use a
   classe  mf-logo-inverte  no modulo Imagem para ele nao sumir no escuro. */
html[data-mf-modo="cidade"] .mf-logo-inverte img{ filter: invert(1) hue-rotate(180deg); }

/* --- RODAPE -------------------------------------------------------------- */
.et-l--footer .et_pb_menu .et-menu li a,
.et-l--footer a{ color: var(--mf-muted) !important; }
.et-l--footer a:hover{ color: var(--mf-rosa) !important; }