/* Ajustes do tema que não existem no SCSS do Next (fonte, WordPress e componentes refeitos sem React) */

body {
  font-family: "Lexend", sans-serif;
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* Barra do WordPress (só aparece logado) */
body.admin-bar .header-wrapper {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .header-wrapper {
    top: 46px;
  }
}

/* Ícones */
.drop-down-menu-chevron {
  display: inline-flex;
}
.faq-trigger .lucide-minus,
.faq-trigger.expanded .lucide-plus,
.header-menu-trigger .sc-icon-close,
body.sc-menu-open .header-menu-trigger .sc-icon-menu {
  display: none;
}
.faq-trigger.expanded .lucide-minus,
body.sc-menu-open .header-menu-trigger .sc-icon-close {
  display: inline;
}
.header-search-trigger {
  cursor: pointer;
}

/* Vídeos do YouTube no texto (o WordPress gera o iframe) */
.sc-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}
.sc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Busca */
.search-results-wrapper mark {
  background: none;
  color: inherit;
  font-weight: 600;
}

/* Antes e depois (o ReactCompareSlider do Next) */
.sc-compare {
  position: relative;
  overflow: hidden;
  width: 100%;
  user-select: none;
}
.sc-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.sc-compare .compare-images-before {
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.sc-compare input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 2;
}
.sc-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 1;
}
.sc-compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m9 18-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E")
    center no-repeat;
}

/* Imagem no texto: o bloco do WordPress usa <figure>; no Next a foto ficava solta e sobrava esse espaço embaixo */
.specialty-content .wp-block-image,
.post-content .wp-block-image {
  margin-bottom: 8px;
}

/* Bloco "Perguntas frequentes" no meio do texto (o do fim vira a seção .faq-wrapper) */
.sc-faq-inline {
  margin: 44px 0;
}
.sc-faq-inline .faq-title {
  margin: 0;
}
.sc-faq-inline .faq-content p {
  margin-bottom: 24px;
}

/* Bloco "Antes e depois" no meio do texto (o que abre o texto de um caso clínico vai para o topo) */
.sc-before-after-inline {
  margin: 44px 0;
}
.sc-before-after-inline .compare-images-wrapper {
  aspect-ratio: 16/9;
}
.sc-before-after-inline small {
  display: block;
  margin-top: 16px;
}