/* ==========================================================================
   HORÁRIOS DE MISSA — PARANAGUÁ

   Princípio do layout: NÃO se aumenta tudo junto. O que decide a ida à
   missa (nome da igreja e horário da próxima) é grande de verdade.
   Endereço, rótulos e apoio ficam em tamanho normal, com bom contraste.
   Assim a tela continua organizada em vez de virar uma parede de letras.

   O botão "A+" no topo aumenta a escala inteira em 15%, para quem precisar.
   ========================================================================== */

:root {
  --azul: #10457f;
  --azul-claro: #e8f0fa;
  --azul-borda: #bcd3ec;
  --texto: #1b1f24;
  --texto-suave: #55606d;
  --fundo: #f6f8fb;
  --branco: #fff;
  --destaque: #b8371b;
  --verde: #0a7d43;
  --raio: 12px;
  --base: 15.5px;
}

html.fonte-grande { --base: 18px; }

* { box-sizing: border-box; }

html { font-size: var(--base); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.55;
}

/* Link que só aparece para quem navega pelo teclado */
.pular {
  position: absolute; left: -9999px;
  background: var(--azul); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.pular:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------- topo */

.topo {
  background: var(--azul);
  color: #fff;
  padding: .85rem 1rem 1rem;
}

.faixa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: 60rem; margin: 0 auto .85rem;
}

.marca { display: flex; align-items: center; gap: .7rem; }

.brasao {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #fff; padding: .2rem; object-fit: contain; flex: none;
}

.topo h1 { margin: 0; font-size: 1.2rem; line-height: 1.15; }
.topo p  { margin: .1rem 0 0; font-size: .82rem; color: #c8dcf3; }

/* ATENÇÃO: as alturas dos elementos clicáveis estão em PIXEL, não em rem,
   de propósito. 44px é o mínimo para acertar com o dedo sem errar. Se
   ficarem em rem, encolhem junto quando a fonte base diminui — foi o que
   aconteceu e deixou os botões em 39-43px. */
.botao-fonte {
  flex: none;
  min-width: 44px; min-height: 44px;
  border: 2px solid rgba(255,255,255,.55); border-radius: var(--raio);
  background: transparent; color: #fff;
  font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.botao-fonte[aria-pressed="true"] { background: #fff; color: var(--azul); }

/* -------------------------------------------------------------- busca */

.busca { max-width: 60rem; margin: 0 auto; }

.rotulo-busca {
  display: block; font-size: 1.02rem; font-weight: 700; margin-bottom: .4rem;
}

.linha-busca { position: relative; }

#campo {
  width: 100%;
  min-height: 46px;
  padding: .55rem 2.8rem .55rem .85rem;
  font-size: 1.02rem;
  font-family: inherit;
  border: 3px solid transparent; border-radius: var(--raio);
  background: #fff; color: var(--texto);
}
#campo:focus { outline: none; border-color: #ffcf5c; }

.botao-limpar {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border: none; border-radius: 50%; background: transparent;
  font-size: 1.8rem; line-height: 1; color: var(--texto-suave); cursor: pointer;
}
.botao-limpar:hover { background: #eee; }

.ajuda { margin: .45rem 0 .7rem; font-size: .85rem; color: #cadff5; }

.botao-gps {
  width: 100%; min-height: 44px;
  border: 2px solid rgba(255,255,255,.6); border-radius: var(--raio);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.botao-gps:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.botao-gps:disabled { opacity: .65; cursor: default; }

/* --------------------------------------------------------------- main */

main { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

.aviso {
  background: #fff4d6; border: 2px solid #e8c460; border-radius: var(--raio);
  padding: .85rem 1rem; margin-bottom: 1rem;
}

.secao-mapa { margin-top: 1.75rem; }
.secao-mapa h2 {
  margin: 0 0 .6rem; font-size: 1.05rem; color: var(--texto-suave);
}

#mapa {
  height: 17rem;
  border-radius: var(--raio);
  border: 2px solid var(--azul-borda);
  background: #dfe7ef;
}

/* Fica dentro do cabeçalho azul, logo abaixo da busca. */
.filtros {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: .7rem;
}
.filtros label { font-weight: 600; font-size: .9rem; color: #dbe9f8; }
#filtro-dia {
  min-height: 44px; padding: .35rem .6rem;
  font-size: .95rem; font-family: inherit;
  border: 2px solid rgba(255,255,255,.5); border-radius: var(--raio);
  background: #fff; color: var(--texto);
}
#filtro-dia:focus { outline: none; border-color: #ffcf5c; }

.resumo {
  margin: 0 0 .9rem; padding: .6rem .8rem;
  background: var(--azul-claro); border-left: 4px solid var(--azul);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: .92rem;
}

/* ----------------------------------------------------------- cartões */

.resultados { display: grid; gap: .8rem; }

.cartao {
  background: var(--branco);
  border: 2px solid #dbe3ec; border-radius: var(--raio);
  padding: .85rem;
  display: flex; flex-direction: column;
}
.cartao.destacado { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }

.cartao-topo { display: flex; gap: .7rem; align-items: flex-start; }

/* Os logos das paróquias são faixas horizontais (476x256, ~1,86:1).
   Fixar a altura e deixar a largura livre respeita essa proporção;
   forçar um quadrado espremeria o desenho. */
.cartao-logo {
  height: 2.3rem; width: auto; max-width: 5rem;
  object-fit: contain; flex: none;
}

.cartao-id { min-width: 0; }

.cartao h3 {
  margin: 0;
  font-size: 1.1rem;      /* continua o maior do cartão, junto com o horário */
  line-height: 1.25;
}

.vinculo { margin: .15rem 0 0; font-size: .82rem; color: var(--texto-suave); }

/* O horário da próxima missa é a informação mais importante da tela. */
.proxima {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem;
  margin: .7rem 0 .6rem; padding: .55rem .75rem;
  background: var(--azul-claro); border-radius: var(--raio);
}
.proxima-rotulo {
  width: 100%; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--azul);
}
.proxima strong { font-size: 1.2rem; line-height: 1.2; }

/* Quando há filtro de dia, o destaque lista os horários daquele dia.
   Os que já passaram ficam apagados em vez de sumirem — a pessoa vê que
   existe missa nesse horário, só que hoje ela já perdeu. */
.hora-passou { color: #9aa5b1; text-decoration: line-through; }
.hora-sep { color: #aab4c0; font-weight: 400; }
.proxima.urgente { background: #fdeceb; }
.proxima.urgente .proxima-rotulo { color: var(--destaque); }
.proxima.urgente strong { color: var(--destaque); }
.proxima-detalhe { font-size: .95rem; color: var(--texto-suave); font-weight: 600; }

.local-info {
  display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: baseline;
  margin: 0 0 .2rem;
}
.bairro { font-weight: 700; }
.dist {
  font-size: .9rem; font-weight: 700; color: var(--verde);
  background: #e6f5ec; padding: .1rem .5rem; border-radius: 999px;
}

.endereco { margin: 0; color: var(--texto-suave); font-size: .95rem; }

.nota-precisao {
  margin: .6rem 0 0; padding: .5rem .7rem;
  background: #fff4d6; border-radius: 8px; font-size: .92rem;
}
.nota-precisao.suave { background: #f0f2f5; color: var(--texto-suave); }

.horarios { margin: .7rem 0 .8rem; }
.horarios summary {
  cursor: pointer; font-weight: 600; color: var(--azul);
  font-size: .92rem; padding: .6rem 0; min-height: 44px;
  display: flex; align-items: center;
}
.horarios dl {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem;
  margin: .4rem 0 0; padding: .7rem .9rem;
  background: #f7f9fc; border-radius: 8px;
}
.horarios dt { font-weight: 600; color: var(--texto-suave); }
.horarios dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Lista de horários da versão fixa do HTML (a que o Google lê e a que
   aparece se o JavaScript não rodar). Some assim que o app.js carrega. */
.horarios-fixos {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem;
  margin: .7rem 0 0; padding: .7rem .9rem;
  background: #f7f9fc; border-radius: 8px; font-size: .95rem;
}
.horarios-fixos dt { font-weight: 600; color: var(--texto-suave); }
.horarios-fixos dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Telefone: alvo de toque confortável, porque no celular isso disca. */
.tel { margin: .35rem 0 0; font-size: .95rem; }
.tel-rotulo { color: var(--texto-suave); }
.tel a {
  color: var(--azul); font-weight: 700; text-decoration: none;
  white-space: nowrap;
  display: inline-block; padding: .25rem 0;
}
.tel a:hover { text-decoration: underline; }
.tel-sep { color: #aab4c0; }

/* margin-top:auto empurra o botão para o fim do cartão, de modo que os
   botões de cartões lado a lado fiquem na mesma linha mesmo quando os
   nomes das igrejas ocupam alturas diferentes. */
.botao-rota {
  display: flex; align-items: center; justify-content: center;
  margin-top: auto;
  min-height: 44px; padding: .6rem 1rem;
  background: var(--azul); color: #fff; text-align: center;
  font-size: .95rem;
  font-weight: 700; text-decoration: none; border-radius: var(--raio);
}
.botao-rota:hover { background: #0c3663; }

.vazio {
  background: #fff; border: 2px dashed #c4cedb; border-radius: var(--raio);
  padding: 1.5rem; text-align: center; color: var(--texto-suave);
}

/* -------------------------------------------------------------- rodapé */

.rodape {
  background: #1b2430; color: #b9c4d2;
  padding: 1.5rem 1rem; text-align: center; font-size: .92rem;
}
.rodape p { margin: .25rem 0; }

/* Discreto, mas legível: não é letra miúda escondida. */
.isencao {
  margin-top: .9rem !important;
  padding-top: .9rem;
  border-top: 1px solid #33404f;
  color: #8794a5; font-size: .85rem;
}

/* --------------------------------------------------------- telas largas */

@media (min-width: 46rem) {
  .resultados { grid-template-columns: 1fr 1fr; }
  #mapa { height: 21rem; }
  .topo h1 { font-size: 1.4rem; }
  .botao-gps { width: auto; padding: 0 1.4rem; }
}

/* Respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}