/* =========================================================
   Estilo.css — Igreja Evangélica Ad. Videira
   v3.2 — Sticky Footer & Layout Otimizado
   ========================================================= */

/* ============ 1) Variáveis & Base ============ */
:root {
    --cinza: #f5f6f8;
    --preto: #000;
    --borda: #e9ecef;
    --texto: #212529;
    --muted: #6c757d;
    --radius: 1rem;
    --shadow-sm: 0 .25rem .75rem rgba(0,0,0,.05);
    --shadow-md: 0 .5rem 1.25rem rgba(0,0,0,.08);
    --brand: #0b5ed7;
    --brand-soft: #eef6ff;
    --brand-soft-border: #d7e7ff;
    --header-h: 64px;
}

@media (prefers-reduced-motion: no-preference) {
    * { scroll-behavior: smooth; }
}

/* ESTRUTURA PARA O FOOTER FICAR SEMPRE EMBAIXO */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--cinza);
    color: var(--texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o corpo tenha no mínimo a altura da tela */
}

/* O conteúdo principal cresce para ocupar o espaço vazio */
main {
    flex: 1 0 auto;
}

/* O footer nunca encolhe */
.site-footer {
    flex-shrink: 0;
    background: var(--preto);
    color: #fff;
}

/* Compensação do header fixo */
body.has-fixed-header main {
    padding-top: calc(var(--header-h) + 20px);
}

/* ============ 2) Navegação / Header ============ */
#mainNav { background: var(--preto) !important; }

:where(input,textarea,select,button,.btn,.nav-link):focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* ============ 3) Estrutura de seção ============ */
.section { padding: 4rem 0; }
.section-title { font-weight: 800; letter-spacing: .02em; }
.divider { height: 1px; background: var(--borda); margin: 2rem 0; }

/* ============ 4) Hero ============ */
.hero {
    position: relative; min-height: 60vh; display: grid; place-items: center;
    overflow: hidden; background: #111; color: #fff;
}
.hero .conteudo { text-align: center; padding: 2rem; }

/* ============ 5) Cards & Mensagens ============ */
.cardx, .msg-card, .event-card, .contact-card, .location-card, .loc-card, .stat-card {
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cardx:hover, .msg-card:hover, .event-card:hover, .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #e3e7ee;
}

/* Fita decorativa no topo dos cards de Mensagem e Eventos */
.msg-card::before, .event-card::before, .stat-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 6px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, #4f8cff, #7aa7ff 50%, #a6c0ff);
    opacity: .9;
}

/* ============ 6) Estilos Específicos de Conteúdo ============ */
.msg-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.msg-avatar {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px;
    display: grid; place-items: center; background: #eef4ff; color: #0b5ed7;
    font-weight: 700; border: 1px solid #dce8ff; font-size: .95rem;
}
.msg-quote { position: relative; margin: .25rem 0 0; color: var(--texto); font-style: italic; }
.msg-quote::before {
    content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: -0.95rem; top: .05rem; font-size: .85rem; opacity: .35;
}

.chip {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #f6f8fb; border: 1px solid #e9edf3;
    padding: .35rem .6rem; border-radius: 999px; font-size: .85rem;
}

/* ============ 7) Animações & Revelação ============ */
.figure-zoom { overflow: hidden; border-radius: 1rem; }
.figure-zoom img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.figure-zoom:hover img { transform: scale(1.04); }

.reveal { opacity: 1; transform: none; }
body.reveal-ready .reveal { opacity: 0; transform: translateY(14px); }
body.reveal-ready .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--d, 0ms);
}

/* ============ 8) Responsivo & Tabelas ============ */
@media (max-width: 575.98px) {
    .section { padding: 3rem 0; }
    .msg-avatar { width: 32px; height: 32px; font-size: .85rem; }
    
    .table-card-sm thead { display: none; }
    .table-card-sm tr {
        display: block; background: #fff; border: 1px solid #e9ecef;
        border-radius: .75rem; margin-bottom: .75rem;
    }
    .table-card-sm td {
        display: flex; justify-content: space-between; padding: .6rem .9rem;
        border: 0; border-top: 1px solid #f1f3f5;
    }
    .table-card-sm td::before { content: attr(data-label); font-weight: 600; color: #6c757d; }
}

/* Rolagem suave com offset */
:where(section,[id]) { scroll-margin-top: calc(var(--header-h) + 12px); }