/* GOOD EXAMPLE — same layout as bad.css, contrast-checked and semantics
   fixed. See facilitator-notes.html for what changed and why.
   Dark theme requested by Dennard — inspired by Runninghour's dark
   purple + lime-green identity (own original hex values, not copied
   from their stylesheet). Every colour pair below is checked to clear
   4.5:1 (or 3:1 for large text/non-text UI) on the background it sits
   on — flipping to dark mode means several colours that only worked as
   button backgrounds in light mode (like the lime brand colour) now
   pass directly as text, since the contrast math runs the other way. */

/* Fix: Atkinson Hyperlegible — designed by the Braille Institute
   specifically for low-vision readability (distinguishes similar
   characters like 1/l/I and 0/O far better than the default system
   stack), falling back to that same stack if the font fails to load. */
body {
  background: #1a1830;
  color: #f2f2f5; /* ~15.4:1 on dark bg */
  font-family: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Fix: a real, visible focus style — never remove outlines site-wide. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fix: skip link is visually hidden until it receives keyboard focus,
   then it's the first thing announced and the first thing on screen. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  border-radius: 0 0 8px 0;
  z-index: 10;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.site-header {
  background: #252140;
}

.hamburger-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Fix: icon swaps to a "close" Material Icon glyph when open, matching
   the aria-expanded/aria-label state change already happening in
   good.js — sighted users get the same state cue AT users get. */
.hamburger-icon {
  font-size: 28px;
  color: #ffffff; /* ~15.3:1 on header bg */
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: #252140;
}

/* Fix: a single nav in the DOM, correctly removed via [hidden] when
   closed — nothing left behind for a screen reader to stumble into. */
.nav-menu[hidden] {
  display: none;
}

.nav-menu a {
  color: #ffffff; /* ~15.3:1 on #252140 */
  text-decoration: none;
  font-size: 1rem;
}

/* Fix: visually hidden until focused (same off-screen technique as
   .skip-link) — a keyboard/screen-reader user reaches this after the
   last nav link instead of having to tab/shift-tab back to the
   hamburger button to close the menu. */
.nav-close-btn {
  position: absolute;
  left: -9999px;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.nav-close-btn:focus {
  position: static;
}

.hero {
  background: #1a1830;
}

.hero img {
  box-shadow: 5px 5px 0 0 #f78fc9;
}

/* Fix: base.css's shared section background classes (events-section,
   spotlight-section, news-section) are light-mode tints — override them
   here to dark equivalents so heading/body text stays legible. */
.events-section {
  background: #2d2a54;
}

.spotlight-section {
  background: #1a1830;
}

.news-section {
  background: #2d2a54;
}

.hero h1 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: 0em;
  margin: 0 0 0.4rem;
  color: #ffffff;
}

.section-heading,
.event-title,
.news-headline {
  font-weight: 600;
}

.hero p {
  color: #b8b6c8; /* ~8.7:1 on dark bg */
}

.hero p.body-large {
  color: #f2f2f5; /* ~15.4:1 on dark bg */
}

.section-heading {
  color: #ffffff;
}

.event-card {
  border-color: #3a3560;
  background: #252140;
}

.spotlight-card img {
  box-shadow: 5px 5px 0 0 #febd00;
}

/* Fix: status is an icon + visible text label, not colour alone, and the
   two states are distinguishable without relying on hue at all. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.status-badge.available {
  background: #1e3a2a;
  color: #7ee2a8; /* ~7.9:1 on its own badge background */
}

.status-badge.full {
  background: #3a1e22;
  color: #ff9b96; /* ~7.5:1 on its own badge background */
}

.event-meta {
  color: #b8b6c8; /* ~8.7:1 on #252140 */
}

/* Fix: real-world accessibility info about the venue itself (step-free
   access, parking, equipment) — the kind of thing that decides whether
   someone can actually attend, which no amount of WCAG-conformant markup
   on this page can substitute for. Native <details>/<summary>, so it's
   keyboard-operable and announces its expanded/collapsed state with no
   extra ARIA needed. */
.accessibility-details {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.accessibility-details summary {
  cursor: pointer;
  color: #5fd4de; /* ~9.8:1 on #252140, same accent as event-link/news-link */
  font-weight: 600;
}

.accessibility-details ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: #b8b6c8; /* ~8.7:1 on #252140 */
}

.accessibility-details li {
  margin-bottom: 0.35rem;
}

.accessibility-details li:last-child {
  margin-bottom: 0;
}

/* Fix: link text describes the destination on its own, out of context
   (WCAG 2.4.4) — see the visible text in good.html for each card. */
.event-link {
  color: #5fd4de; /* ~9.8:1 on #252140 */
  font-size: 0.9375rem;
  text-decoration: underline;
  font-weight: 600;
}

label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #f2f2f5;
}

.hint {
  font-weight: 400;
  color: #b8b6c8;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  border-color: #4a4570; /* clearly visible field boundary */
  color: #f2f2f5;
  background: #252140;
}

input::placeholder {
  color: #8b87a0;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #00aaf8;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

legend {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0;
  color: #f2f2f5;
}

/* Fix: a plain, fully visible native radio button next to each label —
   the browser's own radio semantics, focus ring, and checked indicator
   are never hidden or reimplemented, so there's no risk of the visual
   state and the accessible state drifting apart. */
.date-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Fix: a 44px touch target (WCAG 2.5.5/2.5.8) around a visually smaller
   24px radio — the whole row is the <label>, so the extra hit area
   isn't just decorative padding, it's part of the same clickable
   control as the circle and text. */
.date-option-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 400;
  margin-bottom: 0;
  cursor: pointer;
}

.date-option-row input[type="radio"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.date-option {
  font-size: 0.9375rem;
  color: #f2f2f5;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.checkbox-group label {
  display: inline;
  margin-bottom: 0;
}

.form-status:not(:empty) {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  background: #1e3a2a;
  color: #7ee2a8; /* ~7.9:1, same success pairing as .status-badge.available */
}

/* Shared brand-fill treatment — background/text pairing reused by the
   skip link and every primary button, so there's one canonical place
   defining this contrast pair (~5.0:1) instead of duplicating it. */
.primary-fill,
.btn-submit {
  background: #00aaf8;
  color: #10315c;
}

/* Fix: a visible disabled state to match the native `disabled` attribute
   — WCAG contrast requirements don't apply to disabled controls, but a
   sighted user still needs a visual cue that it's unavailable, not just
   identical-looking and unresponsive. */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spotlight-quote {
  color: #f2f2f5;
}

.spotlight-role {
  color: #f78fc9; /* ~7.9:1 on dark bg */
  font-size: 0.875rem;
  margin: 0.6rem 0 0;
}

.news-item {
  border-color: #3a3560;
  background: #252140;
}

.news-link {
  color: #5fd4de; /* ~9.8:1 on #252140 */
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
}

.site-footer {
  background: #252140;
}

.social-row a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #252140;
}

.social-icon {
  fill: #ffffff;
}

.footer-links a {
  color: #ffffff; /* ~15.3:1 on #252140 */
  text-decoration: none;
  font-size: 0.875rem;
}