/* ============================================================
 * GSR Main Stylesheet
 * Colors: #070707 (black) | #1f2025 (grey) | #07E3D4 (teal)
 * ============================================================ */

:root {
	--bg-primary: #070707;
	--bg-secondary: #1f2025;
	--bg-card: #26272d;
	--text-primary: #ffffff;
	--text-muted: #9ca3af;
	--accent-teal: #07E3D4;
	--accent-purple: #6D51E0;
	--border-teal: 1px solid rgba(7,227,212,0.3);
	--border-teal-hover: 1px solid rgba(7,227,212,0.7);

	/* Affiliate/supporter tier accent colors - change a hex/rgb pair here to
	   reskin that tier's card border, avatar ring, and heading everywhere at
	   once. The "-rgb" twin holds the same color as raw r,g,b components so
	   it can be dropped into rgba(var(--color-x-rgb), alpha) wherever a
	   translucent border/shadow is needed instead of the solid color. */
	--color-partner: var(--accent-teal);
	--color-partner-rgb: 7,227,212;
	--color-sponsor: var(--accent-purple);
	--color-sponsor-rgb: 109,81,224;
	--color-contributor: #c0c0c0;
	--color-contributor-rgb: 192,192,192;
	--color-premium: #f0c040;
	--color-premium-rgb: 240,192,64;
	/* Purple is the league car colour - keep it dominant and equal on both ends.
	   Teal sits exactly at the midpoint. Never shift the 0%/50%/100% stops asymmetrically. */
	--gradient-cta: linear-gradient(90deg, rgb(109,81,224) 0%, rgb(8,185,162) 50%, rgb(109,81,224) 100%);
	/* Separate variable for btn_gradient so it can be tweaked independently from --gradient-cta. */
	--gradient-btn: rgb(109,81,224);
	--nav-height: 64px;
	--max-width: 1200px;
	--radius: 8px;
	--transition: 0.2s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-text-stroke: 1px black;
	paint-order: stroke fill;
}

h1, h2, h3, h4 {
	font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.01em;
}

h2 {
	width: fit-content;
	background-image: var(--gradient-cta);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 6px;
}

a {
	color: var(--accent-teal);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: #fff; }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; }

/* ── Utility ─────────────────────────────────────────────── */
.text_accent  { color: var(--accent-teal); }
.text_purple  { color: var(--accent-purple); }
.text_white   { color: #fff; }
.text_muted   { color: var(--text-muted); }
.text_center  { text-align: center; }
.text_center h1 { margin-left: auto; margin-right: auto; }
.text_center h2 { margin-left: auto; margin-right: auto; }

.site_wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ── Navigation ──────────────────────────────────────────── */
.site_header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--nav-height);
	background-color: rgba(13, 11, 24, 0.92);
	border-bottom: 3px solid transparent;
	border-image: var(--gradient-cta) 1;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.nav_container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site_brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	flex-shrink: 0;
}
.site_brand:hover { color: var(--accent-teal); }

.brand_logo {
	height: 36px;
	width: auto;
	display: block;
}

.brand_label {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: 'Barlow Condensed', sans-serif;
	color: #fff;
	display: none;
}

@media (min-width: 540px) {
	.brand_label { display: inline; }
}

.site_nav { display: flex; align-items: center; flex-shrink: 0; }

.nav_links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
}

.nav_links a {
	display: block;
	padding: 0.5rem 0.85rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-muted);
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition);
}
.nav_links a:hover,
.nav_links a.active {
	color: #fff;
	background: rgba(255,255,255,0.07);
}
.nav_links a.active {
	color: var(--accent-teal);
}

.nav_actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

/* Base pill border/hover-color look comes from .btn_outline_small (see
   "Buttons" below), applied to the same element - this overrides its
   text-oriented padding with equal all-around padding instead, since this
   button holds only an icon, not a label. The extra .nav_actions prefix
   gives this the specificity to win over .btn_outline_small's own padding
   rule regardless of which is declared later in the file. */
.nav_actions .nav_discord_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 42px;
	height: 42px;
}
.nav_discord_btn:hover {
	transform: translateY(-2px);
}

/* Login - identical look to Home/Rules/Contact (.nav_links a), just placed in
   .nav_actions instead of .nav_links so it stays visible outside the
   hamburger-toggled menu on mobile. */
.nav_login_btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-muted);
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition);
}
.nav_login_btn:hover {
	color: #fff;
	background: rgba(255,255,255,0.07);
}

/* Hamburger */
.nav_toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	color: var(--accent-teal);
	-webkit-text-stroke: 0;
}
.nav_toggle .icon_close { display: none; }
.nav_toggle .icon_menu { display: flex; }
.nav_toggle.is_open .icon_menu { display: none; }
.nav_toggle.is_open .icon_close { display: flex; color: var(--accent-teal); }

@media (max-width: 768px) {
	.nav_toggle { display: flex; }

	.site_nav {
		position: absolute;
		top: var(--nav-height);
		left: 0;
		right: 0;
		background: var(--bg-secondary);
		border-bottom: 1px solid rgba(255,255,255,0.08);
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s ease;
	}
	.site_nav.is_open { max-height: 400px; }

	.nav_links {
		flex-direction: column;
		align-items: stretch;
		padding: 1rem 1.5rem;
		gap: 0.25rem;
	}
	.nav_links a {
		padding: 0.65rem 0.75rem;
		font-size: 1rem;
	}
}

/* ── Buttons ─────────────────────────────────────────────── */
/* .btn_gradient/.btn_outline/.btn_outline_small all now share the exact same
   look (transparent, teal text, purple border that lights up teal on
   hover) - historically three separate classes with drifted-apart CSS from
   when .btn_gradient had a solid fill, but nothing about that survives now.
   Kept as three class NAMES (not merged into one, to avoid touching every
   view file that references them), but one shared rule underneath. Real
   differences, kept as small additions on top of the shared base:
   - .btn_outline_small is the compact size variant (smaller font/padding).
   - .btn_gradient additionally fades + lifts on hover - every other CTA on
     the site is a plain link, this one specifically doubles as the site's
     "primary" action button, hence the extra motion. */
.btn_gradient,
.btn_outline,
.btn_outline_small {
	display: inline-block;
	background: transparent;
	color: var(--accent-teal);
	font-weight: 600;
	border-radius: 50px;
	border: 2px solid rgba(109,81,224,0.6);
	cursor: pointer;
	text-decoration: none;
	-webkit-text-stroke: 0;
	transition: border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}
.btn_gradient,
.btn_outline {
	font-size: 1rem;
	padding: 0.8rem 2rem;
}
.btn_outline_small {
	font-size: 0.9rem;
	padding: 0.55rem 1.25rem;
}
.btn_gradient:hover,
.btn_outline:hover,
.btn_outline_small:hover {
	border-color: var(--accent-teal);
	color: var(--accent-teal);
}
.btn_gradient:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.btn_full { width: 100%; text-align: center; }

/* ── Hero ────────────────────────────────────────────────── */
.hero_section {
	position: relative;
	min-height: calc(100vh - var(--nav-height));
	display: flex;
	align-items: center;
	background-color: var(--bg-primary);
	overflow: hidden;
	border-bottom: 3px solid transparent;
	border-image: var(--gradient-cta) 1;
}

.hero_bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero_bg_slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero_bg_slide.active {
	opacity: 1;
}

.hero_grid_bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(rgba(7,7,7,0.55) 0%, rgba(7,7,7,0.55) 100%),
		linear-gradient(rgba(7,227,212,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(7,227,212,0.04) 1px, transparent 1px);
	background-size: auto, 60px 60px, 60px 60px;
	pointer-events: none;
}

.hero_inner {
	position: relative;
	z-index: 2;
	max-width: var(--max-width);
	width: 100%;
	margin: 0 auto;
	padding: 5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.hero_slogan h1 {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 900;
	line-height: 1.0;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	-webkit-text-stroke: 3px black;
	paint-order: stroke fill;
}

.hero_sub {
	margin-top: 1.25rem;
	font-size: 1.1rem;
	color: rgba(255,255,255,0.85);
	max-width: 520px;
	-webkit-text-stroke: 0.5px black;
	paint-order: stroke fill;
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
	line-height: 1.65;
}

/* ── Hero entrance animation ─────────────────────────────── */
@keyframes hero_rise {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero_slogan h1:nth-child(1) { animation: hero_rise 0.7s ease both 0.1s; }
.hero_slogan h1:nth-child(2) { animation: hero_rise 0.7s ease both 0.28s; }
.hero_sub                    { animation: hero_rise 0.7s ease both 0.44s; }
.hero_actions                { animation: hero_rise 0.7s ease both 0.58s; }

/* ── Scroll reveal ───────────────────────────────────────── */
.will_reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.will_reveal.revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.hero_slogan h1,
	.hero_sub,
	.hero_actions { animation: none; }
	.will_reveal  { opacity: 1; transform: none; transition: none; }
}

.hero_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ── Sections ────────────────────────────────────────────── */
.content_section {
	padding: 5rem 0;
	background-color: var(--bg-primary);
	border-bottom: 3px solid transparent;
	border-image: var(--gradient-cta) 1;
}
/* The last <section> before the footer never needs its own divider line -
   on short pages it just floats above a big empty gap. Scoped to the
   direct child of .site_wrapper so it only ever matches the true last
   section (page_hero/content_section/cta_section all qualify), not the
   last section of a particular class. */
.site_wrapper > section:last-of-type {
	border-bottom: none;
	border-image: none;
}

.content_section:nth-child(even of .content_section) {
	background-color: var(--bg-secondary);
}

.section_container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.section_title {
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2.5rem;
	position: relative;
}

.section_unavailable {
	color: var(--text-muted);
	font-size: 0.95rem;
}

.section_cta {
	margin-top: 2.5rem;
	text-align: center;
}

/* ── Blog Grid ───────────────────────────────────────────── */
.blog_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.blog_card {
	background: var(--bg-card);
	border: 2px solid rgba(109,81,224,0.3);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
	cursor: pointer;
}
.blog_card:hover {
	border-color: rgba(109,81,224,0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(109,81,224,0.4);
}

.blog_title_banner {
	font-size: 1.05rem;
}

.blog_card_body {
	padding: 1.5rem;
	flex: 1;
}

.blog_date {
	font-size: 0.78rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
	margin-bottom: 0.6rem;
}

.blog_short_description {
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.55;
}

.blog_card_footer {
	padding: 1rem 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.blog_read_more {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--accent-teal);
}
.blog_read_more::after {
	content: '';
	position: absolute;
	inset: 0;
}
.blog_read_more:hover { color: #fff; }

/* ── SimGrid Events ──────────────────────────────────────── */
.event_game_banner {
	width: 100%;
	min-width: 0;
	height: 140px;
	object-fit: cover;
	display: block;
}

img.event_game_banner {
	object-fit: contain;
	background: var(--bg-card);
	padding: 1rem;
	box-sizing: border-box;
}

.game_logo_banner {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-card);
	color: #fff;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.game_logo_banner_placeholder {
	color: #fff;
}

.event_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.event_card {
	background: var(--bg-card);
	border: 2px solid rgba(109,81,224,0.3);
	border-radius: var(--radius);
	display: block;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.event_card:hover {
	border-color: rgba(109,81,224,0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(109,81,224,0.4);
}

.event_card_body {
	padding: 1.5rem;
}

/* Shared "banner" strip - a colored bar naming whatever the card is about
   (round number, driver name, post title), with the flowing purple/teal
   gradient cap along its own top edge via ::before. Its own overflow:hidden
   clips the cap to its rounded top corners without needing overflow:hidden
   on the card itself (which would otherwise clip the card's hover
   box-shadow). One shared base (.card_banner) plus a small per-usage
   modifier for the only real differences between them (font-size, and
   whether the text is uppercase+letter-spaced) - see .event_round,
   .driver_name_banner, .blog_title_banner. */
.card_banner {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 0.6rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--accent-purple);
	text-align: center;
	background-color: rgba(109,81,224,0.06);
	border-bottom: 1px solid rgba(109,81,224,0.15);
	border-radius: var(--radius) var(--radius) 0 0;
	/* The site-wide 1px stroke (see body, above) isn't enough separation
	   for purple text sitting on this banner's own light purple tint -
	   thickened just here so the title reads clearly instead of blending
	   into its background. */
	-webkit-text-stroke: 2px black;
}
.card_banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-cta);
}
.event_round {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.event_game {
	font-size: 0.78rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.2rem;
}

.event_track {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 0.2rem;
	color: var(--accent-teal);
}

.event_championship {
	font-size: 0.9rem;
	color: var(--text-muted);
	margin-bottom: 0.6rem;
}

.event_date {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--accent-teal);
	display: block;
}

.championship_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.championship_card {
	background: var(--bg-card);
	border: var(--border-teal);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color var(--transition), transform var(--transition);
}
.championship_card:hover {
	border: var(--border-teal-hover);
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(7,227,212,0.1);
}

.championship_image {
	width: 100%;
	min-width: 0;
	height: 140px;
	object-fit: cover;
	display: block;
}

.championship_card_body {
	padding: 1.5rem;
}

.championship_game {
	font-size: 0.78rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.6rem;
}

.championship_name {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 0.4rem;
}

.championship_round {
	font-size: 0.875rem;
	color: var(--accent-teal);
	font-weight: 600;
}

/* ── Driver Carousel ─────────────────────────────────────── */
.driver_carousel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.driver_carousel_track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	padding: 0.5rem 0 1rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.driver_carousel_track::-webkit-scrollbar {
	display: none;
}

.driver_card {
	/* Widened to line up with .event_card's typical rendered width (the
	   Upcoming Races cards, which live in a fluid grid rather than this
	   fixed-width carousel) - also gives .driver_ratings more horizontal
	   room, so drivers active across several games need fewer wrapped rows
	   of rating badges. */
	flex: 0 0 320px;
	background: var(--bg-card);
	border: 2px solid rgba(109,81,224,0.3);
	border-radius: var(--radius);
	text-align: center;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.driver_card:hover {
	border-color: rgba(109,81,224,0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(109,81,224,0.4);
}

.driver_name_banner {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.driver_card_body {
	padding: 1.5rem;
}

.driver_team {
	font-size: 0.85rem;
	color: var(--text-primary);
	opacity: 0.75;
	margin-bottom: 0.75rem;
}

.driver_ratings {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* One pill per row, full-width of the card, no fill - just a border in the
   tier's own color - so the color itself is what reads as the badge rather
   than a filled background. Game label, score/tier, and the Experienced
   star all sit on one line since a pill this wide no longer needs two
   stacked lines to fit them. */
.driver_rating_badge {
	--rating-rgb: 154,160,171;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: none;
	border: 1px solid rgba(var(--rating-rgb), 0.6);
	-webkit-text-stroke: 0;
}
.driver_rating_game {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	/* rgba, not color + opacity - opacity on this element would also dim
	   .driver_rating_experienced below it (opacity affects the whole
	   rendered subtree, a child can't opt back out with its own opacity),
	   which needs to stay at full strength to actually read as a highlight. */
	color: rgba(255,255,255,0.7);
}
/* Replaces the old " - Experienced" text suffix on .driver_rating_tier -
   a small star instead of a whole extra word, since the badge is tiny and
   that was the single biggest chunk of text competing for space in it. */
.driver_rating_experienced {
	display: inline-flex;
	color: #f2c14e;
}
.driver_rating_tier {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--rating-color, var(--text-primary));
	white-space: nowrap;
}

/* ── Schedule ────────────────────────────────────────────── */
.schedule_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
}

.schedule_card {
	background: var(--bg-card);
	border: 1px solid rgba(255,255,255,0.06);
	border-left: 4px solid var(--accent-teal);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.schedule_day {
	font-size: 0.8rem;
	color: var(--accent-teal);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.4rem;
}

.schedule_game {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.3rem;
	letter-spacing: 0.02em;
}

.schedule_time {
	font-size: 0.875rem;
	color: var(--text-muted);
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq_list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.faq_item {
	background: var(--bg-card);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color var(--transition);
}
.faq_item:hover {
	border-color: rgba(109,81,224,0.3);
}
.faq_item[open] {
	border-color: rgba(255,255,255,0.06);
}
.faq_item[open]:hover {
	border-color: rgba(109,81,224,0.3);
}

.faq_question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.1rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	list-style: none;
	gap: 1rem;
}
.faq_question::-webkit-details-marker { display: none; }

.faq_icon {
	color: var(--accent-purple);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	transition: transform 0.25s ease;
}
.faq_item[open] .faq_icon {
	transform: translateX(-24px);
}

.faq_answer {
	padding: 0 1.25rem 1.25rem;
	font-size: 0.95rem;
	color: var(--text-muted);
	line-height: 1.65;
}
.faq_answer a { color: var(--accent-teal); }
.faq_answer a:hover { color: #fff; }

/* ── Page Hero (inner pages) ─────────────────────────────── */
.page_hero {
	padding: 4rem 0 3rem;
	background-color: var(--bg-secondary);
	border-bottom: 3px solid transparent;
	border-image: var(--gradient-cta) 1;
}

.page_title {
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.75rem;
	width: fit-content;
}
.page_title::after {
	content: '';
	display: block;
	margin-top: 0.5rem;
	width: 100%;
	height: 3px;
	background: var(--gradient-cta);
}

.page_subtitle {
	font-size: 1.05rem;
	color: var(--text-muted);
	margin-top: 1rem;
}

/* ── Rules Page ──────────────────────────────────────────── */
.rules_list {
	list-style: decimal;
	padding-left: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-bottom: 3rem;
}

/* All rule sections now sit in one shared content_section (see rules.php) -
   the second heading onward needs its own top spacing since it no longer
   gets a fresh section's padding to separate it from the list above it. */
.rules_list + .section_title {
	margin-top: 1rem;
}

.rule_item {
	font-size: 0.975rem;
	color: var(--text-muted);
	line-height: 1.6;
	padding-left: 0.5rem;
}

.cta_section { text-align: center; }

.cta_actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* ── Contact Page ────────────────────────────────────────── */
.contact_grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.contact_grid { grid-template-columns: 1fr 1.4fr; }
}

.contact_info h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.contact_info > p {
	color: var(--text-muted);
	font-size: 0.975rem;
	margin-bottom: 2rem;
}

.contact_methods {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact_method {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.contact_icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.contact_method strong {
	display: block;
	font-size: 0.95rem;
	margin-bottom: 0.15rem;
}
.contact_method p {
	font-size: 0.875rem;
	color: var(--text-muted);
}

.contact_form_wrap {
	background: var(--bg-card);
	border: var(--border-teal);
	border-radius: var(--radius);
	padding: 2rem;
}

.contact_form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.form_group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.form_group label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.form_group input,
.form_group textarea {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	color: #fff;
	font-size: 0.975rem;
	padding: 0.75rem 1rem;
	width: 100%;
	transition: border-color var(--transition);
	font-family: inherit;
}
.form_group input:focus,
.form_group textarea:focus {
	outline: none;
	border-color: var(--accent-teal);
	background: rgba(7,227,212,0.04);
}
.form_group input::placeholder,
.form_group textarea::placeholder {
	color: rgba(255,255,255,0.25);
	-webkit-text-stroke: 0;
}

.alert {
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius);
	font-size: 0.9rem;
	margin-bottom: 1.25rem;
}
.alert_success {
	background: rgba(7,227,212,0.12);
	border: 1px solid rgba(7,227,212,0.35);
	color: #07E3D4;
}
.alert_error {
	background: rgba(239,68,68,0.12);
	border: 1px solid rgba(239,68,68,0.35);
	color: #f87171;
}

/* ── 404 Page ────────────────────────────────────────────── */
.error_page {
	min-height: calc(100vh - var(--nav-height));
	display: flex;
	align-items: center;
}
.error_code {
	font-size: clamp(6rem, 20vw, 12rem);
	font-weight: 900;
	color: var(--accent-teal);
	opacity: 0.2;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.error_page h1 {
	font-size: 2rem;
	margin-bottom: 0.75rem;
}

/* ── Footer ──────────────────────────────────────────────── */
.site_footer {
	background-color: #0d0b18;
	border-top: 2px solid transparent;
	border-image: var(--gradient-cta) 1;
	margin-top: auto;
}

.sub_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	background-color: var(--bg-primary);
	color: var(--accent-teal);
	text-align: center;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	-webkit-text-stroke: 0;
}

.footer_container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 3.5rem 1.5rem 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 640px) {
	.footer_container { grid-template-columns: 1fr auto; }
}

.footer_brand .footer_logo {
	height: 48px;
	width: auto;
	display: block;
	margin-bottom: 0.6rem;
}
.footer_brand p {
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.6;
}
.footer_tagline { color: rgba(255,255,255,0.35); }

.footer_socials {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.9rem;
}
/* Same circular icon-only button look as .nav_discord_btn in the navbar
   (both apply .btn_outline_small as their base - transparent fill, purple
   ring that lights up teal on hover - see that class's own comment) - this
   override just resizes it for the footer instead of duplicating the
   look with its own bespoke flat-fill/solid-hover style. */
.footer_social_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 34px;
	height: 34px;
}

.footer_col h4 {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-bottom: 1rem;
}
.footer_col ul {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	list-style: none;
}
.footer_col ul a {
	font-size: 0.9rem;
	color: var(--text-muted);
}
.footer_col ul a:hover { color: #fff; }

.footer_bottom {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.footer_bottom p {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.25);
	-webkit-text-stroke: 0.5px black;
}
.footer_admin_link {
	color: rgba(255,255,255,0.2);
	font-size: 0.75rem;
}
.footer_admin_link:hover { color: var(--accent-teal); }

/* ── Blog Post ───────────────────────────────────────────── */
/* The centered breadcrumb/title/byline block and the left-aligned post
   body/reactions both live inside .page_hero now - this divider is what
   separates the two, since .page_hero itself has no border between its
   own content and whatever a caller puts inside it. */
.page_hero .blog_post_content {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.blog_post_byline {
	font-size: 0.9rem;
	color: var(--text-muted);
}

/* usr_users.about, shown only when the post's author (blg_blogs.author, a
   username snapshot - see blogController::show()) resolves to a login with
   a linked profile that has About text on file. Absent otherwise, no empty
   card. */
.blog_post_author {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius);
}
.blog_post_author_heading {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 0.9rem;
}
/* Avatar + bio sit in their own row below the heading (not beside it) -
   the heading spans the card's full width up top, the avatar aligns with
   just the bio text underneath it. */
.blog_post_author_row {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.blog_post_author_avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}
/* usr_users.avatar is optional - unset falls back to a colored initials
   circle (core\patreon::avatarColor()/avatarInitials(), the same helper
   already used for the supporters page's own avatar fallback), so this
   never renders as a blank/broken image. */
.blog_post_author_avatar_placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	-webkit-text-stroke: 0;
}
.blog_post_author_bio {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--text-muted);
}

.blog_post_content {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--text-primary);
}
/* Content comes from the admin WYSIWYG editor (src/views/admin/posts/_content_editor.php)
   now, not plain nl2br'd text, so its own headings/lists/blockquotes/links
   need real typography instead of relying on the browser's bare UA defaults. */
.blog_post_content p { margin-bottom: 1.25rem; }
.blog_post_content p:last-child { margin-bottom: 0; }
.blog_post_content h2, .blog_post_content h3 {
	margin: 2rem 0 1rem;
	font-weight: 800;
	line-height: 1.3;
}
.blog_post_content h2 { font-size: 1.5rem; }
.blog_post_content h3 { font-size: 1.2rem; }
.blog_post_content ul, .blog_post_content ol {
	margin: 0 0 1.25rem 1.5rem;
}
.blog_post_content li { margin-bottom: 0.4rem; }
.blog_post_content blockquote {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1.25rem;
	border-left: 3px solid var(--accent-teal);
	background: rgba(7,227,212,0.05);
	color: var(--text-muted);
}
.blog_post_content pre {
	margin: 0 0 1.25rem;
	padding: 1rem;
	background: rgba(255,255,255,0.05);
	border-radius: var(--radius);
	overflow-x: auto;
	font-size: 0.9rem;
}
.blog_post_content a { color: var(--accent-teal); }
.blog_post_content a:hover { text-decoration: underline; }

.blog_post_reactions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.reaction_btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 99px;
	color: rgba(255,255,255,0.6);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	-webkit-text-stroke: 0;
}
.reaction_btn:hover {
	background: rgba(255,255,255,0.09);
	border-color: rgba(255,255,255,0.22);
	color: #fff;
}
.reaction_btn.reaction_active {
	background: rgba(7,227,212,0.1);
	border-color: rgba(7,227,212,0.4);
	color: var(--accent-teal);
}
.reaction_count { font-size: 0.85rem; }

.blog_post_footer {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.blog_post_comments {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.blog_comments_empty {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}
.blog_comment_list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 1.75rem;
}
.blog_comment {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
}
.blog_comment_meta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}
.blog_comment_name {
	font-weight: 700;
	color: var(--accent-teal);
}
.blog_comment_date {
	font-size: 0.8rem;
	color: var(--text-muted);
}
.blog_comment_body {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-primary);
}
.blog_comment_actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.blog_comment_actions_left {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.blog_comment_reply_btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	-webkit-text-stroke: 0;
}
.blog_comment_reply_btn:hover {
	color: var(--accent-teal);
}
.blog_comment_delete_form {
	display: inline;
}
.blog_comment_delete_btn {
	background: none;
	border: none;
	padding: 0;
	color: rgba(239,68,68,0.7);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	-webkit-text-stroke: 0;
}
.blog_comment_delete_btn:hover {
	color: #f87171;
}
.blog_comment_reactions {
	display: flex;
	gap: 0.5rem;
}
.reaction_btn_small {
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
}
.reaction_btn_small .reaction_count {
	font-size: 0.75rem;
}
/* Replies nest under their parent, indented and left-bordered so the
   thread's depth is visually obvious, up to blog/show.php's $max_nest_depth -
   past that, .blog_comment_replies_flat below drops the indent so the
   reaction row (like/dislike buttons, Reply, Delete) doesn't keep getting
   squeezed narrower with every extra level of a long thread. */
.blog_comment_replies {
	list-style: none;
	margin: 0.75rem 0 0 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.blog_comment_replies_flat {
	margin-left: 0;
	padding-left: 0;
	border-left: none;
}
/* Once nesting is capped, the comment card itself carries a thin left
   accent (instead of the wrapping <ul>'s border) so it still visually
   reads as "part of a thread", without eating any horizontal space. */
.blog_comment_flat {
	border-left: 2px solid rgba(7,227,212,0.25);
}
/* Zeroing .blog_comment_replies_flat above only cancels that <ul>'s own
   margin/padding/border - it doesn't stop .blog_comment's own left
   padding+border (1.25rem + border) from pushing every subsequent flat
   reply another notch right, since a flat reply's own <ul> still nests
   inside its flat parent's padding box. Once a reply is already flat, its
   own reply list is pulled back out by exactly that amount, so depth
   beyond the cap stays pinned at one fixed column instead of still
   creeping rightward one card-padding at a time. */
.blog_comment_flat > .blog_comment_replies_flat {
	margin-left: calc(-1.25rem - 2px);
}
.blog_comment_replying_to_link {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin: 0 0 0.5rem;
}
.blog_comment_replying_to_link a {
	color: var(--accent-teal);
	font-weight: 600;
}
.blog_comment_replying_to_link a:hover {
	text-decoration: underline;
}
/* Briefly flashed on the target comment by the "Replying to @X" click
   handler (blog/show.php) so landing on it after the manual scroll is
   unambiguous, since it's just one card among many otherwise-identical
   .blog_comment cards. */
.blog_comment_highlight {
	transition: background-color 0.3s ease, border-color 0.3s ease;
	background: rgba(7,227,212,0.12);
	border-color: rgba(7,227,212,0.4);
}
.blog_comment_replying_to {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin: 0;
}
/*
 * The browser's own [hidden] { display: none } UA-stylesheet rule loses to
 * the plain-class display:flex rule above (same specificity, author CSS
 * wins over UA CSS regardless of source order) - without this override,
 * setting the hidden attribute via JS (see show.php's cancelReply()) has no
 * visible effect at all, since this element is always display:flex either
 * way. Higher-specificity [hidden] selector is what actually wins here.
 */
.blog_comment_replying_to[hidden] {
	display: none;
}
.blog_comment_replying_to strong {
	color: var(--accent-teal);
}
#blog_comment_reply_cancel {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-muted);
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
	-webkit-text-stroke: 0;
}
#blog_comment_reply_cancel:hover {
	color: #fff;
}
.blog_comment_form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 32rem;
}
.blog_comment_as {
	font-size: 0.9rem;
	color: var(--text-muted);
	margin: 0;
}
.blog_comment_as strong {
	color: var(--accent-teal);
}

/* ── Supporter Pages ─────────────────────────────────────── */
.support_page_header {
	margin-bottom: 2.5rem;
}
.support_page_header_cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}
.support_page_header_cta p {
	color: var(--text-muted);
	font-size: 0.95rem;
	margin: 0;
}

.support_intro {
	color: var(--text-muted);
	font-size: 1.05rem;
	line-height: 1.7;
	flex: 1;
	margin: 0;
}

.support_tier_block { margin-bottom: 3rem; }

.support_tier_header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.support_tier_label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0.25rem 0.75rem;
	border-radius: 99px;
	-webkit-text-stroke: 0;
}
.support_tier_label_premium {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
}
.support_tier_label_basic {
	background: rgba(7,227,212,0.15);
	color: var(--accent-teal);
}

.support_tier_price {
	color: var(--text-muted);
	font-size: 0.9rem;
}

.supporter_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.supporter_card {
	background: var(--bg-card);
	border: 2px solid rgba(var(--color-contributor-rgb),0.3);
	border-radius: var(--radius);
	padding: 1.5rem 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 180px;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.supporter_card:hover {
	border-color: rgba(var(--color-contributor-rgb),0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(var(--color-contributor-rgb),0.4);
}
.supporter_card_premium { border-color: rgba(var(--color-premium-rgb),0.3); }
.supporter_card_premium:hover {
	border-color: rgba(var(--color-premium-rgb),0.7);
	box-shadow: 0 12px 40px rgba(var(--color-premium-rgb),0.4);
}
/* Name banner at the top of the card, same bleed-via-negative-margin
   technique as .partner_banner - undoes .supporter_card's own padding.
   align-self: stretch for the same reason as .partner_banner - overrides
   .supporter_card's align-items: center, which would otherwise shrink this
   to fit its text instead of spanning the full card width. */
.supporter_banner {
	align-self: stretch;
	color: var(--color-contributor);
	background-color: rgba(var(--color-contributor-rgb),0.08);
	border-bottom: 1px solid rgba(var(--color-contributor-rgb),0.15);
	margin: -1.5rem -1rem 0;
}
.supporter_card_premium .supporter_banner {
	color: var(--color-premium);
	background-color: rgba(var(--color-premium-rgb),0.08);
	border-bottom-color: rgba(var(--color-premium-rgb),0.15);
}

.supporter_avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid rgba(var(--color-contributor-rgb),0.4);
}
.supporter_avatar_initials {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: 'Barlow Condensed', sans-serif;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	flex-shrink: 0;
	-webkit-text-stroke: 0;
	border: 2px solid rgba(var(--color-contributor-rgb),0.4);
}
.supporter_card_premium .supporter_avatar,
.supporter_card_premium .supporter_avatar_initials {
	border-color: rgba(var(--color-premium-rgb),0.6);
}

.supporter_since {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.supporter_tier_heading {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-contributor);
	margin-bottom: 1.25rem;
}
.supporter_tier_heading_premium { color: var(--color-premium); }

.supporter_divider {
	border: none;
	border-top: 1px solid rgba(255,255,255,0.08);
	margin: 2.5rem 0;
}

.support_cta {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid rgba(255,255,255,0.07);
	margin-top: 1rem;
}
.support_cta p {
	color: var(--text-muted);
	margin-bottom: 1.25rem;
	font-size: 1rem;
}

/* Teaser row on homepage */
.supporter_teaser_row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 2rem;
}
.supporter_teaser_card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--bg-card);
	border: 1px solid rgba(245,158,11,0.35);
	border-radius: var(--radius);
	padding: 0.5rem 0.9rem;
}
.supporter_teaser_card .supporter_avatar,
.supporter_teaser_card .supporter_avatar_initials {
	width: 34px;
	height: 34px;
	font-size: 0.8rem;
}
.supporter_teaser_name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary);
}
.supporter_teaser_more {
	color: var(--text-muted);
	font-size: 0.9rem;
	padding: 0 0.25rem;
}

/* Partner/sponsor teaser row - same compact pill shape as
   .supporter_teaser_card above, just recolored teal/purple per affiliate
   type instead of the fixed gold border. */
.partner_teaser_row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1.5rem;
}
.partner_teaser_card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--bg-card);
	border: 1px solid rgba(var(--color-partner-rgb),0.35);
	border-radius: var(--radius);
	padding: 0.5rem 0.9rem;
}
.partner_teaser_card_sponsor {
	border-color: rgba(var(--color-sponsor-rgb),0.35);
}
.partner_teaser_logo_wrap {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba(255,255,255,0.04);
	flex-shrink: 0;
}
.partner_teaser_logo {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}
.partner_teaser_placeholder {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--color-partner);
	color: #fff;
	flex-shrink: 0;
}
.partner_teaser_card_sponsor .partner_teaser_placeholder {
	background: var(--color-sponsor);
}
.partner_teaser_name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary);
}
.partner_teaser_more {
	color: var(--text-muted);
	font-size: 0.9rem;
	padding: 0 0.25rem;
}

@media (max-width: 640px) {
	.supporter_grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* Partners */
.partners_page_header {
	margin-bottom: 2.5rem;
}
.partners_page_header_cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}
.partners_page_header_cta p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}
.partners_intro {
	color: var(--text-muted);
	margin: 0;
	flex: 1;
}
.partner_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}
.partner_card {
	background: var(--bg-card);
	border: 2px solid rgba(var(--color-partner-rgb),0.3);
	border-radius: var(--radius);
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-align: center;
	min-height: 340px;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.partner_card:hover {
	border-color: rgba(var(--color-partner-rgb),0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(var(--color-partner-rgb),0.4);
}
/* Sponsors get the same treatment as partners, just recolored purple to
   distinguish the two affiliate types at a glance - see partners.php. */
.partner_card_sponsor {
	border-color: rgba(var(--color-sponsor-rgb),0.3);
}
.partner_card_sponsor:hover {
	border-color: rgba(var(--color-sponsor-rgb),0.7);
	box-shadow: 0 12px 40px rgba(var(--color-sponsor-rgb),0.4);
}
/* Name banner at the top of the card, bled out to the card's own edges via
   negative margins (undoing .partner_card's own padding) - the flex gap
   on .partner_card handles the space below it, so no bottom margin here.
   align-self: stretch overrides .partner_card's own align-items: center,
   which would otherwise shrink this block to fit its text instead of
   spanning the full card width - unlike the event/blog/driver cards this
   .card_banner pattern was copied from, .partner_card/.supporter_card
   deliberately center their other content, so this needs the override. */
.partner_banner {
	align-self: stretch;
	color: var(--color-partner);
	background-color: rgba(var(--color-partner-rgb),0.08);
	border-bottom: 1px solid rgba(var(--color-partner-rgb),0.15);
	margin: -2rem -1.5rem 0;
}
.partner_card_sponsor .partner_banner {
	color: var(--color-sponsor);
	background-color: rgba(var(--color-sponsor-rgb),0.08);
	border-bottom-color: rgba(var(--color-sponsor-rgb),0.15);
}
.partner_logo_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	border: 2px solid rgba(var(--color-partner-rgb),0.4);
	flex-shrink: 0;
	overflow: hidden;
}
.partner_logo {
	max-height: 65%;
	max-width: 65%;
	object-fit: contain;
}
.partner_logo_placeholder {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--color-partner);
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 700;
	-webkit-text-stroke: 0;
	border: 2px solid rgba(var(--color-partner-rgb),0.4);
}
.partner_card_sponsor .partner_logo_wrap,
.partner_card_sponsor .partner_logo_placeholder {
	border-color: rgba(var(--color-sponsor-rgb),0.4);
}
.partner_card_sponsor .partner_logo_placeholder {
	background: var(--color-sponsor);
	color: #fff;
}
.partner_name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}
.partner_description {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.5;
}
.partner_visit_btn {
	/* Pushes the button to the bottom of .partner_card regardless of how much
	   space the name/description above it take up - an auto margin on a
	   single flex item wins over the parent's justify-content: center, which
	   only distributes leftover space around the group as a whole. */
	margin-top: auto;
}

/* Greazy Buddy intro sections - /greazy-buddy. Image beside text, stacked
   on mobile - same mobile-first grid-then-expand pattern as .contact_grid
   above, just flex instead of grid since there are only ever two children
   here. .buddy_intro_reverse flips which side the image sits on so each
   row in a row - row - row sequence alternates left-to-right instead of
   reading the same way every time. Multiple .buddy_intro rows can sit
   under one shared heading (see the "Meet Greazy Buddy" intro, three rows
   under a single <h2>) - the gap between stacked rows in that case comes
   from the adjacent-sibling rule below, not from this element itself. */
.buddy_intro {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
}
.buddy_intro + .buddy_intro {
	margin-top: 2.5rem;
}
@media (min-width: 768px) {
	.buddy_intro { flex-direction: row; }
	.buddy_intro_reverse { flex-direction: row-reverse; }
}
.buddy_intro_media {
	flex: 0 0 auto;
	width: 100%;
	max-width: 180px;
}
/* Smaller variant - the welcome-wave image is the page's opening beat, not
   the main visual of its row, so it doesn't need as much room as the
   others. */
.buddy_intro_media_sm {
	max-width: 120px;
}
.buddy_intro_text {
	flex: 1;
}
.buddy_intro_text .section_title {
	margin-left: 0;
	margin-right: 0;
}
.buddy_intro_text p {
	color: var(--text-muted);
	margin-bottom: 1rem;
	line-height: 1.6;
}
.buddy_intro_text p:last-child {
	margin-bottom: 0;
}

/* Greazy Buddy features - /greazy-buddy. Same card language as
   .partner_card/.event_card/.driver_card/.blog_card elsewhere on the site
   (2px border at 0.3 opacity, hover lift + shadow at 0.4, .card_banner name
   strip with the gradient cap) - previously this had its own one-off look
   (plain <h3>, teal accent, no banner), which is exactly why it read as
   inconsistent with every other card grid on the site. Purple
   (--color-sponsor) here, same as .partner_card_sponsor - Greazy Buddy is
   this project's own in-house tool/product, not a partner or a supporter
   tier, but purple reads as "this project's own thing" already via the
   league car colour (see --gradient-cta's comment), so it fits without
   needing a third accent colour invented just for this page. */
.buddy_feature_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}
.buddy_feature_card {
	background: var(--bg-card);
	border: 2px solid rgba(var(--color-sponsor-rgb),0.3);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	padding: 1.5rem;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.buddy_feature_card:hover {
	border-color: rgba(var(--color-sponsor-rgb),0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(var(--color-sponsor-rgb),0.4);
}
/* Bled out to the card's own edges via negative margins, same technique as
   .partner_banner/.supporter_banner - undoes .buddy_feature_card's own
   padding, and align-self: stretch overrides the card's centered
   align-items so the banner spans the full card width. */
.buddy_feature_banner {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--color-sponsor);
	background-color: rgba(var(--color-sponsor-rgb),0.08);
	border-bottom: 1px solid rgba(var(--color-sponsor-rgb),0.15);
	margin: -1.5rem -1.5rem 0;
}
.buddy_feature_icon {
	display: flex;
	align-items: center;
	color: var(--color-sponsor);
}
.buddy_feature_desc {
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
}

/* Supported games - /greazy-buddy, "Built in-house, by us". Teal, not the
   purple used by .buddy_feature_card above - this is a compatibility list,
   not a feature, and staying teal (this site's primary/neutral accent)
   keeps the page from reading as "everything is purple". Logo files are
   shared with core\simgridClient::GAME_LOGOS (public/assets/img/games/) -
   adding a new game here is just a new $games entry in
   greazyBuddyController, no new asset location to manage. */
.buddy_games_title {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-size: 1.1rem;
}
.buddy_game_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.buddy_game_card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 220px;
	background: var(--bg-card);
	border: 2px solid rgba(var(--color-partner-rgb),0.3);
	border-radius: var(--radius);
	padding: 1.25rem 1rem;
	text-align: center;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.buddy_game_card:hover {
	border-color: rgba(var(--color-partner-rgb),0.7);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(var(--color-partner-rgb),0.4);
}
.buddy_game_logo {
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
}
.buddy_game_name {
	font-size: 0.9rem;
	font-weight: 600;
}
.buddy_game_status {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	-webkit-text-stroke: 0;
}
.buddy_game_status_supported {
	color: #2ecc71;
	background: rgba(46,204,113,0.12);
}
.buddy_game_status_wip {
	color: #f1c40f;
	background: rgba(241,196,15,0.12);
}