/**
 * GCSE Revision Hub - Quiz Demo Page Styles
 *
 * Demo-specific styles for test-quiz-demo.html
 * All reusable component styles are in:
 * - css/quiz-feedback-panel.css (layout, feedback panel, hints, textarea, buttons)
 * - css/symbol-toolbar.css (collapsible symbol toolbar)
 * - css/hint-checklist.css (hint checklist items)
 * - css/spell-highlighter.css (spell check overlay)
 *
 * Version: 2.0 - Refactored for component reuse
 * Updated: 2026-01-22
 */

/* ============================================================================
   DEMO CONTAINER
   ============================================================================ */

.demo-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl);
}

/* ============================================================================
   UNIFIED QUIZ CONTAINER SYSTEM
   Prevents frame jumping between question types with standardized dimensions
   ============================================================================ */

.question-display {
  /* FIXED FRAME - NEVER CHANGES SIZE regardless of content */
  min-height: 800px;
  max-width: 800px;
  margin: 0 auto var(--space-8);
  background: var(--bg-card, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-8, 2rem);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--duration-fast, 150ms) var(--ease-out);
  position: relative;
  overflow-y: auto;
  
  /* Smooth content transitions */
  display: flex;
  flex-direction: column;
}

.question-display:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   UNIVERSAL QUIZ CONTAINER (ALL QUESTION TYPES)
   Standardized inner structure for consistent layout
   ============================================================================ */

.quiz-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 720px; /* Content minimum */
  /* Animation moved to .quiz-container--first-load in quiz-unified-container.css
     to prevent flicker during carousel transitions */
}

.quiz-container__header {
  flex-shrink: 0;
  margin-bottom: var(--space-6, 1.5rem);
  padding-bottom: var(--space-4, 1rem);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.quiz-container__main {
  flex: 1;
  min-height: 400px; /* Ensures consistent main content area */
  display: flex;
  flex-direction: column;
}

.quiz-container__footer {
  flex-shrink: 0;
  margin-top: var(--space-6, 1.5rem);
  padding-top: var(--space-4, 1rem);
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS (Consistent across all question types)
   Mobile-first approach with standard breakpoints
   ============================================================================ */

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1023px) {
  .question-display {
    min-height: 850px; /* Taller for tablet stacked layouts */
    padding: var(--space-6, 1.5rem);
  }
  
  .quiz-container {
    min-height: 770px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .question-display {
    min-height: 720px; /* Desktop optimized */
    padding: var(--space-8, 2rem);
  }
  
  .quiz-container {
    min-height: 640px;
  }
}

/* Mobile: <768px (default) */
@media (max-width: 767px) {
  .question-display {
    padding: var(--space-4, 1rem);
    border-radius: var(--radius-lg, 12px);
    /* min-height stays 800px for mobile */
  }
}

/* ============================================================================
   SPELL CHECKER INTEGRATION
   Ensures spell checker container works with quiz layout
   ============================================================================ */

.quiz-keyword-main .spell-highlight-container {
  width: 100%;
}

.quiz-keyword-main .spell-highlight-container textarea {
  width: 100%;
  min-height: 400px;
}

/* ============================================================================
   HINT CHECKLIST CONTAINER (SIDEBAR INTEGRATION)
   ============================================================================ */

.hint-checklist-container {
  margin-top: var(--space-sm);
}

/* ============================================================================
   SCREEN READER ONLY
   ============================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   ACCESSIBILITY: REDUCED MOTION SUPPORT
   ============================================================================ */

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