/* ===== Base ===== */
html, body { height: 100%; }
body {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
*, *::before, *::after { box-sizing: inherit; }

.mono { font-family: 'Space Mono', monospace; }

/* Smooth entrance */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease-out; }

/* Card hover */
.quiz-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ===== WordPress / Theme Safety =====
   Prevent theme wrappers from adding extra horizontal scroll */
#app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* key for responsive */
}

/* ===== Responsive spacing fixes =====
   Your HTML uses p-8, p-6, etc. Tailwind handles it,
   but themes sometimes add padding/margins too. This keeps it clean. */
#homeScreen, #quizScreen, #resultsScreen {
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

/* Make screens usable on small height phones */
#homeScreen, #quizScreen, #resultsScreen {
  min-height: 100vh;
}

/* Ensure large titles don’t overflow on small devices */
#mainTitle {
  word-break: break-word;
  line-height: 1.05;
}

/* ===== Mobile first tweaks ===== */
@media (max-width: 640px) {
  /* Reduce huge emoji/title spacing */
  #homeScreen .text-7xl { font-size: 3.5rem !important; margin-bottom: 1rem !important; }

  /* Main title: from text-6xl to more mobile friendly */
  #mainTitle { font-size: 2.25rem !important; }

  /* Subtitle */
  #subtitleText { font-size: 1.125rem !important; margin-bottom: 1.5rem !important; }

  /* Cards padding */
  .quiz-btn { padding: 1rem !important; }
  .quiz-btn .text-5xl { font-size: 2.25rem !important; }

  /* Quiz screen boxes */
  #quizScreen .p-8 { padding: 1rem !important; }
  #quizScreen .mb-6 { margin-bottom: 1rem !important; }

  /* Question text */
  #questionText { font-size: 1.25rem !important; margin-bottom: 1.25rem !important; }

  /* Next button */
  #nextBtn { padding: 0.9rem !important; font-size: 1rem !important; }

  /* Results card padding */
  #resultsScreen .p-10 { padding: 1.25rem !important; }

  /* Results score font */
  #resultsScreen .text-6xl { font-size: 2.5rem !important; }
  #resultsScreen .text-4xl { font-size: 1.75rem !important; }

  /* Results grid: keep 3 columns but make tighter */
  #resultsScreen .grid-cols-3 { gap: 0.5rem !important; }
  #resultsScreen .p-4 { padding: 0.75rem !important; }
}

/* ===== Tablet tweaks ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  #mainTitle { font-size: 3rem !important; }
  #subtitleText { font-size: 1.35rem !important; }
}

/* ===== Prevent option buttons from causing overflow ===== */
#optionsContainer button {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* ===== Fix: WordPress theme might add extra padding/margin in content area ===== */
.entry-content, .site-content, .content-area {
  max-width: 100%;
  overflow-x: hidden;
}