/* Universal mobile tweaks for the astronomy site
   Loaded by every page that doesn't already have its own mobile CSS.
   Goals: 16px font baseline, ≥44px touch targets, no horizontal scroll,
   safe-area-aware bottom padding for iOS. */

* { box-sizing: border-box; }

/* Keep the 10-tab course nav on ONE clean row at every width — scroll horizontally
   if it overflows instead of wrapping to a 2nd row (which shoved page content down
   and collided with the mind-map's control bar). Applies site-wide on astronomy. */
nav.topnav { overflow: hidden; }
.topnav-inner { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.topnav-inner .tab { white-space: nowrap; flex: 0 0 auto; }
.topnav-inner .brand { flex: 0 0 auto; }

html, body {
  /* Prevent any accidental horizontal scrolling on phones */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  /* iOS safe-area awareness — content gets pushed up off the home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Anything tappable must be ≥44px (Apple HIG) / 48px (Material) */
a, button, .btn, .tab, select, summary, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(184, 154, 48, 0.2);
}

@media (max-width: 680px) {
  /* Base typography */
  body { font-size: 16px; line-height: 1.55; }
  h1 { font-size: 1.7rem; line-height: 1.25; }
  h2 { font-size: 1.35rem; line-height: 1.3; }
  h3 { font-size: 1.1rem; line-height: 1.35; }

  /* Hero gets cramped — tighten it */
  .hero { padding: 18px 0 12px; }
  .hero h1 { font-size: 1.55rem; }
  .hero .lede { font-size: 0.95rem; line-height: 1.5; }
  .hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.03em; line-height: 1.4; }

  /* Container padding tightened */
  .container { padding: 0 14px !important; }

  /* Touch-target enforcement */
  a, button, .btn, .tab, select { min-height: 44px; min-width: 44px; }
  button, .btn { font-size: 0.95rem; padding: 10px 14px; }

  /* Form controls big enough not to zoom in iOS Safari (font ≥16px) */
  input, textarea, select { font-size: 16px !important; }

  /* Tables and pre — let them scroll horizontally inside their box */
  pre, table, .scroll-x { overflow-x: auto; max-width: 100%; }

  /* Cards / blocks shouldn't have giant outer margin */
  section, article { margin-left: 0; margin-right: 0; }

  /* Footer compact */
  footer.site { font-size: 0.78rem; padding: 16px 12px; line-height: 1.5; }
  footer.site a { padding: 4px 8px; }

  /* Image media stays inside the viewport */
  img, figure, iframe, video { max-width: 100%; height: auto; }

  /* Topnav horizontally scrollable rather than wrapping awkwardly */
  .topnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topnav-inner { flex-wrap: nowrap; min-width: max-content; }

  /* kbd looks tiny by default */
  kbd { font-size: 0.85rem; padding: 3px 7px; }

  /* Quick-jump links inside long content shouldn't be tiny */
  a:not(.btn):not(.tab):not(.brand) { padding: 2px 0; }
}

/* Even smaller phones */
@media (max-width: 380px) {
  body { font-size: 15px; }
  h1 { font-size: 1.4rem; }
  .hero .lede { font-size: 0.9rem; }
  button, .btn { padding: 9px 11px; font-size: 0.9rem; }
}

/* Landscape phone — keep enough room for content above the keyboard */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { padding: 12px 0 8px; }
  .hero h1 { font-size: 1.3rem; }
  .hero .lede { font-size: 0.85rem; }
}

/* ===== Page-specific mobile enhancements ===== */
@media (max-width: 680px) {
  /* Bennett guide — diagrams, jargon decoder, walkthrough blocks */
  .sg-chapter { padding: 14px 12px !important; }
  .sg-chapter h2 { font-size: 1.3rem; }
  .sg-section { margin: 18px 0 10px; }
  .sg-section h3 { font-size: 1rem; padding-left: 8px; }
  .sg-card { padding: 8px 12px; font-size: 0.9rem; }
  .sg-card .term { font-size: 0.95rem; }
  .sg-card .pg { font-size: 0.72rem; }
  .sg-formula { padding: 10px 12px; }
  .sg-formula .eq { font-size: 0.95rem; }
  .sg-formula .desc { font-size: 0.82rem; }
  .sg-mixup, .sg-walkthrough, .sg-jargon, .sg-summary { padding: 12px 14px; }
  .sg-walkthrough p { font-size: 0.9rem; }
  .sg-walkthrough h5 { font-size: 0.92rem; }
  .sg-walkthrough .analogy, .sg-walkthrough .example, .sg-walkthrough .warn { padding: 8px 12px; font-size: 0.88rem; }
  .sg-diagram { padding: 10px 8px; }
  .sg-diagram .caption { font-size: 0.78rem; }
  .sg-diagram-grid { grid-template-columns: 1fr; gap: 10px; }
  .toc-grid { grid-template-columns: 1fr; }
  .toc-tile h3 { font-size: 0.95rem; }
  .toc-tile ul { font-size: 0.85rem; }
  .sg-nav .sg-nav-inner { padding: 0 12px; gap: 6px; }
  .sg-nav a { font-size: 0.78rem; padding: 5px 10px; }

  /* Simulator (Practice Exam) — filter chips wrap, question text fits */
  .stim-controls, .stim-filter, .stim-options { flex-wrap: wrap; gap: 8px; }
  .stim-chip { padding: 6px 12px !important; font-size: 0.85rem !important; }
  .stim-q, .stim-question { font-size: 1.05rem !important; line-height: 1.45; }
  .stim-choice, .stim-choices button { padding: 10px 12px !important; min-height: 48px; }
  .stim-progress, .stim-nav { font-size: 0.85rem; }

  /* Notebook / Annotations — list and filter */
  .notebook-list .anno { padding: 10px 12px; font-size: 0.9rem; }
  .notebook-filter { flex-wrap: wrap; gap: 6px; }
  .notebook-filter select, .notebook-filter input { width: 100%; }

  /* Cheatsheet / Review sheets — tighten dense layouts */
  .cheatsheet section { padding: 12px 14px; font-size: 0.9rem; }
  .review-sheet table { font-size: 0.85rem; }
  .review-sheet th, .review-sheet td { padding: 6px 8px; }

  /* PDF Hunter — make download links tappable */
  .pdf-hunter .mirror { padding: 14px 12px; min-height: 56px; }
  .pdf-hunter .mirror a { padding: 4px 0; }
}

/* Extra-small phones */
@media (max-width: 380px) {
  .sg-chapter h2 { font-size: 1.15rem; }
  .sg-section h3 { font-size: 0.92rem; }
  .sg-card { font-size: 0.85rem; }
  .stim-q { font-size: 0.98rem !important; }
  .sg-diagram .caption { font-size: 0.72rem; }
}