/*
Theme Name: Aladigital
Theme URI: https://aladigital.com.br/
Author: Seu Nome
Author URI: https://aladigital.com.br/
Description: Tema filho personalizado para o site Aladigital, baseado no Spectra One.
Version: 1.8
Template: spectra-one
*/

/**
 * =======================================================
 *  1. ESTILOS GLOBAIS E AJUSTES DE LAYOUT
 * =======================================================
 */

/* Ajuste no Loop de Consulta (Páginas de Arquivo) */
/* Remove o espaço acima do link "Ver análise completa" */
.wp-block-post-template .wp-block-post-excerpt__more-text {
    margin-top: 0 !important;
}

/* Ajuste de espaçamento nos metadados do post */
.last-updated {
    margin-left: 8px !important;
}

/* =======================================================
 *  1.1. ESTILOS GERAIS PARA LINKS (MODO CLARO)
 * ======================================================= */
/* Aplica a cor azul escuro para todos os links por padrão */
.wp-block-post-title a,
.wp-block-post-template .wp-block-post-title a,
a {
    color: #003366; /* Azul escuro */
    transition: color 0.3s ease; /* Transição suave para o hover */
}

/* Hover para links no modo claro (preto) */
.wp-block-post-title a:hover,
.wp-block-post-template .wp-block-post-title a:hover,
a:hover {
    color: #000000 !important; /* Preto */
}

/**
 * =======================================================
 *  2. ESTILOS PARA CORES DE CATEGORIAS
 * =======================================================
 */
.post-card-category a {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: var(--wp--preset--color--white) !important; /* Usando a nova variável white */
    margin-bottom: 8px !important;
    border: none !important;
}
/* As cores específicas das categorias são definidas aqui */
.post-card-category a[href*="category/smartphones"] { background-color: var(--wp--preset--color--cat-smartphones) !important; }
.post-card-category a[href*="category/notebooks-pcs"] { background-color: var(--wp--preset--color--cat-notebooks) !important; }
.post-card-category a[href*="category/audio-video"] { background-color: var(--wp--preset--color--cat-audio-video) !important; }
.post-card-category a[href*="category/casa-conectada"] { background-color: var(--wp--preset--color--cat-casa-conectada) !important; color: var(--wp--preset--color--main-text) !important; } /* Casa Conectada precisa de texto escuro no modo claro */


/**
 * =======================================================
 *  3. ESTILIZAÇÃO DO FORMULÁRIOS DE COMENTÁRIOS
 * =======================================================
 */
.wp-block-post-comments-form .comment-reply-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--main-text) !important; /* Usa a variável de texto principal */
}
.wp-block-post-comments-form .comment-notes {
    font-size: 14px !important;
    color: #666666 !important; /* Manter fixo ou criar uma variável para notas */
}
.wp-block-post-comments-form .comment-form input[type="text"],
.wp-block-post-comments-form .comment-form input[type="email"],
.wp-block-post-comments-form .comment-form input[type="url"],
.wp-block-post-comments-form .comment-form textarea {
    background-color: var(--wp--preset--color--white) !important; /* Usa a nova variável white */
    border: 1px solid #CCCCCC !important; /* Manter fixo ou criar uma variável para bordas de input */
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    color: var(--wp--preset--color--main-text) !important; /* Usa a variável de texto principal */
}
.wp-block-post-comments-form .comment-form input:focus,
.wp-block-post-comments-form .comment-form textarea:focus {
    border-color: var(--wp--preset--color--primary-color) !important; /* Usa a variável primária */
    outline: none !important;
    box-shadow: none !important;
}
.wp-block-post-comments-form .comment-form textarea#comment {
    height: 80px !important;
    min-height: 80px !important;
    resize: vertical !important;
}
.wp-block-post-comments-form .comment-form .form-submit input#submit {
    background-color: var(--wp--preset--color--primary-color) !important; /* Usa a variável primária */
    color: var(--wp--preset--color--white) !important; /* Usa a nova variável white */
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 10px 26px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: auto !important;
    display: inline-block !important;
}
.wp-block-post-comments-form .comment-form .form-submit input#submit:hover {
    background-color: #005bbd !important; /* Hover fixo, ou pode ser uma variação da primária */
    color: var(--wp--preset--color--white) !important;
}

/**
 * =======================================================
 *  4. ESTILIZAÇÃO DOS POSTS RELACIONADOS (GRID RESPONSIVO)
 * =======================================================
 */
.display-posts-listing {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.display-posts-listing .listing-item {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}
.display-posts-listing .image {
    margin-bottom: 16px;
}
.display-posts-listing .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.display-posts-listing .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.display-posts-listing .category-display {
    display: block !important;
    margin-bottom: 8px !important;
    order: -1;
}
.display-posts-listing .category-display a {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: var(--wp--preset--color--white) !important;
}
.display-posts-listing .title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    flex-grow: 1;
}
.display-posts-listing .title a {
    text-decoration: none !important;
    color: var(--wp--preset--color--main-text) !important;
}
.display-posts-listing .title a:hover {
    color: var(--wp--preset--color--primary-color) !important;
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
    .display-posts-listing {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/**
 * =======================================================
 *  5. ESTILOS PARA O MODO ESCURO (DARK THEME)
 * =======================================================
 * Estas regras sobrescrevem as variáveis CSS globais definidas no theme.json
 * quando a classe 'dark-theme' está presente no <body>.
 */
body.dark-theme {
    /* Cores de Fundo e Texto Principais */
    --wp--preset--color--main-background: #1A1A1A !important; /* Fundo principal do site no modo escuro */
    --wp--preset--color--main-text: #E0E0E0 !important; /* Cor do texto principal no modo escuro */

    /* Cores da Paleta (Acessíveis para Modo Escuro) */
    --wp--preset--color--primary-color: #3A81F1 !important; /* Cor Primária (para links, destaques, etc.) */
    --wp--preset--color--secondary-color: #90BFFF !important; /* Cor Secundária (se usada) */
    --wp--preset--color--card-background: #242424 !important; /* Fundo de Card/Elemento Claro no modo escuro */
    --wp--preset--color--white: #1A1A1A !important; /* Branco (Utilitário) se torna o fundo principal no modo escuro */
    --wp--preset--color--black: #E0E0E0 !important; /* Preto (Utilitário) se torna o texto principal no modo escuro */
    --wp--preset--color--logo-icon-color: #3A81F1 !important; /* Cor específica para o ícone da logo no modo escuro */

    /* Sobrescreve as variáveis do rodapé para o modo escuro */
    --wp--preset--color--footer-background: #111111 !important; /* Fundo do rodapé no modo escuro */
    --wp--preset--color--footer-text: #F5F6F7 !important; /* Texto do rodapé no modo escuro */

    /* Garante que o fundo e o texto usem as novas variáveis */
    background-color: var(--wp--preset--color--main-background);
    color: var(--wp--preset--color--main-text);

    /* --- ESTILOS PARA O BLOCO "LISTA COM ÍCONES" DO SPECTRA (UAGB) --- */

    /* Cor do texto dentro de cada item da lista de ícones */
    .wp-block-uagb-icon-list .wp-block-uagb-icon-list-child .uagb-icon-list__label {
        color: var(--wp--preset--color--main-text) !important; /* Garante que o texto seja visível (branco/claro) */
    }

    /* Cor do ícone SVG dentro de cada item da lista de ícones */
    .wp-block-uagb-icon-list .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap svg {
        fill: var(--wp--preset--color--primary-color) !important; /* Cor do ícone no dark mode (azul) */
        stroke: var(--wp--preset--color--primary-color) !important; /* Se o ícone tiver contorno, também azul */
    }

    /* Cor da borda do ícone (se houver) */
    .wp-block-uagb-icon-list .wp-block-uagb-icon-list-child .uagb-icon-list__source-wrap {
        border-color: var(--wp--preset--color--primary-color) !important; /* Cor da borda do ícone no dark mode */
    }
} /* Esta chave fecha o body.dark-theme */

/* Ajustes para elementos específicos que usam cores fixas ou precisam de tratamento especial */
/* Títulos e textos que usam a cor preta (#000000) no modo claro */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme strong,
body.dark-theme b {
    color: var(--wp--preset--color--main-text) !important; /* Garante que títulos e negritos fiquem claros */
}

/* Estilização do Formulário de Comentários no Modo Escuro */
body.dark-theme .wp-block-post-comments-form .comment-reply-title {
    color: var(--wp--preset--color--main-text) !important;
}
body.dark-theme .wp-block-post-comments-form .comment-notes {
    color: #B0B0B0 !important; /* Um cinza um pouco mais claro para notas */
}
body.dark-theme .wp-block-post-comments-form .comment-form input[type="text"],
body.dark-theme .wp-block-post-comments-form .comment-form input[type="email"],
body.dark-theme .wp-block-post-comments-form .comment-form input[type="url"],
body.dark-theme .comment-form textarea {
    background-color: var(--wp--preset--color--card-background) !important; /* Fundo dos campos de formulário (agora usa card-background) */
    border: 1px solid #444444 !important; /* Borda mais escura */
    color: var(--wp--preset--color--main-text) !important; /* Texto dos campos de formulário */
}
body.dark-theme .wp-block-post-comments-form .comment-form input:focus,
body.dark-theme .wp-block-post-comments-form .comment-form textarea:focus {
    border-color: var(--wp--preset--color--primary-color) !important; /* Borda em foco com a cor primária */
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.5) !important; /* Sombra de foco suave */
}
body.dark-theme .wp-block-post-comments-form .comment-form .form-submit input#submit {
    background-color: var(--wp--preset--color--primary-color) !important; /* Botão de submit com a cor primária */
    color: var(--wp--preset--color--white) !important; /* Texto do botão de submit (agora usa white) */
}
body.dark-theme .wp-block-post-comments-form .comment-form .form-submit input#submit:hover {
    background-color: #6A9EEB !important; /* Hover do botão de submit */
}

/* Estilização dos Posts Relacionados no Modo Escuro */
body.dark-theme .aladigital-related-posts {
    border-top: 1px solid #3A3A3A !important; /* Linha divisória mais escura */
}
body.dark-theme .aladigital-related-posts h2 {
    color: var(--wp--preset--color--main-text) !important;
}
body.dark-theme .aladigital-related-post-item {
    background-color: var(--wp--preset--color--card-background) !important; /* Fundo do item (agora usa card-background) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Sombra mais pronunciada */
}
body.dark-theme .aladigital-related-post-title a {
    color: var(--wp--preset--color--main-text) !important;
}
body.dark-theme .aladigital-related-post-title a:hover {
    color: var(--wp--preset--color--primary-color) !important;
}

/* =======================================================
 *  5.1. ESTILOS GERAIS PARA LINKS (MODO ESCURO)
 * ======================================================= */
/* Aplica a cor azul claro para todos os links no modo escuro */
body.dark-theme .wp-block-post-title a,
body.dark-theme .wp-block-post-template .wp-block-post-title a,
body.dark-theme a {
    color: #7ec8ff; /* Azul claro */
    transition: color 0.3s ease;
}

/* Hover para links no modo escuro (branco) */
body.dark-theme .wp-block-post-title a:hover,
body.dark-theme .wp-block-post-template .wp-block-post-title a:hover,
body.dark-theme a:hover {
    color: #ffffff !important; /* Branco */
}

/* =======================================================
 *  5.2. ESTILOS PARA FORMULÁRIOS (WPFORMS) NO MODO ESCURO (VERSÃO REFORÇADA)
 * ======================================================= */

/* Cor dos rótulos (Nome, E-mail, etc.) no modo escuro */
html body.dark-theme .wpforms-form .wpforms-field-label {
    color: var(--wp--preset--color--main-text) !important;
}

/* Estilo dos campos de input e textarea no modo escuro */
html body.dark-theme .wpforms-form .wpforms-field input[type="text"],
html body.dark-theme .wpforms-form .wpforms-field input[type="email"],
html body.dark-theme .wpforms-form .wpforms-field textarea {
    background-color: var(--wp--preset--color--card-background) !important;
    border: 1px solid #444444 !important;
    color: var(--wp--preset--color--main-text) !important;
}

/* Estilo do foco dos campos no modo escuro */
html body.dark-theme .wpforms-form .wpforms-field input:focus,
html body.dark-theme .wpforms-form .wpforms-field textarea:focus {
    border-color: var(--wp--preset--color--primary-color) !important;
}

/* Estilo do botão de envio no modo escuro */
html body.dark-theme .wpforms-form .wpforms-submit-container button.wpforms-submit {
    background-color: var(--wp--preset--color--primary-color) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* Estilo do hover do botão de envio no modo escuro */
html body.dark-theme .wpforms-form .wpforms-submit-container button.wpforms-submit:hover {
    background-color: var(--wp--preset--color--secondary-color) !important;
    color: #000000 !important;
}

/* =======================================================
 *  5.3. ESTILOS DO GLOSSÁRIO PARA O MODO ESCURO
 * ======================================================= */

/* --- Estilo do Termo Destacado no Post (Modo Escuro) --- */
.cmt-tooltip {
    color: var(--wp--preset--color--primary-color) !important; /* Azul claro do modo escuro */
    border-bottom-color: var(--wp--preset--color--primary-color) !important;
}

.cmt-tooltip:hover {
    color: var(--wp--preset--color--secondary-color) !important; /* Azul mais claro ainda no hover */
    border-bottom-color: var(--wp--preset--color--secondary-color) !important;
}

/* --- Estilo da Janela do Tooltip (Modo Escuro) --- */

/* Fundo e borda da janela no modo escuro */
.cm-tooltip-content {
    background-color: var(--wp--preset--color--card-background) !important; /* Fundo cinza escuro do seu tema */
    border-color: #444444 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Título e texto da definição dentro da janela no modo escuro */
.cm-tooltip-content .glossary-title,
.cm-tooltip-content .glossary-content {
    color: var(--wp--preset--color--main-text) !important; /* Cor de texto principal (branco/claro) */
}

/**
 * =======================================================
 *  6. ESTILOS PARA O RODAPÉ
 * =======================================================
 * O rodapé principal é o elemento <footer>.
 * Os estilos de fundo e texto são definidos no primeiro grupo/div dentro dele
 * usando as variáveis --wp--preset--color--footer-background e --wp--preset--color--footer-text.
 *
 * Os títulos e links dentro do rodapé herdarão a cor do texto do rodapé.
 */

/* Garante que o elemento <footer> principal tenha a cor de fundo e texto corretas */
/* Isso é um fallback caso o primeiro grupo/div não cubra 100% do footer */
footer {
    background-color: var(--wp--preset--color--footer-background) !important;
    color: var(--wp--preset--color--footer-text) !important;
}

/* Garante que títulos (h1-h6) dentro do rodapé usem a cor do texto do rodapé */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: var(--wp--preset--color--footer-text) !important;
}

/* Estilo para links no rodapé (modo claro) */
footer a {
    color: var(--wp--preset--color--footer-text) !important; /* Usa a cor do texto do rodapé */
    transition: color 0.3s ease;
}

/* Estilo de hover para links no rodapé (modo claro) */
footer a:hover {
    color: var(--wp--preset--color--primary-color) !important; /* Pode ser a cor primária ou uma variação de footer-text */
}

/* Estilo para links no rodapé (modo escuro) */
body.dark-theme footer a {
    color: #a0a0a0 !important; /* Cinza claro para links do rodapé no modo escuro */
}

/* Estilo de hover para links no rodapé (modo escuro) */
body.dark-theme footer a:hover {
    color: #ffffff !important; /* Branco para hover de links do rodapé no modo escuro */
}

/* Estilo para o texto da logo SVG */
.inline-svg-logo .logo-text-color {
    fill: var(--wp--preset--color--main-text) !important;
}

/**
 * =======================================================
 *  7. ESTILOS PARA O BOTÃO DE ALTERNÂNCIA DE TEMA (SOL/LUA)
 * =======================================================
 */
#theme-toggle-btn {
    background: none !important; /* Remove qualquer fundo */
    border: none !important; /* Remove qualquer borda */
    box-shadow: none !important; /* Remove qualquer sombra */
    outline: none !important; /* Remove o outline ao focar */
    cursor: pointer;
    padding: 0 !important; /* Garante que não há padding interno */
    display: flex; /* Para alinhar o SVG */
    align-items: center;
    justify-content: center;
    /* Adicione margens ou posicionamento conforme seu layout */
    /* Exemplo: margin-left: 15px; */
}

/* Estilos para os SVGs dentro do botão */
#theme-toggle-btn .theme-toggle-icon svg {
    width: 24px; /* Tamanho do ícone */
    height: 24px;
    transition: all 0.3s ease; /* Transição suave para a cor */
    /* Garante que o SVG não tenha preenchimento ou contorno padrão */
    fill: none;
    stroke: currentColor; /* Usa a cor do texto do elemento pai */
}

/* Cores do ícone no modo claro (o botão em si não tem a classe dark-theme) */
#theme-toggle-btn .theme-toggle-icon svg {
    stroke: var(--wp--preset--color--primary-color) !important; /* Cor do ícone no modo claro */
}

/* Cores do ícone no modo escuro (quando o body tem a classe dark-theme) */
body.dark-theme #theme-toggle-btn .theme-toggle-icon svg {
    stroke: var(--wp--preset--color--primary-color) !important; /* Cor do ícone no modo escuro */
}

/* Estilo de hover para o ícone */
#theme-toggle-btn:hover .theme-toggle-icon svg {
    stroke: var(--wp--preset--color--secondary-color) !important; /* Cor de hover */
}

/**
 * =======================================================
 *  8. ESTILOS PARA O PLUGIN CM TOOLTIP GLOSSARY
 * =======================================================
 */

/* --- 8.1. Estilo do Termo Destacado no Post (Modo Claro) --- */

/* Define a aparência do termo destacado para parecer um link sutil */
.cmt-tooltip {
    color: var(--wp--preset--color--primary-color) !important; /* Usa sua cor primária (azul) */
    font-weight: 600 !important; /* Deixa o termo em semi-negrito para se destacar */
    text-decoration: none !important; /* Remove qualquer sublinhado padrão */
    border-bottom: 2px dotted var(--wp--preset--color--primary-color) !important; /* Adiciona um sublinhado pontilhado sutil */
    cursor: help !important; /* Muda o cursor para um ponto de interrogação, indicando ajuda */
    transition: all 0.2s ease-in-out;
}

/* Efeito hover para o termo no modo claro */
.cmt-tooltip:hover {
    color: var(--wp--preset--color--secondary-color) !important; /* Usa sua cor secundária no hover */
    border-bottom-color: var(--wp--preset--color--secondary-color) !important;
}

/* --- 8.2. Estilo da Janela do Tooltip (Modo Claro) --- */

/* Fundo e borda da janela */
.cm-tooltip-content {
    background-color: var(--wp--preset--color--main-background) !important; /* Fundo branco/claro do seu tema */
    border: 1px solid #DDDDDD !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Título do termo dentro da janela (ex: "CPU") */
.cm-tooltip-content .glossary-title {
    color: var(--wp--preset--color--main-text) !important; /* Cor de texto principal (preto) */
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Texto da definição dentro da janela */
.cm-tooltip-content .glossary-content {
    color: var(--wp--preset--color--main-text) !important; /* Cor de texto principal (preto) */
    font-size: 15px !important; /* Aumenta um pouco o tamanho da fonte para legibilidade */
    line-height: 1.6 !important;
}