/*
Theme Name: Pesquisas W1
Theme URI: https://example.com/pesquisas-w1/
Author: Seu Nome/Sua Empresa
Author URI: https://example.com/
Description: Tema WordPress inspirado no layout da CNN Brasil, com foco em notícias, menu fixo e cor predominante azul.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: news, portal, blue, fixed-menu
Text Domain: pesquisas-w1
*/

/* === ESTILOS DE DEPURAÇÃO TEMPORÁRIOS === */
/* REMOVIDOS */
/* === FIM DOS ESTILOS DE DEPURAÇÃO === */


/* Estilos Globais Iniciais */
html {
    box-sizing: border-box;
    height: 100%; /* Para sticky footer */
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: 'Roboto';
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
    padding-top: 110px; /* Ajustado para header fixo. Este valor é para desktop sem admin bar. */
    height: 100%; /* Para sticky footer */
    display: flex; /* Para garantir que #page possa usar min-height: 100% efetivamente */
    flex-direction: column; /* Para garantir que #page possa usar min-height: 100% efetivamente */
}

.fundo-geral-corpo {
    background-color: <?php echo esc_attr( get_theme_mod( 'cor_fundo_geral_corpo', '#ffffff' ) ); ?>;
    background-image: url( '<?php echo esc_url( $background_image ); ?>' );
    background-repeat: <?php echo esc_attr( $background_repeat ); ?>;
    background-position: <?php echo esc_attr( $background_position ); ?>;
    background-size: <?php echo esc_attr( $background_size ); ?>;
}

.sombra-laterais {
    box-shadow: 0px 0px 30px 10px #888;
    background-color: <?php echo esc_attr( get_theme_mod( 'cor_fundo_centro_corpo', '#ffffff' ) ); ?>;
}

a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* Screen reader text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important; /* Usa important para garantir que seja absoluto */
	width: 1px;
	word-wrap: normal !important; /* Impede quebras de linha estranhas */
}

/* Cabeçalho Fixo e Estilos Azuis */
#masthead {
    background-color: <?php echo esc_attr( get_theme_mod( 'header_background_color', '#004075' ) ); ?>;
    color: <?php echo esc_attr( get_theme_mod( 'header_text_color', '#ffffff' ) ); ?>;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Container APENAS para o branding */
#masthead > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 60px; /* Exemplo, ajuste conforme o logo e título */
}

#masthead .site-branding {
    margin: 0;
    padding: 0;
    display: flex; /* Para alinhar logo e texto, se ambos existirem */
    align-items: center;
}

#masthead .site-title a,
#masthead .site-description {
    color: inherit; /* Herda a cor do #masthead */
    text-decoration: none;
}

#masthead .site-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

#masthead .site-description {
    font-size: 24px;
    opacity: 0.8;
    margin: 0 0 0 10px; /* Espaço à esquerda se houver título e descrição */
    padding: 0;
}

/* Custom Logo */
#masthead .custom-logo-link {
    line-height: 0;
    margin-right: 15px; /* Espaço entre o logo e o título/descrição */
}

#masthead .custom-logo-link img {
    max-height: 80px; /* Ajuste conforme o design do seu logo */
    width: auto;
    vertical-align: middle;
}

/* Barra de Navegação Principal */
#site-navigation {
    background-color: <?php echo esc_attr( get_theme_mod( 'main_navigation_bar_bg_color', '#003366' ) ); ?>;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    min-height: 50px; /* Altura mínima para a barra de navegação */
    display: flex; /* Para centralizar o container verticalmente */
    align-items: center; /* Para centralizar o container verticalmente */
}

/* Container dentro da navegação para alinhar os itens do menu e o toggle */
#site-navigation > .container {
    display: flex;
    justify-content: space-between; /* No desktop, menu à direita. No mobile, toggle à direita */
    align-items: center;
    width: 100%; /* Para que o container interno ocupe toda a largura do #site-navigation */
}

/* Lista de Menu Principal (Desktop) */
#site-navigation ul#primary-menu {
    list-style: none;
    margin: 10px 0px 10px 0px;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    font-family: 'Roboto';
}

#site-navigation ul#primary-menu li {
    margin-left: 0; /* Gap cuida do espaçamento */
}

#site-navigation ul#primary-menu li a {
    display: block;
    padding: 10px 15px; /* Padding dos itens do menu */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 4px;
    color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_text_color', '#ffffff' ) ); ?>;
    background-color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_bg_color', 'transparent' ) ); ?>;
    border: 1px solid transparent;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

#site-navigation ul#primary-menu li a:hover,
#site-navigation ul#primary-menu li.current-menu-item > a,
#site-navigation ul#primary-menu li.current_page_item > a {
    color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_hover_text_color', '#ffffff' ) ); ?>;
    background-color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_hover_bg_color', '#005599' ) ); ?>;
}

/* Botão de Menu Mobile */
.menu-toggle {
    display: none; /* Escondido no desktop */
    background-color: transparent;
    color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_text_color', '#ffffff' ) ); ?>; /* Cor do ícone */
    padding: 8px; /* Padding ao redor do ícone */
    margin: 0; /* Reset de margem, o alinhamento é pelo flex do container */
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    line-height: 0; /* Para alinhar SVG verticalmente */
}

.menu-toggle:hover {
    background-color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_hover_bg_color', '#005599' ) ); ?>;
    color: <?php echo esc_attr( get_theme_mod( 'main_menu_item_hover_text_color', '#ffffff' ) ); ?>;
}

.menu-toggle .icon { /* Classe genérica para o ícone SVG */
    width: 24px;
    height: 24px;
    fill: currentColor;
    vertical-align: middle;
}


/* Responsividade do Menu Principal */
@media (max-width: 768px) {
    #masthead > .container { /* Container do branding */
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 5px;
        min-height: 50px; /* Altura menor no mobile */
    }
    #masthead .custom-logo-link img {
        max-height: 40px; /* Logo menor no mobile */
    }
    #masthead .site-title {
        font-size: 20px; /* Título menor no mobile */
    }
    #masthead .site-description {
        display: none; /* Esconder descrição no mobile para economizar espaço */
    }

    #site-navigation {
        min-height: 44px; /* Altura menor para a barra de navegação no mobile */
    }

    #site-navigation > .container {
        justify-content: flex-end; /* Alinha o botão toggle à direita */
        position: relative; /* Necessário para o posicionamento absoluto do menu dropdown */
    }
    
    .menu-toggle {
        display: block; /* Mostra o botão de toggle */
    }

    /* Esconder o menu desktop no mobile */
    #site-navigation ul#primary-menu {
        display: none; /* Escondido por padrão */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;  /* Posiciona abaixo da barra de navegação #site-navigation */
        left: 0;
        right: 0;
        z-index: 999;
        background-color: <?php echo esc_attr( get_theme_mod( 'main_navigation_bar_bg_color', '#003366' ) ); ?>;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        padding: 5px 0;
        gap: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    #site-navigation ul#primary-menu.toggled-on {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;  /* Posiciona abaixo da barra de navegação #site-navigation */
        left: 0;
        right: 0;
        z-index: 999;
        background-color: <?php echo esc_attr( get_theme_mod( 'main_navigation_bar_bg_color', '#003366' ) ); ?>;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        padding: 5px 0;
        gap: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    #site-navigation ul#primary-menu.toggled-on li {
        width: 100%;
        margin-left: 0;
    }

    #site-navigation ul#primary-menu.toggled-on li a {
        padding: 12px 20px;
        text-align: left;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Separador mais sutil */
        width: 100%;
        box-sizing: border-box;
        /* Cores e transições são herdadas dos seletores mais genéricos de 'li a' */
    }

    #site-navigation ul#primary-menu.toggled-on li:last-child a {
        border-bottom: none;
    }
}

/*
    Conteúdo Principal e Estrutura da Página
*/
#page {
    display: flex; /* Ativa flexbox */
    flex-direction: column; /* Empilha os filhos verticalmente */
    min-height: 100vh; /* Ocupa no mínimo toda a altura da viewport */
    /* Se body não for flex, então #page precisa de width:100% e ser o container flex principal */
    /* Como body agora é flex, #page vai se comportar como um item flex que pode crescer */
    flex-grow: 1; /* Faz com que #page ocupe o espaço disponível no body flex container */
}

#content {
    flex-grow: 1; /* Faz com que o conteúdo principal cresça e empurre o rodapé para baixo */
    /* O wrapper principal para o conteúdo da página (excluindo header e footer) */
}

#content .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Layouts de Conteúdo e Sidebar */
.content-area {
    flex: 1;
    margin-top: 2rem;
}

.widget-area {
    width: 300px;
    margin-left: 20px;
}

/* Widgets */
.widget {
    margin-bottom: 20px;
    padding: 15px;
}

.widget-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Estilos de Posts e Páginas */
.site-main article {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.site-main article:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.entry-title {
    margin-top: 5rem !important;
    font-size: 3rem;
    margin-bottom: 3rem;
    font-family: 'Roboto';
    font-weight: 700;
    border-bottom: 11px dotted #b7b7b7;
}

.entry-title a {
    color: #333;
}

.entry-title a:hover {
    color: #0073aa;
}

.entry-meta {
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
    margin-bottom: 15px;
    line-height: 1.6;
}

.entry-content a {
    /* Estilos para links dentro do conteúdo, se diferentes dos globais */
}
.entry-content a:hover {
    /* ... */
}

/* === Text Formatting Utilities === */
/* .text-justify { 
    text-align: justify;
} */ /* REMOVIDO - Usaremos Estilo de Bloco agora */

/* Adicionar regra para o estilo de bloco justificado */
.is-style-justify {
    text-align: justify;
}

/* === Blockquote Styles (Revisado Conforme Nova Imagem) === */
.entry-content blockquote,
.widget blockquote,
.widget .wp-block-quote {
    position: relative;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.1em;
    line-height: 1.7;
    color: #333;
    padding: 20px 40px 20px 50px;
    margin: 30px 0;
    background-color: #fdfdfd; /* Fundo claro */
    border-radius: 1rem; /* Cantos arredondados */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /* Sombra */
}

/* REMOVIDAS as Linhas superior e inferior */
/* .entry-content blockquote::before, 
.entry-content blockquote::after { ... } */

/* Aspas de abertura (Revisada) */
.entry-content blockquote p::before,
.widget blockquote p::before,
.widget .wp-block-quote p::before {
    content: "\201C"; /* Aspa dupla de abertura " */
    font-family: Georgia, serif;
    font-size: 3.5em; /* Tamanho ajustado */
    color: #777; /* Cor cinza para aspas */
    position: absolute;
    left: 10px; /* Ajustado */
    top: 0px;   /* Ajustado para alinhar com topo do texto */
    line-height: 1;
    opacity: 0.9;
}

/* Aspas de fechamento (Nova) */
.entry-content blockquote p::after,
.widget blockquote p::after,
.widget .wp-block-quote p::after {
    content: "\201D"; /* Aspa dupla de fechamento " */
    font-family: Georgia, serif;
    font-size: 3.5em; /* Tamanho ajustado */
    color: #777; /* Cor cinza para aspas */
    position: absolute;
    right: 15px; /* Ajustado */
    bottom: -15px; /* Ajustado para alinhar com base do texto */
    line-height: 1;
    opacity: 0.9;
}

/* Primeira letra do parágrafo dentro do blockquote */
.entry-content blockquote p::first-letter,
.widget blockquote p::first-letter,
.widget .wp-block-quote p::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: #333; /* Cor da primeira letra (escura em fundo claro) */
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    margin-top: 0.1em;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Estilos para <cite> comentados, pois não está na nova imagem */
/*
.entry-content blockquote cite,
.widget blockquote cite,
.widget .wp-block-quote cite {
    display: block;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    font-style: normal;
    color: #fff;
    background-color: #333;
    padding: 5px 15px;
    margin-top: 20px;
    margin-right: -30px;
    position: relative;
    z-index: 5;
    float: right;
    clear: both;
}
*/

/* --- Variação para Blockquote em Fundo Escuro (Revisada) --- */
.blockquote-on-dark {
    color: #f0f0f0 !important; /* Texto claro */
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fundo sutil em contexto escuro */
    border-radius: 1rem !important; /* Mesmo border-radius */
    box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 29px 0px !important; /* Sombra pode precisar de ajuste em fundo escuro */
}

/* REMOVIDAS as Linhas para .blockquote-on-dark */
/* .blockquote-on-dark::before, 
.blockquote-on-dark::after { ... } */

/* Aspas em fundo escuro (Revisada) */
.blockquote-on-dark p::before, 
.blockquote-on-dark p::after {
    color: #aaa !important; /* Cor das aspas clara (cinza claro) */
}

.blockquote-on-dark p::first-letter {
    color: #f0f0f0 !important; /* Primeira letra clara */
}

/* Estilos para <cite> em fundo escuro comentados */
/*
.blockquote-on-dark cite {
    color: #333 !important;
    background-color: #f0f0f0 !important;
}
*/

/* === List Styles (Content & Widgets) === */
/* Container da Lista (ol e ul) */
.entry-content ol,
.widget ol,
.entry-content ul,
.widget ul {
    border: 1px solid #eee; /* Borda clara ao redor */
    padding: 20px 20px 20px 40px; /* Padding interno (Top, Right, Bottom, Left) */
    margin: 20px 0 20px 30px; /* Margem Top, Right, Bottom, Left (aumentado o Left para recuo) */
    list-style: none; /* Remove marcadores padrão */
    background-color: #fdfdfd; /* Fundo levemente diferente para destacar a caixa */
    border-radius: 1rem; /* Cantos arredondados */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Reset de contador para listas ordenadas */
.entry-content ol,
.widget ol {
    counter-reset: list-item-counter; 
}

/* Itens da Lista (li) */
.entry-content li,
.widget li {
    position: relative; /* Necessário para posicionar o ::before */
    padding-left: 15px; /* Espaço entre o marcador e o texto */
    margin-bottom: 10px; /* Espaço entre itens da lista */
}

.entry-content li:last-child,
.widget li:last-child {
    margin-bottom: 0; /* Remove espaço do último item */
}

/* Base para Marcadores Personalizados (::before) */
.entry-content li::before,
.widget li::before {
    position: absolute;
    left: -25px; /* Posição horizontal do marcador (ajuste conforme necessário) */
    top: 0; /* Alinhamento vertical inicial (pode precisar ajustar) */
    font-family: 'Brush Script MT', 'Brush Script Std', cursive; /* Fonte cursiva para marcadores */
    font-size: 1.2em; /* Tamanho do marcador */
    line-height: 1.4; /* Ajustar para alinhar verticalmente com o texto do li */
}

/* Marcador para Listas Ordenadas (ol > li) */
.entry-content ol > li::before,
.widget ol > li::before {
    counter-increment: list-item-counter;
    content: counter(list-item-counter);
    background-color: #f0f0f0; /* Fundo do círculo claro */
    color: #777; /* Cor do número (cinza) */
    border-radius: 50%; /* Faz o círculo */
    width: 28px; /* Largura do círculo */
    height: 28px; /* Altura do círculo */
    text-align: center;
    line-height: 28px; /* Centraliza o número verticalmente no círculo */
    font-size: 0.9em; /* Tamanho do número dentro do círculo */
    font-family: 'Brush Script MT', 'Brush Script Std', cursive; /* Fonte cursiva para o número */
    font-weight: bold;
    left: -30px; /* Ajuste fino da posição horizontal do círculo */
    top: -2px;  /* Ajuste fino da posição vertical do círculo */
}

/* Marcador para Listas Não Ordenadas (ul > li) */
.entry-content ul > li::before,
.widget ul > li::before {
    /*content: "-";  Hífen */
    color: #555; /* Cor do hífen */
    font-weight: bold;
    font-size: 1.5em;
    left: -20px; /* Ajuste fino da posição horizontal do hífen */
     /* Top herdado da regra base ::before, ajustar se necessário */
}

/* --- Variação para Listas em Fundo Escuro --- */
/* Se você tiver um container com .has-dark-background ou similar */
.has-dark-background .entry-content ol,
.has-dark-background .widget ol,
.has-dark-background .entry-content ul,
.has-dark-background .widget ul {
    border-color: #555; /* Borda mais escura em fundo escuro */
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil */
}

/* Marcador OL em fundo escuro */
.has-dark-background .entry-content ol > li::before,
.has-dark-background .widget ol > li::before {
    background-color: #444; /* Círculo mais escuro */
    color: #ccc; /* Número claro */
}

/* Marcador UL em fundo escuro */
.has-dark-background .entry-content ul > li::before,
.has-dark-background .widget ul > li::before {
    color: #aaa; /* Hífen claro */
}

/* --- Fim dos Estilos de Lista --- */

/* Rodapé */
#colophon {
    background-color: <?php echo esc_attr( get_theme_mod( 'footer_background_color', '#333333' ) ); ?>;
    color: <?php echo esc_attr( get_theme_mod( 'footer_text_color', '#cccccc' ) ); ?>;
    padding: 0;
    font-size: 14px;
}

.footer-section-wrapper {
    padding: 20px 0;
    border-bottom: 1px solid <?php echo esc_attr( get_theme_mod( 'footer_separator_color', '#444444' ) ); ?>;
}
.footer-section-wrapper:last-child {
    border-bottom: none;
}
.footer-section-wrapper .container {
    /* Herda padding lateral, pode adicionar vertical se precisar */
}

.footer-menu-section,
.footer-custom-content-section,
.footer-widgets-section,
.footer-social-links-section,
.footer-site-info-section {
    /* Estrutura */
}

.footer-section-title {
    font-size: 16px;
    font-weight: bold;
    color: <?php echo esc_attr( get_theme_mod( 'footer_title_color', '#ffffff' ) ); ?>;
    margin-top: 0;
    margin-bottom: 15px;
}

.footer-custom-content p {
    margin-top: 0;
    line-height: 1.6;
    color: inherit;
}


ul.footer-navigation-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
ul.footer-navigation-menu li {
    margin-bottom: 0;
}
ul.footer-navigation-menu li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
ul.footer-navigation-menu li a:hover {
    color: <?php echo esc_attr( get_theme_mod( 'footer_link_hover_color', '#ffffff' ) ); ?>;
    text-decoration: underline;
}

.footer-main-navigation {
    width: 100%;
}
.footer-menu-toggle {
    display: none;
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    text-align: left;
    width: 100%;
    font-weight: bold;
}

/* ul.footer-navigation-menu já estilizado acima */

.footer-menu-section-content p {
    margin: 0;
    padding: 10px 0;
    color: inherit;
    font-size: 0.9em;
}


@media (max-width: 768px) {
    .footer-main-navigation .footer-menu-toggle {
        /* display: block;  Apenas se este menu de rodapé tiver um toggle próprio */
    }
    /* Estilos para .footer-main-navigation ul.footer-navigation-menu.toggled-on seriam necessários aqui se o toggle fosse ativo */
    ul.footer-navigation-menu {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* Ajustes de responsividade para conteúdo e sidebar */
    #content .container {
        /* Ajustes para o container do conteúdo em telas menores, se necessário */
    }
    .content-area,
    .widget-area {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.footer-social-wrapper {
    /* Wrapper de largura total */
}
.footer-social-wrapper .container {
    /* display: flex; */
    /* justify-content: center; */
}

.footer-social-section {
    /* text-align: center; */
}

ul.footer-social-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap; /* Para garantir que fiquem sempre lado a lado */
    justify-content: center; /* Centraliza os ícones como um grupo */
    align-items: center; /* Alinha verticalmente os ícones na linha */
    gap: 10px;
    /* Descomente abaixo se quiser rolagem horizontal quando os itens não couberem: */
    /* overflow-x: auto; */
    /* padding-bottom: 5px; */ /* Espaço para barra de rolagem se overflow-x: auto for usado */
}

ul.footer-social-links-list li a {
    display: inline-block;
    padding: 8px;
    color: <?php echo esc_attr( get_theme_mod( 'footer_social_icon_color', '#cccccc' ) ); ?>;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 0;
}
ul.footer-social-links-list li a:hover {
    color: <?php echo esc_attr( get_theme_mod( 'footer_social_icon_hover_color', '#ffffff' ) ); ?>;
    transform: scale(1.1);
}

ul.footer-social-links-list li a svg,
ul.footer-social-links-list li a img {
    width: <?php echo esc_attr( get_theme_mod( 'footer_social_icon_size', '24' ) ); ?>px;
    height: <?php echo esc_attr( get_theme_mod( 'footer_social_icon_size', '24' ) ); ?>px;
    fill: currentColor;
    vertical-align: middle;
}

.footer-widgets-content-area .widget a {
    transition: color 0.3s ease;
    color: inherit;
}
.footer-widgets-content-area .widget a:hover {
    color: <?php echo esc_attr( get_theme_mod( 'footer_link_hover_color', '#ffffff' ) ); ?>;
}

#colophon .site-info a {
    transition: color 0.3s ease;
    color: inherit;
    font-weight: bold;
}
#colophon .site-info a:hover {
    color: <?php echo esc_attr( get_theme_mod( 'footer_link_hover_color', '#ffffff' ) ); ?>;
}

/* Ajuste final para garantir que os estilos de menu mobile não sejam sobrescritos por engano por regras posteriores */
@media (max-width: 768px) {
    #site-navigation ul#primary-menu.toggled-on {
        display: flex !important; /* Garante a visibilidade */
    }
}

/* Ajustes para a Barra de Administração do WordPress */
body.admin-bar #masthead {
    top: 32px;
}
body.admin-bar {
    /* Ajusta o padding-top do body para compensar o header fixo + nav + admin bar */
    /* Altura do header (#masthead > .container min-height) + Altura da nav (#site-navigation min-height) + Altura da admin bar */
    /* Exemplo: 60px (header) + 50px (nav) + 32px (admin_bar) = 142px. Ajuste conforme suas alturas. */
    /* Este padding-top inicial do body precisa ser revisto: */
    /* padding-top: 142px; */ /* Recalcular com base nas alturas do header e nav */
}

@media screen and (max-width: 782px) { /* Admin bar mobile */
    body.admin-bar #masthead {
        top: 46px;
    }
    body.admin-bar {
        /* Exemplo: 50px (header mobile) + 44px (nav mobile) + 46px (admin_bar mobile) = 140px */
        /* padding-top: 140px; */ /* Recalcular com base nas alturas mobile */
    }
}

/* Ajuste final do padding-top do body baseado nas alturas do #masthead e #site-navigation */
/* Desktop: Supondo #masthead > .container min-height 60px e #site-navigation min-height 50px */
body:not(.admin-bar) {
    padding-top: 110px; /* 60 + 50 */
}

@media (max-width: 768px) { /* Breakpoint do tema para mobile */
    /* Mobile: Supondo #masthead > .container min-height 50px e #site-navigation min-height 44px */
    body:not(.admin-bar) {
        padding-top: 94px; /* 50 + 44 */
    }

    /* Ajustes de responsividade para conteúdo e sidebar */
    #content .container {
        /* Ajustes para o container do conteúdo em telas menores, se necessário */
    }
    .content-area,
    .widget-area {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.footer-widgets-content-area .widget {
    background-color: transparent !important; /* Garantir transparência */
    border: none !important; /* Garantir sem borda, se desejado */
    padding: 0 !important; /* Garantir sem padding, se desejado */
    color: inherit;
    box-shadow: none !important; /* Remover qualquer sombra que possa estar aplicada */
}
.footer-widgets-content-area .widget:last-child {
    /* ... existing code ... */
}

/* Estilos para a Modal de Confirmação de Logout */
#logout-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Garante que a modal esteja acima de outros elementos */
}

#logout-confirm-modal .modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
}

#logout-confirm-modal .modal-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 1.5em;
}

#logout-confirm-modal .modal-content p {
    margin-bottom: 25px;
    color: #555;
    font-size: 1em;
}

#logout-confirm-modal .modal-buttons {
    display: flex;
    justify-content: space-around;
    gap: 15px; /* Espaçamento entre os botões */
    margin-top: 20px;
}

#logout-confirm-modal .modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

#logout-confirm-modal .modal-buttons #confirm-logout {
    background-color: #dc3232; /* Cor vermelha para confirmar sair */
    color: #fff;
}

#logout-confirm-modal .modal-buttons #confirm-logout:hover {
    background-color: #c92222;
}

#logout-confirm-modal .modal-buttons #cancel-logout {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}

#logout-confirm-modal .modal-buttons #cancel-logout:hover {
    background-color: #e0e0e0;
}