/* ============================================================
   mobile2.css — redr labs documentation & sub-page mobile layer
   Covers: docs.html, doc.html, terms.html, whitepaper.html, 
           examples.html, feedback.html
   Breakpoints: ≤ 768px (Tablet/Mobile), ≤ 480px (Small Phone)
   ============================================================ */

/* Hide the hamburger button on all desktop screens by default */
.topbar-menu-toggle { 
  display: none; 
}

@media (max-width: 768px) {

  /* ── 1. TOPBAR & NAVIGATION ── */
  .topbar {
    padding: 0 16px;
  }
  
  .topbar-right {
    gap: 12px;
  }
  
  .topbar-link {
    display: none; /* Hides secondary links to save header space */
  }

  /* Show and style the Hamburger Toggle Button on mobile */
  .topbar-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
  }

  /* Convert tabs into a mobile dropdown menu */
  .topbar-tabs {
    display: none; /* Hidden until toggled */
    position: absolute;
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: auto;
    background: var(--bg);
    flex-direction: column;
    margin-left: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }

  /* Class added by JavaScript to open the menu */
  .topbar-tabs.is-open {
    display: flex;
  }

  /* Adjust tab styling for vertical list */
  .topbar-tab {
    padding: 14px 24px;
    border-bottom: none;
    border-left: 3px solid transparent;
    width: 100%;
  }

  .topbar-tab.active {
    border-bottom: none;
    border-left-color: var(--green);
    background: var(--green-light);
  }

  /* ── 2. SHELL LAYOUT (SIDEBAR, MAIN, TOC) ── */
  .sidebar, 
  .toc {
    display: none;
  }
  
  .main {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding: 32px 20px 80px;
  }
  
  .container {
    padding: 32px 16px 80px;
  }

  /* ── 3. TYPOGRAPHY & SPACING ── */
  .doc-h1, 
  .page-h1 {
    font-size: clamp(24px, 7vw, 32px);
  }
  
  .doc-h2 {
    font-size: 1.25rem;
  }
  
  .doc-lead, 
  .page-lead {
    font-size: 0.9rem;
  }
  
  .meta-row {
    gap: 20px;
  }

  /* ── 4. GRIDS & CARDS (Collapse to 1 column) ── */
  .feature-grid,
  .next-grid,
  .model-grid,
  .risk-grid,
  .data-domain-grid,
  .role-grid,
  .security-grid,
  .insight-box-body,
  .comparison-body,
  .partner-strip-body {
    grid-template-columns: 1fr;
  }

  /* ── 5. SPECIFIC COMPONENTS ── */
  
  /* Tables: Prevent horizontal overflow */
  .doc-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Stacked Strips (Intervals, Partners, Comparisons, Pipelines) */
  .interval-strip,
  .pipeline-stages {
    flex-direction: column;
  }
  
  .interval-cell,
  .partner-strip-cell,
  .comparison-cell,
  .insight-cell,
  .pipeline-stage {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  
  .interval-cell:last-child,
  .partner-strip-cell:last-child,
  .comparison-cell:last-child,
  .insight-cell:last-child,
  .pipeline-stage:last-child {
    border-bottom: none;
  }

  /* Pipeline Diagram specific overrides */
  .pipeline-arrow {
    display: none; 
  }
  
  .pipeline-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Persona Header (Examples page) */
  .persona-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Footer */
  .doc-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ── 6. SMALL PHONES (≤ 480px) ── */
@media (max-width: 480px) {
  
  /* Forms (Feedback page) */
  .field-row {
    grid-template-columns: 1fr;
  }
  
  .submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .submit-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Troubleshooting FAQ */
  .trouble-q {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .trouble-q-tag {
    margin-left: 0;
  }
  
  .doc-breadcrumb {
    flex-wrap: wrap;
  }
}