/* ==========================================================================
   mobile.css — shared mobile breakpoint rules for the SolForge site.

   Loaded by every page after components.css. Centralizes the rules that
   tighten typography, padding, and stacked layouts on phones (≤720px) and
   small phones (≤480px).

   Breakpoints:
     ≤960px : tablet — most grids collapse to single column
     ≤720px : phone  — navbar collapses to hamburger, single-column forms,
                      typography tightened, sticky aside becomes static
     ≤480px : small phone — tighter padding, full-width buttons
   ========================================================================== */

/* ---------- Tablet breakpoint ---------- */
@media (max-width: 960px) {
  /* Cancel sticky on right-column asides (create.html, etc.) */
  aside {
    position: static !important;
  }
}

/* ---------- Phone breakpoint ---------- */
@media (max-width: 720px) {
  /* Container padding */
  .container,
  main.container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Cards — tighter padding so content doesn't feel cramped */
  .card {
    padding: 20px !important;
    border-radius: 16px;
  }
  .panel {
    padding: 18px !important;
  }

  /* Inputs — bump font-size to 16px to prevent iOS Safari from auto-zooming
     on focus. Also use 100% width and 44px min height for thumb reach. */
  .input,
  .textarea,
  .field input,
  .field select,
  .field textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  .textarea {
    min-height: 110px;
  }

  /* Page heading */
  h1 {
    font-size: clamp(1.9rem, 7vw, 2.4rem) !important;
  }
  .display,
  h1.display {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }

  /* Hero / page-head */
  .page-head {
    margin-bottom: 22px !important;
  }
  .page-head h1 {
    margin-top: 6px !important;
  }

  /* Buttons — primary action goes full-width on phone */
  .btn-lg,
  button.btn-primary,
  .btn-block {
    width: 100%;
  }
  .btn {
    padding: 14px 20px;
  }

  /* Stepper — collapse text, keep numbers visible */
  .stepper {
    gap: 4px;
  }
  .step {
    padding: 6px 10px !important;
    font-size: 0.78rem;
  }
  .step span:not(.step-num) {
    display: none;
  }
  .step-sep {
    max-width: 20px;
  }

  /* Step 1 of create.html — logo uploader stacks above the fields */
  #step-1 .step-pane-flex,
  .step-pane-flex {
    flex-direction: column !important;
    gap: 20px !important;
  }
  #uploader {
    margin: 0 auto;
  }

  /* Social metadata 2-column grid → 1 column */
  .step-pane-grid,
  .field-row-2,
  .step-pane-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Two-column button rows in steps 2/3 — stack vertically */
  #step-2 > div:last-of-type,
  #step-3 > div:last-of-type {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }

  /* Wallet picker modal — give 12px margin on small screens */
  .wallet-picker {
    padding: 12px !important;
  }
  .wallet-picker-panel {
    padding: 22px 20px !important;
    max-width: 100%;
  }

  /* Toasts — center on phone instead of bottom-right */
  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    align-items: center;
  }
  .toast {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Field-hint tooltip arrow position is already handled at ≤600px */
}

/* ---------- Small phone breakpoint ---------- */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
  .card {
    padding: 16px !important;
  }
  .nav-inner {
    padding: 12px 16px;
  }
  .brand span {
    font-size: 0.95rem;
  }
  /* Field labels smaller so they don't wrap */
  .label,
  .field label,
  .field > label {
    font-size: 0.78rem;
  }
  /* Fee table rows wrap-friendly */
  .fee-row,
  .balance-row {
    font-size: 0.82rem;
    gap: 8px;
  }
  /* uploader smaller on small phone */
  #uploader {
    max-width: 140px !important;
  }
}

/* ---------- Burger menu (mobile nav) ---------- */
.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
}
.nav-burger:hover {
  background: rgba(15, 20, 25, 0.04);
}
@media (max-width: 720px) {
  /* Hide nav links by default on phone — we'll show them inside .nav-drawer */
  .nav-links .nav-link:not(.nav-cta) {
    display: none !important;
  }
  .nav-burger {
    display: inline-flex;
  }
}
.nav-drawer {
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  padding: 16px 20px 32px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 49;
  overflow-y: auto;
}
.nav-drawer.open {
  display: flex;
}
.nav-drawer a {
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}
.nav-drawer a:hover,
.nav-drawer a.active {
  background: rgba(20, 241, 149, 0.10);
  color: var(--accent);
}
body.nav-open {
  overflow: hidden;
}