/* ============================================================
   article-toc.css — Indice lateral sticky + barra de progresso
   Componente reutilizavel para artigos. Zero dependencia.
   Paleta: Chumbo #1a2332, Menta #4FD1C5, Primary #074a46
   ============================================================ */

/* Barra de progresso de leitura (topo da viewport) */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:transparent;z-index:1000;pointer-events:none}
.reading-progress__bar{height:100%;width:0;background:linear-gradient(90deg,#074a46,#4FD1C5);transition:width .1s linear}

/* Layout com TOC lateral: vira 2 colunas em telas largas */
.article-layout--toc{max-width:1120px;margin:0 auto;padding:48px var(--gutter,20px) 64px;display:grid;grid-template-columns:1fr;gap:0}

@media (min-width:1024px){
  .article-layout--toc{grid-template-columns:260px minmax(0,720px);gap:48px;justify-content:center}
  .article-layout--toc .article-body{grid-column:2}
}

/* O TOC em si */
.article-toc{display:none}

/* Altura do header sticky (~72px) + folga. Ajustavel por --toc-offset. */
:root{--toc-offset:96px}

@media (min-width:1024px){
  .article-toc{
    display:flex;flex-direction:column;grid-column:1;grid-row:1;
    position:sticky;top:var(--toc-offset);align-self:start;
    /* Nunca ultrapassa a viewport disponivel abaixo do header */
    max-height:calc(100vh - var(--toc-offset) - 24px);
    font-size:.875rem;line-height:1.45;
  }
  .article-toc__title{
    font-size:.6875rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:#6b7280;margin:0 0 12px;
    padding-left:14px;flex:0 0 auto;
  }
  /* A lista e que rola quando o indice e mais alto que a viewport */
  .article-toc__list{
    list-style:none;margin:0;padding:2px 0;
    border-left:2px solid #e5e7eb;
    overflow-y:auto;flex:1 1 auto;min-height:0;
  }
  .article-toc__item{margin:0}
  .article-toc__item--h3{padding-left:16px}
  .article-toc__link{
    display:block;padding:6px 12px 6px 14px;margin-left:-2px;
    color:#6b7280;text-decoration:none;
    border-left:2px solid transparent;
    transition:color .15s,border-color .15s;
  }
  .article-toc__link:hover{color:#074a46}
  .article-toc__link.is-active{
    color:#074a46;font-weight:600;
    border-left-color:#4FD1C5;
  }
  .article-toc__item--h3 .article-toc__link{font-size:.8125rem}
}

/* Scrollbar discreta da lista do TOC */
.article-toc__list::-webkit-scrollbar{width:4px}
.article-toc__list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:2px}
.article-toc__list::-webkit-scrollbar-track{background:transparent}

/* Indice inline (mobile + reforco no topo do artigo) */
.article-inline-toc{
  background:#f0fdf9;border:1px solid #d1fae5;border-radius:10px;
  padding:20px 24px;margin:0 0 32px;
}
.article-inline-toc__title{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#074a46;margin:0 0 12px;
}
.article-inline-toc__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.article-inline-toc__list a{
  color:#1a2332;text-decoration:none;font-size:.9375rem;
  display:inline-flex;align-items:baseline;gap:8px;
}
.article-inline-toc__list a::before{content:'\2192';color:#4FD1C5;font-weight:700}
.article-inline-toc__list a:hover{color:#074a46;text-decoration:underline}

@media (min-width:1024px){
  /* Em desktop o TOC lateral cobre; o inline vira opcional (mostra so se .keep) */
  .article-inline-toc:not(.keep){display:none}
}

/* Offset de ancora para o header sticky nao cobrir o titulo ao pular */
.article-body h2[id],.article-body h3[id]{scroll-margin-top:var(--toc-offset,96px)}

/* ============================================================
   ALINHAMENTO MOBILE — garante que TODOS os blocos do artigo
   (texto, CTA, tabela, callout, tldr) respeitem o mesmo gutter
   lateral. Evita o "card estourando" ou desalinhado no celular.
   ============================================================ */
@media (max-width:768px){
  /* CTAs comerciais alinhados ao mesmo gutter do texto (nao estouram) */
  .cta-safeid{padding:24px 20px;margin:24px 0;border-radius:12px}
  .cta-safeid h3{font-size:20px}
  .cta-safeid__buttons{flex-direction:column}
  .cta-safeid__btn{width:100%;text-align:center;box-sizing:border-box}
  .cta-inline{width:100%;justify-content:center;box-sizing:border-box}
  .cta-center{text-align:center}
  .cta-side{padding:16px;margin:20px 0}

  /* Tabela: scroll horizontal sem estourar a borda da tela */
  .article-table-wrap{margin:20px 0;border-radius:8px}
  .article-table-wrap table{font-size:.8125rem}
  .article-table-wrap th,.article-table-wrap td{padding:10px 12px}

  /* Callout e TLDR: mesma margem lateral do corpo (via gutter) */
  .article-callout{margin:24px var(--gutter,16px);padding:18px 20px;box-sizing:border-box}

  /* Blocos de imagem/figure nunca ultrapassam a largura */
  .article-body img,.article-body picture,.article-body figure{max-width:100%;height:auto}

  /* Listas com recuo consistente (nao encostam na borda) */
  .article-body ul,.article-body ol{margin-left:20px}
}

/* Garante box-sizing em todos os blocos custom (evita overflow lateral) */
.cta-safeid,.cta-inline,.cta-side,.article-table-wrap,.article-callout{box-sizing:border-box;max-width:100%}

/* ============================================================
   CORRECAO DE ALINHAMENTO GLOBAL + ANTI-OVERFLOW
   Causa dos sintomas: (a) URLs/code longos sem quebra estouravam
   a largura no mobile; (b) header (.container=24px) e corpo do
   artigo (--gutter indefinido) usavam margens diferentes.
   Solucao: --gutter = 24px (igual ao .container) + quebra de
   palavras longas + trava de overflow horizontal.
   ============================================================ */

/* 1. Unifica o gutter do artigo com o padding do header (.container) */
:root{--gutter:24px}

/* 2. Trava scroll horizontal na pagina inteira (clip nao quebra sticky) */
html{overflow-x:clip}

/* 3. Palavras/URLs/code longos SEMPRE quebram (nao estouram a tela) */
.article-body{overflow-wrap:anywhere;word-break:break-word}
.article-body code{overflow-wrap:anywhere;word-break:break-all}
.article-body a{overflow-wrap:anywhere}

/* 4. Breadcrumb quebra linha no mobile em vez de estourar */
.article-breadcrumb .container{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}

/* 5. article-layout--toc mobile: mesma margem lateral do header (24px) */
@media (max-width:1023px){
  .article-layout--toc{padding-left:var(--gutter,24px);padding-right:var(--gutter,24px)}
}