/* ============================================================
   mobile.css — Mobile navigation and responsive overrides
   ============================================================ */

/* ── MOBILE NAV (hidden on desktop) ────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 0 max(8px, env(safe-area-inset-bottom));
}

.mobile-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mnav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 10px;
  font-family: var(--sans);
  cursor: pointer;
  transition: color .15s;
  min-width: 48px;
}

.mnav-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mnav-btn.active { color: var(--green); }
.mnav-btn:hover  { color: var(--text2); }

/* ── MOBILE PAGE PADDING ─────────────────────────────────────
   Push page content up so mobile nav doesn't cover it        */
@media (max-width: 640px) {
  .mobile-nav { display: block; }

  /* add bottom padding to scrollable pages */
  #page-landing,
  #page-about,
  #page-lessons,
  #page-challenges { padding-bottom: 64px; }

  /* terminal page — shrink to fit above mobile nav */
  #page-terminal { height: calc(100vh - 64px) !important; }

  /* docs page */
  #page-docs { height: calc(100vh - 64px) !important; }

  /* hide desktop topbar nav on mobile (keep logo + avatar) */
  .topbar-nav { display: none; }

  /* hero adjustments */
  .hero h1        { font-size: 26px; }
  .hero p         { font-size: 14px; }
  .hero-terminal  { display: none; }
  .stats-inner    { gap: 24px; }
  .sn             { font-size: 26px; }

  /* hide sidebar and about panel */
  .sidebar, .about-panel { display: none; }

  /* about grid single column */
  .about-grid { grid-template-columns: 1fr; }

  /* docs: hide sidebar */
  .docs-sidebar { display: none; }

  /* footer right text */
  .footer-right { display: none; }

  /* footer socials — smaller */
  .social-btn { font-size: 11px; padding: 4px 8px; }

  /* section padding */
  .section { padding: 32px 16px; }

  /* lessons page */
  .lp-body { padding: 16px; }
  .mod-grid { grid-template-columns: 1fr; }

  /* challenges page */
  .ch-body { padding: 16px; }
  .ch-grid { grid-template-columns: 1fr; }

  /* features grid */
  .features-grid { grid-template-columns: 1fr; }

  /* terminal page inner */
  .page-tabs { padding: 6px 8px; overflow-x: auto; white-space: nowrap; }
  .ptab { font-size: 11px; padding: 5px 10px; }

  /* terminal text size */
  .terminal, #freeTerminal { font-size: 11.5px; }
  .t-ip, #freeInput, #termInput { font-size: 11.5px; }

  /* action bar wrap */
  .action-bar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .act-btn    { font-size: 10px; padding: 4px 8px; }
  .run-btn    { font-size: 11px; padding: 6px 12px; }

  /* theory panel shorter on mobile */
  .theory-panel { max-height: 140px; font-size: 11px; }
  .theory-panel pre { font-size: 10px; }

  /* task card */
  .task-card   { padding: 8px 10px; }
  .tc-body     { font-size: 11px; }

  /* lesson topbar */
  .lesson-topbar { flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
  .lt-ti { max-width: 180px; font-size: 11px; }
  .lt-bar { display: none; }

  /* connect row on about page */
  .connect-row { flex-direction: column; }
  .connect-btn { font-size: 11px; }

  /* hero buttons */
  .hero-btns { flex-direction: column; align-items: center; }
  .btn-primary, .btn-outline { width: 100%; max-width: 280px; text-align: center; }

  /* steps */
  .steps { grid-template-columns: 1fr; }

  /* modules row on landing */
  .mod-row { grid-template-columns: 1fr 1fr; }
}

/* ── EXTRA SMALL (phones < 380px) ───────────────────────────── */
@media (max-width: 380px) {
  .mnav-btn { min-width: 40px; font-size: 9px; }
  .mnav-btn svg { width: 18px; height: 18px; }
  .hero h1 { font-size: 22px; }
  .mod-row { grid-template-columns: 1fr; }
}