/**
 * Estilos específicos para o template de single post
 */

/* Espaçamentos entre elementos baseados no Figma */
/* Estabilização do breadcrumb */
#single-post .breadcrumb-container {
    margin-bottom: 3rem; /* 12px * 4 = 48px (gap-12 do Figma) */
    min-height: 24px; /* Reserva espaço para evitar piscadas */
    contain: layout;
}

/* Estabilização do cabeçalho */
#single-post .post-header {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    contain: layout;
    min-height: 170px; /* Altura mínima para evitar reflow */
}

/* Estabilização do título */
#single-post .post-title {
    margin-bottom: 0.5rem;
    contain: layout;
    min-height: 32px;
}

/* Força renderização completa antes de exibir */
#single-post h1 {
    contain: style layout paint;
}

/* Estabilização do resumo */
#single-post .post-excerpt {
    padding-top: 0.25rem;
    margin-bottom: 0.05rem;
    font-size: 16px;
    contain: layout;
    min-height: 24px;
    backface-visibility: hidden; /* Ajuda a prevenir piscadas */
}

/* Estabilização da data */
#single-post .post-date {
    margin-bottom: 1rem;
    font-size: 14px;
    contain: layout;
    min-height: 21px;
    will-change: auto; /* Otimiza a renderização */
}

#single-post .post-content {
    padding-top: 1rem;
}

#single-post .social-share {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Estilização do conteúdo principal conforme Figma */
#single-post .prose {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 1.5 = 24px conforme Figma */
    letter-spacing: 0%;
    color: rgba(0, 0, 0, 0.7); /* 70% black para legibilidade */
}

/* Espaçamento entre parágrafos conforme Figma */
#single-post .prose p {
    margin-bottom: 1.5rem; /* 24px conforme div.h-6 no Figma */
}

/* Ajuste do bloco padrão Separador do Gutenberg em single post */
#single-post .prose hr.wp-block-separator,
#single-post .prose .wp-block-separator {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.dark #single-post .prose hr.wp-block-separator,
.dark #single-post .prose .wp-block-separator {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

#single-post .prose h2 {
    font-size: 22px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8); /* 80% black */
}

#single-post .prose h3 {
    font-size: 20px;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8); /* 80% black */
}

/* Links no conteúdo */
#single-post .prose a {
    color: var(--color-lilas-500);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, color 0.3s;
}

#single-post .prose a:hover {
    border-color: currentColor;
}

/* Ajustes específicos para dark mode */
.dark #single-post .prose {
    color: rgba(255, 255, 255, 0.7); /* 70% white para melhor legibilidade */
    /* Mantendo as mesmas configurações de fonte do modo claro */
}

.dark #single-post .prose h2,
.dark #single-post .prose h3 {
    color: rgba(255, 255, 255, 0.8); /* 80% white */
}

.dark #single-post .prose a {
    color: var(--color-lilas-dark, #b078b1);
}

/* Animação removida conforme solicitação */
/* 
#single-post .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}
*/

/* @keyframes removido conforme solicitação */
/*
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
*/

/* Melhoria para prevenir piscadas durante o carregamento */
#single-post {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

/* Remove transições exceto para galerias */
#single-post *:not(.gallery-item):not(.gallery-item *) {
    transition: none !important;
    animation: none !important;
}

/* Melhoria geral de performance e controle de visibilidade durante carregamento */
#single-post {
    font-display: block; /* Evita FOIT */
}

/* Previne piscadas durante o carregamento inicial */
html.loading-single-post #single-post .post-header,
html.loading-single-post #single-post .breadcrumb-container {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Garante que todas as fontes e elementos estejam renderizados antes de exibir */
html.loading-single-post * {
    /* Impede flashes durante o carregamento */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Estabilização de imagens para prevenir layout shifts - excluindo galerias */
#single-post .prose img:not(.gallery-item img) {
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

/* Estilos específicos para o bloco de imagem do WordPress no single post */
#single-post .wp-block-image {
    margin: 1.5rem 0 !important;
    text-align: left !important;
}

/* Imagem dentro do bloco de imagem do WordPress no single post */
#single-post .wp-block-image img {
    max-width: 100%;
    height: auto;
    width: auto;
    margin: 0;
    border-radius: 0.375rem;
    /* Remove qualquer aspect-ratio fixo para manter proporções originais */
    aspect-ratio: unset !important;
    object-fit: unset !important;
}

/* Para imagens menores que 1200px, manter tamanho original no single post */
#single-post .wp-block-image img[width] {
    width: auto;
    max-width: min(100%, 1200px);
}

/* Garantir que imagens muito largas se ajustem proporcionalmente no single post */
#single-post .wp-block-image img {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

/* Remover espaçamentos extras que podem causar "sobras" no single post */
#single-post .wp-block-image figure {
    margin: 0;
    padding: 0;
}

/* Para imagens com altura muito pequena, garantir que não tenham padding vertical extra no single post */
#single-post .wp-block-image img[height="39"],
#single-post .wp-block-image img[height="40"],
#single-post .wp-block-image img[height="30"],
#single-post .wp-block-image img[height="20"],
#single-post .wp-block-image img[height="50"],
#single-post .wp-block-image img[height="60"],
#single-post .wp-block-image img[height="70"],
#single-post .wp-block-image img[height="80"],
#single-post .wp-block-image img[height="90"],
#single-post .wp-block-image img[height="100"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
    line-height: 1;
}

/* Estilo específico para elementos figure do WordPress no single post */
#single-post .wp-block-image.size-full,
#single-post .wp-block-image.size-large,
#single-post .wp-block-image.size-medium {
    display: block;
    margin: 1.5rem 0 !important;
}

/* Regra mais específica para imagens largas independente da altura exata no single post */
#single-post .wp-block-image.size-full img[width],
#single-post .wp-block-image.size-large img[width] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

/* Para imagens com largura >= 800px (provavelmente grafismos) no single post */
#single-post .wp-block-image img[width="800"],
#single-post .wp-block-image img[width="900"],
#single-post .wp-block-image img[width="1000"],
#single-post .wp-block-image img[width="1024"],
#single-post .wp-block-image img[width="1100"],
#single-post .wp-block-image img[width="1200"],
#single-post .wp-block-image img[width="1300"],
#single-post .wp-block-image img[width="1400"],
#single-post .wp-block-image img[width="1500"] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 0;
}

/* Reset de estilos que podem interferir no single post */
#single-post .wp-block-image {
    line-height: 0;
    font-size: 0;
    width: auto;
}

#single-post .wp-block-image img {
    vertical-align: top;
}

/* Alinhamentos nativos do WordPress - wrapper */
#single-post .wp-block-image.alignleft,
#single-post img.alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

#single-post .wp-block-image.alignright,
#single-post img.alignright {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

#single-post .wp-block-image.aligncenter,
#single-post img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Alinhamentos quando a classe está no elemento interno (figure ou img) */
#single-post .wp-block-image .alignleft { float: left; margin-right: 1rem; margin-bottom: 1rem; }
#single-post .wp-block-image .alignright { float: right; margin-left: 1rem; margin-bottom: 1rem; }
#single-post .wp-block-image .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
#single-post .wp-block-image .aligncenter img { margin-left: auto !important; margin-right: auto !important; }
#single-post .wp-block-image > figure.aligncenter > img { display: block !important; margin-left: auto !important; margin-right: auto !important; }

/* Neutralizar centralização padrão da .prose e reabilitar apenas com .aligncenter */
#single-post .prose img { margin-left: 0 !important; margin-right: 0 !important; }
#single-post .prose .wp-block-image.aligncenter img,
#single-post .prose img.aligncenter { margin-left: auto !important; margin-right: auto !important; }
#single-post .prose .wp-block-image .aligncenter img { margin-left: auto !important; margin-right: auto !important; }

/* Regra catch-all para garantir que qualquer imagem larga ocupe 100% no single post */
#single-post .wp-block-image.size-large,
#single-post .wp-block-image.size-full {
    width: 100%;
}

#single-post .wp-block-image.size-large img,
#single-post .wp-block-image.size-full img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Fallback inteligente para nomes de arquivo que contenham "grafismo" no single post */
#single-post .wp-block-image img[src*="grafismo"],
#single-post .wp-block-image img[alt*="grafismo"],
#single-post .wp-block-image img[class*="grafismo"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Estilos adicionais para o formulário de pesquisa */
.search-form .search-field {
    border-radius: 0.25rem;
}

/* Estilização dos ícones de compartilhamento social no single post */
.single-social-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background-color: #5A5A5A; /* Cinza um pouco mais claro */
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.single-social-icon .social-svg {
    width: 18px;
    height: 18px;
    stroke: #FFFFFF; /* Branco conforme Figma */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Cores dos ícones no dark mode */
.dark .single-social-icon {
    background-color: #F5F5F5;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark .single-social-icon .social-svg {
    stroke: #555555; /* Cinza médio */
    stroke-width: 1.75;
}

.single-social-icon:hover {
    background-color: #636363;
}

.dark .single-social-icon:hover {
    background-color: #E8E8E8;
}

/* Espaçamento para blocos de código ou citações */
#single-post .prose blockquote {
    border-left: 4px solid rgba(158, 98, 159, 0.5);
    padding-left: 1rem;
    font-style: italic;
    margin: 1.5rem 0;
}

.dark #single-post .prose blockquote {
    border-left-color: rgba(176, 120, 177, 0.5);
}

/* Estilização dos ícones de compartilhamento social no single post */
#single-post .single-social-icon {
    width: 28px;
    height: 28px;
    color: var(--color-lilas-500);
}

.dark #single-post .single-social-icon {
    color: var(--color-lilas-dark, #b078b1);
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    #single-post .breadcrumb-container {
        margin-bottom: 2rem;
    }
    
    #single-post .prose h2 {
        font-size: 20px;
    }
    
    #single-post .prose h3 {
        font-size: 18px;
    }
    
    /* Ajustes para imagens em dispositivos móveis no single post */
    #single-post .wp-block-image {
        margin: 1rem 0 !important;
    }
    
    #single-post .wp-block-image img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Para telas muito pequenas no single post */
@media (max-width: 480px) {
    #single-post .wp-block-image img {
        border-radius: 0.25rem;
    }
}