/* ===========================================================
   PitStock — camada mobile
   Polimento "app nativo": safe-area, viewport dinâmico,
   anti-zoom iOS, hover por capacidade, transições de página.
   Carregado por último, em todas as páginas.
   =========================================================== */

/* Evita inversões forçadas de dark-mode que quebrariam o design claro */
:root { color-scheme: light; }

/* Transição suave ao navegar entre páginas (View Transitions API) */
@view-transition { navigation: auto; }

html {
  /* Não deixa o iOS/Android reescalar a fonte sozinho */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Âncoras (#precos, #faq...) não ficam escondidas sob o header fixo */
  scroll-padding-top: 84px;
}

body {
  -webkit-tap-highlight-color: transparent;   /* sem flash cinza ao tocar */
  overscroll-behavior-y: none;                /* sem pull-to-refresh acidental */
}

a, button, summary, .chip, .tour-tab, .plan-seg, .nav-toggle, .topbar-close {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;                 /* remove o delay de 300ms no toque */
}

/* Campos de formulário com a cor da marca + sem zoom no iOS (fonte >= 16px) */
input, select, textarea { accent-color: var(--brand); }
.faq-search input { font-size: 16px; }

/* Trava o scroll do fundo quando o menu mobile está aberto */
body.nav-open { overflow: hidden; }

/* Menu mobile: entra deslizando + contém o scroll dentro dele */
.mobile-nav.open {
  animation: navIn .22s cubic-bezier(.4, 0, .2, 1);
  overscroll-behavior: contain;
}
@keyframes navIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   Toque vs. mouse: efeitos de "hover" só onde há ponteiro fino.
   Em telas de toque, troca por feedback de :active (tátil).
   ---------------------------------------------------------- */
@media (hover: none) {
  .feature:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .wa-float:hover { transform: none; }
  .tour-play:hover { transform: none; }

  .btn:active { transform: scale(.97); }
  .feature:active { border-color: var(--ink-300); transform: scale(.99); }
  .plan:active { border-color: var(--ink-300); }
  .chip:active, .tour-tab:active, .plan-seg:active { border-color: var(--brand); }
  .wa-float:active { transform: scale(.94); }
  .feature, .btn, .wa-float, .plan, .chip, .tour-tab, .plan-seg { transition: transform .12s ease, border-color .12s ease; }
}

/* ----------------------------------------------------------
   Safe-area: respeita o notch e a barra de gestos (iPhone X+)
   ---------------------------------------------------------- */
@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wa-float { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .mobile-cta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  /* Alvos de toque mais generosos (mín. ~44px recomendado) */
  .main-nav a, .mobile-nav a { padding-top: 14px; padding-bottom: 14px; }
  .footer-col a { padding: 4px 0; }
}

/* Em modo app instalado (standalone), afasta o topo da status bar */
@media (display-mode: standalone) {
  .topbar-inner { padding-top: calc(7px + env(safe-area-inset-top)); }
  .site-header .header-inner,
  .simple-header .header-inner { padding-top: env(safe-area-inset-top); height: auto; min-height: 68px; }
}

/* Reduz movimento para quem pediu */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav.open { animation: none; }
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: .25s; }