/* =====================================================
   Kartograf — Responsive Styles (shared across all pages)
   ===================================================== */

/* ----- Mobile nav toggle (checkbox hack) ----- */
.nav-toggle, .nav-toggle-btn { display: none; }

@media (max-width: 768px) {
  /* --- Prevent horizontal overflow --- */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* --- Override ALL fixed max-widths --- */
  .main,
  .doc-section p,
  .doc-section li,
  .note,
  [style*="max-width"] {
    max-width: 100% !important;
  }
  /* --- Typography --- */
  html { font-size: 15px; }
  h1.display { font-size: clamp(2rem, 8vw, 3rem) !important; }
  h2.display { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
  h3.display { font-size: clamp(1.2rem, 4vw, 1.6rem) !important; }

  /* --- Landing nav --- */
  nav {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cream-faint);
  }
  .nav-links a {
    display: block;
    padding: 0.6rem 0;
    font-size: 0.9rem;
  }
  /* Show nav when toggle checked */
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid var(--cream-faint);
    border-radius: 4px;
    color: var(--cream-dim);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
  }
  .nav-toggle-btn:hover { color: var(--cream); border-color: var(--cream-dim); }

  /* --- Sidebar pages (docs, showroom, playground) --- */
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100% !important;
    max-height: 60vh;
    z-index: 200;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    border-right: none !important;
    border-bottom: 1px solid var(--accent);
    padding: 1rem 1.25rem !important;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateY(0); }

  .main {
    margin-left: 0 !important;
    padding: 1rem 1.25rem 4rem !important;
  }

  /* Sidebar overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
  }
  .sidebar-overlay.show { display: block; }

  /* Mobile sidebar toggle button */
  .sidebar-toggle {
    display: flex !important;
    position: fixed;
    top: 0.75rem; left: 0.75rem;
    z-index: 201;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--navy-deep);
    border: 1px solid var(--cream-faint);
    border-radius: 4px;
    color: var(--cream-dim);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
  }
  .sidebar-toggle:hover { color: var(--cream); border-color: var(--cream-dim); }

  /* --- Sections & spacing --- */
  section { padding: 3rem 1.25rem !important; }
  .hero { padding: 6rem 1.25rem 3rem !important; }
  .doc-hero { padding-top: 3rem !important; margin-bottom: 2rem !important; }
  .doc-section { margin-bottom: 2.5rem !important; }
  .doc-section p, .doc-section li { max-width: 100% !important; font-size: 0.85rem !important; }

  /* --- Grids --- */
  .feature-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .split-layout { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .demo-row { flex-direction: column !important; gap: 1rem !important; }

  /* --- Code blocks --- */
  .code-window { margin: 1rem 0 !important; max-width: 100% !important; }
  pre { padding: 1rem !important; font-size: 0.68rem !important; max-width: 100% !important; }
  code { font-size: 0.68rem !important; word-break: break-all; overflow-wrap: break-word; }
  .code-window pre { white-space: pre-wrap !important; word-break: break-word; overflow-x: hidden; }

  /* --- Tables --- */
  .prop-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prop-table th, .prop-table td { white-space: nowrap; padding: 0.5rem 0.75rem !important; font-size: 0.7rem !important; }

  /* --- Topbar on sidebar pages --- */
  .topbar { padding: 0.6rem 1rem 0.6rem 3rem !important; flex-wrap: wrap; gap: 0.5rem !important; }
  .topbar h2 { font-size: 0.9rem !important; }
  .topbar-right { gap: 0.4rem !important; }

  /* --- Buttons / CTAs --- */
  .cta-primary {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.5rem 0 !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.8rem !important;
  }

  /* --- Cards in playground --- */
  .card-header { padding: 0.4rem 0.5rem !important; }
  .card-body { padding: 0.4rem 0.5rem !important; }
  .field-row { flex-direction: column; align-items: flex-start; gap: 0.2rem !important; }
  .field-row label { width: auto !important; }
  .field-row input, .field-row select, .field-row textarea { width: 100% !important; }

  /* --- Canvas / drop area --- */
  #drop-canvas { padding: 0.5rem !important; }
  .canvas-header { padding: 0.4rem 0.75rem !important; }
  .delay-connector { padding: 0.25rem 0.75rem !important; }

  /* --- Map containers --- */
  .map-container { height: 35% !important; min-height: 200px !important; }
  .live-map { height: 280px !important; margin: 1rem -1.25rem !important; }
  .demo-map { height: 200px !important; }
  .demo-stage { padding: 1rem !important; }

  /* --- Info/code panels --- */
  .info-panel { padding: 0.6rem 1rem !important; flex-wrap: wrap; gap: 0.5rem !important; font-size: 0.7rem !important; }
  .code-panel pre { padding: 0.75rem 1rem !important; font-size: 0.65rem !important; }
  .code-toggle { padding: 0.3rem 1rem !important; }

  /* --- Footer --- */
  footer { padding: 2rem 1.25rem !important; text-align: center; }
  .footer-links { flex-direction: column; gap: 0.5rem !important; align-items: center; }

  /* --- Docs sidebar (when not using overlay toggle) --- */
  .doc-section-header { flex-direction: column; align-items: flex-start; gap: 0.3rem !important; }

  /* --- Back link --- */
  .back-link { margin-bottom: 1rem !important; }

  /* --- Note boxes --- */
  .note { max-width: 100% !important; padding: 0.75rem 1rem !important; }
}

/* --- Small phones --- */
@media (max-width: 400px) {
  html { font-size: 14px; }
  .hero { padding: 5rem 1rem 2rem !important; }
  section { padding: 2rem 1rem !important; }
  .main { padding: 0.75rem 1rem 3rem !important; }
  .topbar { padding: 0.5rem 0.75rem 0.5rem 2.75rem !important; }
  .map-container { height: 30% !important; min-height: 160px !important; }
  .live-map { height: 220px !important; }
}