/* ── CROSS REFERENCE COLUMNS ── */
@media (max-width: 700px) {
  .xref-columns { grid-template-columns: 1fr; gap: 32px; padding: 0 18px; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  /* Hide desktop buttons, show hamburger */
  .header-controls .btn,
  .header-controls .btn-icon { display: none; }
  .btn-hamburger { display: flex; }
  header { position: relative; }
  .logo-img { height: 52px; }
}
@media (min-width: 769px) {
  /* Hide hamburger and mobile menu on desktop */
  .btn-hamburger { display: none !important; }
  .mobile-menu { display: none !important; }
}

/* ── MOBILE LAYOUT ── */
@media (max-width: 768px) {
  header { padding: 12px 16px; }
  .logo { font-size: 1.3rem; }
  /* Extra bottom padding so content clears the fixed bottom nav (~130px) */
  .main { padding: 0 14px 140px; }
  .scripture-card { padding: 20px 18px; font-size: 1.15rem; line-height: 2; }
  .bsb { font-size: 0.68rem; padding: 6px 12px; }
  .passage-title { font-size: 1.4rem; }
  .verse-text { font-size: 1.15rem; }
  .modal { padding: 24px 20px; }
  .modal-body { font-size: 1.05rem; line-height: 1.85; }

  /* Hide the desktop search bar — bottom nav has its own */
  .search-row { display: none; }

  /* Hide chapter nav arrows — users swipe to navigate */
  .chapter-nav,
  .chapter-nav-bottom { display: none; }

  /* Show the bottom nav */
  .bottom-nav { display: flex; flex-direction: column; }

  /* Keep read-aloud button visible near passage title */
  .scripture-card-header { margin-bottom: 6px; }

  /* Larger tap target for verse numbers — keep visual size, expand hit area */
  .verse-num {
    font-size: 0.75rem;
    padding: 8px 5px 8px 2px;
    margin-top: -8px;
    margin-bottom: -8px;
  }
}

/* ── DESKTOP: hide bottom nav ── */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
}