/*
  Styles for Team JEDI campaign site

  This stylesheet defines colour variables for light and dark modes, basic
  typographic styles, layout utilities, and transitions. The colour scheme
  uses soft blues and purples to convey a welcoming, energetic aesthetic.
*/

:root {
  --bg-color: #f9fafb;
  --text-color: #222;
  --primary-color: #5b61c6; /* fun purple accent */
  --secondary-color: #c2d7f5;
  --button-bg: var(--primary-color);
  --button-text: #fff;
  --header-bg: #eef1fa;
  --footer-bg: #eef1fa;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
}

/* Dark mode overrides */
[data-theme='dark'] {
  --bg-color: #111827;
  --text-color: #e5e7eb;
  --primary-color: #8b5cf6; /* vivid purple */
  --secondary-color: #3730a3;
  --button-bg: var(--primary-color);
  --button-text: #ffffff;
  --header-bg: #1f2937;
  --footer-bg: #1f2937;
  --input-bg: #1f2937;
  --input-border: #374151;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.site-header {
  background-color: var(--header-bg);
  padding: 1rem 0;
  text-align: center;
  border-bottom: 1px solid var(--input-border);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-name {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-color);
}

.tagline {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  color: var(--text-color);
}

#theme-toggle {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--primary-color);
  transition: transform 0.2s ease;
}

#theme-toggle:hover {
  transform: rotate(20deg);
}

.intro p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1rem 0 2rem;
}

.feedback {
  background-color: var(--secondary-color);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  resize: vertical;
  font-size: 1rem;
  background-color: var(--input-bg);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.submit-button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--button-text);
  background-color: var(--button-bg);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-button:hover {
  /* Slightly darken the button on hover for feedback */
  filter: brightness(0.9);
}

.status-message {
  margin-top: 0.5rem;
  font-style: italic;
  min-height: 1.5em;
}

.site-footer {
  background-color: var(--footer-bg);
  padding: 1rem;
  text-align: center;
  margin-top: 2rem;
  border-top: 1px solid var(--input-border);
}

.site-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-color);
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}