/* ==================== Global Styles ==================== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', sans-serif; /* Futuristic, condensed font */
  background: linear-gradient(130deg, #181a1f, #262a33);
  color: #dcdcdc;
  overflow-x: hidden;
  text-align: center;
  transition: background 0.4s ease, color 0.4s ease; /* Smooth transition */
}

/* Light Mode Styles */
body.inverted {
  background: linear-gradient(130deg, #ffffff, #f5f5f5); /* Light gradient */
  color: #111; /* Dark text color */
}

/* ==================== Header ==================== */
header {
  background: linear-gradient(90deg, #1b1f27, #242a34);
  padding: 25px 0;
  border-bottom: 3px solid #3faec7; /* Metallic turquoise accent */
  transition: background 0.4s ease, color 0.4s ease;
}

header h1 {
  margin: 0;
  font-size: 3rem;
  color: #3faec7;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Light Mode Header */
body.inverted header {
  background: linear-gradient(90deg, #f0f0f0, #e5e5e5); /* Light header gradient */
  color: #111; /* Dark text */
}

body.inverted header h1 {
  color: #111; /* Darker text for the header title */
}

/* ==================== Navigation ==================== */
nav {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  background: #242a34;
  border: 2px solid #3faec7;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  transition: background 0.4s ease, border-color 0.4s ease;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Prevent overlap */
  justify-content: center;
}

nav ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 40px;
  border-radius: 20px;
  color: #3faec7;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid #3faec7;
  background-color: transparent;
  padding: 0 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap; /* Keeps text on one line */
}

nav ul li a:hover {
  background-color: #3faec7;
  color: #1b1f27;
}

/* Light Mode Navigation */
body.inverted nav {
  background: #f5f5f5; /* Light background */
  border-color: #ccc; /* Light border */
}

body.inverted nav ul li a {
  color: #333; /* Dark text for links */
  border-color: #ccc; /* Light border */
}

body.inverted nav ul li a:hover {
  background-color: #333; /* Dark background on hover */
  color: #fff; /* Light text on hover */
}

/* ==================== Marquee ==================== */
marquee {
  background: #262a33;
  color: #3faec7;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 15px;
}

body.inverted marquee {
  background: #eaeaea; /* Light background */
  color: #111; /* Dark text */
}

/* ==================== Main Content ==================== */
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  background: #1f242d;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: left;
  transition: background 0.4s ease, color 0.4s ease;
}

main h2 {
  font-size: 2.2rem;
  color: #3faec7;
  margin-top: 0;
  letter-spacing: 1px;
}

main p,
main ul {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #dcdcdc;
}

/* Light Mode Main Content */
body.inverted main {
  background: #ffffff; /* White background */
  color: #111; /* Dark text */
}

body.inverted main h2 {
  color: #333; /* Dark heading text */
}

/* ==================== Posts ==================== */
.post {
  margin-bottom: 20px;
  padding: 20px;
  background: #2a2f39;
  border-radius: 10px;
  border-left: 4px solid #3faec7;
  transition: background-color 0.2s ease;
}

.post:hover {
  background-color: #313743;
}

/* Light Mode Posts */
body.inverted .post {
  background: #f9f9f9; /* Light background */
  border-left: 4px solid #ccc; /* Light accent */
}

body.inverted .post:hover {
  background-color: #eaeaea; /* Hover effect */
}

/* ==================== Footer ==================== */
footer {
  background: linear-gradient(90deg, #1b1f27, #242a34);
  color: #dcdcdc;
  padding: 20px 0;
  border-top: 3px solid #3faec7;
  font-size: 0.9rem;
  margin-top: 30px;
  transition: background 0.4s ease, color 0.4s ease;
}

body.inverted footer {
  background: linear-gradient(90deg, #f0f0f0, #eaeaea); /* Light gradient */
  color: #333; /* Dark text */
  border-top: 3px solid #ccc; /* Light border */
}

/* ==================== Collapsible Sections ==================== */
.transcript-collapsible,
.contributor-collapsible {
  background: #2f3540;
  color: #fff;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  border: 2px solid #3faec7;
  border-radius: 8px;
  outline: none;
  transition: background 0.3s;
}

.transcript-collapsible.active,
.contributor-collapsible.active {
  background: #353b47;
}

.transcript-content,
.contributor-content {
  padding: 12px;
  display: none;
  background-color: #232831;
  border: 1px solid #3faec7;
  border-radius: 10px;
  color: #dcdcdc;
}

/* Light Mode Collapsible Sections */
body.inverted .transcript-collapsible,
body.inverted .contributor-collapsible {
  background: #f9f9f9; /* Light background */
  color: #333; /* Dark text */
  border: 2px solid #ccc; /* Light border */
}

body.inverted .transcript-collapsible.active,
body.inverted .contributor-collapsible.active {
  background: #eaeaea; /* Slightly darker active */
}

body.inverted .transcript-content,
body.inverted .contributor-content {
  background-color: #ffffff; /* White background */
  border: 1px solid #ccc; /* Light border */
  color: #111; /* Dark text */
}

/* ==================== Controls for Light Mode ==================== */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Hide native checkbox */
#invertToggle {
  display: none;
}

/* Switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  cursor: pointer;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.4s;
}

.switch .slider:before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

#invertToggle:checked + .slider {
  background-color: #3faec7;
}

#invertToggle:checked + .slider:before {
  transform: translateX(22px);
}

.slider.round {
  border-radius: 34px;
}

.switch-label {
  margin-left: 10px;
  font-size: 1rem;
  color: #dcdcdc;
  user-select: none;
}

/* Light Mode Label Color */
body.inverted .switch-label {
  color: #000; /* Set label text color to black in Light Mode */
}



/* Light Mode Text Color */
body.inverted {
  color: #000; /* Change the default text color to black */
}

body.inverted h1,
body.inverted h2,
body.inverted h3,
body.inverted h4,
body.inverted h5,
body.inverted h6 {
  color: #000; /* Change all headings to black */
}

body.inverted p,
body.inverted ul,
body.inverted li,
body.inverted a {
  color: #000; /* Change paragraphs, lists, and links to black */
}

body.inverted a:hover {
  color: #555; /* Slightly lighter black for hover effect */
}