/* Oktoply Validate — estilo scoped dos posts (.okpost)
   Aplicado apenas em posts singulares. Herda a fonte do tema; controla
   largura de leitura, hierarquia, cores da marca, tabela e imagem destacada.
   A cor de destaque vem de --okpost-accent (injetada inline pelo plugin). */

.okpost {
    --okpost-ink: #1d2327;
    --okpost-muted: #5c6470;
    --okpost-line: #e6e8eb;
    --okpost-accent: #4f46e5; /* fallback; sobrescrito inline */
    --okpost-width: 1140px;   /* largura do container do menu; ajuste 1px se não casar */

    max-width: var(--okpost-width);
    margin: 0 auto;
    padding: 8px 20px 48px;
    color: var(--okpost-ink);
    font-size: 18px;
    line-height: 1.75;
    word-wrap: break-word;
}

/* Título do post (injetado — o tema não renderiza). Seletor específico para
   vencer a tipografia de h1 do tema; o tamanho também vai inline no PHP. */
.okpost h1.okpost__title {
    font-size: 60px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--okpost-ink);
    margin: 4px 0 26px;
}

/* Herói: imagem à esquerda + bloco de infos à direita */
.okpost__hero {
    display: flex;
    gap: 30px;
    align-items: stretch;
    margin: 0 0 38px;
}
.okpost__hero-img {
    margin: 0;
    flex: 1 1 74%;
    min-width: 0;
}
.okpost__hero-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .35);
}
.okpost__hero-meta {
    flex: 1 1 26%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}
.okpost__hero-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.okpost__cat {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--okpost-accent) 12%, #fff);
    color: var(--okpost-accent);
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.okpost__date {
    color: var(--okpost-muted);
    font-size: .95em;
}
/* Botão estilo print 3: outline, cantos arredondados, sem ícone.
   Seletor com especificidade > .okpost a para não herdar cor/borda de link. */
.okpost a.okpost__btn {
    align-self: flex-start;
    display: inline-block;
    padding: 12px 22px;
    border: 2px solid var(--okpost-ink);
    border-radius: 12px;
    color: var(--okpost-ink);
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    transition: background .15s ease, color .15s ease;
}
.okpost a.okpost__btn:hover {
    background: var(--okpost-ink);
    color: #fff;
}

/* Parágrafos */
.okpost p {
    margin: 0 0 22px;
}
/* Parágrafo de abertura (lead) */
.okpost > p:first-of-type {
    font-size: 1.16em;
    line-height: 1.6;
    color: #33383f;
}

/* Títulos */
.okpost h2,
.okpost h3,
.okpost h4 {
    color: var(--okpost-ink);
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.01em;
}
.okpost h2 {
    font-size: 1.72em;
    margin: 46px 0 16px;
}
/* Linhas divisórias removidas do corpo; mantém só a última (acima da última seção). */
.okpost h2:last-of-type {
    padding-top: 24px;
    border-top: 1px solid var(--okpost-line);
}
.okpost h3 {
    font-size: 1.3em;
    margin: 32px 0 12px;
}
.okpost h3::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 10px;
    border-radius: 3px;
    background: var(--okpost-accent);
    vertical-align: middle;
}

/* Links */
.okpost a {
    color: var(--okpost-accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--okpost-accent) 35%, transparent);
    transition: border-color .15s ease;
}
.okpost a:hover {
    border-bottom-color: var(--okpost-accent);
}

/* Listas */
.okpost ul,
.okpost ol {
    margin: 0 0 24px;
    padding-left: 1.4em;
}
.okpost li { margin: 8px 0; }
.okpost ul li::marker { color: var(--okpost-accent); }
.okpost ol li::marker { color: var(--okpost-accent); font-weight: 700; }

/* Ênfase */
.okpost strong, .okpost b { font-weight: 700; color: #111418; }

/* Citação */
.okpost blockquote {
    margin: 28px 0;
    padding: 6px 22px;
    border-left: 4px solid var(--okpost-accent);
    background: color-mix(in srgb, var(--okpost-accent) 6%, #fff);
    color: #35393f;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

/* Divisores <hr> do conteúdo ocultos (a única divisória fica acima da última seção) */
.okpost hr {
    display: none;
}

/* Tabela */
.okpost table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 28px 0;
    font-size: .95em;
    border: 1px solid var(--okpost-line);
    border-radius: 12px;
    overflow: hidden;
}
.okpost thead th {
    background: color-mix(in srgb, var(--okpost-accent) 12%, #fff);
    color: #1d2327;
    font-weight: 700;
    text-align: left;
}
.okpost th, .okpost td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--okpost-line);
    vertical-align: top;
}
.okpost tbody tr:last-child td { border-bottom: 0; }
.okpost tbody tr:nth-child(even) td {
    background: #fafbfc;
}

/* CTA final */
.okpost .okpost-cta {
    margin-top: 36px;
    padding: 22px 24px;
    background: color-mix(in srgb, var(--okpost-accent) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--okpost-accent) 25%, transparent);
    border-radius: 14px;
    font-size: 1.05em;
}
.okpost .okpost-cta a { font-weight: 700; }

/* Mobile */
@media (max-width: 640px) {
    .okpost { font-size: 17px; padding: 4px 4px 40px; }
    .okpost h1.okpost__title { font-size: 38px; }
    .okpost h2 { font-size: 1.5em; }
    .okpost table { font-size: .9em; }
    .okpost th, .okpost td { padding: 10px 12px; }
    .okpost__hero { flex-direction: column; gap: 18px; }
    .okpost__hero-meta { justify-content: flex-start; }
}