/* =========================================================
   Estilo.css — Igreja Evangélica Central da Fé
   v3.1 — organizado por seções (header fix compensado)
   ========================================================= */

/* ============ 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;                 /* azul principal */
  --brand-soft:#eef6ff;            /* azuis suaves */
  --brand-soft-border:#d7e7ff;
  --header-h:64px;                 /* valor default; JS atualiza conforme a navbar real */
}

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

html,body{ height:100% }
body{
  background:var(--cinza);
  color:var(--texto);
  min-height:100vh; display:flex; flex-direction:column;
}

/* Compensação automática do header fixed-top */
body.has-fixed-header main{
  padding-top: calc(var(--header-h) + 16px); /* 16px de respiro */
}

/* Foco visível (a11y) */
:where(input,textarea,select,button,.btn,.nav-link):focus-visible{
  outline: 3px solid var(--brand);
  outline-offset:2px;
}
a:focus-visible{ border-radius:.25rem }

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

/* ============ 3) Estrutura de seção & tipografia ============ */
.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 genéricos ============ */
.cardx{
  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{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#e3e7ee;
}

/* ============ 6) Contato ============ */
.contact-card{
  border:1px solid var(--borda);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.contact-title{ font-weight:800; letter-spacing:.02em }
.input-icon{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); opacity:.6 }
.input-with-icon{ padding-left:2.3rem }
.help-mini{ font-size:.875rem; color:var(--muted) }
.charcount{ font-size:.8rem; color:var(--muted) }
.badge-soft{ background:#f5f6f8; border:1px solid #eef0f3; border-radius:999px; padding:.35rem .6rem }
.btn-whats{ background:#25D366; border-color:#25D366 }
.btn-whats:hover{ opacity:.9 }

/* ============ 7) Eventos (cards elegantes) ============ */
.event-card{
  position:relative;
  border:1px solid var(--borda);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:1rem 1.25rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.event-card::before{
  /* fita sutil no topo */
  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;
}
.event-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#e3e7ee;
}
.event-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.35rem; }
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#f6f8fb; border:1px solid #e9edf3;
  padding:.35rem .6rem; border-radius:999px; font-size:.85rem; line-height:1;
}
.chip i{ opacity:.75; }
.event-title{
  font-weight:700; letter-spacing:.01em; margin:.25rem 0 .25rem;
  display:flex; align-items:center; gap:.5rem;
}
.event-sub{ color:var(--muted); margin:0; }
.badge-rec{
  font-size:.75rem; letter-spacing:.02em;
  background:var(--brand-soft); color:var(--brand);
  border:1px solid var(--brand-soft-border);
  padding:.2rem .5rem; border-radius:.5rem;
}

/* ============ 8) Localização (mapa) ============ */
.location-card{
  border:1px solid var(--borda);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.copyable{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border:1px dashed #dfe3e8; border-radius:.5rem;
  background:#fff;
}
.btn-copy{ cursor:pointer }

/* ============ 9) Footer escopado ============ */
.site-footer{ background:var(--preto); color:#fff; }

/* ============ 10) Utilidades & Responsivo ============ */
.text-muted-600{ color:var(--muted)!important }

@media (max-width: 575.98px){
  .section{ padding:3rem 0 }
  .event-card{ padding:.9rem 1rem }
}

/* ============ Mensagens (cards elegantes) ============ */
.msg-card{
  position:relative;
  border:1px solid var(--borda);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:1rem 1.25rem 1.1rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.msg-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,#52a0ff,#7fb4ff 50%,#bad2ff);
  opacity:.9;
}
.msg-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#e3e7ee;
}

/* Cabeçalho */
.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-name{ font-weight:700; letter-spacing:.01em; margin:0; line-height:1.1; }

/* Citação */
.msg-quote{ position:relative; margin:.25rem 0 0; color:var(--texto); font-style:italic; }
.msg-quote::before{
  content:"\f10d"; /* fa-quote-left */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:-.95rem; top:.05rem; font-size:.85rem; opacity:.35;
}

@media (max-width: 575.98px){
  .msg-avatar{ width:32px; height:32px; font-size:.85rem }
  .msg-card{ padding:.9rem 1rem }
}

/* ===== Sobre – micro animações ===== */
.figure-zoom { overflow: hidden; border-radius: 1rem; }
.figure-zoom img{
  transform: scale(1);
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.figure-zoom:hover img{ transform: scale(1.04); }

.figure-legend{
  background: rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  border-radius: .6rem;
}
.figure-zoom:hover .figure-legend{ opacity: 1; transform: none; }

/* Cards de números rápidos */
.stat-card{
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid #e9ecef;
}
.stat-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 .65rem 1.4rem rgba(0,0,0,.08);
  border-color: #e3e7ee;
}
.stat-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px; border-radius:1rem 1rem 0 0;
  background: linear-gradient(90deg,#4f8cff,#7aa7ff 50%,#a6c0ff);
  opacity: 0; transform: scaleX(.6); transform-origin: left;
  transition: opacity .2s ease, transform .2s ease;
}
.stat-card:hover::before{ opacity: 1; transform: scaleX(1); }

/* Revela ao rolar (graceful) — visível por padrão; efeito só com .reveal-ready */
.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);
}

@media (prefers-reduced-motion: reduce){
  .figure-zoom img,
  .figure-legend,
  .stat-card,
  .reveal,
  .reveal.is-visible{
    transition: none !important;
    transform: none !important;
  }
}


/* Compensação automática do header fixed-top (com fallback) */
/*body.has-fixed-header main{
  padding-top: calc(var(--header-h, 64px) + 16px);
}*/
/* compensa o header fixed-top; 20px de respiro extra */
body.has-fixed-header main{
  padding-top: calc(var(--header-h, 64px) + 20px);
}


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

/* Localização – estilos usados no index */
.loc-card{
  border:1px solid var(--borda);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.loc-map iframe{ display:block; width:100%; height:100%; border:0; }


/* Tabela que vira "cards" no mobile */
@media (max-width: 576px){
  .table-card-sm thead { 
    display: none; 
  }
  .table-card-sm,
  .table-card-sm tbody,
  .table-card-sm tr,
  .table-card-sm td {
    display: block;
    width: 100%;
  }
  .table-card-sm tr{
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .75rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
    margin-bottom: .75rem;
    overflow: hidden;
  }
  .table-card-sm td{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .9rem;
    border: 0;
    border-top: 1px solid #f1f3f5;
  }
  .table-card-sm td:first-child{
    border-top: 0;
  }
  .table-card-sm td::before{
    content: attr(data-label);
    font-weight: 600;
    color: #6c757d;
  }
  /* Mantém valores numéricos alinhados à direita */
  .table-card-sm td.text-end{
    text-align: right;
  }
  /* Destaque pro total da linha */
  .table-card-sm td.fw-semibold{
    font-weight: 700;
  }
}