/*
========================================
CORES PERSONALIZADAS POR PÁGINA
========================================
Este arquivo permite controlar as cores de cada página individualmente.
Cada página tem classes únicas: .page-SLUG e .page-id-ID
*/

/* ===== COR PADRÃO (Verde-Limão) ===== */
:root {
    --cor-principal: #CBD53A;
    --cor-secundaria: #464646;
    --cor-hover: #464646;
}


/* ===== EXEMPLO: PÁGINA DE CURSO 1 (ID: 123) ===== */
/* Substitua 123 pelo ID real da página */
/*
.page-id-123 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.page-id-123 .breadcrumbs {
    background: rgba(102, 126, 234, 0.5);
}

.page-content-id-123 button a {
    background: #667eea;
    color: #FFF;
}

.page-content-id-123 button a:hover {
    background: #764ba2;
    color: #FFF;
}
*/


/* ===== EXEMPLO: PÁGINA DE CURSO 2 (Usando Slug) ===== */
/* Se a página tem slug "curso-programacao" */
/*
.page-curso-programacao {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.page-curso-programacao .breadcrumbs {
    background: rgba(240, 147, 251, 0.5);
}

.page-content-curso-programacao button a {
    background: #f093fb;
    color: #FFF;
}

.page-content-curso-programacao button a:hover {
    background: #f5576c;
    color: #FFF;
}
*/


/* ===== ESQUEMA DE CORES SUGERIDO ===== */

/* Azul Profissional */
/* Removido: .bannertop para não cobrir a imagem do banner */
.tema-azul .breadcrumbs {
    background: rgba(102, 126, 234, 0.5) !important;
}
.tema-azul button a,
.tema-azul .but-candidatura a {
    background: #667eea !important;
    border-color: #667eea !important;
}
.tema-azul button a:hover,
.tema-azul .but-candidatura a:hover {
    background: #764ba2 !important;
    border-color: #764ba2 !important;
}
/* Elementos decorativos de fundo */
.tema-azul .bg-green-sup-esq:before,
.tema-azul .bg-green-inf-dir:before {
    background: #667eea !important; /* Azul para combinar */
}
.tema-azul .bg-light-green-inf-esq:before {
    background: #764ba2 !important; /* Roxo para contraste */
}

/* Rosa/Vermelho Moderno */
/* Removido: .bannertop para não cobrir a imagem do banner */
.tema-rosa .breadcrumbs {
    background: rgba(240, 147, 251, 0.5) !important;
}
.tema-rosa button a,
.tema-rosa .but-candidatura a {
    background: #f093fb !important;
    border-color: #f093fb !important;
}
.tema-rosa button a:hover,
.tema-rosa .but-candidatura a:hover {
    background: #f5576c !important;
    border-color: #f5576c !important;
}
/* Elementos decorativos de fundo */
.tema-rosa .bg-green-sup-esq:before,
.tema-rosa .bg-green-inf-dir:before {
    background: #f093fb !important; /* Rosa para combinar */
}
.tema-rosa .bg-light-green-inf-esq:before {
    background: #f5576c !important; /* Vermelho para contraste */
}

/* Laranja Energético */
/* Removido: .bannertop para não cobrir a imagem do banner */
.tema-laranja .breadcrumbs {
    background: rgba(250, 112, 154, 0.5) !important;
}
.tema-laranja button a,
.tema-laranja .but-candidatura a {
    background: #fa709a !important;
    border-color: #fa709a !important;
}
.tema-laranja button a:hover,
.tema-laranja .but-candidatura a:hover {
    background: #fee140 !important;
    color: #464646 !important;
    border-color: #fee140 !important;
}
/* Elementos decorativos de fundo */
.tema-laranja .bg-green-sup-esq:before,
.tema-laranja .bg-green-inf-dir:before {
    background: #fa709a !important; /* Laranja para combinar */
}
.tema-laranja .bg-light-green-inf-esq:before {
    background: #fee140 !important; /* Amarelo para contraste */
}

/* Verde Água */
/* Removido: .bannertop para não cobrir a imagem do banner */
.tema-verde-agua .breadcrumbs {
    background: rgba(11, 163, 96, 0.5) !important;
}
.tema-verde-agua button a,
.tema-verde-agua .but-candidatura a {
    background: #0ba360 !important;
    border-color: #0ba360 !important;
}
.tema-verde-agua button a:hover,
.tema-verde-agua .but-candidatura a:hover {
    background: #3cba92 !important;
    border-color: #3cba92 !important;
}
/* Elementos decorativos de fundo */
.tema-verde-agua .bg-green-sup-esq:before,
.tema-verde-agua .bg-green-inf-dir:before {
    background: #0ba360 !important; /* Verde escuro para combinar */
}
.tema-verde-agua .bg-light-green-inf-esq:before {
    background: #3cba92 !important; /* Verde claro para contraste */
}

/* Roxo Elegante */
/* Removido: .bannertop para não cobrir a imagem do banner */
.tema-roxo .breadcrumbs {
    background: rgba(106, 17, 203, 0.5) !important;
}
.tema-roxo button a,
.tema-roxo .but-candidatura a {
    background: #6a11cb !important;
    border-color: #6a11cb !important;
}
.tema-roxo button a:hover,
.tema-roxo .but-candidatura a:hover {
    background: #2575fc !important;
    border-color: #2575fc !important;
}
/* Elementos decorativos de fundo */
.tema-roxo .bg-green-sup-esq:before,
.tema-roxo .bg-green-inf-dir:before {
    background: #6a11cb !important; /* Roxo para combinar */
}
.tema-roxo .bg-light-green-inf-esq:before {
    background: #2575fc !important; /* Azul para contraste */
}

/* Vermelho Vibrante */
/* Removido: .bannertop para não cobrir a imagem do banner */
.tema-vermelho .breadcrumbs {
    background: rgba(235, 51, 73, 0.5) !important;
}
.tema-vermelho button a,
.tema-vermelho .but-candidatura a {
    background: #eb3349 !important;
    border-color: #eb3349 !important;
}
.tema-vermelho button a:hover,
.tema-vermelho .but-candidatura a:hover {
    background: #f45c43 !important;
    border-color: #f45c43 !important;
}
/* Elementos decorativos de fundo */
.tema-vermelho .bg-green-sup-esq:before,
.tema-vermelho .bg-green-inf-dir:before {
    background: #eb3349 !important; /* Vermelho para combinar */
}
.tema-vermelho .bg-light-green-inf-esq:before {
    background: #f45c43 !important; /* Coral para contraste */
}


/* ===== INSTRUÇÕES DE USO ===== */
/*
Para aplicar uma cor específica a uma página:

OPÇÃO 1 - Usar classe CSS no editor do WordPress:
1. Edite a página no WordPress
2. Na barra lateral direita, em "Página" > "Atributos de CSS" ou "CSS Class"
3. Adicione a classe: tema-azul (ou tema-rosa, tema-laranja, etc.)

OPÇÃO 2 - Criar regra específica por ID da página:
1. Descubra o ID da página (aparece na URL ao editar)
2. Descomente e personalize um dos exemplos acima
3. Substitua o ID e as cores desejadas

OPÇÃO 3 - Adicionar via functions.php (automático):
Adicione este código no functions.php:

add_filter('body_class', function($classes) {
    if (is_page(123)) { // Substitua 123 pelo ID da página
        $classes[] = 'tema-azul';
    }
    return $classes;
});

*/