/* ==========================================================================
   Design Tokens
   Colors are unchanged from the original theme; this section just gives
   names to the values already in use so spacing, radius, and shadow stay
   consistent across the whole site instead of being re-guessed per rule.
   ========================================================================== */

:root {
	--color-bg-start: rgba(35, 35, 35, 1);
	--color-bg-end: rgba(20, 20, 20, 1);
	--color-panel-start: rgba(90, 25, 25, 1);
	--color-panel-end: rgba(65, 15, 15, 1);
	--color-text: #ffffff;
	--color-link: #ffaaaa;
	--color-link-hover: #ff6666;
	--color-footer-bg: rgba(45, 15, 15, 0.85);
	--color-footer-text: #dddddd;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;

	--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
	--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.3);

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
}

/* ==========================================================================
   Reset / General Styles
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: linear-gradient(112deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
}

body {
	font-family: Arial, sans-serif;
	position: relative;
	margin: 0;
	padding: var(--space-3);
	color: var(--color-text);
	font-size: 150%;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color .3s ease;
}

li a {
	text-decoration: underline;
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

h1 {
	color: var(--color-text);
	text-align: center;
	margin: 0 0 var(--space-2);
}

h2 {
	margin: 0 0 var(--space-2);
}

h3 {
	margin: 0 0 var(--space-1);
}

p {
	margin: 0 0 var(--space-2);
}

p:last-child {
	margin-bottom: 0;
}

li {
	margin-top: var(--space-1);
	margin-bottom: var(--space-2);
}

:focus-visible {
	outline: 3px solid var(--color-link-hover);
	outline-offset: 2px;
}

.image-banner {
	transform: scale(0.75);
	display: block;
	margin: 0 auto var(--space-1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button {
	background-color: #ffffff;
	color: #000000;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: var(--space-1) var(--space-2);
	margin: 0;
	cursor: pointer;
	font-size: 16px;
	transition: background-color .3s ease, transform .15s ease, box-shadow .15s ease;
}

button:hover {
	background-color: var(--color-link);
}

button:active {
	transform: translateY(1px);
	box-shadow: none;
}

.button-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-2) 0;
}

/* ==========================================================================
   Nav Styles
   ========================================================================== */

nav {
	text-align: center;
}

nav a {
	display: inline-block;
	margin: 0 var(--space-2);
	color: var(--color-text);
	text-decoration: none;
	transition: color .3s ease;
}

nav a:hover {
	color: var(--color-link-hover);
}

.nav-section {
	margin: 0 auto var(--space-3);
	max-width: 40%;
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

.normalsection,
.gamesection,
.podcastsection {
	display: block;
	background: linear-gradient(112deg, var(--color-panel-start) 0%, var(--color-panel-end) 100%);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	color: var(--color-text);
}

.gamesection h2,
.gamesection h3,
.podcastsection h2 {
	text-align: center;
}

.expandedsection {
	display: block;
	flex: 1;
	margin-top: var(--space-2);
}

section h2 {
	color: var(--color-text);
	text-align: left;
}

/* ==========================================================================
   Link Panels (Where Else Are We / Our Affiliates / Other Resources)
   Three cards sit side-by-side, each holding a vertical bar-list of
   links (small icon + label). Rows use a consistent min-height so
   options line up horizontally across the three panels.
   ========================================================================== */

.link-panels {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.link-panel {
	flex: 1 1 240px;
	margin-bottom: 0;
}

.link-panel-intro {
	font-size: 0.7em;
	margin-bottom: var(--space-2);
}

.link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.link-list li {
	margin: 0;
}

.link-list a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

.link-list a:hover,
.link-list a:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	transform: translateX(3px);
}

.external-links {
	font-size: 0.7em;
	line-height: 1.3;
	margin: 0;
}

.link-list .external-links {
	text-align: left;
	font-size: 1em;
}

/* Every icon renders in the same size box, regardless of its native
   aspect ratio, so labels line up beside them consistently. */
.social-icon,
.affiliate-logo,
.resource-logo {
	display: block;
	object-fit: contain;
	flex-shrink: 0;
}

.social-icon {
	width: 28px;
	height: 28px;
}

.affiliate-logo,
.resource-logo {
	width: 32px;
	height: 32px;
}

/* Podcast tile grid (media page) - larger artwork, caption below */
.podcastcontainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	text-align: center;
	margin-top: var(--space-1);
}

.podcastcontainer div {
	flex: 0 1 200px;
}

.podcastcontainer .external-links {
	text-align: center;
}

.podcast-artwork {
	width: 100%;
	max-width: 200px;
	height: auto;
	display: block;
	margin: 0 auto var(--space-1);
}

.fill-space {
	flex: 1;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

footer {
	margin-top: var(--space-4);
	text-align: center;
	font-size: 0.7em;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	background-color: var(--color-footer-bg);
	color: var(--color-footer-text);
}

footer p {
	margin: 0;
}

/* ==========================================================================
   Form Styling
   ========================================================================== */

form {
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}

label {
	font-weight: bold;
	display: block;
	padding: var(--space-1) 0;
}

.required-label::after {
	content: " *";
	color: #ff8080;
	font-weight: bold;
}

input {
	padding: var(--space-1);
	margin-bottom: var(--space-2);
	font-size: 16px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(0, 0, 0, 0.2);
}

input:not([type="checkbox"]) {
	display: block;
}

input[type="text"],
input[type="date"] {
	width: 250px;
}

input[type="submit"] {
	display: flex;
	cursor: pointer;
	width: 100%;
	margin-top: var(--space-2);
}

/* ==========================================================================
   Accessibility Button & Logo
   Both are absolutely positioned against the body (see `position: relative`
   on body above), so they sit at the corners of the page content instead
   of the raw browser viewport, and stay put regardless of page length.
   ========================================================================== */

#accessibility-button {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 1001;
}

.header-logo-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 1001;
	display: inline-block;
	border-radius: var(--radius-md);
}

.header-logo {
	display: block;
	width: 70px;
	height: 70px;
}

@media (max-width: 600px) {
	.header-logo {
		width: 45px;
		height: 45px;
	}
}

/* ==========================================================================
   Accessibility Settings Panel
   ========================================================================== */

#accessibility-panel {
	position: absolute;
	top: 76px;
	right: var(--space-2);
	background: #333;
	color: #fff;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	z-index: 1000;
	display: none;
	max-width: 300px;
}

.text-size-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-1);
}

.reset {
	text-align: center;
	margin-top: var(--space-1);
}

.theme-picker {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.theme-picker label {
	display: inline;
	padding: 0;
	font-weight: bold;
	flex-shrink: 0;
}

#theme-select {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	font-size: 16px;
	padding: var(--space-1);
	border-radius: var(--radius-sm);
	border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.3));
	background-color: var(--theme-bg, #5a1919);
	color: var(--theme-fg, #ffffff);
}

/* Best-effort theming of the dropdown's own options/optgroups so the
   open menu matches the active theme too. Support varies by browser:
   Firefox and most Chromium browsers honor this; Safari's native
   picker ignores it and falls back to the OS default appearance. */
#theme-select option,
#theme-select optgroup {
	background-color: var(--theme-bg, #5a1919);
	color: var(--theme-fg, #ffffff);
}

/* ==========================================================================
   High Contrast / Special Modes for entire site
   Each theme class only defines its color variables below; the shared rule
   blocks that follow apply them consistently so every theme behaves
   identically without repeating full selector + value blocks per theme.
   ========================================================================== */

.high-contrast-1 {
	--theme-bg: #000000;
	--theme-fg: #ffffff;
	--theme-border: #ffffff;
	--theme-link: #00ffff;
	--theme-link-hover: #ff00ff;
	--theme-btn-hover-bg: #0000ff;
}

.high-contrast-2 {
	--theme-bg: #ffffff;
	--theme-fg: #000000;
	--theme-border: #000000;
	--theme-link: #0000ff;
	--theme-link-hover: #ff0000;
	--theme-btn-hover-bg: #ffaaaa;
}

.high-contrast-3 {
	--theme-bg: #000000;
	--theme-fg: #ffff00;
	--theme-border: #ffff00;
	--theme-link: #00ffff;
	--theme-link-hover: #ff00ff;
	--theme-btn-hover-bg: #0000ff;
}

.high-contrast-4 {
	--theme-bg: #ffff00;
	--theme-fg: #000000;
	--theme-border: #000000;
	--theme-link: #0000ff;
	--theme-link-hover: #ff0000;
	--theme-btn-hover-bg: #00ffff;
}

.high-contrast-5 {
	--theme-bg: #0000ff;
	--theme-fg: #ffff00;
	--theme-border: #ffff00;
	--theme-link: #ff7f00;
	--theme-link-hover: #00ff00;
	--theme-btn-hover-bg: #000000;
}

.spooky {
	--theme-bg: #000000;
	--theme-fg: #ff7f00;
	--theme-border: #aa00aa;
	--theme-link: #aa0000;
	--theme-link-hover: #ffffff;
	--theme-btn-hover-bg: #aa00aa;
}

.holiday {
	--theme-bg: #7f0000;
	--theme-fg: #00ff00;
	--theme-border: #ffffff;
	--theme-link: #ffffff;
	--theme-link-hover: #7777ff;
	--theme-btn-hover-bg: #ffffff;
	--theme-btn-hover-fg: #ff0000;
}

.neon-bleach {
	--theme-bg: #00ffff;
	--theme-fg: #ff00ff;
	--theme-border: #ffff00;
	--theme-link: #ff0000;
	--theme-link-hover: #00ff00;
	--theme-btn-hover-bg: #00ff00;
	--theme-btn-hover-fg: #ff7f00;
}

/* Shared rule blocks: every theme above plugs into these once.
   The bare `html.<theme>` selectors theme the <html> element itself
   (where the theme class actually lives), so the background extends
   to the full viewport, not just the content inside <body>. */
html.high-contrast-1, html.high-contrast-2, html.high-contrast-3, html.high-contrast-4, html.high-contrast-5, html.spooky, html.holiday, html.neon-bleach,
.high-contrast-1 html, .high-contrast-1 head, .high-contrast-1 body, .high-contrast-1 footer, .high-contrast-1 section, .high-contrast-1 div, .high-contrast-1 button:not(.contrast-mode-controls button), .high-contrast-1 h1, .high-contrast-1 h2, .high-contrast-1 h3:not(.external-links), .high-contrast-1 h4,
.high-contrast-2 html, .high-contrast-2 head, .high-contrast-2 body, .high-contrast-2 footer, .high-contrast-2 section, .high-contrast-2 div, .high-contrast-2 button:not(.contrast-mode-controls button), .high-contrast-2 h1, .high-contrast-2 h2, .high-contrast-2 h3:not(.external-links), .high-contrast-2 h4,
.high-contrast-3 html, .high-contrast-3 head, .high-contrast-3 body, .high-contrast-3 footer, .high-contrast-3 section, .high-contrast-3 div, .high-contrast-3 button:not(.contrast-mode-controls button), .high-contrast-3 h1, .high-contrast-3 h2, .high-contrast-3 h3:not(.external-links), .high-contrast-3 h4,
.high-contrast-4 html, .high-contrast-4 head, .high-contrast-4 body, .high-contrast-4 footer, .high-contrast-4 section, .high-contrast-4 div, .high-contrast-4 button:not(.contrast-mode-controls button), .high-contrast-4 h1, .high-contrast-4 h2, .high-contrast-4 h3:not(.external-links), .high-contrast-4 h4,
.high-contrast-5 html, .high-contrast-5 head, .high-contrast-5 body, .high-contrast-5 footer, .high-contrast-5 section, .high-contrast-5 div, .high-contrast-5 button:not(.contrast-mode-controls button), .high-contrast-5 h1, .high-contrast-5 h2, .high-contrast-5 h3:not(.external-links), .high-contrast-5 h4,
.spooky html, .spooky head, .spooky body, .spooky footer, .spooky section, .spooky div, .spooky button:not(.contrast-mode-controls button), .spooky h1, .spooky h2, .spooky h3:not(.external-links), .spooky h4,
.holiday html, .holiday head, .holiday body, .holiday footer, .holiday section, .holiday div, .holiday button:not(.contrast-mode-controls button), .holiday h1, .holiday h2, .holiday h3:not(.external-links), .holiday h4,
.neon-bleach html, .neon-bleach head, .neon-bleach body, .neon-bleach footer, .neon-bleach section, .neon-bleach div, .neon-bleach button:not(.contrast-mode-controls button), .neon-bleach h1, .neon-bleach h2, .neon-bleach h3:not(.external-links), .neon-bleach h4 {
	background: var(--theme-bg) !important;
	color: var(--theme-fg) !important;
}

.high-contrast-1 section, .high-contrast-1 #accessibility-panel,
.high-contrast-2 section, .high-contrast-2 #accessibility-panel,
.high-contrast-3 section, .high-contrast-3 #accessibility-panel,
.high-contrast-4 section, .high-contrast-4 #accessibility-panel,
.high-contrast-5 section, .high-contrast-5 #accessibility-panel,
.spooky section, .spooky #accessibility-panel,
.holiday section, .holiday #accessibility-panel,
.neon-bleach section, .neon-bleach #accessibility-panel {
	border: solid;
	border-color: var(--theme-border);
}

.high-contrast-1 a, .high-contrast-2 a, .high-contrast-3 a, .high-contrast-4 a, .high-contrast-5 a,
.spooky a, .holiday a, .neon-bleach a {
	color: var(--theme-link) !important;
}

.high-contrast-1 a:hover, .high-contrast-2 a:hover, .high-contrast-3 a:hover, .high-contrast-4 a:hover, .high-contrast-5 a:hover,
.spooky a:hover, .holiday a:hover, .neon-bleach a:hover {
	color: var(--theme-link-hover) !important;
}

.high-contrast-1 button:hover:not(.contrast-mode-controls button),
.high-contrast-2 button:hover:not(.contrast-mode-controls button),
.high-contrast-3 button:hover:not(.contrast-mode-controls button),
.high-contrast-4 button:hover:not(.contrast-mode-controls button),
.high-contrast-5 button:hover:not(.contrast-mode-controls button),
.spooky button:hover:not(.contrast-mode-controls button),
.holiday button:hover:not(.contrast-mode-controls button),
.neon-bleach button:hover:not(.contrast-mode-controls button) {
	background: var(--theme-btn-hover-bg) !important;
	color: var(--theme-btn-hover-fg, inherit) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
	body {
		padding: var(--space-2);
	}

	.link-panel {
		flex-basis: 100%;
	}
}