/* Lights On Podcast Studio — global mobile/responsive polish.
   Loaded last so it overrides utility classes where needed.
   Keeps desktop styling untouched (all rules wrapped in max-width queries). */

/* iOS safe-area aware viewport behaviors */
html, body { overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }

/* Native dialog animation polish */
dialog { margin: auto; }

/* Tap targets: every button/link should be >= 44px */
@media (max-width: 767px) {
  /* Nav: tighten padding, ensure brand never wraps */
  nav.fixed.top-0 {
    padding-left: 16px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  nav.fixed.top-0 > div:first-child { font-size: 1.25rem !important; }
  /* Hide old desktop nav book-now buttons inside <nav>; mobile nav drawer has its own CTA */
  nav.fixed.top-0 > div:last-child > button:not(.lo-menu-btn),
  nav.fixed.top-0 > div:last-child > a:not(.lo-menu-btn) {
    display: none !important;
  }

  /* Hero typography — keep impact but never overflow */
  #hero h1 { line-height: 0.85 !important; }
  #hero h1 span { word-break: keep-all; }

  /* Generic huge-headline overflow protection */
  h1, h2 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

  /* Section padding — tighten across the board */
  section { padding-left: 16px; padding-right: 16px; }
  section.px-6, section.px-8, section[class*="px-8"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* Footer columns get readable padding/spacing */
  footer { padding-left: 16px !important; padding-right: 16px !important; }

  /* Tables — ensure horizontal scroll instead of breaking layout */
  table { display: block; overflow-x: auto; }

  /* Forms — full-width inputs with comfortable target size */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="password"], textarea, select {
    width: 100%;
    font-size: 16px !important; /* prevent iOS auto-zoom on focus */
  }

  /* Cards: keep content from being cut off */
  article, .glass-panel { max-width: 100%; }

  /* Ensure long titles don't blow out flex children */
  .truncate { max-width: 100%; }

  /* Hero scroll cue — pull up so it sits above iPhone home indicator */
  #hero [class*="bottom-6"], #hero [class*="bottom-3"], #hero [class*="bottom-4"] {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* Very-narrow screens: stack 2-up grids that get cramped */
@media (max-width: 380px) {
  .grid.grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}