/* ==========================================================================
   article.css — Experiência de leitura dos artigos (carregado por último).
   Sobrescreve o CSS gerado para uma leitura confortável: medida ideal de
   linha, alinhamento à esquerda, ritmo vertical, links visíveis, índice
   com scrollspy, barra de progresso e botão "voltar ao topo".
   ========================================================================== */

:root { --measure: 72ch; }   /* largura ideal de leitura (~65–75 caracteres) */

/* Coluna de texto confortável e centralizada */
.article-container { max-width: 940px; }
.article-body { font-size: 1.18rem; line-height: 1.8; }

.article-body p,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body ul,
.article-body ol {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

/* Parágrafos: sem justificar (mais legível), ritmo generoso */
.article-body p {
    text-align: left;
    margin-bottom: 1.5em;
    hyphens: none;
}

/* Primeiro parágrafo com leve destaque (lead) */
.article-body > p:first-of-type {
    font-size: 1.26rem;
    color: var(--text-main);
    line-height: 1.7;
}

/* Títulos alinhados à esquerda (melhor para escanear) + offset do header sticky */
.article-body h2 {
    text-align: left;
    display: block;
    width: auto;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 2rem;
    margin-top: 2.4em;
    margin-bottom: .7em;
    scroll-margin-top: 110px;
}
.article-body h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin-top: .55rem;
}
.article-body h3 {
    text-align: left;
    font-size: 1.45rem;
    margin-top: 1.9em;
    margin-bottom: .55em;
    scroll-margin-top: 110px;
}

.article-body li { margin-bottom: .55em; }

/* Links no corpo do texto: visíveis e sublinhados */
.article-body p a,
.article-body li a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.article-body p a:hover,
.article-body li a:hover { color: var(--primary); }

/* Imagens dentro do artigo */
.article-body img {
    border-radius: 10px;
    margin: 2.2rem auto;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

/* Callouts e citações: medida um pouco maior que o texto, centralizados */
.clinical-pearl,
.scientific-quote,
.references-section,
.toc-integrated,
.ad-slot {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.scientific-quote { font-size: 1.45rem; line-height: 1.5; }

/* Tabelas: podem ocupar toda a largura (dados respiram) + scroll no mobile */
.scientific-table { margin-left: auto; margin-right: auto; }

/* Índice: destaque da seção atual (scrollspy) */
.toc-list a.active {
    color: var(--accent);
    font-weight: 700;
    border-bottom-color: var(--accent);
}
.toc-list a {
    display: inline-block;
    padding: 2px 0;
}

/* Barra de progresso de leitura (criada via JS) */
#read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    z-index: 2000;
    transition: width .08s linear;
    will-change: width;
}

/* Botão "voltar ao topo" (criado via JS) */
#to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    z-index: 1500;
    font-size: 20px;
    line-height: 1;
}
#to-top.show { display: flex; }
#to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Rolagem suave (respeitando preferência de redução de movimento) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Ajustes mobile da leitura */
@media (max-width: 640px) {
    .article-body { font-size: 1.08rem; }
    .article-body > p:first-of-type { font-size: 1.14rem; }
    .article-body h2 { font-size: 1.6rem; }
    .article-body h3 { font-size: 1.3rem; }
    .article-container { padding: 0 18px; }
}