/* ══════════════════════════════════════════════════════════
   app-shell.css — camada que faz o site "parecer app" no mobile.
   Só afeta < 992px. Desktop segue igual.
   ══════════════════════════════════════════════════════════ */

/* ── View Transitions: transição suave entre navegações PHP ──
   Chrome/Edge/Android. Safari e Firefox ignoram sem quebrar nada.

   Nota: chegou a ser removido durante o diagnóstico de uma PWA que
   fechava ao abrir. A causa real era o aparelho de teste (Galaxy S7
   Edge, Android 8, Chrome sem atualização desde 2019), não este CSS —
   desktop instala e abre normalmente com ele ativo. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-fade-out .18s cubic-bezier(.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-fade-in .26s cubic-bezier(0, 0, .2, 1) both;
  }
}

@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* topbar e tabbar não participam da transição — ficam fixos,
   como a chrome nativa de um app */
.mobile-topbar { view-transition-name: app-topbar; }
.mobile-tabbar { view-transition-name: app-tabbar; }

/* Rede de segurança: se um overlay (drawer/sheet) foi fechado ou a página
   navegou, o body nunca pode continuar travado. As classes só existem
   enquanto o overlay está de fato aberto. */
body:not(.drawer-open):not(.sheet-open) {
  overflow-y: visible;
}


/* ── Hover só onde existe mouse de verdade ──
   No touch, :hover fica "grudado" depois do toque. Esses efeitos
   de deslocamento (translate + box-shadow) são os piores nisso. */
@media (hover: none) {
  .btn-worple:hover,
  .side-nav-link:hover,
  .card:hover,
  .side-cta:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}


@media (max-width: 991.98px) {

  /* ── Tipografia: app usa corpo maior que site desktop ── */
  body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  p, li, .card-text {
    font-size: 1rem;
    line-height: 1.55;
  }
  small, .small { font-size: .82rem; }

  /* ── Sem highlight azul/cinza no toque ── */
  a, button, .card, .btn, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Feedback tátil: tudo que é clicável encolhe ao toque ── */
  .btn, .btn-worple, .card, button:not(.tb-fab):not(.mt-burger) {
    transition: transform .12s ease, opacity .12s ease;
  }
  .btn:active,
  .btn-worple:active,
  .card:active {
    transform: scale(0.975);
  }

  /* ── Alvos de toque de 44px (guia da Apple) ──
     Só em botões de ação: `button` genérico pegava também os controles
     compactos inline (like em pílula, deletar), inflando-os em círculos. */
  .btn, .nav-link, button[type="submit"] {
    min-height: 44px;
  }
  /* controles compactos mantêm o tamanho que o componente definiu */
  .np-like, .np-delete, .close, .tb-item, .tb-fab,
  .mt-icon-btn, .mt-logo, #notif-bell, .notif-btn, .notif-delete {
    min-height: 0;
  }

  /* NÃO usar `overflow-x: hidden` em html/body aqui: no iOS Safari isso
     transforma o body em container de rolagem e mata o scroll por toque.
     O overflow horizontal foi resolvido na origem (letreiro do index).
     Se algum elemento estourar, contenha esse elemento, não o documento. */

  /* ── Some com a scrollbar visual no mobile ── */
  ::-webkit-scrollbar { width: 0; height: 0; }
}