/* mobile.css — site-wide mobile polish.
 *
 * Applies a small set of targeted fixes for phones (<=560px wide):
 *   1. Tighter nav with hamburger-style collapse
 *   2. Larger tap targets (cooperates with a11y.js)
 *   3. Prevent horizontal scroll
 *   4. Auto-zoom prevention on input focus (font-size >= 16px)
 *   5. Better card spacing on small screens
 *   6. Sticky search bar respects mobile keyboards
 *   7. Hide non-essential nav items below 380px
 *
 * Imported once via <link rel="stylesheet" href="/mobile.css">.
 */

/* Prevent runaway horizontal scrolling — most common mobile bug */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* iOS Safari auto-zooms when input font-size < 16px. Bump to 16px to prevent it. */
@media (max-width: 760px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}

/* Nav: smaller font and gaps on phones */
@media (max-width: 560px) {
  nav.topnav {
    padding: 0 12px !important;
    height: 52px !important;
  }
  nav.topnav .navlinks {
    gap: 10px !important;
  }
  nav.topnav a:not(.cta):not(.always) {
    font-size: 12px !important;
  }
  .wordmark {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    margin-right: 8px !important;
  }
  /* Hide non-essential nav items on very narrow screens */
  nav.topnav a:not(.cta):not(.always):not(.keep-on-mobile) {
    display: none !important;
  }
}

/* Below 380px, hide all but Connect + Home */
@media (max-width: 380px) {
  nav.topnav a:not(.cta):not(.always):not(.nav-home) {
    display: none !important;
  }
}

/* Hero / landing sections — tighter padding on phones */
@media (max-width: 560px) {
  .hero, .landing-main {
    padding: 28px 16px 20px !important;
  }
  .hero-headline, .landing-h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
  }
  .hero-sub, .landing-sub {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }
}

/* Cards: shrink padding on phones so content isn't claustrophobic */
@media (max-width: 560px) {
  .almanac-hero-card,
  .input-card,
  .layer,
  .section,
  .compound-section,
  .ap-card {
    padding: 14px 16px !important;
  }
}

/* Three-doors grid: stack on phones */
@media (max-width: 480px) {
  .landing-main > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Buttons: full width on very small screens */
@media (max-width: 380px) {
  .btn,
  .walk-btn,
  .refresh-btn,
  button[type="submit"]:not(.compact) {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Tables: scroll horizontally rather than breaking layout */
@media (max-width: 560px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Footer: stack columns */
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Search results / typeahead: full-width on phones */
@media (max-width: 560px) {
  #heroTypeahead {
    margin: 2px -2px 0 !important;
  }
  #heroTypeaheadInner {
    max-height: 60vh !important;
  }
}

/* Welcome card: smaller on phones */
@media (max-width: 560px) {
  #welcome-card {
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    padding: 14px 16px 12px !important;
  }
  #welcome-card .wc-title {
    font-size: 17px !important;
  }
}

/* Language selector: smaller on phones */
@media (max-width: 560px) {
  #langSelect select {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
}

/* Prevent text overflow on small screens */
@media (max-width: 480px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
}

/* Improve readability of monospace blocks on phones */
@media (max-width: 560px) {
  code, pre, .mono {
    font-size: 11.5px !important;
    word-break: break-all;
  }
}