/*
  Camada final de tipografia - iClinic Fortaleza
  Versão F aprovada pela proprietária em 2026-10-02 (ver COLABORACAO/DECISOES.md).

  - Mantém Outfit (títulos) + Figtree (texto).
  - Títulos em peso 550, espaçamento entre letras quase neutro e linhas mais abertas.
  - Selos acima dos títulos sem caixa alta, sem espaçamento largo e sem pílula.
  - Tamanho máximo para H1 de topo e H2 de seção; tamanho mínimo legível no celular.

  Este arquivo é carregado por último em todas as páginas. O prefixo html:not(#tipografia-iclinic):not(#tipografia-iclinic-b)
  dá a estas regras prioridade sobre as regras antigas de production.css (que usam !important e
  seletores por página), sem precisar alterar aquele arquivo. Para ajustar a tipografia do site,
  edite aqui.
*/

/* 1. Títulos: peso, espaçamento e altura de linha (site, área de membros e admin) */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) :is(h1, h2, h3) {
  font-weight: 550 !important;
  letter-spacing: -0.01em !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) h1 { line-height: 1.12 !important; }
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) h2 { line-height: 1.18 !important; }
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) h3 { line-height: 1.3 !important; letter-spacing: -0.005em !important; }

/* 2. H1 de topo das páginas públicas: até 50px no desktop, 32px no celular */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) body:not(.members-page):not(.admin-page) h1 {
  font-size: clamp(32px, calc(1.6vw + 27px), 50px) !important;
}

/* 3. H2 de abertura de seção nas páginas públicas: até 36px no desktop, 26px no celular */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) body:not(.members-page):not(.admin-page) :is(
  .section-title,
  .cta,
  .home-about,
  .home-tests-teaser-copy,
  .location-copy,
  .service-form-section,
  .psychiatry-prescription-copy,
  .online-process-copy,
  .home-team-teaser,
  .psychiatry-about,
  .speech-connection,
  .speech-editorial,
  .digital-sales-identification,
  .specialty-final-cta,
  .psychiatry-final-cta,
  .home-final-cta-section,
  .blog-offers-heading,
  .blog-section-heading,
  .blog-bottom-ad,
  .blog-care-cta,
  .neuro-deliverables,
  .sales-story
) h2 {
  font-size: clamp(26px, calc(0.9vw + 23px), 36px) !important;
}

/* 3b. H2 dentro de texto corrido (artigos do blog e blocos de conteúdo) */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .page-blog-article main section > .container > h2,
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .article-content > h2 {
  font-size: clamp(24px, calc(0.6vw + 21px), 30px) !important;
}

/* 4. Selos acima dos títulos: texto simples, sem caixa alta e sem pílula */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) :is(.eyebrow, .consulting-eyebrow, .blog-kicker, .section-kicker, .hero-kicker, .member-product-kicker) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 5. Texto de abertura e de cards nas páginas públicas */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) body:not(.members-page):not(.admin-page) :is(.hero, .page-hero, .assessment-hero, .consulting-hero, .psych-hero, .speech-hero, .digital-sales-hero-copy, .blog-hub-intro) p {
  font-size: 18px !important;
  line-height: 1.6 !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) :is(.home-specialty-card, .home-pain-card, .review-static-card) p {
  font-size: 15px !important;
  line-height: 1.55 !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) :is(.specialty-visual-card, .speech-signal-grid article, .speech-domain-grid article, .speech-audience-grid article, .speech-step-grid article, .online-process-list article) p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) :is(.mini-team-legal-notice, .team-legal-notice, .blog-card-meta, .digital-sales-tour-note) {
  font-size: 13px !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) :is(.home-card-link, .home-pain-wa) {
  font-weight: 600 !important;
}

/* 6. Menu principal: menos negrito */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header .menu > a:not(.btn),
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header .menu .dropdown > a {
  font-weight: 600 !important;
}

/* 8. Avaliações reais do Google (texto literal, nome abreviado) */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-real-card {
  display: flex !important;
  flex-direction: column !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-real-card .review-quote {
  margin: 10px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  flex: 1 1 auto;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-real-card .review-quote p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-style: normal !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-real-card .review-author {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-real-card .review-author span {
  display: block;
  font-size: 13px;
  opacity: .75;
}
/* Celular e tablet pequeno: avaliações em carrossel deslizante, um card por vez */
@media (max-width: 760px) {
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-static-grid:has(.review-real-card) {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 12px !important;
    scrollbar-width: thin;
  }
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-static-grid .review-real-card {
    flex: 0 0 86% !important;
    max-width: 86% !important;
    scroll-snap-align: start;
  }
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-google-link {
  margin: 18px 0 0 !important;
  text-align: center;
  font-size: 15px !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .review-google-link a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 9. Autora dos artigos e logo do rodapé */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .article-author-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .article-author-box a + a {
  margin-left: 14px;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .footer-logo {
  display: inline-block;
  margin: 0 0 14px;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .footer-logo img {
  display: block;
  width: 168px;
  height: auto;
}

/* 10. Navegação do blog no topo dos artigos: "← Voltar ao blog" + categoria */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.4;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .blog-breadcrumb a {
  color: var(--green, #004e47);
  font-weight: 600;
  text-decoration: none;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .blog-breadcrumb a:hover,
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .blog-breadcrumb a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .blog-breadcrumb span {
  padding-left: 12px;
  border-left: 1px solid currentColor;
  opacity: .7;
}

/* 11. Cabeçalho: acesso visível à área de membros (botão "Agendar Consulta" saiu do cabeçalho) */
/* Desktop: botão sólido da marca, ícone pequeno de pessoa + texto (sem a bolinha com sombra) */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--desktop {
  gap: 10px !important;
  height: 46px !important;
  padding: 0 22px 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #004e47 !important;
  color: #fffdf8 !important;
  box-shadow: none !important;
  transition: background-color .2s ease;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--desktop:hover,
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--desktop:focus-visible {
  background: #003a35 !important;
}
/* Círculo branco com a foto da pessoa logada ou, sem foto, o ícone de pessoa */
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--desktop .header-avatar-disc {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #fffdf8 !important;
  color: #004e47 !important;
  overflow: hidden !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--desktop .header-avatar-disc svg {
  width: 20px;
  height: 20px;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--desktop.has-photo .header-avatar-disc {
  border: 2px solid #fffdf8 !important;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-account-label {
  font-family: var(--font-sans, "Figtree"), sans-serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
}
html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header-user-avatar--mobile .header-account-label {
  display: none;
}
/* Desktop (acima de 1360px): o botão com texto substitui o link do menu */
@media (min-width: 1361px) {
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header .menu .menu-account-link {
    display: none !important;
  }
}
/* Menu recolhido (até 1360px): avatar ao lado do menu e link em texto dentro dele */
@media (max-width: 1360px) {
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header .nav .header-user-avatar--mobile {
    display: flex !important;
  }
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) .header .menu .menu-account-link {
    font-weight: 600 !important;
    color: #004e47 !important;
  }
}

/* 7. Celular e tablet: corpo de texto legível */
@media (max-width: 820px) {
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) body:not(.members-page):not(.admin-page) main p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  html:not(#tipografia-iclinic):not(#tipografia-iclinic-b) body:not(.members-page):not(.admin-page) :is(.hero, .page-hero, .assessment-hero, .consulting-hero, .psych-hero, .speech-hero, .digital-sales-hero-copy, .blog-hub-intro) p {
    font-size: 16px !important;
  }
}