/* Responsive styles */

/* Tablet and below */
@media (max-width: 768px) {
  /* Typography */
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  /* Layout */
  #main-content {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* Header */
  .header-container {
    padding: var(--spacing-md);
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .header-title {
    font-size: 1.25rem;
  }

  .header-stats {
    align-self: flex-end;
  }

  .header-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .nav-links {
    width: 100%;
    justify-content: space-between;
  }

  .nav-link {
    flex: 1;
    text-align: center;
    padding: 0.625rem 0.5rem;
    font-size: 0.8125rem;
  }

  /* Topic Grid */
  .topics-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  /* Topic Card */
  .topic-card {
    padding: var(--spacing-md);
  }

  .topic-meta {
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }

  /* Topic Detail */
  .topic-header-main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .topic-scenario-box {
    padding: var(--spacing-md);
  }

  .questions-list {
    padding: var(--spacing-md);
  }

  /* Question View */
  .question-nav-header {
    flex-direction: column;
    align-items: stretch;
  }

  .question-nav-info {
    align-items: flex-start;
    order: -1;
    margin-bottom: var(--spacing-sm);
  }

  .question-card {
    padding: var(--spacing-md);
  }

  .question-prompt {
    font-size: 1rem;
    padding: var(--spacing-md);
  }

  /* Multiple Choice */
  .mc-question .option {
    padding: var(--spacing-sm);
  }

  .mc-question .option-label {
    gap: var(--spacing-sm);
  }

  /* Essay Question */
  .essay-question .essay-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .essay-question .question-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .essay-question .question-actions .btn {
    width: 100%;
  }

  /* Question Navigation */
  .question-navigation {
    flex-direction: column;
  }

  .question-navigation .btn {
    width: 100%;
  }

  /* Question Item */
  .question-item {
    padding: var(--spacing-md);
  }

  .question-item:hover {
    transform: none;
  }

  .question-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  /* Typography */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }

  /* Spacing */
  #main-content {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  /* Header */
  .header-container {
    padding: var(--spacing-sm);
  }

  .header-title {
    font-size: 1.125rem;
  }

  .progress-badge,
  .progress-percent {
    font-size: 0.75rem;
  }

  .breadcrumbs {
    font-size: 0.75rem;
  }

  /* Buttons */
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  /* Topic Card */
  .topic-title {
    font-size: 1.125rem;
  }

  .topic-scenario {
    font-size: 0.8125rem;
  }

  /* Question Card */
  .question-prompt {
    font-size: 0.9375rem;
  }

  /* Question Explanation */
  .question-explanation {
    padding: var(--spacing-md);
  }

  .explanation-text {
    font-size: 0.9375rem;
  }

  /* Search */
  .search-input {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
  }
}

/* Large screens */
@media (min-width: 1440px) {
  :root {
    --max-width: 1400px;
  }

  .topics-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}

/* Print styles */
@media print {
  /* Hide navigation and controls */
  #header,
  .question-nav-header,
  .question-navigation,
  .question-actions,
  .btn {
    display: none !important;
  }

  /* Optimize for print */
  body {
    background-color: white;
  }

  .question-card,
  .topic-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  /* Show all content */
  .scenario-reminder details {
    display: block;
  }

  .scenario-reminder details summary {
    display: none;
  }

  .scenario-reminder details[open] p,
  .scenario-reminder details p {
    display: block;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation: none;
    border-top-color: transparent;
  }
}

/* Dark mode support (if desired later) */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode */
  /*
  :root {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --border-color-dark: #4b5563;
  }
  */
}