/*
 * HG App — Visual do MODO APLICATIVO (site instalado na tela inicial).
 *
 * Todas as regras são escopadas para html.hg-app-mode (classe aplicada
 * pelo app-mode.js somente quando o site roda instalado). No navegador
 * comum, nenhuma regra daqui tem efeito.
 *
 * Desde a v1.0.4, o visual segue o ESTILO CNN aprovado pelo dono do site:
 * tela de abertura vermelha com o logo branco (pasta splash/) e barra de
 * navegação inferior FLUTUANTE, em formato de pílula, sobre o conteúdo.
 * Identidade do portal: pílula preta translúcida, texto branco,
 * destaque #ad120d.
 */

/*
 * Respiro no fim da página: o rodapé do site nunca fica atrás da pílula.
 * Conta: 56px da barra + 10px da flutuação + 14px de folga,
 * além da área segura do aparelho.
 */
html.hg-app-mode body {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Barra de navegação do aplicativo: pílula flutuante (app-mode.js injeta). */
html.hg-app-mode .hg-app-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 9995;
  display: flex;
  align-items: stretch;
  height: 56px;
  box-sizing: border-box;
  background: rgba(12, 12, 12, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-family: Arial, Helvetica, sans-serif;
}

html.hg-app-mode .hg-app-nav-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

html.hg-app-mode .hg-app-nav-item svg {
  display: block;
  width: 22px;
  height: 22px;
}

/*
 * Indicador de seção atual: ícone e rótulo no vermelho do portal e um
 * pontinho vermelho de 4px sob o rótulo. Todos os itens reservam o mesmo
 * espaço do pontinho (transparente nos inativos), então ícone e rótulo
 * ficam alinhados em todos os itens, ativos ou não.
 */
html.hg-app-mode .hg-app-nav-item::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}

html.hg-app-mode .hg-app-nav-item.hg-app-nav-ativa {
  color: #ad120d;
}

html.hg-app-mode .hg-app-nav-item.hg-app-nav-ativa::after {
  background: #ad120d;
}

/*
 * Botão de ACESSIBILIDADE (widget "Ally", da Elementor): ele vive
 * num Shadow DOM (#ea11y-root), que o CSS externo não alcança.
 * Quem levanta o botão para acima da pílula, no modo aplicativo,
 * é o app-mode.js, entrando no shadow root. Nada a fazer por aqui.
 */

/*
 * Quem já instalou não vê convite de instalação.
 * (O install.js já nem cria a faixa em modo aplicativo; isto é reforço.
 * A faixa não tem classe própria: é o div com estes atributos.)
 */
html.hg-app-mode div[role="dialog"][aria-label="Instalar o aplicativo Hugo Gospel"] {
  display: none !important;
}

/*
 * Reforço para navegadores que expõem o display-mode no CSS:
 * as mesmas regras-chave, ainda escopadas pela classe do <html>.
 */
@media (display-mode: standalone) {
  html.hg-app-mode body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  html.hg-app-mode .hg-app-nav {
    position: fixed;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}