/* ================================
   CORES PRINCIPAIS
   (ajuste os hex para bater 100% com o Instagram)
   ================================ */
:root {
    --cor-primaria:        #153c7a;   /* azul principal */
    --cor-primaria-escuro: #0b2447;   /* azul mais escuro */
    --cor-destaque:        #f3b438;   /* dourado */

    --cor-fundo-claro:     #f5f7fb;
    --cor-cartao:          #ffffff;
    --cor-texto:           #1f2933;
}

/* ================================
   BASE
   ================================ */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--cor-fundo-claro);
    color: var(--cor-texto);
}

/* Deixar também o subtítulo (Diocese de Jaú • Ibitinga/SP) em branco */
.navbar.bg-paroquia .navbar-brand small {
    color: #ffffff !important;
}


/* ================================
   NAVBAR / TOPO
   ================================ */
.bg-paroquia {
    background: linear-gradient(90deg, var(--cor-primaria-escuro), var(--cor-primaria));
    color: #fff;
}

/* deixa tudo branco na navbar */
.navbar.bg-paroquia .navbar-brand,
.navbar.bg-paroquia .navbar-brand span,
.navbar.bg-paroquia .navbar-nav .nav-link,
.navbar.bg-paroquia .navbar-nav .nav-link small {
    color: #ffffff !important;
}

.navbar.bg-paroquia .navbar-nav .nav-link {
    font-weight: 500;
    font-size: 0.95rem;
}

.navbar.bg-paroquia .navbar-nav .nav-link:hover {
    text-decoration: underline;
}

/* bolinha com ícone da igreja */
.logo-maria {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* ================================
   HERO / INÍCIO
   ================================ */
.hero-section {
    min-height: 70vh;
    background: radial-gradient(circle at top, #ffffff, #e4ecff);
    padding: 3rem 0;
}

.hero-section h1 {
    color: var(--cor-primaria-escuro);
}

.hero-section .info-card {
    background-color: rgba(255, 255, 255, 0.92);
    border-left: 4px solid var(--cor-destaque);
}

/* ================================
   TÍTULOS DE SEÇÃO
   ================================ */
.section-title {
    font-weight: 700;
    color: var(--cor-primaria-escuro);
    border-left: 4px solid var(--cor-destaque);
    padding-left: .75rem;
}

/* ================================
   CARDS E EFEITO HOVER
   ================================ */
.card-hover {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.08);
}

/* aplica fundo branco em blocos principais */
.hero-section .info-card,
.card,
.calendar-container,
.eventos-dia {
    background-color: var(--cor-cartao);
}

/* ================================
   BOTÕES
   ================================ */
.btn-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cor-primaria-escuro);
    border-color: var(--cor-primaria-escuro);
}

/* outline claro na navbar */
.navbar.bg-paroquia .btn-outline-light {
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}

.navbar.bg-paroquia .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}

/* ================================
   CALENDÁRIO PRINCIPAL
   ================================ */
.calendar-container {
    font-size: 0.95rem;
}

.calendar-table th,
.calendar-table td {
    width: 14.28%;
    height: 3rem;
    cursor: pointer;
}

.calendar-table td.empty {
    background-color: #f9fafb;
    cursor: default;
}

.calendar-table td.has-events {
    background-color: #e3edff;
    font-weight: 600;
    border: 2px solid #c3d5ff;
}

.calendar-table td.selected {
    background-color: var(--cor-destaque);
    color: #000;
}

/* eventos do dia (caixa à direita) */
.eventos-dia .evento-item {
    border-left: 4px solid var(--cor-primaria-escuro);
    padding-left: 0.75rem;
    margin-bottom: 0.75rem;
}

/* ================================
   RODAPÉ
   ================================ */
footer.bg-paroquia {
    background: linear-gradient(90deg, var(--cor-primaria-escuro), #111827);
}

/* ================================
   RESPONSIVIDADE
   ================================ */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 1.5rem;
    }
    h1, .display-5 {
        font-size: 1.9rem;
    }
    .navbar-brand span {
        font-size: 0.95rem;
    }
    .navbar.bg-paroquia .navbar-nav .nav-link {
        padding-left: 0.5rem;
    }
}