/*
* Style.css - Estilos Personalizados para o Site da Igreja Batista Caminho da Paz
* 
* Este arquivo contém CSS personalizado que complementa o Tailwind CSS.
* Inclui:
* 1. Importação de Fontes Personalizadas (Montserrat & Open Sans)
* 2. Variáveis CSS para Cores da Marca (Azul Marinho & Dourado)
* 3. Animações Personalizadas (Fade-in Up)
* 4. Personalização da Barra de Rolagem
* 5. Estilo de Seleção de Texto
*/

/* =========================================
   1. Importação de Fontes do Google
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Open+Sans:wght@300;400;600&display=swap');

/* =========================================
   2. Variáveis CSS (Cores do Tema)
   ========================================= */
:root {
    --color-brand-navy: #0a192f;
    /* Azul Marinho Profundo - Cor Primária */
    --color-brand-gold: #d4af37;
    /* Dourado Elegante - Cor de Destaque */
    --color-brand-light: #f8f9fa;
    /* Off-white - Cor de Fundo */
}

/* =========================================
   3. Animações Personalizadas
   ========================================= */

/* Animação Fade In Up - Usada para Texto Hero e Cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* =========================================
   4. Estilo da Barra de Rolagem (Navegadores Webkit)
   ========================================= */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a202c;
    /* Fundo escuro para a trilha */
}

::-webkit-scrollbar-thumb {
    background: var(--color-brand-gold);
    /* Polegar dourado */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b5952f;
    /* Dourado mais escuro ao passar o mouse */
}

/* =========================================
   5. Estilos Gerais
   ========================================= */

/* Cor Personalizada de Seleção de Texto */
::selection {
    background-color: var(--color-brand-gold);
    color: var(--color-brand-navy);
}

html {
    scroll-behavior: smooth;
    /* Rolagem suave para links âncora */
}

body {
    font-family: 'Open Sans', sans-serif;
    /* Fonte padrão do corpo */
    background-color: var(--color-brand-light);
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    /* Fonte de cabeçalho */
}