/* ==========================================================================
   CloudPath Academy — Responsive rules
   Desktop → tablet → mobile. Sidebar becomes a drawer under 960px.
   ========================================================================== */

/* Very wide screens: show TOC rail */
@media (min-width: 1280px) {
  .toc-panel { display: block; }
}

/* Tablet: tighten paddings */
@media (max-width: 1279px) {
  .toc-panel { display: none; }
}

@media (max-width: 1100px) {
  .header-nav { display: none; }
  .search-box { width: 240px; }
  .main-content { padding: 22px 24px 50px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Mobile drawer */
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .search-box { width: auto; flex: 1; min-width: 0; }
  .search-kbd { display: none; }
  .header-inner { gap: 8px; }

  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1100;
    width: min(86vw, 330px);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .26s ease;
    box-shadow: none;
    padding-top: calc(env(safe-area-inset-top, 0px));
  }
  body.drawer-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-3); }

  .sidebar-scroll { padding-top: 18px; }

  /* Drawer header with close button */
  .sidebar-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 14px 16px; border-bottom: 1px solid var(--cp-border); margin-bottom: 8px;
  }
  .sidebar-drawer-head .sdh-title { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 9px; }
  .sidebar-drawer-head .sdh-title .ic { color: var(--cp-primary); width: 18px; height: 18px; }

  /* Quick links inside drawer */
  .drawer-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px 14px; border-bottom: 1px solid var(--cp-border); margin-bottom: 8px; }
  .drawer-quick a {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px;
    background: var(--cp-surface); border-radius: var(--radius-sm);
    font-weight: 600; font-size: 13.5px; color: var(--cp-text); text-decoration: none !important;
  }
  .drawer-quick a:hover { background: var(--cp-primary-light); color: var(--cp-primary); }
  .drawer-quick .ic { width: 15px; height: 15px; color: var(--cp-primary); }

  .layout { display: block; }
  .main-content { max-width: none; padding: 20px 16px 44px; }

  .lesson-nav { flex-direction: column; }
  .lesson-nav-btn { width: 100%; min-width: 0; }
  .lesson-nav-btn.next { margin-left: 0; }

  .keyterm-row { grid-template-columns: 1fr; }
  .keyterm-row dt { background: transparent; padding-bottom: 2px; }
  .keyterm-row dd { padding-top: 2px; }

  .code-block pre { font-size: 12.8px; padding: 12px 13px; }
  .quiz-opt { padding: 12px 13px; }
  .hero { border-radius: 10px; }
  .roadmap-step { margin-right: 0; }
  .roadmap-step::after { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .brand-name { font-size: 16.5px; }
  .brand-mark { width: 26px; height: 26px; }
  .category-bar { top: var(--header-h); }
  .cat-chip { padding: 6px 11px; font-size: 12px; }
  .hero { padding: 24px 18px; }
  .hero-stats { gap: 18px 26px; }
  .lesson-title { font-size: 1.55rem; }
  .breadcrumb .bc-current { max-width: 180px; }
  .module-hero { padding: 20px 18px; }
  .lesson-row { padding: 12px 14px; gap: 11px; }
  .lesson-row .lr-side .meta-chip.level-intermediate,
  .lesson-row .lr-side .meta-chip.level-advanced,
  .lesson-row .lr-side .meta-chip.level-beginner { display: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .free-banner { padding: 18px; }
  #toast-container { left: 16px; right: 16px; bottom: 16px; }
  .toast { width: 100%; justify-content: center; }
  .code-filename { max-width: 150px; }
  .sidebar-progress { padding: 11px 14px; }
  .glossary-controls { flex-direction: column; align-items: stretch; }
}

/* Touch-friendly hit areas */
@media (hover: none) {
  .quiz-opt, .btn, .lesson-row, .sb-lesson, .sb-module, .cat-chip { min-height: 44px; }
  .toc-link { padding: 8px 12px; }
}