/* Melhorias 30/10/2026 da skill apple-hig-designer (carrega DEPOIS de styles.css).
   B/H estão no HTML; aqui ficam J, K, L, M, N, O e o estilo de H. */

/* K — sem caixa-alta (regra do site) */
.hero-eyebrow,
.eyebrow,
.schedule-card .day,
.event-card .date,
.sermon-card .date,
.info-tile .label,
.footer-col h4,
.give-row .label,
.agenda-date span,
.featured-sermon .date,
.live-bar strong,
.destaque-card .tag,
.hero-acolhe-eyebrow,
.dq-falta,
.ev-falta-rotulo,
.ev-relogio span,
.ev-capa-mes,
.agenda-date small,
.btn-accent,
.vd-ref { text-transform: none !important; letter-spacing: .01em !important; }

/* J — nada abaixo de 14px no celular (Dynamic Type) */
@media (max-width: 760px) {
.utility-bar,
.hero-eyebrow,
.hero-verse cite,
.verse-mark cite,
.breadcrumb,
.eyebrow,
.welcome-art .tag,
.photo-credit,
.schedule-card .day,
.min-card p,
.min-card .lead,
.event-card .illustrative-tag,
.event-card .date,
.sermon-card .date,
.qr-box,
.pastor-card p,
.info-tile .label,
.info-tile .social-row a,
.topic-pill,
.contact-form label,
.footer-col h4,
.footer-bottom,
.proto-banner,
.qr-large,
.give-row .label,
.give-note,
.proto-note,
.agenda-date span,
.agenda-info p,
.agenda-note,
.album-info small,
.featured-sermon .date,
.nvchat-titulos span,
.nvchat-aviso,
.add-cal,
.pastor-mais,
.bio-fonte,
.bio-dialog .bio-nome,
.tl-txt small,
.tl-ano,
.passos em,
.curso-quando,
.destaque-card .tag,
.destaque-card .ir,
.hero-acolhe-eyebrow,
.dq-falta,
.agenda-detalhes,
.ev-falta-rotulo,
.ev-relogio span,
.agenda-date small,
.event-card .date .falta,
.btn-accent,
.agenda-info h3 .falta { font-size: 14px !important; }
}

/* N — toque no padrão Apple: curva suave, 200ms, leve "afundar" ao tocar */
:root { --ease-apple: cubic-bezier(.25, .1, .25, 1); }
.btn, .destaque-card, .event-card, .join-tile, .min-card, .featured-sermon, .nvchat-launcher, .header-whats {
  transition: transform .2s var(--ease-apple), box-shadow .2s var(--ease-apple), background-color .2s var(--ease-apple), color .2s var(--ease-apple);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:active, .header-whats:active, .nvchat-launcher:active { transform: scale(.97); }
.destaque-card:active, .event-card:active, .join-tile:active, .featured-sermon:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .btn:active:active, .header-whats:active, .nvchat-launcher:active, .destaque-card:active, .event-card:active, .join-tile:active, .featured-sermon:active { transform: none; } }

/* M — iPhone: nada embaixo da barra do aparelho */
.nvchat-launcher { right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.container { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

/* H — WhatsApp sempre à mão no cabeçalho (fixo ao rolar) */
.header-whats { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #e7f8ee; color: #0f6b3a; font-weight: 600; font-size: 14.5px; text-decoration: none; margin-left: 10px; }
.header-whats svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.header-whats:hover { background: #d3f2e0; }
@media (max-width: 1000px) { .header-whats { margin-left: auto; margin-right: 6px; padding: 0; width: 44px; } .header-whats span { display: none; } }


/* O — menu do celular como "folha" que sobe de baixo */
@media (max-width: 1000px) {
  nav.main-nav {
    position: fixed !important; top: auto !important; left: 0; right: 0; bottom: 0;
    display: flex !important; flex-direction: column; gap: 4px;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom)) !important;
    background: var(--white); border-radius: 22px 22px 0 0; border: 0 !important;
    box-shadow: 0 -18px 50px rgba(7,19,40,.28) !important;
    transform: translateY(105%); visibility: hidden;
    transition: transform .32s var(--ease-apple), visibility 0s linear .32s;
    z-index: 1100; max-height: 82vh; overflow-y: auto;
  }
  nav.main-nav::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(16,24,42,.18); margin: 0 auto 10px; flex: none; }
  header.site-header.nav-open nav.main-nav { transform: none; visibility: visible; transition: transform .32s var(--ease-apple); }
  nav.main-nav a { min-height: 52px; display: flex !important; align-items: center; font-size: 17px !important; padding: 0 6px !important; }
  header.site-header.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(7,19,40,.38); z-index: 1050; }
  header.site-header.nav-open .nav-toggle { position: relative; z-index: 1200; }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) { nav.main-nav, header.site-header.nav-open nav.main-nav { transition: none; } }

/* L — modo escuro automático (segue o celular/computador; ?tema=escuro força para testar).
   Fundos azul-marinho continuam iguais; fundos claros viram grafite azulado e os textos escuros ficam claros. */
html.escuro { color-scheme: dark;
  --cream: #0c1424; --paper: #16223a; --surface: #131d31;
  --ink: #e9eef8; --ink-soft: #aab7cf; --border-soft: rgba(201,214,236,.16); }
html.escuro body { background: var(--cream); color: var(--ink); }
html.escuro header.site-header { background: var(--surface); } /* sem backdrop-filter: ele prende o menu-folha (fixed) ao cabeçalho */
html.escuro .brand img { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
html.escuro nav.main-nav a { color: var(--ink); }
html.escuro .header-whats { background: rgba(37,211,102,.16); color: #7ee2a8; }
html.escuro .btn-outline-navy { color: var(--ink); border-color: rgba(201,214,236,.45); }
html.escuro .section-white { background: var(--surface); }
html.escuro .section-cream { background: var(--cream); }
html.escuro h1, html.escuro h2, html.escuro h3, html.escuro h4 { color: inherit; }
html.escuro a { color: #9fbcf0; }
html.escuro .btn, html.escuro .btn-accent, html.escuro .destaque-card, html.escuro .event-card, html.escuro .join-tile, html.escuro .featured-sermon, html.escuro .social-pills a, html.escuro .site-footer a, html.escuro .min-card a { color: inherit; }
html.escuro .btn-accent { color: #fff; }
html.escuro img { filter: brightness(.92); }

html.escuro header.site-header,
html.escuro .section-white,
html.escuro .schedule-card,
html.escuro .min-card,
html.escuro .event-card,
html.escuro .sermon-card,
html.escuro .messages-empty,
html.escuro .give-card,
html.escuro .faith-item,
html.escuro .contact-card,
html.escuro .contact-form input, html.escuro  .contact-form textarea,
html.escuro .contact-form select,
html.escuro .give-way,
html.escuro .agenda-row,
html.escuro .featured-sermon,
html.escuro nav.main-nav,
html.escuro .month-chips,
html.escuro .nvchat-msg.bot,
html.escuro .nvchat-opcao,
html.escuro .nvchat-form,
html.escuro .nvchat-aviso,
html.escuro .qr-large.qr-real,
html.escuro .pastor-card .avatar.iniciais,
html.escuro .add-cal a,
html.escuro .social-pills a,
html.escuro .live-dot,
html.escuro .bio-dialog,
html.escuro .av-ed.on, html.escuro  .av-ed:hover,
html.escuro .tl-card,
html.escuro .passos li,
html.escuro .oracao-box,
html.escuro .curso-card,
html.escuro .destaque-card,
html.escuro .qr-pix img,
html.escuro .dq-seta,
html.escuro .tl-btn,
html.escuro .tl-seta,
html.escuro .semana-card,
html.escuro input[type=file]::file-selector-button { background: var(--surface) !important; }
html.escuro .btn-outline-navy,
html.escuro .nav-toggle,
html.escuro .schedule-card .time,
html.escuro .min-card h3,
html.escuro .event-card h3,
html.escuro .sermon-card .play span,
html.escuro .sermon-card h3,
html.escuro .give-details dd,
html.escuro .faith-item summary,
html.escuro .topic-pill,
html.escuro .contact-card h3,
html.escuro .contact-form label,
html.escuro .social-row a:hover,
html.escuro .give-row .value,
html.escuro .agenda-month,
html.escuro .agenda-info h3,
html.escuro .featured-sermon h3,
html.escuro .join-tile strong,
html.escuro .social-strip strong,
html.escuro .social-pills a,
html.escuro .marcos strong,
html.escuro .bio-dialog h3,
html.escuro .av-ed.on, html.escuro  .av-ed:hover,
html.escuro .tl-txt h3,
html.escuro .album-grupo,
html.escuro .passos strong,
html.escuro .gv-regras strong,
html.escuro .ct-card strong,
html.escuro .oracao-box,
html.escuro .curso-body h3,
html.escuro .destaque-card h3,
html.escuro .dq-seta,
html.escuro .ev-info h1,
html.escuro .ev-aviso,
html.escuro .tl-btn,
html.escuro .tl-seta,
html.escuro .vd-texto,
html.escuro .semana-card .hora,
html.escuro .familia .subtitulo,
html.escuro .page-hero.hero-claro,
html.escuro .page-hero.hero-claro h1,
html.escuro .min-card .lead + .min-quero ~ .min-quero:hover { color: var(--ink) !important; }
html.escuro nav.main-nav { background: var(--surface) !important; }

/* a página de comparação já identifica o protótipo; o aviso cobria o botão no celular */
.proto-banner { display: none !important; }

/* O: com o menu aberto, o botão do chat sai da frente e "Contribuir" fica centralizado */
body:has(.site-header.nav-open) .nvchat-launcher { display: none; }
@media (max-width: 1000px) { nav.main-nav a.nav-cta { justify-content: center; margin-top: 12px; } }

/* L — azul de texto mais claro no escuro (contraste) e pílulas de grupo */
html.escuro nav.main-nav a:hover,
html.escuro .verse-mark cite,
html.escuro .eyebrow,
html.escuro .schedule-card .day,
html.escuro .min-card.large .thumb,
html.escuro .min-card .thumb .min-ico,
html.escuro .min-card .lead,
html.escuro .event-card .date,
html.escuro .sermon-card .date,
html.escuro .visit-list .ico,
html.escuro .faith-item summary::after,
html.escuro .pastor-card .avatar,
html.escuro .copy-btn,
html.escuro .agenda-date,
html.escuro .featured-sermon .play span,
html.escuro .featured-sermon .date,
html.escuro .join-tile em,
html.escuro .month-chips a,
html.escuro .nvchat-opcao,
html.escuro .main-nav a[aria-current="page"],
html.escuro .pastor-card .avatar.iniciais,
html.escuro .add-cal a,
html.escuro .social-pills span,
html.escuro .pastor-mais,
html.escuro .bio-dialog .bio-nome,
html.escuro .min-quero,
html.escuro .tl-txt small,
html.escuro .passos em,
html.escuro .curso-quando,
html.escuro .slide-dizimos figcaption a,
html.escuro .destaque-card .tag,
html.escuro .destaque-card .ir,
html.escuro .dq-seta:hover,
html.escuro .agenda-info h3 a:hover,
html.escuro .agenda-detalhes,
html.escuro .ev-fatos svg,
html.escuro .ev-mapa,
html.escuro .ev-aviso a,
html.escuro .semana-dia,
html.escuro .vd-titulo,
html.escuro .page-hero.hero-claro .breadcrumb,
html.escuro input[type=file]::file-selector-button,
html.escuro .map-link { color: #8fb0ee !important; }