/* Mt. Pulaski identity layer for the standalone Fall Fest guide.
   Preserve seasonal Fall Fest artwork while tying navigation and chrome to Mt. Pulaski Today. */
:root {
  --mp-purple: #5a2d82;
  --mp-purple-dark: #3b185f;
  --mp-purple-soft: #f3edf8;
  --mp-gold: #f2c14e;
  --ff-text: #111111;
  --ff-muted: #3c3c3c;
  --ff-link: var(--mp-purple);
  --ff-card-accent: var(--mp-purple);
  --ff-card-bg: #ffffff;
}
html { background: var(--mp-purple-dark); }
.event-header {
  background:
    radial-gradient(circle at 82% 10%, rgba(242,193,78,.34), transparent 30%),
    linear-gradient(120deg, var(--mp-purple-dark), var(--mp-purple) 72%);
}
.event-header .eyebrow { color: var(--mp-gold); }
.primary-nav {
  background: rgba(59,24,95,.96);
  border-color: rgba(242,193,78,.28);
}
.primary-nav a:hover,
.primary-nav a:focus,
.primary-nav a[aria-current="page"],
.primary-nav a.active {
  background: rgba(242,193,78,.16);
  color: #fff;
}
.page-heading .eyebrow,
.panel .eyebrow { color: var(--mp-purple); }
button,
.button,
.action-link {
  border-color: rgba(90,45,130,.24);
}
button:hover,
.button:hover,
.action-link:hover { border-color: rgba(90,45,130,.5); }
:focus-visible { outline-color: var(--mp-gold); }

/* Use the Mt. Pulaski school gold as the active schedule/directory selector color. */
.day-tabs button {
  border-color: var(--mp-gold);
  background: #fffdf6;
  color: var(--mp-purple-dark);
}
.day-tabs button:hover {
  background: #fff7df;
  border-color: #e2a91f;
}
.day-tabs button[aria-pressed="true"] {
  background: var(--mp-gold);
  border-color: var(--mp-gold);
  color: #392900;
}

/* Fall Fest content uses neutral text with purple reserved for links and accents. */
.panel,
.page-heading h2,
.panel h2,
.panel h3,
.panel h4,
.panel p,
.panel li,
.cards b,
.info-card h3,
.info-card p,
.home-info h3,
.home-info p,
.directory-item h4,
.directory-item p,
.recognition-card strong,
.recognition-card p {
  color: var(--ff-text);
}
.cards span,
.muted {
  color: var(--ff-muted);
}
.event,
.cards a,
.info-card,
.recognition-card {
  background: var(--ff-card-bg);
}
.event {
  border-left-color: var(--ff-card-accent);
}
.notice-list article {
  border-left-color: var(--ff-card-accent);
}
.event-link,
.guide-cards strong,
.directory-time,
.panel a:not(.button):not(.recognition-card) {
  color: var(--ff-link);
}
.guide-cards a,
.recognition-card {
  border-top-color: var(--ff-card-accent);
}

/* Keep all flyer card surfaces identical; color variation belongs only to the accent border. */
.guide-cards > a,
.guide-cards .guide-paint {
  background: var(--ff-card-bg);
}

/* Alternate flyer accents by each three-card desktop row: purple, gold, purple, gold, etc. */
.guide-cards > a:nth-child(6n + 1),
.guide-cards > a:nth-child(6n + 2),
.guide-cards > a:nth-child(6n + 3) {
  border-top-color: var(--mp-purple);
}
.guide-cards > a:nth-child(6n + 4),
.guide-cards > a:nth-child(6n + 5),
.guide-cards > a:nth-child(6n + 6) {
  border-top-color: var(--mp-gold);
}

a.recognition-card:hover {
  border-top-color: var(--mp-gold);
}

/* Consistent return control used by Mt. Pulaski Today event subpages. */
.town-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 1rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(242,193,78,.72);
  border-radius: 999px;
  background: rgba(242,193,78,.14);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.town-link:hover,
.town-link:focus-visible {
  background: var(--mp-gold);
  color: #392900;
}

/* Honor either dark-mode convention used by Mt. Pulaski Today pages. */
html[data-theme="dark"],
body.theme-dark {
  --ff-text: #ffffff;
  --ff-muted: #e5e7eb;
  --ff-link: #d7b7ed;
  --ff-card-bg: #24182f;
  color: var(--ff-text);
  background: #18101f;
}
html[data-theme="dark"] .panel,
body.theme-dark .panel {
  color: var(--ff-text);
}
html[data-theme="dark"] .page-heading .eyebrow,
html[data-theme="dark"] .panel .eyebrow,
body.theme-dark .page-heading .eyebrow,
body.theme-dark .panel .eyebrow {
  color: var(--mp-gold);
}
html[data-theme="dark"] .day-tabs button,
body.theme-dark .day-tabs button {
  background: #24182f;
  color: #fff;
}
html[data-theme="dark"] .day-tabs button[aria-pressed="true"],
body.theme-dark .day-tabs button[aria-pressed="true"] {
  background: var(--mp-gold);
  color: #392900;
}
html[data-theme="dark"] .event-link,
html[data-theme="dark"] .guide-cards strong,
html[data-theme="dark"] .directory-time,
html[data-theme="dark"] .panel a:not(.button):not(.recognition-card),
body.theme-dark .event-link,
body.theme-dark .guide-cards strong,
body.theme-dark .directory-time,
body.theme-dark .panel a:not(.button):not(.recognition-card) {
  color: var(--ff-link);
}