/* Mobile Optimization - Wareed */
/* Targets viewport < 768px (Tailwind md breakpoint) */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

h1, h2, h3, p, span, div, li, a, td, th, summary {
  overflow-wrap: anywhere;
  word-break: normal;
}

p, li, summary, details > div {
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 767px) {

  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* Nav inner container: ensure breathing room from right edge */
  nav .max-w-7xl { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }

  h1.text-4xl, h1.text-5xl, h1.text-6xl,
  .font-display.text-4xl, .font-display.text-5xl, .font-display.text-6xl {
    font-size: clamp(1.875rem, 8.5vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
  h2.text-4xl, h2.text-5xl, h2.text-6xl,
  h2.md\:text-5xl, h2.md\:text-6xl {
    font-size: clamp(1.625rem, 7.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }
  h3.text-xl, h3.text-2xl {
    font-size: 1.0625rem !important;
    line-height: 1.3 !important;
  }

  .text-lg, .text-xl, .md\:text-xl {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .inline-flex {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mt-12.flex.items-center.justify-center.gap-6 {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  nav .hidden.md\:flex { display: none !important; }

  nav a[href="#analyse"] {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.625rem !important;
  }

  .flex.gap-8, .flex.gap-6 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem !important;
  }

  .font-display.text-5xl.font-bold { font-size: 2rem !important; }
  .font-display.text-6xl { font-size: 2.5rem !important; }

  .p-8 { padding: 1.25rem !important; }
  .p-6 { padding: 1rem !important; }

  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-40 { padding-top: 5rem !important; padding-bottom: 3rem !important; }
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .pt-40 { padding-top: 5rem !important; }
  .pb-32 { padding-bottom: 3rem !important; }

  #live-demo .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

  #demo-log {
    font-size: 0.6875rem !important;
    min-height: 280px !important;
    word-break: break-word;
  }

  #demo-timer, #demo-confidence { font-size: 0.6875rem !important; }

  section a.px-8.py-4, section a.px-6.py-3 {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .flex-col.sm\:flex-row > a { width: 100%; }

  footer .grid { gap: 1.5rem !important; }

  .flex.flex-wrap.gap-2 { gap: 0.375rem !important; }
  .flex.flex-wrap.gap-2 span {
    font-size: 0.6875rem !important;
    padding: 0.375rem 0.625rem !important;
  }

  .font-arabic.text-5xl { font-size: 2.5rem !important; }

  details summary { padding: 1rem !important; min-height: 44px; }
  details > div { padding: 0 1rem 1rem 1rem !important; }
  details summary span.font-display { font-size: 0.9375rem !important; }

  .grid.grid-cols-4.gap-3 { grid-template-columns: repeat(2, 1fr) !important; }

  a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid #E8B976;
    outline-offset: 2px;
  }

  nav a, nav button { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 479px) {
  h1.text-4xl, h1.text-5xl, h1.text-6xl,
  .font-display.text-4xl, .font-display.text-5xl, .font-display.text-6xl {
    font-size: clamp(1.625rem, 8vw, 2.125rem) !important;
  }
  h2.text-4xl, h2.text-5xl, h2.text-6xl {
    font-size: clamp(1.375rem, 7vw, 1.875rem) !important;
  }
  .font-display.text-5xl.font-bold { font-size: 1.75rem !important; }
  .font-display.text-6xl { font-size: 2.125rem !important; }
}