/* === Global Styles === */
body {
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fdfdfd;
  color: #222;
}

/* === Accent Colors by Section === */
body.home-section       { --accent-color: #e57373; }
body.glossary-section   { --accent-color: #64b5f6; }
body.quizzes-section    { --accent-color: #81c784; }
body.references-section { --accent-color: #ffd54f; }
body.visuals-section    { --accent-color: #ba68c8; }
body.tools-section      { --accent-color: #4db6ac; }

/* === Persistent Navigation Tabs === */
nav#main-tabs {
  background-color: #00264d;
  padding: 0.5em 1em;
  position: sticky;
  top: 0;
  z-index: 1001;
}

nav#main-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

nav#main-tabs li a {
  text-decoration: none;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-weight: bold;
  color: white;
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif;
  background-color: var(--accent-color);
}

nav#main-tabs li a:hover {
  background-color: #0059b3;
}

nav#main-tabs li a.active {
  background-color: #00aaff;
}

/* === Top Controls === */
#topControls {
  position: sticky;
  top: 0;
  background-color: #f9f9f9;
  z-index: 1000;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

/* === Menu Bar (Legacy or Alternate Layout) === */
#menuBar {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 0;
}

#menuBar a {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
  color: white;
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif;
}

#menuBar a:nth-child(1) { background-color: #e57373; }
#menuBar a:nth-child(2) { background-color: #64b5f6; }
#menuBar a:nth-child(3) { background-color: #81c784; }
#menuBar a:nth-child(4) { background-color: #ffd54f; color: black; }
#menuBar a:nth-child(5) { background-color: #ba68c8; }
#menuBar a:nth-child(6) { background-color: #4db6ac; }

/* === Search and Reset === */
.search-reset-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  gap: 10px;
}

.search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#searchBox {
  width: 300px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif;
}

#resetButton {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif;
}

#resetButton:hover {
  background-color: #e76b4f;
}

/* === Alphabetical Navigation === */
#alphaNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}

#alphaNav a {
  text-decoration: none;
  padding: 6px 10px;
  background-color: #eeeeee;
  border-radius: 4px;
  font-weight: bold;
  color: #333;
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif;
}

body.glossary-section #alphaNav a {
  background-color: var(--accent-color) !important;
  color: white !important;
}

body.glossary-section #alphaNav a:hover {
  background-color: #1976d2 !important;
}

/* === Glossary Entries === */
#glossaryList {
  padding: 20px;
}

body.glossary-section dt {
  color: #1565c0 !important;
  font-weight: 900 !important;
  margin-top: 20px;
  cursor: pointer;
  font-family: Bahnschrift, 'Segoe UI', 'Arial Black', 'Noto Sans', sans-serif !important;
}

body.glossary-section dd {
  color: #424242 !important;
  margin-left: 20px;
  margin-bottom: 10px;
  font-family: Bahnschrift, 'Segoe UI', 'Arial', 'Noto Sans', sans-serif !important;
}

/* === Hidden Elements === */
.hidden {
  display: none;
}

/* === Quiz Feedback Enhancements === */

/* 🎉 Perfect Score Banner */
.celebration-banner {
  background-color: #e6ffe6;
  border: 2px solid #4caf50;
  padding: 1em;
  margin-bottom: 1em;
  text-align: center;
  font-weight: bold;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

/* 📈 Progress Tracker */
.progress-tracker {
  font-weight: bold;
  margin-bottom: 1em;
  color: #333;
}

/* ✅/❌ Feedback Text */
.feedback p {
  font-weight: bold;
  margin-top: 0.5em;
  color: #222;
}

.feedback p.correct {
  color: #2e7d32; /* Green */
}

.feedback p.incorrect {
  color: #c62828; /* Red */
}