/* Estilo do site público — fiel ao tema original (Astra/WordPress):
   header preto com menu dourado, títulos Montserrat azul-marinho com
   sublinhado dourado, cards de serviço com moldura dourada, footer preto. */

:root {
    --smas-preto: #000000;
    --smas-navy: #1e293b;        /* títulos (ast-global-color-2) */
    --smas-texto: #52627a;       /* corpo de texto (tom do tema escurecido p/ contraste AA) */
    --smas-gold: #d8b31b;        /* dourado das molduras/sublinhados */
    --smas-gold-claro: #ffcd57;  /* dourado dos links do menu (ast-global-color-7) */
    --smas-cinza-claro: #F2F5F7;
}

/* Guarda contra overflow horizontal no mobile (conteúdo largo não pode
   deslocar a página). "clip" e não "hidden": hidden cria scroll container
   e quebraria o position: sticky da navbar. */
html, body { overflow-x: clip; }

body {
    font-family: 'Google Sans', 'Helvetica Neue', sans-serif;
    color: var(--smas-texto);
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
    color: var(--smas-navy);
    font-weight: 700;
}

.text-gold { color: var(--smas-gold-claro); }

/* Texto navy sobre dourado: ~7:1 (WCAG AA/AAA); branco dava ~1.9:1 */
.btn-gold {
    background-color: var(--smas-gold);
    color: var(--smas-navy);
    font-weight: 600;
}

.btn-gold:hover {
    background-color: var(--smas-gold-claro);
    color: var(--smas-navy);
}

/* Título de seção com sublinhado dourado (padrão do site original) */
.titulo-secao {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: .75rem;
}

.titulo-secao::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 110px;
    height: 4px;
    background-color: var(--smas-gold);
}

/* ------------------------------------------------ header (preto + dourado) */

.site-navbar {
    background-color: var(--smas-preto);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.site-navbar .nav-link {
    color: var(--smas-gold);
    font-size: 1.08rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .dropdown-item:hover {
    color: var(--smas-gold-claro);
}

.site-navbar .dropdown-menu {
    background-color: var(--smas-preto);
    border: 1px solid rgba(216, 179, 27, .3);
}

.site-navbar .dropdown-item { color: var(--smas-gold); }

.site-navbar .dropdown-item:hover { background-color: #1a1a1a; }

/* ------------------------------------------------ hero (vídeo/imagem full-bleed) */

.hero-media {
    position: relative;
    height: 78vh;
    min-height: 420px;
    overflow: hidden;
    background-color: var(--smas-preto);
}

.hero-media video,
.hero-media .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-media .hero-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.hero-media .hero-legenda h1 {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .75);
}

.hero-media .hero-legenda p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
    margin-bottom: 1rem;
}

/* ------------------------------------------------ cards de serviço (moldura dourada) */

.card-servico {
    display: block;
    text-decoration: none;
    text-align: center;
}

.card-servico .moldura {
    border: 10px solid var(--smas-gold);
    border-radius: 24px;
    overflow: hidden;
    max-width: 240px;
    margin: 0 auto 1rem;
    background: #fff;
}

.card-servico .moldura img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.card-servico h3 {
    font-size: 1.35rem;
    color: var(--smas-navy);
}

.card-servico:hover .moldura { border-color: var(--smas-gold-claro); }

.card-servico:hover h3 { color: var(--smas-gold); }

/* ------------------------------------------------ notícias */

.card-noticia {
    border: 0;
    box-shadow: 0 2px 10px rgba(30, 41, 59, .08);
}

.card-noticia img.capa {
    height: 200px;
    object-fit: cover;
}

.card-noticia .card-title a {
    color: var(--smas-navy);
    text-decoration: none;
}

.card-noticia .card-title a:hover { color: var(--smas-gold); }

.card-noticia .badge {
    background-color: var(--smas-gold) !important;
    color: var(--smas-navy);
}

/* Corpo da notícia/página (conteúdo do editor Quill) */
.conteudo-noticia {
    font-size: 1.06rem;
    line-height: 1.8;
}

.conteudo-noticia img {
    max-width: 100%;
    height: auto;
    border-radius: .375rem;
    margin: 1rem 0;
}

.conteudo-noticia blockquote {
    border-left: 4px solid var(--smas-gold);
    padding-left: 1rem;
    color: var(--smas-texto);
}

.conteudo-noticia .ql-align-center { text-align: center; }
.conteudo-noticia .ql-align-right { text-align: right; }
.conteudo-noticia .ql-align-justify { text-align: justify; }
.conteudo-noticia .ql-size-small { font-size: .8em; }
.conteudo-noticia .ql-size-large { font-size: 1.4em; }
.conteudo-noticia .ql-size-huge { font-size: 2em; }
.conteudo-noticia .ql-indent-1 { padding-left: 3em; }
.conteudo-noticia .ql-indent-2 { padding-left: 6em; }

.imagem-destacada {
    max-height: 480px;
    width: 100%;
    object-fit: cover;
    border-radius: .5rem;
}

/* ------------------------------------------------ seções da home */

.secao-titulo-underline {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
}

.secao-titulo-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 3px;
    background-color: var(--smas-gold);
}

#contato h3 { font-size: 1.35rem; }

#contato strong { color: var(--smas-navy); }

/* ------------------------------------------------ footer (barra preta fina) */

.site-footer {
    background-color: var(--smas-preto);
    padding: 1.25rem 0;
}

.site-footer a {
    color: var(--smas-gold);
    text-decoration: none;
    margin: 0 .75rem;
}

.site-footer a:hover { color: var(--smas-gold-claro); }

.paginacao-site .page-link { color: var(--smas-navy); }

.paginacao-site .page-item.active .page-link {
    background-color: var(--smas-gold);
    border-color: var(--smas-gold);
    color: var(--smas-navy);
}

/* ---- PWA: modal "App SMAS" ---- */
.pwa-modal {
    border-top: 6px solid var(--smas-gold);
    border-radius: 10px;
}
.pwa-modal .modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--smas-navy);
    display: flex;
    align-items: center;
}

/* ---- Marca "SMAS" ao lado do logo (visível no mobile) ---- */
.site-navbar .brand-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .04em;
    color: var(--smas-gold-claro);
    line-height: 1;
}

/* ---- Oferta automática de comunicados (push) ---- */
.push-oferta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: var(--smas-navy);
    color: #fff;
    border-top: 3px solid var(--smas-gold);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.push-oferta strong { color: var(--smas-gold-claro); }

/* Aviso de cookies / LGPD — barra fixa no rodapé da viewport */
.cookie-aviso {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background-color: var(--smas-navy);
    color: #fff;
    border-top: 3px solid var(--smas-gold);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
}
.cookie-aviso a { color: var(--smas-gold-claro); }

/* Atalhos de emergência na home — alvos grandes, emergência dominante, para
   orientar quem está nervoso ou em risco. Sempre visível no celular (mesmo
   fora do app instalado): é conteúdo de emergência e não deve depender do modo
   standalone nem de JS. O seletor .atalhos-app.d-none vence o .d-none do
   Bootstrap por especificidade. Em telas maiores segue exclusivo do app
   (pwa.js remove o .d-none quando standalone). */
@media (max-width: 991.98px) {
    .atalhos-app.d-none { display: block !important; }
    /* Home mais compacta no celular: hero menor coloca os atalhos de
       emergência dentro da primeira dobra */
    .hero-media { height: 46vh; min-height: 300px; }
    #servicos, #sobre, #contato { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}
.atalhos-titulo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--smas-navy);
    text-align: center;
    margin-bottom: .75rem;
}
.atalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-decoration: none;
    border-radius: 1rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .06s ease, filter .1s ease;
}
.atalho:active { transform: scale(.98); }
.atalho:hover, .atalho:focus { filter: brightness(1.05); }
.atalho:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.atalho-icone { font-size: 2rem; line-height: 1; }
.atalho-emergencia {
    background-color: #d32f2f;
    color: #fff;
    padding: 1.75rem 1rem;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}
.atalho-emergencia .atalho-icone { font-size: 2.75rem; }
.atalhos-secundarios {
    display: flex;
    gap: .75rem;
}
.atalhos-secundarios .atalho {
    flex: 1 1 0;
    min-width: 0;  /* com flex-basis 0, precisa poder encolher abaixo do conteúdo */
    padding: 1.25rem .75rem;
    font-size: 1.1rem;
}
.atalho-ligar { background-color: #1b8a3a; color: #fff; }
.atalho-denuncia { background-color: var(--smas-gold); color: #1a1a1a; }

/* ---- Feed de comunicados ----
   Coluna única estilo rede social. A imagem é alta e SEM corte (muitos
   flyers têm texto): object-fit contain com fundo suave; max-height limita
   cartazes muito verticais. A classe antiga .capa (200px, cover) continua
   valendo para os cards compactos da home e das relacionadas. */
.card-feed .capa-feed {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    background-color: var(--smas-cinza-claro);
}
.btn-curtir {
    font-size: 1.5rem;
    line-height: 1;
    padding: .25rem .6rem;
    border: 0;
    color: #94a3b8;
    background: transparent;
    transition: transform .1s ease;
}
.btn-curtir.curtido { color: #d32f2f; }
.btn-curtir:active { transform: scale(1.25); }
.btn-curtir:focus-visible { outline: 3px solid var(--smas-navy); border-radius: .5rem; }
.curtidas-contagem { color: var(--smas-texto); font-weight: 600; }

/* Compartilhar: mesmo visual do coração (transparente, cinza, foco navy).
   .copiado é o feedback textual do fallback de copiar link no desktop. */
.btn-compartilhar {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: .25rem .6rem;
    border: 0;
    color: #94a3b8;
    background: transparent;
}
.btn-compartilhar:hover { color: var(--smas-navy); }
.btn-compartilhar:active { transform: scale(1.15); }
.btn-compartilhar:focus-visible { outline: 3px solid var(--smas-navy); border-radius: .5rem; }
.btn-compartilhar.copiado {
    font-size: .85rem;
    font-weight: 600;
    color: var(--smas-navy);
}

/* ---- Camada mobile "cara de app" (<lg) ----
   No celular a navegação vira uma tab bar fixa inferior (estilo app nativo)
   e o header fica enxuto; no desktop (>=lg) nada muda — site institucional.
   A barra é HTML/CSS puro: funciona sem JS e independe do PWA. */
.tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* abaixo de offcanvas (1045) e modal (1055) */
    display: flex;
    align-items: stretch;
    background: var(--smas-preto);
    border-top: 2px solid var(--smas-gold);
    /* Aparelhos com gesto/notch: a barra absorve a safe area inferior */
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 60px;
}
.tab-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: .4rem .15rem;
    color: var(--smas-gold);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
.tab-item.ativo,
.tab-item:hover,
.tab-item:focus { color: var(--smas-gold-claro); }
.tab-item:focus-visible { outline: 3px solid var(--smas-gold-claro); outline-offset: -3px; }
.tab-item:active { transform: scale(.96); }
.tab-icone { font-size: 1.4rem; line-height: 1; }
/* Emergência: botão circular elevado no centro da barra */
.tab-emergencia { color: #fff; overflow: visible; }
.tab-emergencia .tab-circulo {
    width: 56px;
    height: 56px;
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d32f2f;
    border: 3px solid #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Menu completo do app (offcanvas aberto pela tab bar) */
.menu-app { background: var(--smas-navy); color: #fff; }
.menu-app .offcanvas-title { color: var(--smas-gold-claro); }
.menu-app-grupo {
    margin-top: 1rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--smas-gold);
}
.menu-app-lista a {
    display: block;
    padding: .65rem .25rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu-app-lista a:hover,
.menu-app-lista a:focus { color: var(--smas-gold-claro); }
/* Fallback sem JS: seguir o link #menu-app da tab bar abre o menu via :target
   (com JS o Bootstrap intercepta o clique e o hash nem muda) */
#menu-app:target { visibility: visible; transform: none; }

@media (max-width: 991.98px) {
    /* Header de app: só o logo centralizado — a navegação vive na tab bar */
    .site-navbar .navbar-toggler { display: none; }
    .site-navbar .container { justify-content: center; }
    .site-navbar { padding-top: .4rem; padding-bottom: .4rem; }
    /* Conteúdo e banners fixos não podem ficar sob a tab bar */
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .cookie-aviso, .push-oferta { bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* Transição suave entre páginas (SSR recarrega a página inteira) —
   progressive enhancement, ignorada por navegadores sem suporte */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ---- Páginas de denúncia/pânico ----
   Usuário provavelmente no celular, nervoso, possivelmente idoso e com
   dificuldade de leitura: fonte maior, texto mais escuro que o padrão do
   site e alvos de toque grandes. */
.pagina-emergencia { font-size: 1.125rem; color: #334155; }
.pagina-emergencia .form-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--smas-navy);
}
.pagina-emergencia .form-control { font-size: 1.15rem; min-height: 52px; }
.pagina-emergencia textarea.form-control { min-height: auto; }
.pagina-emergencia .form-text { font-size: .95rem; color: #46536a; }
.pagina-emergencia .btn { min-height: 48px; }
.pagina-emergencia .btn-sm { min-height: auto; }
.pagina-emergencia .btn-enviar {
    min-height: 56px;
    font-size: 1.25rem;
    font-weight: 700;
}
.pagina-emergencia .alert { font-size: 1.1rem; }

/* ---- Wizard (denúncia/pânico): uma pergunta por tela, cara de app ----
   Ativado por wizard.js (classes .wizard-ativo / .corpo-wizard). Sem JS nada
   disto se aplica: o formulário completo continua visível como sempre. */

/* Esconde o "cromo de site" ao redor: breadcrumb, introdução e footer */
.wizard-ativo .wizard-oculta,
.pagina-emergencia.wizard-ativo .wizard-oculta { display: none; }
body.corpo-wizard .site-footer { display: none; }

/* Título compacto e centrado; aviso 190/192/193 menor mas sempre visível */
.pagina-emergencia.wizard-ativo h1 {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: .5rem;
}
.pagina-emergencia.wizard-ativo .alert-warning {
    font-size: .95rem;
    padding: .5rem .75rem;
    text-align: center;
}

/* O form vira o "card" do passo: altura confortável, botões ancorados na
   base do card (flex + margin-top:auto — não brigam com a tab bar fixa) */
form.wizard-ativo {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(30, 41, 59, .12);
    padding: 1.25rem;
    min-height: min(62vh, 580px);
    scroll-margin-top: 90px; /* navbar sticky não cobre o card no scrollIntoView */
}
form.wizard-ativo section.passo { display: none; }
form.wizard-ativo section.passo.passo-ativo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Botão real de envio ancorado na base do card no último passo */
form.wizard-ativo .passo-ativo .btn-enviar { margin-top: auto; }

/* Progresso: "Passo 2 de 4" + bolinhas + pergunta do passo */
.wizard-progresso { text-align: center; margin-bottom: 1rem; }
.wizard-progresso p {
    font-weight: 700;
    font-size: .9rem;
    color: var(--smas-navy);
    margin-bottom: .35rem;
}
.wizard-bolinhas { display: flex; justify-content: center; gap: .5rem; }
.wizard-bolinhas span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.wizard-bolinhas span.ativa { background: var(--smas-gold); }
.wizard-bolinhas span.feita { background: var(--smas-navy); }
.wizard-titulo-passo {
    font-size: 1.3rem;
    text-align: center;
    margin: .75rem 0 0;
}

/* Navegação: botões grandes, Voltar discreto à esquerda */
.wizard-nav { display: flex; gap: .75rem; margin-top: 1rem; }
.wizard-nav .btn { min-height: 56px; font-size: 1.15rem; font-weight: 700; }
.wizard-nav .wizard-btn-voltar { flex: 0 0 auto; }
.wizard-nav .wizard-btn-avancar { flex: 1 1 auto; }