/*
  Stylesheet for Algebra Quest
  Colour palette takes inspiration from the Nigerian flag (greens) and adds
  warm accent tones.  The layout is responsive and adapts gracefully to
  mobile devices.  Cards, quizzes and controls are styled consistently
  throughout the site.
*/

/* CSS variables for easy colour adjustments */
:root {
  --primary: #006400;        /* dark green for headings and buttons */
  --secondary: #009e60;      /* lighter green for hover and highlights */
  --accent: #f5c14d;         /* gold accent for highlights */
  --light-bg: #f9fdfb;       /* very light background */
  --card-bg: #ffffff;        /* card backgrounds */
  --card-border: #dfe6d6;    /* subtle border on cards */
  --text-colour: #333333;
  --muted-text: #555555;
  --danger: #c0392b;
  --success: #2e8b57;
}

/* Basic resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.6;
  background: var(--light-bg);
  color: var(--text-colour);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header / Hero */
.hero {
  position: relative;
  background-image: url('images/header.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45); /* dark overlay for readability */
  z-index: 0;
}

.hero .overlay {
  position: relative;
  padding: 40px 20px 60px;
  z-index: 1;
}

/* Ensure nav appears above the overlay */
nav {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.4rem;
  color: #fff;
}

.hero .tagline {
  font-size: 1rem;
  opacity: 0.9;
}

/* Navigation */
nav {
  background: var(--primary);
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

nav .nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

nav .nav-links li {
  margin: 0;
}

nav .nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.3s;
  font-weight: 500;
}

nav .nav-links a.active,
nav .nav-links a:hover {
  background: var(--secondary);
}

/* Disabled nav links for levels that are not yet unlocked */
nav .nav-links a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

nav .scoreboard {
  margin-left: auto;
  font-weight: bold;
  color: #fff;
}

/* Sections */
main {
  flex: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

.section {
  display: none;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.section.active {
  display: block;
}

.section h2 {
  color: var(--primary);
  margin-bottom: 15px;
}

.section p {
  margin-bottom: 12px;
  color: var(--muted-text);
}

/* Buttons */
.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 10px;
}

.btn:hover {
  background: var(--secondary);
}

/* Memory game styles */
.memory-game {
  /* Layout the memory cards with larger minimum width to prevent text from overflowing */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.memory-card {
  position: relative;
  width: 100%;
  padding-top: 100%; /* square cards */
  perspective: 600px;
}

.memory-card-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.memory-card.flipped .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-card-front,
.memory-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  /* Decrease the font size slightly for long definitions and allow wrapping */
  font-size: 0.72rem;
  padding: 6px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.memory-card-front {
  background: var(--secondary);
  color: #fff;
}

.memory-card-back {
  background: var(--card-bg);
  color: var(--primary);
  transform: rotateY(180deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.memory-card.matched .memory-card-front {
  background: var(--success);
}

.message {
  margin-top: 10px;
  font-weight: bold;
  color: var(--primary);
}

/* Quiz styles */
.quiz-container {
  margin-top: 30px;
  padding: 15px;
  background: #f2f7f2;
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

.question-area.hidden {
  display: none;
}

.question-area p {
  margin-bottom: 10px;
  font-weight: 500;
}

.options label {
  display: block;
  margin-bottom: 6px;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background 0.2s;
}

.options input[type="radio"] {
  margin-right: 6px;
}

.options label:hover {
  background: rgba(0, 158, 96, 0.1);
}

.quiz-result {
  margin-top: 10px;
  font-weight: 600;
  color: var(--primary);
}

/* Lesson boxes for explanatory text */
.lesson {
  background: #f8fbf5;
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}

/* Example boxes for worked examples */
.example {
  background: #fdfaf4;
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.example h3 {
  margin-bottom: 8px;
  color: var(--primary);
}

.example ol {
  margin-left: 20px;
  margin-bottom: 10px;
  list-style: decimal;
}

/* Applications and glossary lists */
.applications-list,
.glossary-list {
  list-style: none;
  padding-left: 0;
}

.applications-list li,
.glossary-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted-text);
}

.applications-list li strong {
  color: var(--primary);
}

.glossary-list .icon {
  font-size: 1.2rem;
  line-height: 1.2;
}

/* Info icon styling */
.info-icon {
  font-size: 0.7rem;
  vertical-align: super;
  cursor: help;
  color: var(--secondary);
  margin-left: 3px;
}

/* Feedback / review section styling */
.feedback-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: #f8fbf5;
}

.feedback-item.correct {
  border-left: 4px solid var(--success);
}

.feedback-item.incorrect {
  border-left: 4px solid var(--danger);
}

.feedback-item h4 {
  margin-bottom: 5px;
  color: var(--primary);
}

.feedback-item p {
  margin-bottom: 4px;
  color: var(--muted-text);
}

/* Textarea and input styling within quizzes and practice areas */
.quiz-container textarea,
.quiz-container input[type="number"] {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  resize: vertical;
}

/* Large input width fix for quadratic roots */
.quadratic-module input[type="number"] {
  width: 100%;
}

/* Continue button spacing for advanced level */
.continue {
  text-align: center;
  margin-top: 20px;
}

/* Continue buttons shown after completing a level */
.continue {
  text-align: center;
  margin-top: 20px;
}

/* Conclusion text at the end of the final level */
.conclusion {
  margin-top: 25px;
  background: #f8fbf5;
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--muted-text);
  font-style: italic;
}

/* Equation module styles */
.equation-module {
  margin-top: 20px;
  padding: 15px;
  background: #f2f7f2;
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

.equation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.equation-controls label {
  background: #e8f5e8;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.equation-controls input[type="number"] {
  width: 60px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.slider-group {
  margin-bottom: 15px;
}

.slider-group input[type="range"] {
  width: 100%;
}

.equation-output p {
  margin-bottom: 6px;
}

.equation-message {
  font-weight: 600;
}

/* Quadratic module */
.quadratic-module {
  margin-top: 20px;
  padding: 15px;
  background: #f2f7f2;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quadratic-module label {
  display: flex;
  flex-direction: column;
}

.quadratic-module input[type="number"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Footer */
footer {
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  nav .nav-links {
    flex-direction: column;
  }
  nav .scoreboard {
    margin-left: 0;
    margin-top: 10px;
  }
}