/* ============================================================
   styles.css — extras que não cabem bem no Tailwind inline
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- LOGO ----------
   Os arquivos assets/logo.png e assets/logo-dark.png já foram
   pré-cortados para mostrar apenas "Dr. Müller Azevedo" (sem a
   faixa "MÉDICO · PSIQUIATRIA"), em conformidade com a Resolução
   CFM 2.336/2023.

   Para trocar a logo: substitua os PNGs em assets/ por versões
   que mostrem apenas o nome (sem rótulo de especialidade).
   ------------------------------------------------- */
.logo-clip {
  display: inline-block;
  line-height: 0;
}

.logo-clip img {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
}

@media (min-width: 1024px) {
  .logo-clip img {
    height: 52px;
  }
}

/* Logo no rodapé — versão preta invertida para branco via filter. */
footer .logo-clip img {
  height: 56px;
}
.invert-logo img {
  filter: invert(1) brightness(1.15);
}

/* ---------- HERO BACKGROUND ----------
   Foto institucional em assets/hero.jpg, enquadrada à direita.
   Overlay escuro do lado esquerdo dá legibilidade ao texto branco
   e mantém o ar premium da paleta (#202020).
   ------------------------------------------------- */
.hero-bg {
  background-color: #202020;
  background-image: url("assets/hero.jpg");
  background-size: cover;
  /* horizontal: 65% puxa para a direita o suficiente para o rosto
     ficar fora do gradiente escuro à esquerda; vertical: 12% sobe
     o enquadramento para mostrar rosto + ombros (a foto é retrato
     4024x6048, sem este offset o cover mostra apenas o tórax). */
  background-position: 65% 12%;
  background-repeat: no-repeat;
}

.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(32, 32, 32, 0.92) 0%,
    rgba(32, 32, 32, 0.78) 40%,
    rgba(32, 32, 32, 0.35) 70%,
    rgba(32, 32, 32, 0.05) 100%
  );
}

/* No mobile mostramos o rosto centralizado horizontalmente e no topo. */
@media (max-width: 767px) {
  .hero-bg {
    background-position: 55% 8%;
  }
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(32, 32, 32, 0.88) 0%,
      rgba(32, 32, 32, 0.7) 100%
    );
  }
}

/* ---------- SCROLL INDICATOR (hero) ----------
   Pequena seta animada no rodapé do hero, convidando a rolar.
   ------------------------------------------------- */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible {
  color: #a48560;
}

.scroll-indicator__label {
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.scroll-indicator__chevron {
  display: inline-block;
  animation: scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator__chevron {
    animation: none;
  }
}

/* ---------- DETAILS / FAQ ----------
   Esconde a setinha nativa do <summary> em todos os browsers. */
summary::-webkit-details-marker {
  display: none;
}
summary {
  outline: none;
}

/* ---------- FOCUS VISIBLE ----------
   Acessibilidade: navegação por teclado com contorno dourado. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #a48560;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- IMAGENS ---------- */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- REDUÇÃO DE MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}