/* Header FA v2 · ajustes de 06/11/2026 (carrega em todas as páginas, incluindo a inicial)
   1. Logótipo sempre nas cores originais.
   2. Sobre o vídeo da página inicial: barra de vidro petróleo escuro; as letras coloridas ficam como são e só a linha
      "Prof. Doutor Fernando Almeida" (preta no ficheiro) passa a branco, recortada do próprio logótipo.
   3. Ao passar o rato pelo header sobre o vídeo (computador): a barra passa a vidro branco, com o logótipo original.
   O logótipo tem as letras coloridas nas linhas 0 a 29 e a linha preta nas linhas 40 a 49 (de 50): corte aos 70%. */

html body header.top_panel_custom .elementor-element-88e3712 img { filter: none !important; }
html body header.top_panel_custom .elementor-element-88e3712 a { position: relative; display: inline-block; line-height: 0; }
html body header.top_panel_custom .elementor-element-88e3712 a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: url("/wp-content/uploads/2026/06/cropped-Clinicas-Dentarias-FA-Logo.png") no-repeat 0 0 / 100% 100%;
  filter: brightness(0) invert(1); clip-path: inset(70% 0 0 0);
  transition: opacity 0.35s ease;
}

/* Sobre o vídeo: petróleo escuro */
html:not(.fh-h-scrolled) body.home header.top_panel_custom,
html:not(.fh-h-scrolled) body.page-id-24793 header.top_panel_custom {
  --fa-bar-bg: rgba(14, 36, 43, 0.88) !important;
}

/* Sobre o vídeo: linha do nome a branco (telemóvel e ecrãs tácteis: sempre) */
@media (hover: none) {
  html:not(.fh-h-scrolled) body.home header.top_panel_custom .elementor-element-88e3712 img,
  html:not(.fh-h-scrolled) body.page-id-24793 header.top_panel_custom .elementor-element-88e3712 img { clip-path: inset(0 0 30% 0); }
  html:not(.fh-h-scrolled) body.home header.top_panel_custom .elementor-element-88e3712 a::after,
  html:not(.fh-h-scrolled) body.page-id-24793 header.top_panel_custom .elementor-element-88e3712 a::after { opacity: 1; }
}

/* Computador: linha do nome a branco enquanto o rato não está no header; com o rato, vidro branco */
@media (hover: hover) {
  html:not(.fh-h-scrolled) body.home header.top_panel_custom:not(:hover) .elementor-element-88e3712 img,
  html:not(.fh-h-scrolled) body.page-id-24793 header.top_panel_custom:not(:hover) .elementor-element-88e3712 img { clip-path: inset(0 0 30% 0); }
  html:not(.fh-h-scrolled) body.home header.top_panel_custom:not(:hover) .elementor-element-88e3712 a::after,
  html:not(.fh-h-scrolled) body.page-id-24793 header.top_panel_custom:not(:hover) .elementor-element-88e3712 a::after { opacity: 1; }

  html:not(.fh-h-scrolled) body.home header.top_panel_custom:hover,
  html:not(.fh-h-scrolled) body.page-id-24793 header.top_panel_custom:hover {
    --fa-bar-bg: rgba(255, 255, 255, 0.86) !important;
    --fa-bar-line: rgba(23, 50, 59, 0.09) !important;
    --fa-bar-shadow: 0 14px 40px rgba(14, 36, 43, 0.10) !important;
    --fa-fg: #17323B !important;
    --fa-burger: #17323B !important;
  }
}

/* 4. Painel aberto (com o rato ou com toque): barra em vidro branco e menu legível, também sobre o vídeo */
html body header.top_panel_custom:has(.sc_layouts_menu_nav > li.menu-item-has-children:hover),
html body header.top_panel_custom:has(.sc_layouts_menu_nav > li.sfHover) {
  --fa-bar-bg: rgba(255, 255, 255, 0.96) !important;
  --fa-bar-line: rgba(23, 50, 59, 0.09) !important;
  --fa-bar-shadow: none !important;
  --fa-fg: #17323B !important;
  --fa-burger: #17323B !important;
}
html body header.top_panel_custom:has(.sc_layouts_menu_nav > li.menu-item-has-children:hover) .elementor-element-88e3712 img,
html body header.top_panel_custom:has(.sc_layouts_menu_nav > li.sfHover) .elementor-element-88e3712 img { clip-path: none !important; }
html body header.top_panel_custom:has(.sc_layouts_menu_nav > li.menu-item-has-children:hover) .elementor-element-88e3712 a::after,
html body header.top_panel_custom:has(.sc_layouts_menu_nav > li.sfHover) .elementor-element-88e3712 a::after { opacity: 0 !important; }

/* 5. Ao rolar: a faixa dos telefones recolhe, mas o menu fica sempre visível */
html.fh-h-hidden body header.top_panel_custom > .elementor { transform: none !important; }

/* 6. Tratamentos: o painel cresce sozinho com o número de tratamentos do menu (2 colunas, as linhas que forem precisas) */
html body header.top_panel_custom li.fh-mega-tratamentos > ul.sub-menu { grid-template-rows: none !important; }
html body header.top_panel_custom li.fh-mega-tratamentos > ul.sub-menu > li.fh-mega-head,
html body header.top_panel_custom li.fh-mega-tratamentos > ul.sub-menu > li.fh-mega-aside { grid-row: 1 / span 12 !important; }
html body header.top_panel_custom ul.sub-menu > li:nth-child(n+7) { animation: fa-in 0.5s var(--fa-ease) 0.28s both; }

/* 7. Cartão "Marque a sua consulta" dos painéis: botão ao passar o rato em branco com texto petróleo (o tema punha o texto a branco) */
html body header.top_panel_custom ul.sub-menu li.fh-mega-aside a.fh-marcar:hover,
html body header.top_panel_custom ul.sub-menu li.fh-mega-aside a.fh-marcar:focus-visible {
  background: #FFFFFF !important; color: #17323B !important;
}
html body header.top_panel_custom ul.sub-menu li.fh-mega-aside a.fh-marcar:hover::after { color: #F58320 !important; }

/* 8. Logótipo do rodapé a cores: letras coloridas como são, linha "Prof. Doutor Fernando Almeida" a branco (corte aos 70%) */
html body footer.footer_custom_20415 .elementor-element-c6a38ee img { filter: none !important; clip-path: inset(0 0 30% 0); }
html body footer.footer_custom_20415 .elementor-element-c6a38ee a { position: relative; display: inline-block; line-height: 0; }
html body footer.footer_custom_20415 .elementor-element-c6a38ee a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/wp-content/uploads/2026/06/Clinicas-Dentarias-FA-Logo.png") no-repeat 0 0 / 100% 100%;
  filter: brightness(0) invert(1); clip-path: inset(70% 0 0 0);
}

/* 9. Telefones: * rede fixa, ** rede móvel (marcas e legenda criadas pelo whatsapp-fa.js) */
.fa-tel-ast { font-size: 0.8em; margin-left: 1px; vertical-align: super; line-height: 0; }
.fa-tel-legenda {
  margin: 0; padding: 18px var(--fa-gx, 24px) 26px; text-align: center;
  font: 400 12px/1.6 Roboto, system-ui, sans-serif; color: rgba(255, 255, 255, 0.62);
}

/* 10. Botão "Início" (voltar ao topo): na página inicial o CSS antigo dentro da página mostrava "Início" */
html body .trx_addons_scroll_to_top.scroll_to_top_style_modern .scroll_to_top_text::before { content: "In\0000EDcio" !important; }