/* ============================================
   Bengali Learning Hub - Responsive Styles
   ============================================ */

/* ============================================
   Tablet (768px and below)
   ============================================ */

@media (max-width: 768px) {
    /* Header */
    .header {
        padding: 0 var(--space-4);
        height: 60px;
    }

    .header-right {
        gap: var(--space-3);
    }

    .stat-item span:not(:first-child) {
        display: none;
    }

    .stat-item {
        gap: 0;
        font-size: var(--font-size-sm);
    }

    .logo-text {
        font-size: var(--font-size-lg);
    }

    .logo-bengali {
        font-size: var(--font-size-base);
    }

    /* Navigation - Stack buttons */
    .navigation {
        flex-direction: column;
        height: auto;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .nav-item {
        width: 100%;
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-base);
        min-height: 44px; /* Touch-friendly */
    }

    /* Split-Screen Layout - Stack vertically */
    .module-container,
    .split-container,
    .quiz-container {
        flex-direction: column;
        gap: var(--space-6);
    }

    .module-left,
    .split-left,
    .quiz-left {
        flex: 1;
        width: 100%;
    }

    .module-right,
    .split-right,
    .quiz-right {
        flex: 1;
        width: 100%;
        padding: var(--space-6);
    }

    /* Flashcard area adjustments */
    .flashcard-area {
        aspect-ratio: 1 / 1;
        max-width: 750px;
        padding: var(--space-3);
    }

    .flashcard {
        max-width: 700px;
    }

    /* Flashcard navigation arrows */
    .flashcard-nav-arrow {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: var(--font-size-xl);
    }

    /* Navigation buttons */
    .navigation-buttons {
        gap: var(--space-3);
        flex-direction: row;
    }

    .btn-previous,
    .btn-next {
        flex: 1;
        min-height: 44px; /* Touch-friendly */
    }

    .btn-audio {
        width: 100%;
        min-height: 44px;
    }

    /* Hero Title */
    .hero-title {
        font-size: var(--font-size-4xl);
        -webkit-text-stroke: var(--text-stroke-subtitle) var(--color-charcoal);
    }

    .module-title {
        font-size: var(--font-size-3xl);
        -webkit-text-stroke: var(--text-stroke-subtitle) var(--color-charcoal);
    }

    /* Module Buttons */
    .modules-grid {
        gap: var(--space-3);
        grid-template-columns: 1fr;
    }

    .module-button {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-base);
        min-height: 56px; /* Touch-friendly */
    }

    .module-button-icon {
        font-size: var(--font-size-2xl);
    }

    /* Main Content */
    .main-content {
        padding: var(--space-4);
        padding-top: calc(var(--space-4) + var(--space-6)); /* Extra padding to clear navigation */
    }

    /* Footer */
    .footer {
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .footer-btn span {
        display: none;
    }

    .footer-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Dashboard */
    .dashboard-welcome {
        padding: var(--space-6);
    }

    .dashboard-welcome h1 {
        font-size: var(--font-size-2xl);
    }

    .dashboard-modules {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* Module Cards */
    .module-card {
        padding: var(--space-5);
        min-height: 160px;
    }

    .module-card-icon {
        width: 48px;
        height: 48px;
        font-size: var(--font-size-xl);
    }

    /* Grids */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* Alphabet */
    .alphabet-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: var(--space-2);
    }

    .alphabet-card,
    .letter-card {
        min-height: 64px;
    }

    .alphabet-card .letter-bengali {
        font-size: var(--font-size-3xl);
    }

    .letter-detail-bengali {
        font-size: 4rem;
    }

    /* Category Tabs - Tablet */
    .category-tabs {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .tab-btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-base);
    }

    /* Flashcard */
    .flashcard {
        max-width: 100%;
        min-height: 300px;
    }

    .flashcard-front .bengali-text,
    .flashcard-back .bengali-text {
        font-size: var(--font-size-bengali-lg);
    }

    /* Quiz */
    .quiz-header {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }

    .quiz-progress-bar {
        width: 100%;
    }

    .quiz-option {
        min-height: 56px;
        padding: var(--space-3) var(--space-4);
    }

    .results-breakdown {
        flex-direction: column;
        gap: var(--space-4);
    }

    .result-stat {
        padding: var(--space-4);
    }

    /* Buttons - Touch-friendly sizes */
    .btn,
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
        padding: var(--space-3) var(--space-5);
    }

    .btn-lg {
        min-height: 48px;
        padding: var(--space-4) var(--space-6);
    }

    /* Modal */
    .modal-content {
        margin: var(--space-4);
        max-height: calc(100vh - var(--space-8));
        max-width: 90%;
    }

    .modal-celebration::before {
        width: 80px;
        height: 80px;
        top: -40px;
        font-size: 2.5rem;
    }
}

/* ============================================
   Tablet specific fixes for Pronunciation module
   ============================================ */

@media (max-width: 768px) and (min-width: 481px) {
    /* Better spacing for audio controls on tablet */
    .recording-section > div {
        gap: var(--space-3) !important;
    }

    .btn-audio {
        width: auto;
        min-width: 120px;
    }
}

/* ============================================
   Mobile (480px and below)
   ============================================ */

@media (max-width: 480px) {
    :root {
        /* Adjusted layout heights for mobile */
        --header-height: 56px;
        --nav-height: auto;
        --footer-height: 60px;
    }

    /* Performance optimizations */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Header - Compact */
    .header {
        height: 56px;
        padding: 0 var(--space-3);
    }

    .logo-text {
        display: none;
    }

    .logo-bengali {
        font-size: var(--font-size-base);
    }

    .stat-item {
        font-size: var(--font-size-xs);
        padding: var(--space-2);
    }

    /* Hero Section */
    .hero-section {
        padding: var(--space-8) var(--space-4);
        padding-top: 140px; /* More spacing for iPhone Safari */
        z-index: 400; /* Ensure above navigation */
    }

    .hero-title {
        font-size: var(--font-size-3xl);
        -webkit-text-stroke: 1.5px var(--color-charcoal);
        margin-bottom: var(--space-4);
    }

    .module-title {
        font-size: var(--font-size-2xl);
        -webkit-text-stroke: 1.5px var(--color-charcoal);
    }

    /* Wavy Underline */
    .wavy-underline {
        width: 120px;
        height: 8px;
    }

    /* Module Buttons - Full width, touch-friendly */
    .modules-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .module-button {
        width: 100%;
        padding: var(--space-4) var(--space-5);
        font-size: var(--font-size-base);
        min-height: 60px; /* Extra touch-friendly */
        justify-content: flex-start;
        gap: var(--space-4);
    }

    .module-button-icon {
        font-size: var(--font-size-3xl);
        min-width: 40px;
    }

    /* Navigation - Compact stacking */
    .navigation {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .nav-item {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-sm);
        min-height: 48px;
        justify-content: center;
    }

    /* Progress Bars - Optimized for mobile */
    .module-progress-bar,
    .progress-bar {
        height: 24px;
        border-radius: var(--radius-full);
    }

    .quiz-progress-bar {
        height: 20px;
    }

    .progress-bar-fill,
    .quiz-progress-fill {
        border-radius: var(--radius-full);
    }

    /* Main Content - Minimal padding */
    .main-content {
        padding: var(--space-3);
        padding-top: calc(var(--space-3) + var(--space-6)); /* Extra padding to clear navigation */
    }

    /* Dashboard - Optimized for mobile */
    .dashboard-welcome {
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }

    .dashboard-welcome h1 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-3);
    }

    .dashboard-welcome p {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-relaxed);
    }

    .dashboard-modules {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Module Pages */
    .module-page {
        padding-top: var(--space-8);
    }

    /* Module Cards - Full width */
    .module-card {
        padding: var(--space-5);
        min-height: 140px;
    }

    .module-card-icon {
        width: 56px;
        height: 56px;
        font-size: var(--font-size-2xl);
    }

    .module-card-title {
        font-size: var(--font-size-lg);
    }

    .module-card-description {
        font-size: var(--font-size-sm);
    }

    /* Module Pages */
    .module-page {
        padding-top: var(--space-6);
    }

    /* Module Header */
    .module-header h1 {
        font-size: var(--font-size-xl);
    }

    .module-info {
        padding: var(--space-4) 0;
    }

    /* Cards - Compact */
    .card {
        padding: var(--space-4);
        border-radius: var(--radius-xl);
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-value {
        font-size: var(--font-size-2xl);
    }

    .stat-label {
        font-size: var(--font-size-xs);
    }

    /* Alphabet - Compact grid */
    .alphabet-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-2);
    }

    .alphabet-card,
    .letter-card {
        min-height: 60px; /* Touch-friendly */
        padding: var(--space-2);
    }

    .alphabet-card .letter-bengali,
    .letter-bengali {
        font-size: var(--font-size-2xl);
    }

    .alphabet-card .letter-transliteration,
    .letter-transliteration {
        display: none;
    }

    .alphabet-card .completed-badge {
        width: 24px;
        height: 24px;
        font-size: var(--font-size-sm);
    }

    .letter-detail {
        padding: var(--space-5);
    }

    .letter-detail-bengali {
        font-size: 3rem;
    }

    .letter-detail-actions {
        flex-direction: column;
        gap: var(--space-3);
    }

    .letter-detail-actions .btn {
        width: 100%;
        min-height: 48px;
    }

    /* Category Tabs - Responsive */
    .category-tabs {
        gap: var(--space-2);
        padding: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .tab-btn {
        flex: 1 1 auto;
        min-width: 120px;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
        min-height: 52px;
    }

    .tab-btn i {
        font-size: var(--font-size-base);
    }

    .tab-bengali {
        font-size: var(--font-size-xs);
    }

    /* Category Selector - Compact */
    .category-selector {
        padding: var(--space-3) var(--space-5);
    }

    .vocab-category-select {
        font-size: var(--font-size-lg);
        padding-right: var(--space-6);
    }

    .category-dropdown-icon {
        right: var(--space-4);
        font-size: var(--font-size-base);
    }

    .category-btn {
        padding: var(--space-2) var(--space-3);
        min-width: auto;
        flex: 1;
        min-height: 44px;
        white-space: nowrap;
    }

    .category-btn span:not(.bengali-small) {
        font-size: var(--font-size-xs);
    }

    .category-btn i {
        font-size: var(--font-size-base);
    }

    /* Flashcard - Optimized for mobile */
    .flashcard-area {
        aspect-ratio: 1 / 1;
        max-width: 700px;
        padding: var(--space-3);
    }

    .flashcard-container {
        padding: var(--space-4) 0;
    }

    .flashcard {
        max-width: 650px;
        aspect-ratio: 1 / 1;
        min-height: 280px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: var(--space-6);
        gap: var(--space-2);
    }

    .flashcard-front .bengali-text {
        font-size: var(--font-size-bengali-md);
    }

    .flashcard-front .english-text-front {
        font-size: var(--font-size-xl);
    }

    .flashcard-back .english-text {
        font-size: var(--font-size-xl);
    }

    .flashcard-image,
    .color-swatch {
        max-width: 150px;
        max-height: 150px;
    }

    .flashcard-controls {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-3);
    }

    /* Navigation buttons - Full width stack */
    .navigation-buttons {
        flex-direction: column;
        gap: var(--space-3);
    }

    .btn-previous,
    .btn-next,
    .btn-audio {
        width: 100%;
        min-height: 52px;
        justify-content: center;
    }

    /* Pronunciation */
    .pronunciation-word {
        padding: var(--space-5);
    }

    .pronunciation-bengali {
        font-size: var(--font-size-bengali-md);
    }

    /* Audio controls - Stack vertically on mobile */
    .recording-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    /* Override inline flex row for audio controls */
    .recording-section > div {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
        margin-bottom: 0 !important;
    }

    .btn-audio {
        width: 100%;
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-base);
    }

    .btn-audio i {
        font-size: var(--font-size-lg);
    }

    .recording-status {
        text-align: center;
        padding: var(--space-2);
        margin-bottom: var(--space-3);
    }

    /* Quiz - Mobile optimized */
    .quiz-section {
        padding: var(--space-3);
    }

    .quiz-question {
        padding: var(--space-5);
    }

    .question-text {
        font-size: var(--font-size-base);
        line-height: var(--line-height-relaxed);
    }

    .quiz-options {
        gap: var(--space-3);
    }

    .quiz-option {
        padding: var(--space-3) var(--space-4);
        min-height: 60px; /* Extra touch-friendly */
        font-size: var(--font-size-base);
    }

    .option-letter {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
        flex-shrink: 0;
    }

    /* Quiz Results - Compact */
    .quiz-results {
        padding: var(--space-5);
    }

    .results-score {
        font-size: var(--font-size-4xl);
        margin: var(--space-4) 0;
    }

    .results-breakdown {
        flex-direction: row;
        gap: var(--space-4);
    }

    .result-stat {
        flex: 1;
        padding: var(--space-4);
    }

    .result-stat-value {
        font-size: var(--font-size-3xl);
    }

    .result-stat-label {
        font-size: var(--font-size-sm);
    }

    .results-message {
        font-size: var(--font-size-base);
    }

    /* Settings - Stack vertically */
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .setting-label {
        font-size: var(--font-size-base);
    }

    .setting-control {
        width: 100%;
    }

    /* Buttons - Touch-optimized */
    .btn,
    .btn-primary,
    .btn-secondary {
        padding: var(--space-3) var(--space-5);
        min-height: 48px;
        font-size: var(--font-size-base);
    }

    .btn-lg {
        padding: var(--space-4) var(--space-6);
        min-height: 56px;
        font-size: var(--font-size-lg);
    }

    .btn-sm {
        padding: var(--space-2) var(--space-4);
        min-height: 36px;
        font-size: var(--font-size-sm);
    }

    .btn-take-quiz,
    .btn-start-quiz {
        width: 100%;
        min-height: 56px;
    }

    /* Achievement Items - Mobile layout */
    .achievement-item {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .achievement-item .icon {
        font-size: var(--font-size-3xl);
        min-width: 48px;
    }

    .achievement-item p {
        font-size: var(--font-size-sm);
    }

    /* Footer - Compact */
    .footer {
        height: 60px;
        padding: 0 var(--space-3);
    }

    .footer-btn {
        min-height: 48px;
        min-width: 48px;
        font-size: var(--font-size-lg);
    }

    /* Modal - Full screen on mobile */
    .modal-container {
        padding: var(--space-2);
    }

    .modal-content {
        margin: 0;
        border-radius: var(--radius-xl);
        max-width: 100%;
        max-height: 95vh;
    }

    .modal-header {
        padding: var(--space-5);
    }

    .modal-title {
        font-size: var(--font-size-xl);
    }

    .modal-body {
        padding: var(--space-5);
        font-size: var(--font-size-base);
    }

    .modal-footer {
        flex-direction: column;
        padding: var(--space-5);
        gap: var(--space-3);
    }

    .modal-footer .btn {
        width: 100%;
        min-height: 52px;
    }

    /* Celebration modals - Adjusted for mobile */
    .modal-celebration::before {
        width: 70px;
        height: 70px;
        top: -35px;
        font-size: 2rem;
    }

    .modal-celebration .modal-title {
        font-size: var(--font-size-2xl);
        -webkit-text-stroke: 1.5px var(--color-charcoal);
    }

    .modal-celebration::after {
        font-size: 1.5rem;
        letter-spacing: var(--space-2);
    }

    .level-badge {
        width: 64px;
        height: 64px;
        font-size: var(--font-size-2xl);
    }

    .achievement-icon {
        font-size: 4rem;
    }

    .achievement-name {
        font-size: var(--font-size-xl);
    }

    .achievement-description {
        font-size: var(--font-size-sm);
    }

    /* Split containers - Full stack on mobile */
    .module-left,
    .quiz-left {
        order: 1;
    }

    .module-right,
    .quiz-right {
        order: 2;
        padding: var(--space-4);
    }

    /* Reduce animations on mobile for performance */
    .module-button {
        animation-delay: 0s !important;
    }

    /* Hero section - Add extra padding for mobile nav */
    .hero-section {
        padding-top: 140px !important; /* More spacing for iPhone Safari */
        z-index: 400 !important; /* Ensure above navigation */
    }

    /* About page - Add padding to clear navigation on mobile */
    .about-page .page-header,
    .settings-page .page-header,
    .achievements-page .page-header {
        padding-top: 140px !important; /* Match hero section padding */
        position: relative; /* Ensure z-index works */
    }

    .about-page .page-header h1,
    .settings-page .page-header h1,
    .achievements-page .page-header h1 {
        text-shadow: 2px 2px 0 var(--color-charcoal), -2px -2px 0 var(--color-charcoal) !important;
        position: relative;
        z-index: 400 !important; /* Higher than navigation (300) - fixes iOS Safari */
    }

    .about-content {
        padding: var(--space-4) !important; /* More space for mobile */
    }

    .about-section {
        margin-bottom: var(--space-6) !important; /* More spacing between sections */
    }

    .about-section h2 {
        font-size: var(--font-size-lg) !important;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-bottom: var(--space-4) !important;
    }

    .feature-list li {
        padding: var(--space-3) 0 !important; /* More padding for touch */
        font-size: var(--font-size-sm) !important; /* Slightly smaller text */
    }

    .feature-list i {
        font-size: var(--font-size-xl) !important;
    }

    .achievement-item {
        animation-delay: 0s !important;
    }

    /* Floating decorative elements - Hide on mobile */
    .hero-section::before,
    .hero-section::after,
    .dashboard-section::before,
    .dashboard-section::after {
        display: none;
    }



/* ============================================
   Mobile Landscape (max-height: 500px)
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Compact header and footer for landscape */
    .header {
        height: 48px;
        padding: 0 var(--space-3);
    }

    .footer {
        height: 48px;
    }

    .hero-section {
        padding: var(--space-6) var(--space-4);
    }

    .hero-title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-3);
    }

    .module-title {
        font-size: var(--font-size-xl);
    }

    /* Optimize split layouts for landscape */
    .module-container,
    .quiz-container {
        flex-direction: row;
        min-height: auto;
    }

    .module-left,
    .quiz-left {
        flex: 0 0 25%;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
    }

    .module-right,
    .quiz-right {
        flex: 1;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
    }

    /* Compact flashcard for landscape */
    .flashcard-area {
        min-height: 200px;
        padding: var(--space-3);
    }

    .flashcard {
        min-height: 200px;
    }

    /* Compact modals */
    .modal-content {
        max-height: 90vh;
    }

    .modal-celebration::before {
        top: -30px;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* ============================================
   Large Desktop (1200px and above)
   ============================================ */

@media (min-width: 1200px) {
    .main-content {
        padding: var(--space-10) var(--space-12);
        max-width: 2200px;
        margin: 0 auto;
    }

    .dashboard-modules {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }

    .modules-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    .alphabet-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: var(--space-4);
    }

    /* Enhanced split layouts on large screens */
    .module-container,
    .quiz-container {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Larger flashcards on desktop */
    .flashcard-area {
        aspect-ratio: 1 / 1;
        max-width: 1100px;
    }

    .flashcard {
        max-width: 1050px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    /* Flashcard navigation arrows on desktop */
    .flashcard-nav-arrow {
        width: 70px;
        height: 70px;
        min-width: 70px;
        font-size: var(--font-size-3xl);
    }

    /* Better quiz layout */
    .quiz-options {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Centered modals with more breathing room */
    .modal-content {
        max-width: 600px;
    }
}

/* ============================================
   Extra Large Desktop (1600px and above)
   ============================================ */

@media (min-width: 1600px) {
    :root {
        /* Slightly larger base font for large screens */
        --font-size-base: 17px;
    }

    .main-content {
        max-width: 2400px;
    }

    .dashboard-modules {
        grid-template-columns: repeat(5, 1fr);
    }

    .hero-title {
        font-size: var(--font-size-7xl);
    }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets - 44x44px minimum */
    .nav-item,
    .btn,
    .module-button,
    .quiz-option,
    .letter-card,
    .category-btn,
    .footer-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-lg,
    .btn-take-quiz,
    .btn-start-quiz {
        min-height: 48px;
    }

    /* Remove hover effects on touch */
    .card:hover,
    .letter-card:hover,
    .module-button:hover,
    .nav-item:hover,
    .quiz-option:hover,
    .btn:hover,
    .achievement-item:hover {
        transform: none;
    }

    /* Active states for touch feedback */
    .btn:active,
    .module-button:active,
    .nav-item:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .quiz-option:active {
        transform: translateX(4px);
    }

    /* Larger interactive areas */
    .modal-close,
    .audio-btn,
    .btn-audio {
        min-width: 48px;
        min-height: 48px;
    }

    /* Improve scrolling on touch */
    .modal-content,
    .category-selector,
    .alphabet-grid {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Disable double-tap zoom on buttons */
    button,
    a,
    .btn,
    .nav-item,
    .module-button {
        touch-action: manipulation;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */

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

    .flashcard-inner {
        transition: none;
    }
}

/* ============================================
   High Contrast Mode
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --color-primary: #0000EE;
        --color-gray-200: #000000;
        --color-gray-500: #000000;
    }

    .card,
    .flashcard-front,
    .flashcard-back {
        border: 2px solid #000000;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .header,
    .navigation,
    .footer,
    .modal-container {
        display: none;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #000;
    }
}