/* ==========================================================================
   1. RESET BÁSICO E ESTILOS GLOBAIS
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #212529;
    background-color: #ffffff;
    line-height: 1.7;
    /* REMOVIDO padding-top, pois a navbar não é mais fixed-top por padrão.
       Se você voltar a usar navbar fixed-top, descomente e ajuste o valor abaixo. */
    /* padding-top: 70px; */
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bolder, .fw-bold, .fw-semibold {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Roboto', sans-serif;
}

.lead {
    font-size: 1.20rem;
    font-weight: 400;
}

a {
    color: #0d6efd;
    text-decoration: none;
}
a:hover {
    color: #0a58ca;
}

/* ==========================================================================
   2. UTILITÁRIOS / CLASSES AUXILIARES
   ========================================================================== */
.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-bg-white { background-color: #ffffff; }
.section-bg-light { background-color: #f8f9fa; }
.section-bg-dark { background-color: #212529; color: #ffffff; }
.section-bg-primary { background-color: #0d6efd; color: #ffffff; }

/* ==========================================================================
   3. LAYOUT PRINCIPAL (HEADER E FOOTER)
   ========================================================================== */

/* Header (Navbar) */
#site-header .navbar {
    /* A navbar não é mais fixed-top por padrão, então não precisa de body padding-top.
       Se você re-adicionar .fixed-top à navbar no HTML, precisará do padding-top no body. */
}

.custom-navbar {
    /* Se a navbar não for fixed-top e você quiser cantos arredondados e margens: */
    /* border-radius: 0.75rem; */
    /* margin: 10px 15px 0; */ /* Exemplo para "flutuar" um pouco abaixo do topo e com margens laterais */
}

#site-header .navbar-brand {
    font-size: 1.6rem; /* Tamanho para o nome/logo "EventMaster" */
}

/* Estilos para os links de navegação principais (o bloco centralizado) */
#site-header #mainNavLinks .navbar-nav .nav-link { /* Visando a UL dentro de #mainNavLinks */
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #495057; /* Cor um pouco mais suave para links não ativos */
}
#site-header #mainNavLinks .navbar-nav .nav-link.active {
    color: #0d6efd; /* Cor primária para o link ativo */
    font-weight: 700;
}
#site-header #mainNavLinks .navbar-nav .nav-link:hover {
    color: #0d6efd; /* Cor primária no hover */
}

/* Estilos para os links/botões à direita na navbar (Desktop) */
#site-header .navbar > .container-xxl > .d-none.d-lg-flex .nav-link { /* Para "Minhas Inscrições", "Meu Perfil" */
    font-weight: 500;
    color: #495057;
}
#site-header .navbar > .container-xxl > .d-none.d-lg-flex .nav-link.active {
    color: #0d6efd;
    font-weight: 700;
}
#site-header .navbar > .container-xxl > .d-none.d-lg-flex .nav-link:hover {
    color: #0d6efd;
}

#site-header .navbar > .container-xxl > .d-none.d-lg-flex .btn { /* Para os botões "Entrar", "Sair", "Cadastre-se" no desktop */
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
}

/* Footer (estilos existentes parecem bons, mantidos da versão anterior) */
#site-footer h5 { font-size: 1.1rem; }
#site-footer .list-unstyled a { transition: color 0.2s ease-in-out; }
#site-footer .list-unstyled a:hover { color: #ffffff; }
#site-footer .bi { transition: color 0.2s ease-in-out; }
#site-footer .bi:hover { color: #0d6efd; }


/* ==========================================================================
   4. ESTILOS DE COMPONENTES GENÉRICOS
   ========================================================================== */
.btn {
    font-weight: 600;
}

.card.shadow-sm {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #e9ecef;
}
.card.shadow-sm:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12)!important;
}
.card .card-title a { color: #212529; text-decoration: none; }
.card .card-title a:hover { color: #0d6efd; }
.card .card-img-top { object-fit: cover; }
.card .card-footer .btn-outline-primary { font-weight: 600; }

/* ==========================================================================
   5. ESTILOS ESPECÍFICOS DE SEÇÕES DA PÁGINA PRINCIPAL (index.php)
   ========================================================================== */

/* Hero Section */
.hero-section { /* Usado com .section-padding */ }
.hero-gradient-background {
    background: linear-gradient(135deg, #0d6efd 0%, #0752b5 100%);
    color: #ffffff;
}
.hero-gradient-background h1, .hero-gradient-background .lead { color: #ffffff; }
.hero-gradient-background .btn-primary {
    background-color: #ffffff; border-color: #ffffff; color: #0d6efd;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.hero-gradient-background .btn-primary:hover {
    background-color: #e9ecef; border-color: #e9ecef; color: #0a58ca;
}
.hero-gradient-background .btn-outline-light {
    border-width: 2px; color: #ffffff; border-color: #ffffff;
}
.hero-gradient-background .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15); color: #ffffff;
}

/* Features Section (#features) */
.feature-icon-square {
    width: 4rem; height: 4rem; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 0.75rem;
}
.feature-icon-square i.bi { font-size: 2rem; }
#features .col:hover .h-100 { /* Supondo que o conteúdo da feature esteja em um .h-100, como um card */
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.10);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Events Showcase Section (#events-showcase na index.php) */
/* Os estilos genéricos de .card já se aplicam. */

/* Final CTA Section (#final-cta) */
.final-cta-gradient {
    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
    color: #ffffff;
}
.final-cta-gradient h2, .final-cta-gradient .lead { color: #ffffff; }
.final-cta-gradient .btn-light { font-weight: 700; color: #0d6efd; }
.final-cta-gradient .btn-light:hover { background-color: #f0f0f0; color: #0a58ca; }

/* ==========================================================================
   6. ESTILOS DE OUTRAS PÁGINAS (Ex: events.php, event_details.php)
   ========================================================================== */

/* Página de Listagem de Eventos (events.php) */
#event-listing-page .display-5 { margin-bottom: 2.5rem; }
/* Os cards em events.php usarão os estilos genéricos de .card definidos anteriormente */

/* Página de Detalhes do Evento (event_details.php) */
.event-detail-main-title { font-size: 2.8rem; margin-bottom: 1.5rem; }
.event-full-description h3 { font-size: 1.6rem; margin-top: 2rem; }
.event-full-description .text-secondary { color: #495057 !important; line-height: 1.8; }

/* Coluna da direita em event_details.php */
.details-card .card-header h4 { font-size: 1.2rem; }
.details-card .list-group-item { padding-top: 1rem; padding-bottom: 1rem; font-size: 0.95rem; }
.details-card .list-group-item i.bi { font-size: 1.05rem; vertical-align: text-bottom; }
.details-card .list-group-item strong { font-weight: 600; }

.registration-card .card-header h4 { font-size: 1.2rem; }
.registration-card .form-label { font-size: 0.9rem; }

/* ==========================================================================
   7. COMPONENTES MENORES (Formulários, Alertas, Paginação)
   ========================================================================== */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; }

.alert .fs-sm { font-size: .875em !important; }

.pagination {
    display: flex; justify-content: center;
    padding-top: 1.5rem; padding-bottom: 1.5rem; list-style: none;
}
.pagination li { margin: 0 0.25rem; }
.pagination li a, .pagination li span {
    color: #0d6efd; padding: 0.5rem 0.85rem; text-decoration: none;
    border: 1px solid #dee2e6; border-radius: 0.375rem;
    transition: background-color .2s, border-color .2s, color .2s;
}
.pagination li a:hover { background-color: #e9ecef; border-color: #ced4da;}
.pagination li.active span { background-color: #0d6efd; color: white; border-color: #0d6efd; z-index: 1; }
.pagination li.disabled span { color: #6c757d; pointer-events: none; background-color: #fff; border-color: #dee2e6;}

/* ==========================================================================
   8. MEDIA QUERIES (Responsividade)
   ========================================================================== */
@media (max-width: 991.98px) { /* Breakpoint lg do Bootstrap (Tablets e abaixo) */
    /* Navbar Mobile */
    #site-header .navbar-collapse {
        margin-top: 0.5rem; /* Adiciona um espaço quando o menu colapsa */
    }
    #site-header #mainNavLinks .navbar-nav { /* Visando a UL central no mobile */
        text-align: center; /* Centraliza o texto dos links */
    }
    #site-header #mainNavLinks .navbar-nav .nav-item { /* Espaçamento entre itens no mobile */
        margin-bottom: 0.5rem;
    }
    #site-header #mainNavLinks .navbar-nav .nav-item:last-child {
        margin-bottom: 0;
    }
    #site-header #mainNavLinks .nav-item .btn { /* Botão Entrar no menu mobile */
        display: block;
        width: auto; /* Não 100%, mas o padding do botão o fará parecer bom */
        max-width: 200px; /* Limita a largura do botão */
        margin: 0.75rem auto 0.5rem auto; /* Centraliza e adiciona margem */
    }

    /* Ajustes de Títulos em Telas Menores */
    .hero-section h1, .event-detail-main-title {
        font-size: 2rem;
    }
    .hero-section .lead { font-size: 1.05rem; }
    .display-5 { font-size: 1.9rem; }
    .display-6 { font-size: 1.6rem; }
}

@media (max-width: 767.98px) { /* Breakpoint md do Bootstrap (Celulares e abaixo) */
    .section-padding {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .hero-section h1, .event-detail-main-title { font-size: 1.8rem; }
    .hero-section .lead { font-size: 1rem; }
    .display-5 { font-size: 1.7rem; }
    .display-6 { font-size: 1.4rem; }
}