/* ============================================================
   style-global.css — ESA · Escola Superior de Aviação
   Correções cross-browser: Chrome/Windows, Safari/Mac, iOS, Android
   ============================================================ */

/* ── 1. Reset universal ──────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;   /* fontes suaves Mac/iOS */
  -moz-osx-font-smoothing: grayscale;    /* fontes suaves Firefox/Mac */
}

/* ── 2. HTML base ────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;  /* evita zoom de texto ao girar tela no iOS */
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  -webkit-overflow-scrolling: touch; /* scroll suave no iOS */
}

/* ── 3. Imagens e mídia ──────────────────────────────────── */
img, video, iframe, embed, object {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

/* ── 4. Vídeo — fix iOS ──────────────────────────────────── */
video {
  -webkit-transform: translateZ(0); /* força aceleração GPU no iOS */
  transform: translateZ(0);
}

/* ── 5. Inputs, selects, textareas, buttons ──────────────── */
/*
   Safari e iOS aplicam estilos nativos que diferem do Chrome/Windows.
   -webkit-appearance:none remove esse estilo nativo.
   font-size >= 16px evita zoom automático no iOS ao focar o campo.
*/
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select,
button {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;            /* ≥16px — evita zoom automático no iOS */
  -webkit-appearance: none;   /* remove estilo nativo Safari/iOS */
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;           /* Safari arredonda campos por padrão */
  outline: none;
}

/* ── 6. Select — seta customizada (necessária após appearance:none) */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ── 7. Textarea — comportamento consistente ─────────────── */
textarea {
  resize: vertical;
  line-height: 1.6;
  overflow: auto; /* IE/Edge antigas mostravam scrollbar dupla */
}

/* ── 8. Botões — reset geral ─────────────────────────────── */
button {
  cursor: pointer;
  border: none;
  background: none;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  /* remove tap highlight azul no Android/iOS */
  -webkit-tap-highlight-color: transparent;
}

/* ── 9. Links ────────────────────────────────────────────── */
a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent; /* remove highlight no mobile */
}

/* ── 10. Position sticky — fix Safari ───────────────────── */
/*
   Safari precisa do prefixo -webkit-sticky.
   Aplica em qualquer elemento com a classe .sticky ou header/nav.
*/
header,
nav,
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* ── 11. Flexbox — gaps no Safari antigo ────────────────── */
/*
   Safari < 14 não suportava gap em flexbox.
   Se precisar suportar iPhones antigos, use margin como fallback.
   (Opcional — comente se não precisar)
*/
@supports not (gap: 1rem) {
  .flex-gap > * + * { margin-left: 1rem; }
}

/* ── 12. Tabelas — reset ─────────────────────────────────── */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ── 13. Listas — reset ──────────────────────────────────── */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── 14. Responsividade base ─────────────────────────────── */
/*
   Breakpoints utilizados:
   - Desktop  : > 1024px  (padrão, sem media query)
   - Tablet   : 601px – 1024px
   - Mobile   : ≤ 600px
*/

/* ── TABLET (iPad, iPad Mini, Android tablet) ────────────── */
@media (min-width: 601px) and (max-width: 1024px) {

  /* Evita overflow horizontal */
  body {
    overflow-x: hidden;
  }

  /* Containers com padding generoso no tablet */
  .container {
    padding: 0 1.5rem;
  }

  /* Grids de 2 colunas viram 1 coluna no tablet pequeno */
  .form-grid {
    grid-template-columns: 1fr 1fr; /* mantém 2 col em tablet */
  }

  /* Hero com padding reduzido */
  .page-hero {
    padding: 4rem 2rem 3rem;
  }

  /* Cards de relatos */
  .relato-card {
    padding: 1.5rem;
  }

  /* Formulário */
  .form-relato {
    padding: 2rem;
  }

  /* Navegação — reduz espaçamento */
  nav a {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  /* Inputs — mantém tamanho legível no tablet */
  input,
  select,
  textarea,
  button {
    font-size: 1rem; /* ≥16px — evita zoom no iOS/iPadOS */
  }
}

/* ── MOBILE (celular) ────────────────────────────────────── */
@media (max-width: 600px) {

  /* Evita overflow horizontal indesejado no mobile */
  body {
    overflow-x: hidden;
  }

  /* Containers com padding menor */
  .container {
    padding: 0 1rem;
  }

  /* Hero compacto */
  .page-hero {
    padding: 3rem 1rem 2rem;
  }

  /* Formulários e cards compactos */
  .form-relato {
    padding: 1.5rem;
  }

  .relato-card {
    padding: 1.2rem;
  }

  /* Formulários ocupam largura total no mobile */
  input,
  select,
  textarea,
  button {
    width: 100%;
    font-size: 1rem; /* ≥16px — evita zoom automático no iOS */
  }

  /* Botões inline não precisam de 100% */
  button.btn-inline,
  a.btn-inline {
    width: auto;
  }

  /* Grid de formulário: 1 coluna só */
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 15. Scrollbar — visual consistente (Chrome/Edge) ────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #e8eef5;
}
::-webkit-scrollbar-thumb {
  background: #b8cde0;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1a6fbf;
}

/* ── 16. Seleção de texto ────────────────────────────────── */
::selection {
  background: rgba(26, 111, 191, 0.2);
  color: inherit;
}
::-moz-selection {
  background: rgba(26, 111, 191, 0.2);
  color: inherit;
}

/* ── 17. Focus visível — acessibilidade ──────────────────── */
/* Mantém outline apenas quando navegado por teclado */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* ── 18. Animações — respeitar preferência do usuário ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}