/* ==========================================================================
   C-FAP Study Material Platform - Responsive & Print Styles
   Mobile Drawer, Responsive Tables, Print Optimization
   ========================================================================== */

/* Mobile Hamburger Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0.25rem;
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
  z-index: 850;
}

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

/* Tablet & Mobile Layout (under 1024px) */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 260px;
  }
  
  .content-container {
    padding: 1.5rem 1.25rem 3rem;
  }
}

/* Mobile Layout (under 768px) */
@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: block;
  }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
    width: 280px;
  }

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

  .main-wrapper {
    margin-left: 0;
  }

  .nav-search-btn span, 
  .nav-search-btn kbd {
    display: none;
  }

  .nav-search-btn {
    padding: 0.45rem;
    border-radius: var(--radius-md);
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.15rem; }

  .topic-meta-banner {
    padding: 1rem;
  }

  .meta-badges {
    gap: 0.4rem;
  }

  .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }

  .topic-bottom-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .topic-bottom-nav .btn {
    width: 100%;
    justify-content: center;
  }

  .flow-diagram {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-arrow {
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }
}

/* Small Screens (under 480px) */
@media (max-width: 480px) {
  .top-nav {
    padding: 0 1rem;
  }

  .brand-text {
    display: none;
  }

  .quiz-widget {
    padding: 1.25rem 1rem;
  }
}

/* Print Optimization */
@media print {
  .top-nav,
  .sidebar,
  .sidebar-overlay,
  .topic-bottom-nav,
  .nav-search-btn,
  .icon-btn,
  .solution-toggle-btn,
  .search-modal-backdrop {
    display: none !important;
  }

  .main-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  .content-container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .solution-content {
    display: block !important;
  }

  .table-responsive {
    overflow: visible !important;
    border: none !important;
  }

  table {
    border: 1px solid #000 !important;
  }

  th, td {
    border: 1px solid #ddd !important;
  }

  .callout, .topic-meta-banner, .revision-box {
    break-inside: avoid;
    border-color: #333 !important;
  }
}