/* Mobile Font Color Fix for Korean Quiz Website */
/* Specifically addresses font visibility issues in mobile browsers like KakaoTalk */

/* Force text colors for all mobile browsers */
@media (max-width: 768px) {
  /* Base text color enforcement */
  body {
    color: #1f2937 !important; /* Dark gray for light backgrounds */
    background-color: #ffffff !important; /* Ensure light background */
  }
  
  /* Question text - critical for visibility */
  #questionText,
  .question-text,
  .quiz-question,
  h1, h2, h3, h4, h5, h6 {
    color: #111827 !important; /* Very dark gray, almost black */
    background-color: transparent !important;
    text-shadow: none !important;
  }
  
  /* Quiz options - ensure high contrast */
  .option-btn,
  .quiz-option,
  button {
    color: #1f2937 !important; /* Dark text */
    background-color: #f9fafb !important; /* Light background */
    border: 2px solid #e5e7eb !important;
  }
  
  /* Hover and active states */
  .option-btn:hover,
  .quiz-option:hover,
  button:hover {
    color: #ffffff !important; /* White text on hover */
    background-color: #3b82f6 !important; /* Blue background on hover */
  }
  
  .option-btn:active,
  .quiz-option:active,
  button:active {
    color: #ffffff !important;
    background-color: #1d4ed8 !important; /* Darker blue when pressed */
  }
  
  /* Selected/correct answer states */
  .option-btn.selected,
  .quiz-option.selected {
    color: #ffffff !important;
    background-color: #059669 !important; /* Green for selected */
  }
  
  .option-btn.correct,
  .quiz-option.correct {
    color: #ffffff !important;
    background-color: #10b981 !important; /* Green for correct */
  }
  
  .option-btn.incorrect,
  .quiz-option.incorrect {
    color: #ffffff !important;
    background-color: #ef4444 !important; /* Red for incorrect */
  }
  
  /* Navigation text */
  .navbar-link,
  nav a,
  .nav-link {
    color: #374151 !important;
    background-color: transparent !important;
  }
  
  .navbar-link:hover,
  nav a:hover,
  .nav-link:hover {
    color: #3b82f6 !important;
    background-color: #f3f4f6 !important;
  }
  
  /* Card content */
  .quiz-card,
  .card {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .quiz-card h3,
  .card h3,
  .quiz-card-title {
    color: #111827 !important;
  }
  
  .quiz-card p,
  .card p,
  .quiz-card-description {
    color: #4b5563 !important;
  }
  
  /* Form inputs */
  input,
  textarea,
  select {
    color: #1f2937 !important;
    background-color: #ffffff !important;
    border: 2px solid #d1d5db !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    color: #111827 !important;
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
  }
  
  /* Placeholder text */
  input::placeholder,
  textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
  }
  
  /* Score display */
  .score-number,
  .score-display {
    color: #111827 !important;
    background-color: #f9fafb !important;
  }
  
  /* Progress indicators */
  .progress-text,
  .question-counter {
    color: #4b5563 !important;
  }
  
  /* Links */
  a {
    color: #3b82f6 !important;
    text-decoration: underline !important;
  }
  
  a:hover {
    color: #1d4ed8 !important;
  }
  
  a:visited {
    color: #7c3aed !important;
  }
  
  /* Specific fixes for KakaoTalk browser */
  .kakao-browser-fix {
    color: #000000 !important;
    background-color: #ffffff !important;
  }
  
  /* Override any inherited styles that might cause white text */
  * {
    color: inherit !important;
  }
  
  /* Ensure all text elements have proper contrast */
  p, span, div, li, td, th {
    color: #374151 !important;
  }
  
  /* Strong contrast for important elements */
  .important-text,
  .quiz-title,
  .question-title {
    color: #000000 !important;
    font-weight: 600 !important;
  }
  
  /* Loading states */
  .loading-text {
    color: #6b7280 !important;
  }
  
  /* Error states */
  .error-text,
  .error-message {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
  }
  
  /* Success states */
  .success-text,
  .success-message {
    color: #059669 !important;
    background-color: #f0fdf4 !important;
  }
  
  /* Warning states */
  .warning-text,
  .warning-message {
    color: #d97706 !important;
    background-color: #fffbeb !important;
  }
}

/* Specific fixes for very small screens */
@media (max-width: 480px) {
  /* Ensure even better contrast on small screens */
  #questionText,
  .question-text {
    color: #000000 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
  }
  
  .option-btn,
  .quiz-option {
    color: #1f2937 !important;
    background-color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    font-weight: 500 !important;
  }
}

/* Dark mode overrides for mobile */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  body {
    color: #f9fafb !important;
    background-color: #111827 !important;
  }
  
  #questionText,
  .question-text,
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    background-color: transparent !important;
  }
  
  .option-btn,
  .quiz-option,
  button {
    color: #f9fafb !important;
    background-color: #374151 !important;
    border-color: #4b5563 !important;
  }
  
  .quiz-card,
  .card {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
  }
  
  input,
  textarea,
  select {
    color: #f9fafb !important;
    background-color: #374151 !important;
    border-color: #4b5563 !important;
  }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
  body {
    color: #000000 !important;
    background-color: #ffffff !important;
  }
  
  .option-btn,
  .quiz-option,
  button {
    color: #000000 !important;
    background-color: #ffffff !important;
    border: 3px solid #000000 !important;
  }
  
  .option-btn:hover,
  .quiz-option:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  * {
    color: CanvasText !important;
    background-color: Canvas !important;
  }
  
  button,
  .option-btn,
  .quiz-option {
    color: ButtonText !important;
    background-color: ButtonFace !important;
    border-color: ButtonText !important;
  }
  
  button:hover,
  .option-btn:hover,
  .quiz-option:hover {
    color: HighlightText !important;
    background-color: Highlight !important;
  }
}

/* Print mode - ensure black text */
@media print {
  * {
    color: #000000 !important;
    background-color: #ffffff !important;
    text-shadow: none !important;
  }
}

/* Specific browser fixes */
/* KakaoTalk in-app browser */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    #questionText,
    .question-text {
      color: #000000 !important;
      -webkit-text-fill-color: #000000 !important;
      background-color: #ffffff !important;
    }
    
    .option-btn,
    .quiz-option {
      color: #1f2937 !important;
      -webkit-text-fill-color: #1f2937 !important;
      background-color: #f9fafb !important;
    }
  }
}

/* Samsung Internet browser */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @media (max-width: 768px) {
    body {
      color: #1f2937 !important;
      background-color: #ffffff !important;
    }
    
    #questionText {
      color: #000000 !important;
      background-color: rgba(255, 255, 255, 0.95) !important;
    }
  }
}

/* Fallback for any remaining visibility issues */
@media (max-width: 768px) {
  .text-white,
  .text-light {
    color: #1f2937 !important;
  }
  
  .bg-dark,
  .bg-black {
    background-color: #ffffff !important;
  }
  
  /* Override any utility classes that might cause issues */
  .text-gray-100,
  .text-gray-200,
  .text-gray-300 {
    color: #374151 !important;
  }
  
  /* Ensure visibility of all interactive elements */
  [role="button"],
  [type="button"],
  [type="submit"],
  .clickable {
    color: #1f2937 !important;
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
  }
}