/**
 * Estilos específicos para o template de página padrão
 */

/* Variáveis CSS dinâmicas para cores do breadcrumb */
:root {
    --breadcrumb-color: var(--color-lilas-500);
    --breadcrumb-hover-color: var(--color-lilas-600);
    --breadcrumb-text-color: var(--breadcrumb-color);
}

/* Modo escuro */
.dark {
    --breadcrumb-color: var(--color-lilas-dark);
    --breadcrumb-hover-color: var(--color-lilas-dark-hover);
    --breadcrumb-text-color: var(--breadcrumb-color);
}

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

/* Estilos para os links do breadcrumb */
/* Estilo base para o item atual do breadcrumb no modo light */
.breadcrumb-link {
    color: rgba(0, 0, 0, 0.8);
    transition: color 0.2s ease;
}

/* Hover para o item atual do breadcrumb no modo light */
body:not(.dark) .breadcrumb-link:hover {
    color: var(--breadcrumb-hover-color, #8d4c8e) !important;
}

/* Estilo para dark mode */
.dark .breadcrumb-link {
    color: var(--breadcrumb-text-color);
}

/* Hover para o item atual do breadcrumb no modo dark */
.dark .breadcrumb-link:hover {
    color: var(--breadcrumb-hover-color) !important;
}

/* Setas do breadcrumb */
.page-breadcrumb-container svg path {
    fill: currentColor;
    color: var(--breadcrumb-color);
}

/* Estilos para o conteúdo da página */
.page-content {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 1.5 = 24px */
    letter-spacing: 0%;
    color: rgba(0, 0, 0, 0.7); /* 70% black para legibilidade */
}

/* Espaçamento entre parágrafos */
.page-content p {
    margin-bottom: 1.5rem; /* 24px */
}

/* Estilos de cabeçalho */
.page-content h2 {
    font-size: 22px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8); /* 80% black */
}

.page-content 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 */
.page-content a {
    color: var(--color-lilas-500);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, color 0.3s;
}

.page-content a:hover {
    border-color: currentColor;
}

/* Ajustes específicos para dark mode */
.dark .page-content {
    color: rgba(255, 255, 255, 0.7); /* 70% white para melhor legibilidade */
}

.dark .page-content h2,
.dark .page-content h3 {
    color: rgba(255, 255, 255, 0.8); /* 80% white */
}

.dark .page-content a {
    color: var(--color-lilas-dark, #b078b1);
}

/* Melhoria para prevenir piscadas durante o carregamento */
.page-content {
    content-visibility: visible !important;
    contain-intrinsic-size: auto;
}

/* Espaçamento entre blocos WordPress */
.wp-block, 
[data-block-id],
.wp-block-group,
.content-listing-block,
.accordion-document-block,
.link-simples-block {
    margin-top: 1.0rem !important;
    margin-bottom: 1.0rem !important;
}

/* Ajuste do bloco padrão Separador do Gutenberg nas páginas */
.page-content hr.wp-block-separator,
.page-content .wp-block-separator {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.dark .page-content hr.wp-block-separator,
.dark .page-content .wp-block-separator {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Garantir que parágrafos entre blocos sejam respeitados */
.wp-block-paragraph {
    display: block !important;
    min-height: 1.5rem;
    margin-top: 1.0rem !important;
    margin-bottom: 1.0rem !important;
}

/* Garantir espaçamento entre blocos que são irmãos */
.wp-block + .wp-block,
[data-block-id] + [data-block-id],
.content-listing-block + .content-listing-block,
.accordion-document-block + .accordion-document-block,
.link-simples-block + .link-simples-block {
    margin-top: 1.0rem !important;
}

/* Estabilização de imagens para prevenir layout shifts */
.page-content img {
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    contain: none !important;
    contain-intrinsic-size: auto !important;
    content-visibility: visible !important;
}

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

/* Imagem dentro do bloco de imagem do WordPress */
.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 */
.wp-block-image img[width] {
    width: auto;
    max-width: min(100%, 1200px);
}

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

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

/* Para imagens com altura muito pequena, garantir que não tenham padding vertical extra */
.wp-block-image img[height="40"],
.wp-block-image img[height="30"],
.wp-block-image img[height="20"],
.wp-block-image img[style*="height: 40px"],
.wp-block-image img[style*="height: 30px"],
.wp-block-image img[style*="height: 20px"] {
    vertical-align: middle;
    line-height: 1;
}

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

.page-content .wp-block-image.aligncenter { text-align: center; }
.page-content .wp-block-image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

html body .page-content .wp-block-image:not(.aligncenter) {
    text-align: left !important;
}

html body .page-content .wp-block-image:not(.aligncenter) img {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body .page-content .wp-block-image {
    text-align: left !important;
}

html body .page-content .wp-block-image.aligncenter {
    text-align: center !important;
}
/* Suporte a alinhamento quando a classe está no elemento interno (figure ou img) */
.page-content .wp-block-image .alignleft { float: left; margin-right: 1rem; margin-bottom: 1rem; }
.page-content .wp-block-image .alignright { float: right; margin-left: 1rem; margin-bottom: 1rem; }
.page-content .wp-block-image .aligncenter { display: table; margin-left: auto; margin-right: auto; text-align: center; }
.page-content .wp-block-image .aligncenter img { margin-left: auto !important; margin-right: auto !important; }
html body .page-content .wp-block-image > figure.aligncenter > img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Anular centralização padrão do Tailwind Typography (.prose) */
html body .page-content.prose img {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Centralizar apenas quando .aligncenter estiver presente */
html body .page-content.prose .wp-block-image.aligncenter img,
html body .page-content.prose img.aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Caso o alinhamento esteja no figure interno */
html body .page-content.prose .wp-block-image .aligncenter img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Garantir que wrappers respeitem alinhamentos declarados (regras específicas abaixo) */

/* Regra genérica para imagens decorativas/grafismos (largura >= 800px e altura <= 100px) */
.wp-block-image img[width][height] {
    /* JavaScript seria necessário para cálculo dinâmico, mas CSS puro funciona com as regras acima */
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0;
}

/* Específico para grafismos com altura muito pequena (≤ 100px) */
.wp-block-image img[height="39"],
.wp-block-image img[height="40"],
.wp-block-image img[height="30"],
.wp-block-image img[height="20"],
.wp-block-image img[height="50"],
.wp-block-image img[height="60"],
.wp-block-image img[height="70"],
.wp-block-image img[height="80"],
.wp-block-image img[height="90"],
.wp-block-image img[height="100"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
}

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

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

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

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

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

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

/* Solução universal: todas as imagens em blocos size-large e size-full ocupam 100% */
/* Isso garante que qualquer imagem decorativa/grafismo funcione corretamente */

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

/* Fix robusto: impedir distorção mantendo proporções e respeitando tamanhos nativos */
html body .page-content .wp-block-image img,
html body .page-content .wp-block-image.size-large img,
html body .page-content .wp-block-image.size-full img,
html body .page-content img[src*="grafismo"],
html body .page-content img.wp-image-1006 {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: unset !important;
    object-fit: unset !important;
    display: block !important;
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

/* Resetar a altura de figure/containers do bloco de imagem no conteúdo da página */
html body .page-content figure.wp-block-image,
html body .page-content .wp-block-image,
html body .page-content .wp-block-image figure {
    height: auto !important;
    min-height: 0 !important;
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

html body .page-content img[sizes="auto"],
html body .page-content img[sizes^="auto,"] {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

html body .page-content img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

/* Override global para anular placeholders gerados pelo Gutenberg/Chrome */
img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

/* Regra adicional para imagens com aspect ratio horizontal extremo */
/* Funciona para qualquer imagem onde largura/altura >= 10 */
.wp-block-image img[width][height] {
    /* JavaScript seria necessário para cálculo dinâmico, mas CSS puro funciona com as regras acima */
}

.page-content .wp-block-image.alignleft,
.page-content img.alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.page-content .wp-block-image.alignright,
.page-content img.alignright {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.page-content .wp-block-image.aligncenter,
.page-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Forçar centralização correta quando a classe está no figure interno */
html body .page-content .wp-block-image > .aligncenter {
    display: inline-block !important; /* shrink-to-fit do conteúdo (imagem) */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
}

.page-content .wp-block-image.alignleft,
.page-content .wp-block-image.alignright {
    width: auto;
    max-width: 100%;
}



.page-content img.wp-image-1006 {
    aspect-ratio: 1200 / 46 !important;
    contain-intrinsic-size: 1200px 46px !important;
}

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

.dark .page-content blockquote {
    border-left-color: rgba(176, 120, 177, 0.5);
}

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

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

/* Overrides finais de alinhamento (alta especificidade) */
html body .page-content .wp-block-image.alignleft,
html body .page-content .wp-block-image figure.alignleft,
html body .page-content img.alignleft {
    float: left !important;
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

html body .page-content .wp-block-image.alignright,
html body .page-content .wp-block-image figure.alignright,
html body .page-content img.alignright {
    float: right !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

html body .page-content .wp-block-image.aligncenter,
html body .page-content .wp-block-image figure.aligncenter,
html body .page-content img.aligncenter {
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Garantir que imagens respeitam tamanhos nativos, sem esticar além do container */
html body .page-content .wp-block-image img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Encolher o figure.aligncenter ao conteúdo e centralizar */
html body .page-content .wp-block-image > figure.aligncenter {
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}