/* ============================================
   ESTILOS PARA CONTEÚDO DE POSTS
   ============================================ */

/* Container principal - apenas line-height */
.post-content {
    line-height: 1.8;
}





html {
    scroll-behavior: smooth;
    overflow-x: hidden !important
        /* Previne o bounce scroll horizontal no iOS */
        overscroll-behavior-x: none;

    /* Evita zoom no iOS em inputs */
    -webkit-text-size-adjust: 100%;

    /* Previne scroll horizontal */
    touch-action: pan-y pinch-zoom;
}
}

/* Parágrafos - apenas espaçamento */
.post-content p {
    margin-bottom: 1.5rem;

    line-height: 1.8;
}

.post-content p:last-child {
    margin-bottom: 0;
}

/* Títulos - apenas espaçamento e line-height */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.post-content h1:first-child,
.post-content h2:first-child,
.post-content h3:first-child {
    margin-top: 0;
}

/* Links - apenas decoração e transição */
.post-content a {
    text-decoration: underline;
    transition: color 0.3s ease;
}

/* Strong e Bold - apenas peso */
.post-content strong,
.post-content b {
    font-weight: 700;
}


/* Itálico */
.post-content em,
.post-content i {
    font-style: italic;
}

/* Listas - apenas estrutura */
.post-content ul,
.post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.post-content ul {
    list-style-type: disc;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    line-height: 1.7;
}

.post-content li:last-child {
    margin-bottom: 0;
}

/* Listas aninhadas */
.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Blockquote - apenas estrutura e espaçamento */
.post-content blockquote {
    border-left: 4px solid #8eb7ca;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.post-content blockquote p {
    margin-bottom: 0;
}

/* Código inline - pode manter estilos pois não vem do Gutenberg */
.post-content code {
    background-color: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* Blocos de código */
.post-content pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.post-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

/* Imagens - apenas comportamento responsivo */
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 2rem 0;
    display: block;
}

/* Tabelas - apenas estrutura */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.post-content table th,
.post-content table td {
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.post-content table th {
    font-weight: 600;
}

.post-content table tr:nth-child(even) {
    background-color: #f9fafb;
}

/* HR - Separador */
.post-content hr,
.post-content .wp-block-separator {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 3rem auto;
    max-width: 100%;
}

/* Blocos do WordPress (Gutenberg) */
.post-content .wp-block-quote {
    border-left: 4px solid #8eb7ca;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
}

/* Figuras e legendas do Gutenberg */
.post-content figure {
    margin: 2rem 0;
}

.post-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Botões do Gutenberg - não sobrescrever estilos */
.post-content .wp-block-button__link {
    display: inline-block;
    text-decoration: none;
}

/* Colunas do Gutenberg */
.post-content .wp-block-columns {
    margin-bottom: 1.5rem;
}

/* Corrige espaçamento do bold/strong do Gutenberg */
.post-content strong,
.post-content b,
.post-content .has-inline-color {
    display: inline;
    word-spacing: normal;
    letter-spacing: normal;
}

.post-content * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* Garante que imagens respeitem o container mas não estourem */
.post-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* Garante que figuras não estourem */
.post-content figure {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Se a imagem tem width inline menor que 100%, mantém */
.post-content figure.is-resized {
    max-width: 100% !important;
}

.post-content figure.is-resized img {
    width: 100% !important;
    max-width: none !important;
}

/* Responsividade */
@media (max-width: 768px) {
    .post-content blockquote {
        padding: 1rem;
        margin: 1.5rem 0;
    }

    .post-content pre {
        padding: 1rem;
        font-size: 0.875rem;
    }

    .post-content table {
        font-size: 0.875rem;
    }

    .post-content table th,
    .post-content table td {
        padding: 0.5rem;
    }
}

/**
 * Estilos para conteúdo de posts do WordPress
 * Classe pai: .blog-content
 */

.blog-content {
    font-family: 'Bai Jamjuree', sans-serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #333333;
    max-width: 800px;
    margin: 0 auto;
}

/* ========== TÍTULOS ========== */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #003E5C;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.blog-content h1 {
    font-size: 2.5rem;
    margin-top: 0;
}

.blog-content h2 {
    font-size: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #89BAD0;
}

.blog-content h3 {
    font-size: 1.75rem;
}

.blog-content h4 {
    font-size: 1.5rem;
}

.blog-content h5 {
    font-size: 1.25rem;
}

.blog-content h6 {
    font-size: 1.125rem;
    color: #006691;
}

/* ========== PARÁGRAFOS ========== */
.blog-content p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

.blog-content p:last-child {
    margin-bottom: 0;
}

/* ========== LINKS ========== */
.blog-content a {
    color: #006691;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.blog-content a:hover {
    color: #005078;
    text-decoration: none;
}

/* ========== LISTAS ========== */
.blog-content ul,
.blog-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.blog-content ul {
    list-style-type: disc;
}

.blog-content ol {
    list-style-type: decimal;
}

.blog-content li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.blog-content li::marker {
    color: #006691;
    font-weight: 600;
}

.blog-content ul ul,
.blog-content ol ul {
    list-style-type: circle;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.blog-content ul ol,
.blog-content ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ========== BLOCKQUOTE ========== */
.blog-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: #EDF5F8;
    border-left: 4px solid #006691;
    font-style: italic;
    color: #333333;
    position: relative;
}

.blog-content blockquote p {
    margin-bottom: 0.5rem;
}

.blog-content blockquote p:last-child {
    margin-bottom: 0;
}

.blog-content blockquote::before {
    content: '"';
    font-size: 4rem;
    color: #89BAD0;
    position: absolute;
    top: 0;
    left: 1rem;
    line-height: 1;
    opacity: 0.3;
}

/* ========== IMAGENS ========== */
.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
}

.blog-content figure {
    margin: 2rem 0;
    text-align: center;
}

.blog-content figcaption {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #7C8287;
    font-style: italic;
}

/* Alinhamentos WordPress */
.blog-content .alignleft {
    float: left;
    margin: 0.5rem 2rem 1rem 0;
}

.blog-content .alignright {
    float: right;
    margin: 0.5rem 0 1rem 2rem;
}

.blog-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ========== TABELAS ========== */
.blog-content table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-radius: 8px;
}

.blog-content table thead {
    background: #006691;
    color: #ffffff;
}

.blog-content table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-content table td {
    padding: 1rem;
    border-bottom: 1px solid #E0E0E0;
}

.blog-content table tbody tr:hover {
    background: #F8F9F9;
}

.blog-content table tbody tr:last-child td {
    border-bottom: none;
}

/* ========== CÓDIGO ========== */
.blog-content code {
    background: #F4F4F4;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #D63384;
}

.blog-content pre {
    background: #2D2D2D;
    color: #F8F8F2;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 2rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.blog-content pre code {
    background: transparent;
    padding: 0;
    color: #F8F8F2;
    font-size: 0.875rem;
}

/* ========== SEPARADORES ========== */
.blog-content hr {
    border: none;
    border-top: 2px solid #E0E0E0;
    margin: 3rem 0;
}

/* ========== STRONG E EM ========== */
.blog-content strong,
.blog-content b {
    font-weight: 700;
    color: #003E5C;
}

.blog-content em,
.blog-content i {
    font-style: italic;
}

/* ========== BOTÕES GUTENBERG ========== */
.blog-content .wp-block-button__link {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: #006691;
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 102, 145, 0.2);
}

.blog-content .wp-block-button__link:hover {
    background: #005078;
    box-shadow: 0 6px 16px rgba(0, 102, 145, 0.3);
    transform: translateY(-2px);
}

/* ========== COLUNAS GUTENBERG ========== */
.blog-content .wp-block-columns {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
}

.blog-content .wp-block-column {
    flex: 1;
}

/* ========== VÍDEOS RESPONSIVOS ========== */
.blog-content iframe,
.blog-content video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
}

.blog-content .wp-block-embed {
    margin: 2rem 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .blog-content {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .blog-content h1 {
        font-size: 2rem;
    }

    .blog-content h2 {
        font-size: 1.75rem;
    }

    .blog-content h3 {
        font-size: 1.5rem;
    }

    .blog-content h4 {
        font-size: 1.25rem;
    }

    .blog-content .alignleft,
    .blog-content .alignright {
        float: none;
        margin: 1rem auto;
        display: block;
    }

    .blog-content .wp-block-columns {
        flex-direction: column;
    }

    .blog-content table {
        font-size: 0.875rem;
    }

    .blog-content table th,
    .blog-content table td {
        padding: 0.75rem 0.5rem;
    }

    .blog-content blockquote {
        padding: 1rem 1.5rem;
    }
}

/* ========== CLEARFIX ========== */
.blog-content::after {
    content: "";
    display: table;
    clear: both;
}