@tailwind base;
@tailwind components;
@tailwind utilities;

/* CRITICAL: Force all text to white in dark mode - must come AFTER @tailwind utilities */
html.dark,
html.dark body,
html.dark p,
html.dark span,
html.dark div,
html.dark li,
html.dark a,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark label,
html.dark button {
  color: #ffffff !important;
}

/* Keep colored badges visible */
html.dark .bg-blue-100,
html.dark .bg-purple-100,
html.dark .bg-green-100,
html.dark .bg-teal-100,
html.dark .text-blue-700,
html.dark .text-purple-700,
html.dark .text-green-700,
html.dark .text-teal-700 {
  color: inherit !important;
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --primary-blue: #0078d7;
  --primary-blue-dark: #1a237e;
  --macedonian-red: #d80027;
  --macedonian-yellow: #ffcc00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  .ios-safe-area {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Fix iOS Safari viewport height issue */
  .min-h-screen-ios {
    min-height: -webkit-fill-available;
  }
  
  /* Prevent iOS zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Better touch targets */
  button, 
  a,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent horizontal scroll */
  .container {
    overflow-x: hidden;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
  /* iOS smooth scrolling */
  -webkit-overflow-scrolling: touch;
  /* Prevent selection on touch devices */
  -webkit-tap-highlight-color: transparent;
}

/* Custom component styles using CSS custom properties */
.macedonian-flag {
  background: linear-gradient(90deg, var(--macedonian-red) 0%, var(--macedonian-yellow) 100%);
}

/* Game-specific styles that complement Tailwind */
.quiz-feedback-correct {
  background-color: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.quiz-feedback-incorrect {
  background-color: #fef2f2;
  border-color: #dc2626;
  color: #991b1b;
}

.option-button-correct {
  background-color: #dcfce7;
  border-color: #16a34a;
  color: #166534;
}

.option-button-incorrect {
  background-color: #fef2f2;
  border-color: #dc2626;
  color: #991b1b;
}

/* Progress animation */
.progress-fill-animation {
  transition: width 0.3s ease-in-out;
}

/* Ensure text visibility on white backgrounds */
.bg-white h3,
.bg-white p,
.bg-white span {
  color: #374151 !important; /* gray-700 */
}

.bg-white h3 {
  color: #1f2937 !important; /* gray-800 */
}

/* Module hero: disable clip-path on small screens to avoid awkward cropping and heavy repaints */
.module-hero {
  clip-path: none !important;
}

@media (min-width: 640px) {
  .module-hero {
    /* match the polygon used in the module page */
    clip-path: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);
  }
  /* reduce heavy blur on small screens; keep full blur on larger */
  .module-hero + .absolute {
    /* no-op: preserved for potential sibling glow adjustments */
  }
}

/* Touch-scroll breadcrumb/menu helpers for larger screens (md+) */
@media (min-width: 768px) {
  .scroll-fade {
    position: relative;
  }
  .touch-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .touch-scroll-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .touch-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .touch-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.08);
    border-radius: 9999px;
  }
  /* Remove visual fade overlays — keep breadcrumb layout only */
  .scroll-fade::before,
  .scroll-fade::after {
    display: none;
  }

  /* Ensure breadcrumb content stays visible */
  .scroll-fade > nav {
    position: relative;
    z-index: 30;
  }
}

/* Sticky mobile Continue CTA and safe-area helpers */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pb-safe-area {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Sticky CTA container (mobile only) */
.sticky-continue-wrap {
  pointer-events: auto;
}

.sticky-continue-btn {
  min-height: 44px;
  min-width: 88px;
}