/* ═══════════════════════════════════════════════════════════════
   ΩMEGA RESPONSIVE SYSTEM — Mobile First
   Breakpoints: 480px (xs) · 768px (sm) · 1024px (md) · 1280px (lg)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. RESET RESPONSIVO ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── 2. FLUID CONTAINER ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: min(var(--container-max, 900px), 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* ── 3. TIPOGRAFIA FLUIDA ──────────────────────────────────────── */
:root {
  --fs-h1: clamp(1.6rem, 5vw, 3rem);
  --fs-h2: clamp(1.3rem, 3.5vw, 2rem);
  --fs-h3: clamp(1.1rem, 2.5vw, 1.4rem);
  --fs-body: clamp(0.875rem, 2vw, 1rem);
}

/* ── 4. NAV — Desktop: labels visíveis / Mobile: icon buttons ──── */

/* Hamburger legado — desativado */
.omega-hamburger { display: none !important; }

/* Base do container de links */
#omega-nav-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Desktop: ícone oculto, label visível */
#omega-nav-links .nav-icon-w { display: none; }
#omega-nav-links .nav-label  { display: inline; }

@media (max-width: 768px) {
  /* Nav permanece horizontal — logo à esquerda, ícones à direita */
  nav {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.65rem 1rem !important;
  }

  /* Container: cresce para preencher todo o espaço após o logo */
  #omega-nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
    gap: 3px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-left: 10px !important;
    align-items: stretch !important;
  }

  /* Cada link cresce igualmente para preencher o espaço */
  #omega-nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: unset !important;
    border-radius: 7px !important;
    background: rgba(143, 163, 173, 0.06) !important;
    border: 1px solid rgba(143, 163, 173, 0.10) !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: var(--text-secondary, #8f99a4) !important;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  #omega-nav-links a:hover,
  #omega-nav-links a:focus {
    background: rgba(143, 163, 173, 0.15) !important;
    border-color: rgba(143, 163, 173, 0.30) !important;
    color: var(--accent-color, #8fa3ad) !important;
    outline: none;
  }

  /* Mobile: ícone visível, label oculto */
  #omega-nav-links .nav-icon-w {
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  #omega-nav-links .nav-label { display: none !important; }

  /* Language selector — cresce junto com os botões */
  #omega-nav-links #language-selector {
    display: flex !important;
    flex: 1 !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Language picker — cresce igual aos botões de nav */
  .language-picker {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 7px !important;
    background: rgba(143, 163, 173, 0.06) !important;
    border: 1px solid rgba(143, 163, 173, 0.10) !important;
    color: var(--text-secondary, #8f99a4) !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .language-picker:hover {
    background: rgba(143, 163, 173, 0.15) !important;
    border-color: rgba(143, 163, 173, 0.30) !important;
    color: var(--accent-color, #8fa3ad) !important;
  }

  /* Label mostra glob via ::before — SVG inline é ocultado (Chrome mobile bug) */
  .language-picker label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    color: #c7d0da !important;
    font-size: 0 !important;
  }

  .language-picker label::before {
    content: '🌐';
    font-size: 16px !important;
    line-height: 1 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .language-picker label svg {
    display: none !important;
  }

  /* Select invisível cobre o botão inteiro — recebe o clique */
  .language-picker select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.01 !important; /* Fix for Mobile Chrome compositing bug */
    cursor: pointer !important;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    direction: rtl !important;
  }

  .language-picker select option {
    direction: ltr !important;
  }
}

/* ── 4b. SUB-PAGE IMAGES (pricing, community, faq) ────────────── */
@media (max-width: 768px) {
  /* Sub-page headers: 100vh → compact on mobile */
  header {
    height: auto !important;
    min-height: 60vh !important;
    justify-content: flex-end !important;
    padding: 0 1rem 2.5rem !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  header img, .section img {
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 10px !important;
    margin-top: 1rem !important;
  }

  .hero {
    min-height: 50vh !important;
    padding-top: 6rem !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* ── 5. BOTÕES FLUIDOS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100%;
  }
  .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── 6. GRIDS RESPONSIVOS ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Pricing cards */
  .pricing-grid,
  [class*="pricing"] > .card,
  [class*="plan"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Status cards */
  .status-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* Feature / stats grid */
  .features-grid,
  .stats-grid,
  [class*="grid-"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. TABELAS SCROLL HORIZONTAL ─────────────────────────────── */
.data-table,
.compliance-table,
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  max-width: 100%;
}

/* ── 8. BLOCOS DE CÓDIGO ───────────────────────────────────────── */
pre,
.code-block,
code {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 9. TIPOGRAFIA — MOBILE ────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: var(--fs-h1) !important; line-height: 1.2 !important; }
  h2 { font-size: var(--fs-h2) !important; }
  h3 { font-size: var(--fs-h3) !important; }

  header, .hero {
    padding: 2rem 1rem !important;
  }

  .hero .tagline,
  .subtitle {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
  }
}

/* ── 10. FAQ ACCORDION ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .categories {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }
  .category-btn {
    font-size: 0.78rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  .faq-question {
    font-size: 0.9rem !important;
    padding: 0.9rem 1rem !important;
  }
}

/* ── 11. CARDS GENÉRICOS ───────────────────────────────────────── */
@media (max-width: 480px) {
  .highlight,
  [class*="card"] {
    padding: 1rem !important;
  }
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ── 12. FOOTER RESPONSIVO ─────────────────────────────────────── */
@media (max-width: 768px) {
  footer {
    padding: 1.5rem 1rem !important;
    font-size: 0.8rem !important;
    line-height: 2 !important;
    text-align: center !important;
  }
  footer a {
    display: inline-block;
    margin: 0.1rem 0.3rem;
  }
}

/* ── 13. SCROLL SUAVE ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── 14. TOUCH TARGETS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Nav icon buttons têm dimensão própria definida na seção 4 */
  nav a           { min-height: unset; display: inline; }
  #omega-nav-links a { min-height: unset !important; display: inline-flex !important; }
}