/*
 * mobile.css — Shared mobile stylesheet
 * Zoho Guides: Index, Bigin, Zoho Books
 * Applied on top of each page's own styles.
 * Breakpoints: ≤900px (tablet), ≤720px (phone), ≤420px (small phone)
 */

/* ═══════════════════════════════════════════════
   1. UNIVERSAL RESETS & TOUCH TARGETS
═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Ensure tap targets are at least 44px */
  button, a, .tree-label, .card, .wizard-row, .wizard-step,
  .nav-link, .guide-card, .ql, .quick-link {
    min-height: 44px;
  }

  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden;
  }

  /* Tables: allow horizontal scroll */
  .feature-table,
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px;
  }

  .feature-table td,
  .feature-table th,
  .data-table td,
  .data-table th {
    white-space: normal;
    min-width: 100px;
  }

  /* Stage builder wraps on tablet */
  .stage-builder {
    flex-wrap: wrap;
  }

  .stage-col {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--border, #E1E8ED);
  }
}

/* ═══════════════════════════════════════════════
   2. TABLET (≤ 900px) — Hide TOC, full-width content
═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Hide right TOC panel */
  aside.toc {
    display: none !important;
  }

  /* Content fills space left by TOC */
  main.content {
    margin-right: 0 !important;
    max-width: calc(100% - 272px) !important;
  }

  /* Shrink header search on tablet */
  .search-bar {
    max-width: 320px;
  }

  /* Pipeline viz scrolls horizontally */
  .pipeline-viz {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .pv-col {
    min-width: 140px;
  }

  /* Card grids: 2 columns on tablet */
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Index page guide cards */
  .guides-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════
   3. MOBILE (≤ 720px) — Drawer sidebar, full-width layout
═══════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* ── Header ── */
  :root {
    --header-h: 52px !important;
  }

  header {
    padding: 0 12px !important;
    gap: 10px !important;
  }

  .header-label,
  .header-pill,
  .header-badge,
  .header-title {
    display: none !important;
  }

  .header-sep {
    display: none !important;
  }

  /* Show hamburger */
  .menu-btn {
    display: flex !important;
  }

  /* Search bar shrinks */
  .search-bar {
    max-width: 100% !important;
    flex: 1 !important;
    margin-left: 4px !important;
  }

  .search-bar input {
    font-size: 16px !important; /* >=16px prevents iOS auto-zoom on focus */
  }

  /* ── Sidebar: slide-in drawer ── */
  aside.sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 95 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22) !important;
    width: 280px !important;
  }

  aside.sidebar.open {
    transform: translateX(0) !important;
  }

  /* ── Main content: full width ── */
  main.content {
    margin-left: 0 !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  /* ── Hero sections ── */
  .section-hero,
  .hero {
    padding: 24px 20px !important;
    border-radius: 10px !important;
  }

  .section-hero h1,
  .hero h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .hero-actions,
  .section-hero .hero-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hero-actions .btn,
  .hero-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Cards: single column on mobile ── */
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Pipeline viz ── */
  .pipeline-viz {
    gap: 6px !important;
  }

  .pv-col {
    min-width: 130px !important;
  }

  /* ── Wizard steps ── */
  .wizard-row,
  .wizard-step {
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  .ws-info p,
  .wr-info p {
    display: none !important; /* Hide subtitle on small screens */
  }

  /* ── Step list ── */
  .step-list li {
    font-size: 13px !important;
  }

  /* ── Info boxes ── */
  .info-box {
    font-size: 12.5px !important;
    padding: 10px 12px !important;
  }

  /* ── Section titles ── */
  h2.section-title,
  h2.sec-title {
    font-size: 16px !important;
  }

  h3.sub-title {
    font-size: 13.5px !important;
    margin-top: 20px !important;
  }

  /* ── Breadcrumb ── */
  .breadcrumb {
    font-size: 11px !important;
    margin-bottom: 14px !important;
  }

  /* ── Checklist ── */
  .checklist li {
    font-size: 13px !important;
  }

  /* ── Quick links ── */
  .quick-links {
    gap: 6px !important;
  }

  .quick-link,
  .ql {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
  }

  /* ── Stage builder: stack vertically ── */
  .stage-builder {
    flex-direction: column !important;
  }

  .stage-col {
    border-right: none !important;
    border-bottom: 1px solid var(--border, #E1E8ED) !important;
    flex: none !important;
    width: 100% !important;
  }

  /* ── Index page specifics ── */
  .guides-grid {
    grid-template-columns: 1fr !important;
  }

  .guide-card {
    padding: 20px !important;
  }

  .feature-list {
    grid-template-columns: 1fr !important;
  }

  .index-hero h1 {
    font-size: 22px !important;
  }

  .index-hero p {
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════
   4. SMALL PHONE (≤ 420px)
═══════════════════════════════════════════════ */

@media (max-width: 420px) {
  header {
    padding: 0 10px !important;
    gap: 8px !important;
  }

  .search-bar input {
    font-size: 16px !important; /* >=16px prevents iOS auto-zoom on focus */
    padding: 7px 30px 7px 34px !important;
  }

  main.content {
    padding: 12px 10px !important;
  }

  .section-hero,
  .hero {
    padding: 18px 14px !important;
  }

  .section-hero h1,
  .hero h1 {
    font-size: 18px !important;
  }

  h2.section-title,
  h2.sec-title {
    font-size: 15px !important;
  }

  .wizard-row,
  .wizard-step {
    padding: 8px 12px !important;
  }

  aside.sidebar {
    width: 260px !important;
  }

  .logo-wordmark .name,
  .logo-text .product {
    font-size: 14px !important;
  }

  .feature-table,
  .data-table {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════
   5. SIDEBAR OVERLAY (mobile backdrop)
   — Ensures overlay works even if inline styles differ
═══════════════════════════════════════════════ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 90;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.sidebar-overlay.visible {
  display: block;
}

/* ═══════════════════════════════════════════════
   6. PRINT — Collapse sidebar, show content only
═══════════════════════════════════════════════ */

@media print {
  header,
  aside.sidebar,
  aside.toc,
  .sidebar-overlay,
  .menu-btn,
  .search-bar,
  .hero-actions,
  .wizard,
  .quick-links {
    display: none !important;
  }

  main.content {
    margin: 0 !important;
    padding: 16px !important;
    max-width: 100% !important;
  }

  .section {
    display: block !important;
  }

  body {
    font-size: 12pt !important;
    color: #000 !important;
  }

  h2.section-title,
  h2.sec-title {
    page-break-after: avoid;
  }
}