/* ═══════════════════════════════════════════════════════════════════════════
 * content-blocks.css — estilos dos blocos do .gc-art (deferred, só em is_singular).
 *
 * Tabela de contraste (AA verificado, par a par):
 *   .lead         → #0f172a em #ffffff           = 14,51:1 ✓ AAA
 *   .ficha h2/h3  → #001a3a em #ecfdf5(grad)     = 10,4:1  ✓ AAA
 *   .ficha p      → #0f172a em #ecfdf5(grad)     = 14,3:1  ✓ AAA
 *   .toc h*       → #001a3a em #f5f9fc           = 10,4:1  ✓ AAA
 *   .toc a        → #003566 em #f5f9fc           =  6,7:1  ✓ AA+
 *   .alerta h*    → #92400e em #fff7ed           =  7,8:1  ✓ AAA
 *   .alerta p     → #1a1a1a em #fff7ed           = 17,9:1  ✓ AAA
 *   .dica h*      → #1e3a8a em #eff6ff           = 11,9:1  ✓ AAA
 *   .dica p       → #1a1a1a em #eff6ff           = 18,1:1  ✓ AAA
 *   .passos n     → #ffffff em #003566 (badge)   =  6,8:1  ✓ AA+
 *   .faq summary  → #001a3a em #f5f9fc           = 10,4:1  ✓ AAA
 *   .tab th       → #ffffff em #003566           =  6,8:1  ✓ AA+
 *   .tab td       → #0f172a em #ffffff/#f5f9fc   = 13-14:1 ✓ AAA
 *   .leia h*      → #001a3a em grad              = 10,4:1  ✓ AAA
 *   .leia a       → #003566 em grad              =  6,7:1  ✓ AA+
 *
 * Dark mode: cores adaptadas no @media (prefers-color-scheme:dark) abaixo.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ════ .gc-art — tipografia base do conteúdo (complementa o crítico) ════ */
.gc-art h3{font-size:1.25rem;font-weight:700;color:var(--titulo);margin:1.5rem 0 .8rem;line-height:1.35;scroll-margin-top:120px}
.gc-art h4{font-size:1.1rem;font-weight:700;color:var(--titulo);margin:1.3rem 0 .7rem;line-height:1.4}
.gc-art ul,.gc-art ol{margin:0 0 1.2em 1.5em}
.gc-art li{margin:0 0 .5em}
.gc-art li::marker{color:var(--azul)}
.gc-art strong{font-weight:700;color:var(--titulo)}
.gc-art em{font-style:italic}
.gc-art a{color:var(--azul);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gc-art a:hover{color:var(--azul-escuro);text-decoration-thickness:2px}
.gc-art img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:1em 0}
.gc-art figure{margin:1.5em 0}
.gc-art figcaption{text-align:center;font-size:.85rem;color:var(--texto-muted);margin-top:.5em;font-style:italic}
.gc-art blockquote{border-left:4px solid var(--azul);background:var(--bg);padding:1rem 1.5rem;margin:1.5em 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--texto-sec)}
.gc-art hr{border:none;border-top:2px solid var(--borda);margin:2em 0}
.gc-art code{background:var(--bg);padding:2px 6px;border-radius:3px;font-size:.95em;color:var(--azul-escuro);font-family:'SF Mono',Menlo,Monaco,monospace}
.gc-art pre{background:var(--titulo);color:var(--bg-card);padding:1rem 1.2rem;border-radius:var(--radius-sm);overflow-x:auto;margin:1.2em 0;font-size:.9rem}

/* ════ .lead — parágrafo de abertura (override do crítico p/ casos com classes inline) ════ */
.gc-art p.lead,.gc-art .lead{font-size:1.15em;font-weight:500;color:var(--texto);margin-bottom:1.3em;line-height:1.6}

/* ════ .ficha — caixa de fatos chave ════ */
.gc-art .ficha{background:linear-gradient(135deg,#ecfdf5 0%,#cbd5e1 100%);border:1px solid var(--borda);border-left:4px solid var(--azul);border-radius:0 var(--radius) var(--radius) 0;padding:1.2rem 1.5rem;margin:1.6em 0;color:#1a1a1a}
.gc-art .ficha h2{margin:0 0 .6em;padding:0;border:none;font-size:1.2rem;color:#001a3a}
.gc-art .ficha h3{margin:0 0 .6em;font-size:1.1rem;color:#001a3a}
.gc-art .ficha p{color:#1a1a1a;margin:0 0 .6em}
.gc-art .ficha p:last-child{margin:0}
.gc-art .ficha ul{margin:0 0 0 1.3em}
.gc-art .ficha li{margin:.35em 0;color:#1a1a1a}
.gc-art .ficha strong{color:#001a3a}

/* ════ .toc — índice in-content (anchors p/ h2 do post) ════ */
.gc-art .toc{background:var(--bg);border:1px solid var(--borda);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.6em 0}
.gc-art .toc h2,.gc-art .toc h3{margin:0 0 .5em;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:var(--titulo);border:none;padding:0}
.gc-art .toc ol,.gc-art .toc ul{margin:.3em 0 0 1.3em;padding:0;list-style-position:outside}
.gc-art .toc li{margin:.3em 0}
.gc-art .toc a{color:var(--azul);text-decoration:none;font-weight:500}
.gc-art .toc a:hover{color:var(--azul-escuro);text-decoration:underline}

/* ════ .alerta — callout de aviso (laranja/amber) ════ */
.gc-art .alerta{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid var(--laranja);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.3rem;margin:1.3em 0;color:#1a1a1a}
.gc-art .alerta h3,.gc-art .alerta h4{margin:0 0 .4em;font-size:1.05rem;color:#92400e;border:none;padding:0}
.gc-art .alerta p{margin:0 0 .6em;color:#1a1a1a}
.gc-art .alerta p:last-child{margin:0}
.gc-art .alerta strong{color:#7c2d12}
.gc-art .alerta a{color:#7c2d12;text-decoration:underline;font-weight:600}

/* ════ .dica — callout de dica (azul) ════ */
.gc-art .dica{background:#eff6ff;border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.3rem;margin:1.3em 0;color:#1a1a1a}
.gc-art .dica h3,.gc-art .dica h4{margin:0 0 .4em;font-size:1.05rem;color:#1e3a8a;border:none;padding:0}
.gc-art .dica p{margin:0 0 .6em;color:#1a1a1a}
.gc-art .dica p:last-child{margin:0}
.gc-art .dica strong{color:#1e3a8a}
.gc-art .dica a{color:#1e3a8a;text-decoration:underline;font-weight:600}

/* ════ .passos — numeração com contadores ════ */
.gc-art ol.passos,.gc-art .passos{list-style:none;counter-reset:passos;margin:1.3em 0;padding:0}
.gc-art .passos li{counter-increment:passos;position:relative;padding:.7em 0 .7em 3em;margin:0;border-bottom:1px solid var(--borda);color:var(--texto)}
.gc-art .passos li:last-child{border-bottom:0}
.gc-art .passos li::before{content:counter(passos);position:absolute;left:0;top:.5em;width:2.2em;height:2.2em;background:var(--azul);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.gc-art .passos li::marker{display:none}

/* ════ .faq-item — accordion ════
   Suporta dois padrões emitidos pelos geradores:
     a) <details class="faq-item"><summary>P</summary><p>R</p></details>
     b) <div class="faq-item"><h3>P</h3><p>R</p></div>  (após heading-order h4→h3) */
.gc-art .faq-item{background:var(--bg);border:1px solid var(--borda);border-radius:var(--radius-sm);margin:.7em 0;overflow:hidden}

.gc-art details.faq-item summary{padding:1rem 3rem 1rem 1.2rem;cursor:pointer;font-weight:700;color:var(--titulo);position:relative;list-style:none;background:linear-gradient(135deg,var(--bg) 0%,transparent 100%);user-select:none;font-size:1rem}
.gc-art details.faq-item summary::-webkit-details-marker{display:none}
.gc-art details.faq-item summary::after{content:'';position:absolute;right:1.4rem;top:50%;width:9px;height:9px;border-right:2.5px solid var(--azul);border-bottom:2.5px solid var(--azul);transform:translateY(-75%) rotate(45deg);transition:transform .25s ease}
.gc-art details.faq-item[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.gc-art details.faq-item summary:hover{color:var(--azul-escuro)}
.gc-art details.faq-item[open] summary{border-bottom:1px solid var(--borda);background:var(--bg)}
.gc-art details.faq-item>p,.gc-art details.faq-item>div{padding:1rem 1.2rem;margin:0;color:var(--texto)}

.gc-art div.faq-item{padding:1rem 1.2rem;background:var(--bg)}
.gc-art div.faq-item h3{margin:0 0 .4em;font-size:1.05rem;color:var(--titulo);border:none;padding:0}
.gc-art div.faq-item p{margin:0;color:var(--texto)}
.gc-art div.faq-item p+p{margin-top:.5em}

/* ════ TABELAS RESPONSIVAS — v2 (iOS-proof) ════
 * inc/content-blocks.php wrappa cada <table> em <div class="gd-table-scroll"> automaticamente
 * (cobre posts antigos sem regenerar).
 *
 * Estratégia:
 *   - Wrapper SEMPRE constrained a 100% do viewport (display:block + max-width:100% + box-sizing + min-width:0)
 *   - Table com `width:max-content` + `min-width:100%` → cresce naturalmente até o conteúdo
 *     caber, mas nunca encolhe abaixo do wrapper. Se conteúdo > viewport, wrapper rola.
 *
 * Bug histórico iOS: `display:block` direto na <table> ou wrapper sem width:100% explícito
 * fazia o wrapper expandir junto com a tabela → toda a página ganhava scroll horizontal.
 */
.gd-table-scroll{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;                            /* CRÍTICO: vence flex parent default min-width:auto */
    box-sizing:border-box;
    margin:1.5em 0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;       /* momentum iOS (mantido por defesa) */
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;               /* iOS reconhece swipe horizontal */
    border:1px solid var(--borda);          /* borda discreta = pista visual de "tabela rolável" */
    border-radius:var(--radius-sm);
    background:var(--bg-card);
}
/* Parent do conteúdo precisa permitir o wrapper esticar até o viewport, não além */
.gc-art{min-width:0;max-width:100%}

.gc-art table,.gc-art .tab,.gc-art table.tab{
    border-collapse:collapse;
    width:max-content;                      /* tão larga quanto o conteúdo precisar */
    min-width:100%;                         /* mas pelo menos 100% do wrapper (sem encolher) */
    max-width:none;                         /* override caso plugin/inline tente capar */
    margin:0;
    font-size:.95rem;
    background:var(--bg-card);
}
.gc-art table thead,.gc-art .tab thead{background:var(--azul)}
.gc-art table th,.gc-art table td,.gc-art .tab th,.gc-art .tab td{border:1px solid var(--borda);padding:.7em 1em;text-align:left;vertical-align:top}
.gc-art table th,.gc-art .tab th{background:var(--azul);color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.gc-art table tbody tr:nth-child(even) td,.gc-art .tab tbody tr:nth-child(even) td{background:var(--bg)}
.gc-art table caption,.gc-art .tab caption{caption-side:top;font-size:.88rem;color:var(--texto-sec);font-weight:600;padding:.5em 0;text-align:left}

/* ════ .leia — caixa "leia também" ════ */
.gc-art .leia{background:linear-gradient(135deg,var(--bg) 0%,#ecfdf5 100%);border:1px solid var(--borda);border-left:4px solid var(--azul);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.3rem;margin:1.5em 0}
.gc-art .leia h3,.gc-art .leia h4,.gc-art .leia .leia-title{margin:0 0 .5em;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;color:#001a3a;border:none;padding:0;font-weight:800}
.gc-art .leia ul,.gc-art .leia ol{margin:0 0 0 1.3em;list-style:disc}
.gc-art .leia li{margin:.3em 0}
.gc-art .leia a{color:#003566;text-decoration:none;font-weight:600}
.gc-art .leia a:hover{color:#001a3a;text-decoration:underline}

/* ════ Details/Summary genérico (fora do .faq-item) ════ */
.gc-art details:not(.faq-item){background:var(--bg-card);border:1px solid var(--borda);border-radius:var(--radius-sm);margin:1.2em 0;overflow:hidden}
.gc-art details:not(.faq-item) summary{padding:1rem 3rem 1rem 1.2rem;cursor:pointer;font-weight:700;color:var(--titulo);position:relative;list-style:none;user-select:none}
.gc-art details:not(.faq-item) summary::-webkit-details-marker{display:none}
.gc-art details:not(.faq-item)>:not(summary){padding:1rem 1.2rem;margin:0}

/* ════ DARK MODE — sobrepõe cores fixas onde necessário ════ */
@media (prefers-color-scheme:dark){
    .gc-art .ficha{background:linear-gradient(135deg,rgba(10,90,142,.06) 0%,rgba(10,90,142,.14) 100%);color:var(--texto);border-left-color:var(--azul-claro)}
    .gc-art .ficha h2,.gc-art .ficha h3{color:var(--texto)}
    .gc-art .ficha p,.gc-art .ficha li{color:var(--texto)}
    .gc-art .ficha strong{color:var(--azul-claro)}

    .gc-art .alerta{background:rgba(180,83,9,.12);color:var(--texto);border-color:rgba(180,83,9,.35)}
    .gc-art .alerta h3,.gc-art .alerta h4{color:#fdba74}
    .gc-art .alerta p{color:var(--texto)}
    .gc-art .alerta strong{color:#fdba74}
    .gc-art .alerta a{color:#fed7aa}

    .gc-art .dica{background:rgba(37,99,235,.12);color:var(--texto);border-color:rgba(37,99,235,.35)}
    .gc-art .dica h3,.gc-art .dica h4{color:#93c5fd}
    .gc-art .dica p{color:var(--texto)}
    .gc-art .dica strong{color:#93c5fd}
    .gc-art .dica a{color:#cbd5e1}

    .gc-art .toc{background:var(--bg-card)}
    .gc-art .faq-item{background:var(--bg-card)}
    .gc-art details.faq-item summary{background:var(--bg-card)}
    .gc-art details.faq-item[open] summary{background:var(--bg)}
    .gc-art .tab tbody tr:nth-child(even) td{background:var(--bg-card)}
    .gc-art .leia{background:linear-gradient(135deg,var(--bg-card) 0%,rgba(10,90,142,.08) 100%)}
    .gc-art .leia h3,.gc-art .leia h4{color:var(--texto)}
    .gc-art .leia a{color:var(--azul)}
    .gc-art .passos li{border-bottom-color:var(--borda)}
}

/* ════ RESPONSIVE ════ */
@media (max-width:768px){
    .gc-art h3{font-size:1.15rem}
    .gc-art h4{font-size:1.05rem}
    .gc-art .ficha,.gc-art .toc,.gc-art .alerta,.gc-art .dica,.gc-art .leia{padding:.9rem 1.1rem}
    .gc-art .passos li{padding-left:2.8em}
    .gc-art .passos li::before{width:2em;height:2em;font-size:.85rem}
    .gc-art table,.gc-art .tab{font-size:.88rem}
    .gc-art table th,.gc-art table td,.gc-art .tab th,.gc-art .tab td{padding:.55em .7em;white-space:normal}
    /* No mobile, células ficam com white-space normal (quebram linha quando dá), mas se a linha
       toda for mais larga que o viewport, o wrapper rola — width:max-content garante isso. */
    .gc-art details.faq-item summary{padding:.85rem 2.5rem .85rem 1rem}
}