/* =========================================================
   Castlewellan Town FC — theme styles
   Palette from the club crest: forest green / black / white
   ========================================================= */

:root {
	--green: #46693d;
	--green-dark: #35502e;
	--green-deep: #223420;
	--ink: #0c120a;
	--ink-2: #141b12;
	--ink-3: #1d2619;
	/* A true grey (not another near-black) for the other person's chat
	   bubble, so it doesn't read as "black" next to --green's own-message
	   bubble — a faint green undertone keeps it inside the palette. */
	--grey: #3d4640;
	--paper: #f5f6f3;
	--white: #ffffff;
	--line: #e2e6dd;
	--line-dark: rgba(255, 255, 255, 0.12);
	--muted: #677062;
	--muted-dark: #9aa694;
	--accent: #46693d;
	--accent-dark: #35502e;
	/* Brighter tint of the same crest green, for text/indicators on dark backgrounds where --accent itself wouldn't read. */
	--accent-light: #59b243;
	--win: #3d8b4f;
	--draw: #8b9186;
	--loss: #c5453e;
	--radius: 14px;
	--radius-sm: 9px;
	--shadow: 0 10px 30px rgba(12, 18, 10, 0.1);
	--shadow-sm: 0 3px 12px rgba(12, 18, 10, 0.08);
	--font-display: 'Oswald', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--container: 1200px;
}

/* ---------- Reset & base ---------- */

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

html {
	overflow-x: hidden;
	/* Stop iOS Safari inflating text sizes (breaks single-line layouts). */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

[hidden] {
	display: none !important;
}

a {
	color: var(--green);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}

.container--narrow {
	max-width: 780px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent);
	color: var(--white);
	padding: 10px 18px;
	z-index: 200;
	font-weight: 700;
}

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

/* ---------- Buttons & chips ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn--accent {
	background: var(--accent);
	color: var(--white);
}

.btn--accent:hover {
	background: var(--accent-dark);
}

.btn--green {
	background: var(--green);
	color: var(--white);
}

.btn--outline {
	border-color: currentColor;
	color: inherit;
	background: transparent;
}

.btn svg {
	width: 18px;
	height: 18px;
}

.chip {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 4px;
}

.chip--cat {
	background: var(--accent);
	color: var(--white);
}

.team-chip {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green);
	background: rgba(70, 105, 61, 0.12);
	border-radius: 4px;
	padding: 2px 8px;
}

.section--dark .team-chip,
.matchday-strip .team-chip {
	color: var(--white);
	background: rgba(70, 105, 61, 0.35);
}

/* ---------- Header ---------- */

.topbar {
	background: var(--ink);
	color: var(--muted-dark);
	font-size: 12.5px;
	letter-spacing: 0.02em;
}

.topbar__inner {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	min-height: 34px;
	gap: 16px;
}

.topbar__note {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topbar__social {
	display: flex;
	flex: none;
	gap: 14px;
}

.topbar__social a {
	color: var(--muted-dark);
	display: inline-flex;
	transition: color 0.15s;
}

.topbar__social a:hover {
	color: var(--white);
}

.topbar__social svg {
	width: 15px;
	height: 15px;
}

.navbar {
	background: linear-gradient(180deg, var(--ink-2), var(--ink));
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--line-dark);
}

.navbar__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 74px;
}

.navbar__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	margin-right: auto;
}

.navbar__crest {
	width: 54px;
	height: 54px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.navbar__name {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.navbar__club {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white);
}

.navbar__fc {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--muted-dark);
}

.nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.nav-menu li {
	position: relative;
}

.nav-menu a {
	display: block;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	padding: 26px 14px;
	position: relative;
	transition: color 0.15s;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
	color: var(--white);
}

.nav-menu > li > a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 16px;
	height: 3px;
	border-radius: 2px;
	background: var(--white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.nav-menu > li > a:hover::after,
.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after {
	transform: scaleX(1);
}

/* Dropdowns */
.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ink-2);
	border: 1px solid var(--line-dark);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	list-style: none;
	margin: 0;
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s, transform 0.15s;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu a {
	padding: 10px 18px;
	font-size: 13.5px;
}

.navbar__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
}

.navbar__burger {
	display: block;
	width: 26px;
}

.navbar__burger i {
	display: block;
	height: 3px;
	background: var(--white);
	border-radius: 2px;
	margin: 5px 0;
	transition: transform 0.2s, opacity 0.2s;
}

.nav-open .navbar__burger i:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.nav-open .navbar__burger i:nth-child(2) {
	opacity: 0;
}

.nav-open .navbar__burger i:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}

.hero__slides {
	position: relative;
	min-height: clamp(440px, 62vh, 640px);
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	background-color: var(--green-deep);
}

/* Posts without a featured image: club gradient + crest watermark. */
.hero__media--fallback {
	background-image:
		linear-gradient(100deg, rgba(9, 14, 8, 0.9) 25%, rgba(9, 14, 8, 0.45) 60%, rgba(9, 14, 8, 0.2)),
		url('../img/crest.png'),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 26px),
		linear-gradient(140deg, var(--green-dark), var(--ink) 75%);
	background-repeat: no-repeat;
	background-size: auto, auto 76%, auto, auto;
	background-position: center, right -12% center, center, center;
}

@media (max-width: 640px) {
	.hero__media--fallback {
		background-size: auto, auto 46%, auto, auto;
		background-position: center, right -30px top 24px, center, center;
	}
}

.hero__slide:not(.is-active) .hero__media {
	transform: scale(1.04);
}

.hero__slide.is-active .hero__media {
	transform: scale(1);
	transition: transform 6s ease-out;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(6, 10, 5, 0.94) 0%, rgba(6, 10, 5, 0.45) 45%, rgba(6, 10, 5, 0.12) 75%),
		linear-gradient(100deg, rgba(6, 10, 5, 0.55) 0%, transparent 55%);
}

.hero__content {
	position: relative;
	width: 100%;
	padding-bottom: clamp(64px, 9vh, 96px);
	max-width: var(--container);
}

.hero__title {
	font-size: clamp(28px, 4.6vw, 54px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	max-width: 17em;
	margin: 14px 0 10px;
}

.hero__title a {
	color: var(--white);
	text-decoration: none;
}

.hero__title a:hover {
	color: var(--accent-light);
}

.hero__excerpt {
	max-width: 560px;
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15.5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero__meta {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.66);
}

.hero__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-light);
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	font-family: var(--font-display);
	letter-spacing: 0.08em;
	font-size: 14px;
}

.hero__more svg {
	width: 17px;
	height: 17px;
	transition: transform 0.15s;
}

.hero__more:hover svg {
	transform: translateX(4px);
}

.hero__rail {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	transform: translateY(-50%);
}

.hero__rail-item {
	background: rgba(20, 27, 18, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-sm);
	padding: 12px 14px 14px;
	text-align: left;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.15s, border-color 0.15s;
}

.hero__rail-item:hover,
.hero__rail-item.is-active {
	color: var(--white);
	border-color: rgba(89, 178, 67, 0.5);
}

.hero__rail-bar {
	display: block;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 9px;
}

.hero__rail-bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent-light);
}

.hero__rail-item.is-active .hero__rail-bar i {
	animation: railfill var(--hero-interval, 6.5s) linear forwards;
}

@keyframes railfill {
	to {
		width: 100%;
	}
}

.hero__rail-title {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Matchday strip ---------- */

.matchday-strip {
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 26px),
		linear-gradient(140deg, var(--green-deep), var(--ink) 70%);
	color: var(--white);
	padding: clamp(28px, 5vw, 56px) 0;
}

.matchday-strip__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
	gap: 18px;
}

.md-card {
	min-width: 0;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.md-card__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-light);
	margin: 0;
}

.md-card__comp {
	font-size: 13px;
	color: var(--muted-dark);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.md-card__teams,
.md-card__scoreline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.md-card__team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	text-align: center;
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.md-card__vs {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--muted-dark);
}

.md-card__score {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 3.2vw, 40px);
	letter-spacing: 0.03em;
	white-space: nowrap;
	padding: 2px 14px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.07);
}

.md-card__score--w {
	color: var(--accent-light);
}

.md-card__score--l {
	color: #ff8d86;
}

.md-card__when {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.75);
}

.md-card__when svg {
	width: 16px;
	height: 16px;
	color: var(--accent-light);
	flex: none;
}

.countdown {
	display: flex;
	gap: 14px;
	margin-top: 2px;
}

.countdown span {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-dark);
	min-width: 44px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-sm);
	padding: 7px 6px 6px;
}

.countdown b {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--white);
	line-height: 1.1;
}

.md-card__pos {
	display: flex;
	align-items: center;
	gap: 16px;
}

.md-card__pos-num {
	font-family: var(--font-display);
	font-size: 58px;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
}

.md-card__pos-num sup {
	font-size: 22px;
	color: var(--accent-light);
}

.md-card__pos-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	font-size: 13.5px;
	color: var(--muted-dark);
}

.md-card__pos-meta b {
	color: var(--white);
	font-size: 16px;
}

.md-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-light);
	text-decoration: none;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13.5px;
}

.md-card__link svg {
	width: 15px;
	height: 15px;
}

/* ---------- Sections ---------- */

.section {
	padding: clamp(44px, 7vw, 84px) 0;
}

.section--dark {
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 26px),
		var(--ink);
	color: var(--white);
}

.section--tint {
	background: #ecefe8;
}

.section--sponsors {
	background: var(--white);
	border-top: 1px solid var(--line);
}

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.section__title {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
	position: relative;
	padding-left: 18px;
}

.section__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8%;
	bottom: 8%;
	width: 5px;
	border-radius: 3px;
	background: linear-gradient(var(--accent-light), var(--green-dark));
}

.section__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--green);
	white-space: nowrap;
}

.section--dark .section__more {
	color: var(--accent-light);
}

.section__more svg {
	width: 16px;
	height: 16px;
	transition: transform 0.15s;
}

.section__more:hover svg {
	transform: translateX(4px);
}

/* ---------- News cards ---------- */

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.news-card {
	min-width: 0;
}

.news-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-card {
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.news-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.news-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(140deg, var(--green-dark), var(--green-deep));
	overflow: hidden;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.news-card:hover .news-card__media img {
	transform: scale(1.045);
}

.news-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
}

.news-card__media .chip--cat {
	position: absolute;
	left: 12px;
	bottom: 12px;
}

.news-card__body {
	padding: 16px 18px 18px;
}

.news-card__title {
	font-family: var(--font-body);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card__date {
	font-size: 12.5px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---------- Fixtures / results ---------- */

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 32px;
	align-items: start;
}

.split__col {
	min-width: 0;
}

.split__label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted-dark);
	margin-bottom: 16px;
}

.fixture-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fixture-month {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 18px 0 4px;
}

.section--dark .fixture-month {
	color: var(--muted-dark);
}

.fixture-card,
.result-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	box-shadow: var(--shadow-sm);
}

.section--dark .fixture-card,
.section--dark .result-card {
	background: rgba(255, 255, 255, 0.045);
	border-color: var(--line-dark);
	box-shadow: none;
}

.result-card {
	border-left: 4px solid var(--draw);
}

.result-card--w {
	border-left-color: var(--win);
}

.result-card--l {
	border-left-color: var(--loss);
}

.fixture-card.is-postponed {
	opacity: 0.65;
}

.fixture-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-bottom: 10px;
}

.section--dark .fixture-card__meta {
	color: var(--muted-dark);
}

.fixture-card__meta .form-dot {
	margin-left: auto;
}

.fixture-card__date {
	font-weight: 700;
}

.fixture-card__teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

.fixture-card__teams {
	min-width: 0;
}

.fixture-card__team {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
}

.fixture-card__team--home {
	justify-content: flex-end;
	text-align: right;
}

.fixture-card__name {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fixture-card__ko {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--green);
	background: rgba(70, 105, 61, 0.1);
	border-radius: 6px;
	padding: 5px 10px;
	white-space: nowrap;
}

.section--dark .fixture-card__ko {
	color: var(--accent-light);
	background: rgba(89, 178, 67, 0.16);
}

.fixture-card__ko--pp {
	color: var(--loss);
	background: rgba(197, 69, 62, 0.1);
}

.result-card__score {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
	padding: 2px 10px;
	border-radius: 6px;
	background: rgba(12, 18, 10, 0.06);
}

.section--dark .result-card__score {
	background: rgba(255, 255, 255, 0.08);
}

.result-card__score i {
	font-style: normal;
	color: var(--muted);
	font-size: 17px;
	margin: 0 2px;
}

.fixture-card__venue {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 8px;
}

.crest {
	width: var(--crest-size, 48px);
	height: var(--crest-size, 48px);
	object-fit: contain;
}

.club-badge {
	flex: none;
	width: var(--badge-size, 34px);
	height: var(--badge-size, 34px);
	object-fit: contain;
	border-radius: 4px;
}

.club-badge--mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--badge-size, 34px);
	height: var(--badge-size, 34px);
	border-radius: 50%;
	background: linear-gradient(140deg, var(--green), var(--green-deep));
	color: var(--white);
	font-family: var(--font-display);
	font-size: calc(var(--badge-size, 34px) * 0.38);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------- Form dots ---------- */

.form-row {
	display: inline-flex;
	gap: 4px;
}

.form-row--lg {
	gap: 6px;
}

.form-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 10.5px;
	font-weight: 800;
	color: var(--white);
	background: var(--draw);
}

.form-row--lg .form-dot {
	width: 26px;
	height: 26px;
	font-size: 12.5px;
}

.form-dot--w {
	background: var(--win);
}

.form-dot--l {
	background: var(--loss);
}

/* ---------- League table ---------- */

.league-table-wrap {
	overflow-x: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
}

.section--dark .league-table-wrap {
	border-color: var(--line-dark);
	box-shadow: none;
}

.league-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	min-width: 520px;
}

.league-table--compact {
	min-width: 420px;
}

.league-table th,
.league-table td {
	padding: 9px 10px;
	text-align: center;
	white-space: nowrap;
}

.league-table thead th {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--white);
	background: var(--green-deep);
}

.league-table tbody tr {
	border-top: 1px solid var(--line);
}

.league-table tbody tr:nth-child(even) {
	background: rgba(12, 18, 10, 0.025);
}

.league-table .col-team {
	text-align: left;
	min-width: 170px;
}

.league-table td.col-team {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	white-space: normal;
}

.league-table .col-pos {
	font-family: var(--font-display);
	font-weight: 600;
}

.league-table .col-pts {
	font-weight: 800;
}

.league-table tr.is-us {
	background: rgba(70, 105, 61, 0.1) !important;
	box-shadow: inset 4px 0 0 var(--accent);
}

.league-table tr.is-us .col-team span {
	color: var(--green-dark);
}

/* ---------- Klubfunder: support the club ---------- */

.section--klubfunder {
	position: relative;
	overflow: hidden;
	color: var(--white);
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 26px),
		linear-gradient(160deg, var(--green-dark) 0%, var(--green-deep) 55%, var(--ink) 100%);
}

.kf-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.kf-bg::before,
.kf-bg::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.35;
}

.kf-bg::before {
	width: 460px;
	height: 460px;
	top: -180px;
	right: -120px;
	background: radial-gradient(circle, var(--accent-light), transparent 70%);
}

.kf-bg::after {
	width: 380px;
	height: 380px;
	bottom: -200px;
	left: -100px;
	background: radial-gradient(circle, var(--win), transparent 70%);
	opacity: 0.22;
}

.section--klubfunder .container {
	position: relative;
	z-index: 1;
}

.kf-head {
	max-width: 680px;
	margin: 0 auto 40px;
	text-align: center;
}

.kf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-light);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 6px 14px 6px 12px;
	margin-bottom: 16px;
}

.kf-eyebrow svg {
	width: 14px;
	height: 14px;
}

.section--klubfunder .section__title {
	margin-bottom: 14px;
}

.kf-sub {
	color: var(--muted-dark);
	font-size: 16px;
	line-height: 1.65;
}

.kf-stats {
	display: flex;
	justify-content: center;
	gap: clamp(28px, 6vw, 64px);
	margin: 0 auto 48px;
	flex-wrap: wrap;
}

.kf-stat {
	text-align: center;
}

.kf-stat__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(32px, 5vw, 46px);
	font-weight: 700;
	line-height: 1;
	color: var(--white);
}

.kf-stat__label {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted-dark);
}

.kf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	margin-bottom: 36px;
}

.kf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 22px 22px 20px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kf-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.kf-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.kf-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-dark);
	background: rgba(70, 105, 61, 0.12);
	border-radius: 999px;
	padding: 5px 11px 5px 9px;
}

.kf-card__badge svg {
	width: 14px;
	height: 14px;
}

.kf-card__badge--fundraiser {
	color: #9a5b00;
	background: rgba(224, 145, 20, 0.15);
}

.kf-card__badge--shop {
	color: #1f5fa8;
	background: rgba(31, 95, 168, 0.12);
}

.kf-card__title {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.kf-card__teaser {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.55;
	margin: 0 0 18px;
	flex: 1;
}

.kf-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.kf-card__price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--green-dark);
}

.kf-card__btn {
	padding: 8px 16px;
	font-size: 13px;
}

.kf-card__btn svg {
	width: 14px;
	height: 14px;
	transition: transform 0.15s;
}

.kf-card__btn:hover svg {
	transform: translateX(3px);
}

/* Days-left progress ring: a light SVG radial cue, real number stated in .kf-ring__num. */
.kf-ring {
	position: relative;
	width: 44px;
	height: 44px;
	flex: none;
}

.kf-ring svg {
	width: 44px;
	height: 44px;
	transform: rotate(-90deg);
}

.kf-ring__track {
	fill: none;
	stroke: var(--line);
	stroke-width: 3.5;
}

.kf-ring__fill {
	fill: none;
	stroke: var(--accent);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 113;
	stroke-dashoffset: 113;
	transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.kf-ring.is-visible .kf-ring__fill {
	stroke-dashoffset: calc(113 - (113 * var(--pct, 0) / 100));
}

.kf-ring__num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

.kf-foot {
	text-align: center;
}

.kf-powered {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted-dark);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.kf-powered svg {
	width: 13px;
	height: 13px;
}

.kf-powered:hover {
	color: var(--white);
	border-color: currentColor;
}

.section--klubfunder .empty-note {
	text-align: center;
	color: var(--muted-dark);
}

/* Reveal-on-scroll: JS toggles .is-visible; without JS (or reduced motion) content is visible by default. */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.no-js .reveal,
.reveal.no-reveal {
	opacity: 1;
	transform: none;
}

/* ---------- Klubfunder modal ---------- */

body.kf-modal-open {
	overflow: hidden;
}

.kf-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(10, 14, 8, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.kf-modal-overlay[hidden] {
	display: none;
}

.kf-modal-overlay.is-open {
	opacity: 1;
}

.kf-modal {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 34px 30px 30px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
	transform: scale(0.94) translateY(10px);
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.kf-modal-overlay.is-open .kf-modal {
	transform: none;
}

.kf-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	border: none;
	border-radius: 50%;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.15s;
}

.kf-modal__close:hover {
	background: var(--line);
}

.kf-modal__close svg {
	width: 16px;
	height: 16px;
}

.kf-modal__eyebrow {
	margin-bottom: 12px;
}

.kf-modal__title {
	font-family: var(--font-body);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}

.kf-modal__closing {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--green-dark);
	margin: 0 0 16px;
}

.kf-modal__closing svg {
	width: 16px;
	height: 16px;
}

.kf-modal__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-2);
}

.kf-modal__desc p:first-child {
	margin-top: 0;
}

.kf-modal__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.kf-modal__price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--green-dark);
}

@media (max-width: 640px) {
	.kf-modal {
		padding: 28px 20px 24px;
	}

	.kf-modal__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.kf-modal__actions .btn {
		justify-content: center;
	}
}

/* ---------- Sponsors ---------- */

.sponsor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 18px;
}

.sponsor-grid--main {
	grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
	justify-content: center;
	margin-bottom: 26px;
}

.sponsor-tier-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--muted);
	margin: 0 0 14px;
}

.sponsor-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 22px 16px;
	text-decoration: none;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	transition: transform 0.15s, box-shadow 0.15s;
}

.sponsor-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.sponsor-card img {
	max-height: 74px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s, opacity 0.2s;
}

.sponsor-card--main img {
	max-height: 110px;
}

.sponsor-card:hover img {
	filter: none;
	opacity: 1;
}

.footer-sponsors {
	background: var(--white);
	border-top: 1px solid var(--line);
	padding: 26px 0;
}

.sponsor-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 34px;
}

.sponsor-strip__logo img {
	max-height: 52px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.2s, opacity 0.2s;
}

.sponsor-strip__logo:hover img {
	filter: none;
	opacity: 1;
}

/* ---------- Page band / matchday centre ---------- */

.page-band {
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 26px),
		linear-gradient(120deg, var(--green-deep), var(--ink) 75%);
	color: var(--white);
	padding: clamp(34px, 6vw, 64px) 0 clamp(26px, 4vw, 44px);
}

.page-band__title {
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}

/* A slimmer band for app-like pages (Town Talk) where the chat itself
   should dominate the screen, not the page chrome above it. */
.page-band--compact {
	padding: clamp(14px, 2.5vw, 22px) 0 clamp(10px, 2vw, 16px);
}

.page-band--compact .page-band__title {
	font-size: clamp(20px, 4vw, 28px);
}

@media (max-width: 640px) {
	.page-band--compact {
		padding: 12px 0 10px;
	}
}

.team-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.team-switch__pill {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	border: 1.5px solid var(--line-dark);
	border-radius: 999px;
	padding: 8px 20px;
	transition: all 0.15s;
}

.team-switch--section {
	margin: 0 0 26px;
}

.team-switch__pill:hover {
	border-color: rgba(89, 178, 67, 0.6);
	color: var(--white);
}

.team-switch__pill.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
	font-weight: 600;
}

.tabs__bar {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var(--line);
	margin-bottom: 26px;
}

.tabs__tab {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: none;
	border: 0;
	color: var(--muted);
	padding: 12px 20px;
	cursor: pointer;
	position: relative;
}

.tabs__tab.is-active {
	color: var(--ink);
	font-weight: 600;
}

.tabs__tab.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	background: var(--green);
}

.data-credit {
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--muted);
}

/* ---------- Single post ---------- */

.post-hero {
	position: relative;
	background: var(--ink);
	color: var(--white);
	min-height: clamp(320px, 52vh, 560px);
	display: flex;
	align-items: flex-end;
}

.post-hero--plain {
	min-height: 0;
	padding-top: clamp(40px, 6vw, 70px);
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 26px),
		linear-gradient(120deg, var(--green-deep), var(--ink) 75%);
}

.post-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 25%;
}

.post-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 10, 5, 0.93) 0%, rgba(6, 10, 5, 0.35) 55%, rgba(6, 10, 5, 0.1));
}

.post-hero__content {
	position: relative;
	width: 100%;
	padding-top: 40px;
	padding-bottom: clamp(28px, 5vw, 52px);
}

.post-hero__title {
	font-size: clamp(26px, 4vw, 46px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	max-width: 20em;
	margin: 12px 0 10px;
}

.post-hero__meta {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.post-single__body {
	max-width: 780px;
	padding-top: clamp(28px, 5vw, 52px);
	padding-bottom: clamp(28px, 5vw, 52px);
}

.entry-content {
	font-size: 17px;
	line-height: 1.75;
}

.entry-content img {
	border-radius: var(--radius-sm);
}

.entry-content a,
.editor-styles-wrapper a {
	color: var(--green-dark);
}

/* A solid-fill .btn (e.g. an Event block's CTA) dropped into post content
   is still a button, not a text link — .entry-content a above would
   otherwise win on specificity and repaint its white label dark-on-dark. */
.entry-content a.btn--accent,
.entry-content a.btn--green {
	color: var(--white);
}

.entry-content blockquote,
.editor-styles-wrapper blockquote {
	border-left: 4px solid var(--accent);
	margin: 1.4em 0;
	padding: 0.3em 0 0.3em 1.2em;
	font-style: italic;
	color: var(--muted);
}

/* Staff-only "Edit this post/page" link — only ever rendered for logged-in
   users who can edit, so styled to sit apart from the article itself. */
.entry-edit-link {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px dashed var(--line);
	font-size: 13px;
}

.entry-edit-link a {
	color: var(--muted);
	text-decoration: underline;
}

.entry-edit-link a:hover {
	color: var(--green-dark);
}

/* ---------- Block content: alignment, captions, buttons, gallery ---------- */

.entry-content::after {
	content: '';
	display: table;
	clear: both;
}

.entry-content .alignleft {
	float: left;
	margin: 6px 24px 16px 0;
}

.entry-content .alignright {
	float: right;
	margin: 6px 0 16px 24px;
}

.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .alignwide {
	width: 100vw;
	max-width: var(--container);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content figure,
.editor-styles-wrapper figure {
	margin: 1.5em 0;
}

.entry-content figcaption,
.editor-styles-wrapper figcaption,
.wp-caption-text,
.wp-element-caption {
	font-size: 13.5px;
	line-height: 1.4;
	font-style: italic;
	color: var(--muted);
	text-align: center;
	margin-top: 8px;
}

.entry-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 10px 22px;
	background: var(--accent);
	color: var(--white);
	text-decoration: none;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--green);
}

.entry-content .wp-block-buttons,
.editor-styles-wrapper .wp-block-buttons {
	gap: 12px;
}

.entry-content .wp-block-gallery .wp-block-image img,
.editor-styles-wrapper .wp-block-gallery .wp-block-image img {
	border-radius: var(--radius-sm);
}

/* The card (from ctfc_render_result()/ctfc_render_fixture(), shared with
   fixtures/results lists elsewhere) and the optional scorers strip render
   as one component: this wrapper owns the single border/radius/shadow/
   accent, and the card's own box styling is stripped back to plain
   content below so there's no seam between the two. */
.wp-block-ctfc-fixture-result {
	margin: 28px auto;
	max-width: 480px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.wp-block-ctfc-fixture-result--played {
	border-left: 4px solid var(--draw);
}

.wp-block-ctfc-fixture-result--w {
	border-left-color: var(--win);
}

.wp-block-ctfc-fixture-result--l {
	border-left-color: var(--loss);
}

.wp-block-ctfc-fixture-result .fixture-card,
.wp-block-ctfc-fixture-result .result-card {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.fixture-scorers {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 18px 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.fixture-scorers__col {
	flex: 1;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--ink);
}

.fixture-scorers__col--away {
	text-align: right;
}

.fixture-scorers__col li {
	line-height: 1.5;
}

.fixture-scorers__col li::before {
	content: '⚽ ';
}

.chip--recruit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--green);
	color: var(--white);
	margin-bottom: 10px;
}

.chip--recruit svg {
	width: 14px;
	height: 14px;
}

.recruit-block {
	margin: 28px auto;
	max-width: 480px;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent-dark);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 18px 22px;
}

.recruit-block__text {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.5;
}

.recruit-block__contact {
	/* Hanging indent, not flex: this is a wrapping sentence with a leading
	   icon, not a row of short fixed items — flex treats the whole run of
	   text as one item and centers it, which misaligns wrapped lines. */
	margin: 0;
	padding-left: 24px;
	text-indent: -24px;
	color: var(--muted);
}

.recruit-block__contact svg {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	text-indent: 0;
	vertical-align: -3px;
	color: var(--green);
}

.recruit-block__contact a {
	color: var(--green);
	font-weight: 600;
	text-decoration: underline;
}

.fixture-scorers__col--away li::before {
	content: '';
}

.fixture-scorers__col--away li::after {
	content: ' ⚽';
}

/* ---------- Event block ---------- */

.event-card {
	max-width: 640px;
	margin: 32px auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	position: relative;
}

.event-card--upcoming {
	border-left-color: var(--accent);
}

.event-card--live {
	border-left-color: var(--loss);
}

.event-card--past {
	border-left-color: var(--muted);
	opacity: 0.82;
}

.event-card__top {
	display: flex;
	gap: 20px;
	padding: 26px 26px 4px;
}

.event-card__date-badge {
	flex: none;
	width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background: linear-gradient(155deg, var(--green), var(--green-deep));
	color: var(--white);
	border-radius: var(--radius-sm);
	padding: 10px 6px;
	text-align: center;
}

.event-card__date-badge-day {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.event-card__date-badge-num {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
}

.event-card__date-badge-month {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.event-card__date-badge--tbc {
	background: var(--muted);
	padding: 18px 6px;
}

.event-card__heading {
	flex: 1;
	min-width: 0;
}

.chip--event {
	background: var(--ink);
	color: var(--accent-light);
	margin-bottom: 9px;
}

.event-card__title {
	font-size: clamp(19px, 2.6vw, 24px);
	margin: 0 0 12px;
	line-height: 1.2;
}

.event-card__meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--ink);
	margin-bottom: 7px;
}

.event-card__meta-row svg {
	width: 17px;
	height: 17px;
	color: var(--green);
	flex: none;
}

.event-card__description {
	padding: 14px 26px 0;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.65;
}

.event-card__description p:last-child {
	margin-bottom: 0;
}

/* Light-background countdown variant: the base .countdown styling
   (used on the homepage Next Match card) assumes a dark --ink parent. */
.countdown--light span {
	background: var(--paper);
	border-color: var(--line);
	color: var(--muted);
}

.countdown--light b {
	color: var(--green-dark);
}

.event-card .countdown,
.event-card .chip--live,
.event-card .chip--past {
	margin: 18px 26px 0;
}

.chip--live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(197, 69, 62, 0.1);
	color: var(--loss);
}

.chip--live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--loss);
	animation: chip-live-pulse 1.6s ease-in-out infinite;
}

@keyframes chip-live-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.4;
		transform: scale(0.7);
	}
}

.chip--past {
	background: rgba(103, 112, 98, 0.12);
	color: var(--muted);
}

/* A ticket-stub perforation between the info block and the actions row. */
.event-card__stub {
	position: relative;
	height: 1px;
	margin: 22px 0 0;
	border-top: 2px dashed var(--line);
}

.event-card__stub::before,
.event-card__stub::after {
	content: '';
	position: absolute;
	top: -10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--line);
}

.event-card__stub::before {
	left: -10px;
}

.event-card__stub::after {
	right: -10px;
}

.event-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 26px 26px;
}

.event-card__actions--single {
	justify-content: flex-end;
	padding-top: 22px;
}

.event-card__actions-secondary {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.event-card__season-cta {
	border-color: var(--green);
	color: var(--green);
}

.event-card__season-cta:hover {
	background: var(--green);
	color: var(--white);
}

.event-add-cal {
	position: relative;
}

.fixture-card__add-cal {
	margin-top: 12px;
}

.event-add-cal summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--green);
	padding: 9px 16px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	transition: border-color 0.15s;
}

.event-add-cal summary::-webkit-details-marker {
	display: none;
}

.event-add-cal summary svg {
	width: 16px;
	height: 16px;
}

.event-add-cal[open] summary,
.event-add-cal summary:hover {
	border-color: var(--green);
}

.event-add-cal__menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 6px;
	min-width: 200px;
	z-index: 5;
}

.event-add-cal__menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}

.event-add-cal__menu a:hover {
	background: var(--paper);
}

.event-card__cta {
	white-space: nowrap;
}

@media (max-width: 640px) {
	.event-card__top {
		flex-direction: column;
	}

	.event-card__date-badge {
		flex-direction: row;
		width: auto;
		align-self: flex-start;
		gap: 8px;
		padding: 8px 14px;
	}

	.event-card__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.event-card__actions--single {
		align-items: flex-end;
	}

	.event-add-cal__menu {
		left: auto;
		right: 0;
	}
}

.post-single__foot {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--ink);
}

/* ---------- Klubfunder campaigns block ---------- */
/* Reuses .kf-card/.kf-grid from the homepage Support the Club section, but
   as a plain outbound link rather than a "learn more" in-page modal — the
   block can be embedded on any post/page, not just the one that already
   carries the modal markup + JS, so it keeps no such dependency. */

.kf-card__days {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--muted);
	white-space: nowrap;
}

/* ---------- Site popup ---------- */
/* Same visual language as the Klubfunder modal (.kf-modal-overlay/.kf-modal)
   — fixed dim backdrop, centered white card, scale+fade transition — kept
   as its own set of classes since this one shows itself automatically on a
   timer rather than in response to a click. */

body.site-popup-open {
	overflow: hidden;
}

.site-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(10, 14, 8, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.site-popup-overlay[hidden] {
	display: none;
}

.site-popup-overlay.is-open {
	opacity: 1;
}

.site-popup {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 40px 30px 30px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
	transform: scale(0.94) translateY(10px);
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-popup-overlay.is-open .site-popup {
	transform: none;
}

.site-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	border: none;
	border-radius: 50%;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.15s;
}

.site-popup__close:hover {
	background: var(--line);
}

.site-popup__close svg {
	width: 16px;
	height: 16px;
}

.site-popup__body > :first-child {
	margin-top: 0;
}

.site-popup__body > :last-child {
	margin-bottom: 0;
}

.site-popup__body .recruit-block,
.site-popup__body .event-card {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.site-popup__body .recruit-block + .event-card,
.site-popup__body .event-card + .recruit-block,
.site-popup__body .recruit-block + .recruit-block,
.site-popup__body .event-card + .event-card {
	margin-top: 20px;
}

/* ---------- Pagination ---------- */

.pagination-wrap {
	margin-top: 36px;
}

.pagination .nav-links {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.pagination .page-numbers.current {
	background: var(--green);
	border-color: var(--green);
	color: var(--white);
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--ink);
	color: var(--muted-dark);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	padding-top: clamp(40px, 6vw, 64px);
	padding-bottom: clamp(30px, 5vw, 48px);
}

.site-footer__club {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white);
	margin: 14px 0 8px;
}

.site-footer__meta {
	font-size: 13.5px;
	margin: 0 0 16px;
}

.site-footer__social {
	display: flex;
	gap: 14px;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line-dark);
	color: var(--muted-dark);
	transition: all 0.15s;
}

.site-footer__social a:hover {
	color: var(--white);
	background: var(--accent);
	border-color: var(--accent);
}

.site-footer__social svg {
	width: 17px;
	height: 17px;
}

.site-footer__heading {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: 16px;
}

.footer-menu,
.site-footer .nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-menu a,
.site-footer .nav-menu a {
	color: var(--muted-dark);
	text-decoration: none;
	font-size: 14.5px;
	padding: 4px 0;
	display: inline-block;
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: 0;
}

.footer-menu a:hover,
.site-footer .nav-menu a:hover {
	color: var(--accent-light);
}

.site-footer .nav-menu a::after {
	display: none;
}

.site-footer__app p {
	font-size: 14px;
	margin: 0 0 14px;
}

.site-footer__ios-hint {
	font-size: 12.5px !important;
	color: var(--muted-dark);
	margin-top: 10px !important;
}

.site-footer__legal {
	border-top: 1px solid var(--line-dark);
	padding: 18px 0;
	font-size: 12.5px;
}

/* ---------- Misc ---------- */

.empty-note {
	color: var(--muted);
	font-size: 15px;
	background: rgba(12, 18, 10, 0.04);
	border: 1px dashed var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
}

.section--dark .empty-note,
.matchday-strip .empty-note {
	color: var(--muted-dark);
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--line-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
	.matchday-strip__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.md-card--table {
		grid-column: 1 / -1;
	}

	.news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Town Talk's own hamburger needs the same off-canvas nav drawer at
   every viewport width, not just the <880px range below — fullscreen
   chat hides the real site header (and its always-visible desktop nav)
   behind the chat overlay, so the drawer is the only way out once the
   Exit link is gone. Scoped to body.chat-fullscreen-active so ordinary
   desktop browsing is completely unaffected. */
/* .navbar is `position: sticky` with its own z-index:100, which makes it
   a stacking context — .navbar__nav's z-index:290 only wins locally
   inside that context, so the drawer would otherwise still render
   behind .chat-wrap.chat-fullscreen's z-index:250 as a whole. Raising
   the ancestor is what actually lets the drawer clear it — but only
   while the drawer is actually open, or the (otherwise off-screen)
   sticky navbar would poke above the fullscreen chat permanently. */
body.chat-fullscreen-active.nav-open .navbar {
	z-index: 291;
	/* .navbar's own dark gradient + border is what actually paints — hiding
	   its children (below) doesn't hide this, so without resetting it here
	   the now-raised .navbar renders as a solid bar across the top of the
	   fullscreen chat, with nothing visibly inside it. */
	background: none;
	border-bottom: none;
}

/* Raising .navbar also raises everything else painted at that level —
   the crest/brand row, the Matchday CTA, the site's own burger — since
   they're all its children. Only the drawer itself should actually be
   visible; the rest would otherwise flash the real site header in over
   the top of the fullscreen chat, which is what this hides. The topbar
   strip above .navbar was never raised, but hide it too for safety. */
body.chat-fullscreen-active.nav-open .topbar,
body.chat-fullscreen-active.nav-open .navbar__brand,
body.chat-fullscreen-active.nav-open .navbar__cta,
body.chat-fullscreen-active.nav-open .navbar__toggle {
	visibility: hidden;
}

body.chat-fullscreen-active .navbar__nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--ink-2);
	padding: 92px 26px 30px;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
	z-index: 290;
	box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
}

/* Hidden everywhere else — the normal hamburger-to-X morph on .navbar__toggle
   already covers closing the menu there. Only shown where that toggle is
   itself hidden (see above), i.e. reached via Town Talk's own app-bar
   button, which can never stack above this drawer to show its own X. */
.navbar__nav-close {
	display: none;
}

body.chat-fullscreen-active.nav-open .navbar__nav-close {
	display: flex;
	position: absolute;
	top: 20px;
	right: 20px;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	color: var(--white);
	cursor: pointer;
}

/* The WP admin bar sits fixed at 0-46px with z-index:99999 — above
   everything on this page including this drawer — so for logged-in staff
   it would otherwise cover the close button. */
body.admin-bar.chat-fullscreen-active.nav-open .navbar__nav-close {
	top: 66px;
}

body.chat-fullscreen-active.nav-open .navbar__nav {
	transform: translateX(0);
}

@media (max-width: 880px) {
	.navbar__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: var(--ink-2);
		padding: 92px 26px 30px;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		/* Above .chat-wrap.chat-fullscreen (250) so the menu opened from
		   inside Town Talk's own hamburger still slides in on top of it. */
		z-index: 290;
		box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
	}

	.nav-open .navbar__nav {
		transform: translateX(0);
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
	}

	.nav-menu a {
		padding: 13px 4px;
		font-size: 17px;
	}

	.nav-menu > li > a::after {
		display: none;
	}

	.nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		background: transparent;
		padding: 0 0 0 16px;
	}

	.navbar__toggle {
		display: block;
		position: relative;
		z-index: 291;
	}

	.navbar__cta {
		display: none;
	}

	.hero__rail {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	.hero__rail-title {
		display: none;
	}

	.hero__rail-item {
		padding: 10px 10px 8px;
	}
}

@media (max-width: 640px) {
	.topbar__note {
		font-size: 11px;
	}

	.navbar__club {
		font-size: 17px;
	}

	.navbar__fc {
		font-size: 10px;
		letter-spacing: 0.26em;
	}

	.matchday-strip__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-grid,
	.news-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.md-card__team {
		font-size: 13.5px;
	}

	.fixture-card__name {
		font-size: 13px;
	}

	.fixture-card__teams {
		gap: 8px;
	}

	.sponsor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tabs__tab {
		font-size: 14px;
		padding: 10px 14px;
	}

	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Contact form ---------- */

.contact-intro {
	max-width: 640px;
	margin: 0 0 28px;
	color: var(--muted);
	font-size: 17px;
}

.contact-form {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(22px, 4vw, 36px);
}

.contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.contact-form__field {
	margin: 0 0 18px;
}

.contact-form__field label {
	display: block;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.contact-form__field .req {
	color: var(--loss);
}

.contact-form__field .optional {
	color: var(--muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	background: var(--white);
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(70, 105, 61, 0.15);
}

.contact-form__field textarea {
	resize: vertical;
	min-height: 150px;
}

.contact-form__actions {
	margin: 4px 0 0;
}

/* Honeypot: moved off-screen, not display:none, so bots still "see" it. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin: 0 0 22px;
	font-weight: 500;
	border: 1.5px solid transparent;
}

.form-notice--success {
	background: rgba(61, 139, 79, 0.12);
	border-color: var(--win);
	color: #2c6339;
}

.form-notice--error {
	background: rgba(197, 69, 62, 0.1);
	border-color: var(--loss);
	color: #9c332d;
}

@media (max-width: 640px) {
	.contact-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Social: login / register / profile ---------- */

.contact-form__field select {
	width: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
}

.social-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

.social-panel h2 {
	margin-bottom: 14px;
}

.social-forgot {
	margin-top: 18px;
}

.social-forgot summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--green);
	margin-bottom: 12px;
}

.social-forgot[open] summary {
	margin-bottom: 16px;
}

@media (max-width: 900px) {
	.social-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Social: sign in with Google / Facebook / Apple ---------- */

.social-oauth__heading {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
	margin: 0 0 16px;
}

.social-oauth {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 360px;
	margin: 0 auto;
}

.social-oauth__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	padding: 11px 20px;
	border: 1.5px solid var(--line);
	background: var(--white);
	color: var(--ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.social-oauth__btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.social-oauth__btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.social-oauth__btn--google {
	background: var(--white);
	color: #1f1f1f;
	border-color: var(--line);
}

.social-oauth__btn--facebook {
	background: #1877f2;
	border-color: #1877f2;
	color: var(--white);
}

.social-oauth__btn--facebook svg {
	fill: var(--white);
}

.social-oauth__btn--apple {
	background: #000;
	border-color: #000;
	color: var(--white);
}

.social-oauth__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 360px;
	margin: 22px auto 0;
	color: var(--muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.social-oauth__divider::before,
.social-oauth__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line);
}

.profile-fields {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(22px, 4vw, 36px);
	margin-bottom: 24px;
}

.profile-field {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 6px 18px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}

.profile-field:last-child {
	border-bottom: none;
}

.profile-field__label {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.profile-badge {
	display: inline-block;
	background: rgba(70, 105, 61, 0.25);
	color: var(--green-deep);
	border-radius: 999px;
	padding: 4px 14px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Committee privilege — additive on top of any membership type, so it's
   always a separate icon next to the type badge, never merged into it. */
.crown-badge {
	display: inline-block;
	font-size: 13px;
	line-height: 1;
	cursor: default;
}

@media (max-width: 640px) {
	.profile-field {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Town Talk chat ---------- */

.section--chat {
	padding: 20px 0 0;
}

.section--chat {
	padding: 0;
}

/* Town Talk takes over the whole viewport by default, on every screen
   size — "chat-fullscreen" is the normal state, not a special one.
   Desktop/tablet can shrink it back to fit the page (see :not() below);
   the toggle is CSS-hidden on mobile, where that state doesn't exist. */
.chat-wrap {
	display: flex;
	flex-direction: column;
	background: var(--white);
}

.chat-wrap.chat-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 250;
	height: 100dvh;
}

body.admin-bar .chat-wrap.chat-fullscreen {
	top: 32px;
	height: calc(100dvh - 32px);
}

.chat-wrap:not(.chat-fullscreen) {
	max-width: var(--container);
	margin: clamp(16px, 3vw, 32px) auto;
	height: calc(100vh - 220px);
	min-height: 560px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* Persistent top strip shown only while the chat is taking over the
   screen — the only way out once the site header is hidden behind it. */
.chat-app-bar {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	padding-top: calc(12px + env(safe-area-inset-top, 0px));
	background: var(--paper);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	flex: none;
}

.chat-wrap.chat-fullscreen .chat-app-bar {
	display: flex;
}

.chat-app-bar__crest {
	flex-shrink: 0;
}

/* The shared .navbar__burger bars default to white for the dark site
   header — the app bar is light, so its own burger needs dark bars. */
.chat-app-bar .navbar__burger i {
	background: var(--ink);
}

.chat-app-bar__title {
	flex: 1;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 14px;
}

.chat-menu-toggle {
	display: flex;
	border: 0;
	background: none;
	padding: 8px;
	margin: -8px;
	cursor: pointer;
	flex-shrink: 0;
}

.chat-layout {
	flex: 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

/* ---------- Column 1: icon action rail ---------- */

.chat-rail {
	flex: 0 0 60px;
	background: var(--paper);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 8px;
}

.chat-rail__btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.chat-rail__btn:hover {
	background: rgba(12, 18, 10, 0.06);
}

.chat-rail__btn[aria-pressed="true"] {
	background: var(--green);
	color: var(--white);
}

/* Desktop/tablet: the rail is a narrow vertical strip, icon-only —
   there's no room for a label, and a hover title="" already explains
   each button. Mobile turns this on (see the bottom-tab-bar rule below)
   since touch has no hover/title equivalent. */
.chat-rail__label {
	display: none;
}

/* ---------- Generic modal shell (new channel, teamsheet, report…) ---------- */

.ctfc-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ctfc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 18, 10, 0.45);
	animation: ctfc-fade-in 0.15s ease-out;
}

.ctfc-modal__panel {
	position: relative;
	background: var(--white);
	border-radius: var(--radius);
	width: 100%;
	max-width: 440px;
	max-height: 85vh;
	overflow-y: auto;
	margin: 16px;
	animation: ctfc-sheet-in 0.2s ease-out;
}

.ctfc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-weight: 600;
	position: sticky;
	top: 0;
	background: var(--white);
	z-index: 1;
}

.ctfc-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	color: var(--muted);
	cursor: pointer;
	flex-shrink: 0;
}

.ctfc-modal__body {
	padding: 20px;
}

.ctfc-modal__panel--wide {
	max-width: 620px;
}

/* ---------- Member attendance stats (committee/coach) ---------- */

.member-stats__loading,
.member-stats__error {
	color: var(--muted);
	margin: 0;
}

.member-stats__row {
	margin-bottom: 22px;
}

.member-stats__row:last-child {
	margin-bottom: 0;
}

.member-stats__row-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	color: var(--muted);
}

.member-stats__pct {
	font-size: 20px;
	color: var(--ink);
	letter-spacing: 0;
	text-transform: none;
}

.member-stats__bar-track {
	background: var(--paper);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.member-stats__bar-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--green);
	transition: width 0.4s ease;
}

.member-stats__row:nth-child(2) .member-stats__bar-fill {
	background: var(--accent-dark);
}

.member-stats__row:nth-child(3) .member-stats__bar-fill {
	background: var(--green-deep);
}

.member-stats__note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted);
}

/* ---------- Teamsheet composer ---------- */

.teamsheet-type-toggle {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 500;
}

.teamsheet-type-toggle label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
}

/* .contact-form__field input's width:100%/border/padding (styled for text
   fields) would otherwise stretch these radios into wide invisible boxes,
   pushing the label text far away from the visible dot. */
.teamsheet-type-toggle input[type="radio"] {
	width: auto;
	background: none;
	border: none;
	padding: 0;
}

.teamsheet-youth-counts {
	display: flex;
	gap: 16px;
}

.teamsheet-youth-counts .contact-form__field {
	flex: 1;
}

.teamsheet-slot-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.teamsheet-slot-row__label {
	flex: 0 0 48px;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
}

.teamsheet-slot-row select,
.teamsheet-slot-row input {
	font-size: 16px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--line);
	padding: 8px 10px;
}

.teamsheet-slot-row select {
	flex: 1;
	min-width: 0;
}

.teamsheet-slot-row input[type="text"] {
	flex: 1;
	min-width: 0;
}

/* ---------- Teamsheet artifact card ---------- */

.teamsheet-card {
	width: 100%;
	max-width: 340px;
}

.teamsheet-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	margin-bottom: 10px;
}

.teamsheet-pitch {
	position: relative;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 3 / 4;
	background: linear-gradient(180deg, #3d7a3d, #2f632f);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
}

.teamsheet-pitch__circle {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	transform: translate(-50%, -50%);
	box-shadow: var(--shadow-sm);
}

.teamsheet-pitch__circle--gk {
	background: #f2c94c;
}

.teamsheet-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.teamsheet-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}

.teamsheet-legend__num {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

.teamsheet-legend__num--gk {
	background: #f2c94c;
}

.teamsheet-legend__pos {
	flex: 0 0 40px;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
}

.teamsheet-legend__subs-heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--muted);
	margin: 10px 0 4px;
}

/* ---------- Schedule view (replaces columns 2+3) ---------- */

.chat-schedule {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--white);
}

.chat-schedule__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	flex: none;
}

.chat-schedule__title {
	font-family: var(--font-display);
	font-weight: 600;
}

.chat-schedule__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	color: var(--muted);
	cursor: pointer;
}

.chat-schedule__body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px 32px;
}

.chat-schedule__empty {
	color: var(--muted);
	padding: 20px 0;
}

body.chat-schedule-open .chat-channels,
body.chat-schedule-open .chat-pane {
	display: none;
}

/* On mobile, opening Schedule doesn't clear .chat-open (the single-column
   pane/list toggle) — so when a channel is open behind it, the mobile
   `body.chat-open .chat-pane { display: flex }` rule below has equal
   specificity to the rule above and wins on source order, leaving the
   conversation showing behind the schedule view. This compound selector
   outranks it so Schedule always wins while it's open. */
body.chat-open.chat-schedule-open .chat-pane {
	display: none;
}

.chat-create-form {
	margin-top: 4px;
}

.chat-create-form .contact-form__field label {
	color: var(--muted);
}

.chat-create-form input,
.chat-create-form select {
	width: 100%;
	font-size: 16px; /* 16px+ stops iOS Safari zooming the page on focus */
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--line);
	background: var(--white);
	color: var(--ink);
	padding: 10px 12px;
}

.chat-create-form .contact-form__hint {
	display: block;
	font-size: 12px;
	color: var(--muted);
	margin-top: 4px;
}

.chat-create-form__error {
	color: var(--loss);
	font-size: 13px;
}

/* ---------- Column 2: channel list (inbox style) ---------- */

.chat-channels {
	flex: 0 0 300px;
	border-right: 1px solid var(--line);
	background: var(--paper);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Pull-to-refresh indicator: a collapsed (height:0) row that chat.js grows
   as the list is dragged down from the top, then either snaps back to 0
   (pull released early) or holds open and spins while the refresh is
   in flight — see the touch handlers around triggerChannelListRefresh(). */
.chat-channels__refresh {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 0;
	overflow: hidden;
	color: var(--muted);
	transition: height 0.2s ease;
}

.chat-channels__refresh.is-dragging {
	transition: none;
}

.chat-channels__refresh.is-spinning svg,
.chat-rail__btn.is-spinning svg {
	animation: chat-refresh-spin 0.7s linear infinite;
}

@keyframes chat-refresh-spin {
	to { transform: rotate(360deg); }
}

.chat-channels__empty {
	padding: 20px;
	color: var(--muted);
	font-size: 14px;
}

.chat-channels__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border: none;
	border-bottom: 1px solid var(--line);
	background: none;
	cursor: pointer;
}

.chat-channels__item.is-active {
	background: var(--white);
	box-shadow: inset 3px 0 0 var(--green);
}

.chat-channels__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.chat-channels__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.chat-channels__name {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-channels__time {
	flex: none;
	font-size: 12px;
	color: var(--muted);
}

.chat-channels__preview {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-channels__badge {
	flex: none;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--loss);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Avatars & presence ---------- */

.chat-avatar {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--white);
	background: var(--green);
}

.chat-avatar--sm {
	width: 32px;
	height: 32px;
	font-size: 13px;
}

.chat-avatar--c0 { background: var(--green); }
.chat-avatar--c1 { background: var(--green-deep); }
.chat-avatar--c2 { background: #4a7fb5; }
.chat-avatar--c3 { background: #b5527f; }
.chat-avatar--c4 { background: #b5822f; }
.chat-avatar--c5 { background: #5b6b73; }

.chat-presence-dot {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--muted);
	border: 2px solid var(--white);
}

.chat-presence-dot.is-online {
	background: var(--win);
}

/* ---------- Column 3: conversation ---------- */

.chat-pane {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.chat-pane__placeholder {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	color: var(--muted);
	text-align: center;
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chat-bubble {
	position: relative;
	max-width: 75%;
	padding: 10px 14px 8px;
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: #000000;
}

.chat-bubble__meta {
	display: block;
	font-size: 12px;
	color: var(--accent-light);
	margin-bottom: 3px;
	font-weight: 600;
}

/* Committee/coach only — see CTFC.canViewSomeAttendanceStats in chat.js. */
.chat-bubble__meta--clickable {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 2px;
}

.chat-bubble__meta--clickable:hover,
.chat-bubble__meta--clickable:focus-visible {
	color: var(--white);
}

.chat-bubble__body {
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.chat-bubble--own {
	align-self: flex-end;
	background: var(--green);
	color: var(--white);
}

.chat-bubble__time {
	display: inline-block;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 3px;
}

/* Always visible (not hover-only) — reporting a message should be easy
   to find on a touch device too, not hidden behind a desktop hover. */
.chat-report-btn {
	position: absolute;
	top: 6px;
	right: 8px;
	border: none;
	background: none;
	font-size: 12px;
	line-height: 1;
	padding: 2px;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
}

.chat-report-btn:hover,
.chat-report-btn:focus-visible {
	color: rgba(255, 255, 255, 0.85);
}

.chat-receipt {
	display: inline-flex;
	align-items: center;
	margin: 3px 0 0 6px;
	border: none;
	background: none;
	padding: 0;
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
	vertical-align: middle;
}

.chat-receipt--read-all {
	color: var(--accent-light);
}

.chat-receipt:disabled {
	cursor: default;
}

.chat-toast {
	position: absolute;
	left: 50%;
	bottom: 90px;
	transform: translate(-50%, 8px);
	background: var(--ink);
	color: var(--white);
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: var(--shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 10;
	max-width: 80%;
	text-align: center;
}

.chat-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@keyframes ctfc-bubble-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.chat-bubble--enter {
	animation: ctfc-bubble-in 0.2s ease-out;
}

.chat-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--muted);
	animation: ctfc-bubble-in 0.2s ease-out;
}

.chat-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
}

.chat-loading span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--line);
	animation: ctfc-loading-bounce 1s ease-in-out infinite;
}

.chat-loading span:nth-child(2) {
	animation-delay: 0.15s;
}

.chat-loading span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes ctfc-loading-bounce {
	0%, 80%, 100% {
		opacity: 0.35;
		transform: scale(0.85);
	}
	40% {
		opacity: 1;
		transform: scale(1.1);
	}
}

.chat-composer {
	flex: none;
	padding: 12px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--line);
	background: var(--white);
	/* Keeps the composer above the on-screen keyboard on iOS, where the
	   layout viewport doesn't resize the way Android's does — see the
	   visualViewport listener in chat.js. */
	margin-bottom: var(--chat-keyboard-offset, 0px);
}

.chat-composer__field {
	position: relative;
	display: flex;
	align-items: flex-end;
}

.chat-composer__field textarea {
	flex: 1;
	resize: none;
	overflow-y: hidden;
	font-family: var(--font-body);
	font-size: 16px; /* 16px+ stops iOS Safari zooming the page on focus */
	border: 1.5px solid var(--line);
	border-radius: 22px;
	padding: 11px 46px 11px 16px;
	height: 44px;
	max-height: 120px;
	line-height: 1.3;
	background: var(--paper);
	transition: border-color 0.15s ease;
}

.chat-composer__field textarea:focus {
	outline: none;
	border-color: var(--green);
	background: var(--white);
}

.chat-send-btn {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--green);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, transform 0.1s ease;
}

.chat-send-btn svg {
	margin-left: 2px;
}

.chat-send-btn:hover {
	background: var(--green-dark);
}

.chat-send-btn:active {
	transform: scale(0.92);
}

.chat-send-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ---------- Members Club hub ---------- */

.hub-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.hub-card {
	display: block;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 24px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hub-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.hub-card:hover .hub-card__icon {
	background: var(--green);
	color: var(--white);
}

.hub-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(70, 105, 61, 0.12);
	color: var(--green);
	margin-bottom: 14px;
	transition: background 0.15s ease, color 0.15s ease;
}

.hub-card__icon svg {
	width: 24px;
	height: 24px;
}

.hub-card h2 {
	margin-bottom: 6px;
	color: var(--green-deep);
}

.hub-card p {
	margin: 0;
	color: var(--muted);
}

@media (max-width: 640px) {
	.hub-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.profile-actions {
	display: flex;
	gap: 12px;
	margin: 20px 0 32px;
}

/* ---------- Parent/Guardian: children ---------- */

.child-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(18px, 3vw, 28px);
	margin-bottom: 18px;
}

.child-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.child-card__header h3 {
	margin: 0;
}

.child-card__actions {
	display: flex;
	gap: 10px;
	margin: 14px 0 4px;
}

.child-edit,
.child-add {
	margin-top: 10px;
}

.child-edit summary,
.child-add summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--green);
	margin-bottom: 12px;
}

.child-add {
	background: var(--white);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 24px;
}

/* ---------- Schedule ---------- */

.schedule-date {
	margin: 28px 0 12px;
	color: var(--green-deep);
}

.schedule-item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin-bottom: 12px;
}

/* Colour-coded at a glance — several teams can train on the same day, so
   the card itself says which kind of team this is before you read a word
   of it. Matches don't get this treatment (see .schedule-item--match
   below): they embed a .fixture-card, which already supplies its own
   identity (team chip, win/loss accent), and a solid colour fill behind
   it would just fight with that. */
.schedule-item--senior.schedule-item--training {
	background: var(--white);
	border: 2px solid var(--green);
}

.schedule-item--youth_boys {
	background: #dceafd;
	border-color: #b8d4f5;
}

.schedule-item--youth_girls {
	background: #fbdcec;
	border-color: #f3b8d8;
}

/* Match items embed a .fixture-card (same component the block/homepage/
   Matchday Centre use) for the match itself, but the attendance/roster
   controls underneath still need a container — so the outer
   .schedule-item box (background/border/padding from the base rule
   above) stays, and it's the *inner* card that gives up its own chrome,
   exactly like .wp-block-ctfc-fixture-result does when this same
   component is embedded in a post. One box, not two nested ones. */
.schedule-item--match .fixture-card {
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 14px;
}

.schedule-item__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.schedule-item__title {
	font-family: var(--font-display);
	font-size: 18px;
}

.schedule-item__location {
	color: var(--muted);
	font-size: 14px;
}

.schedule-item__attendance {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.attendance-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.attendance-row__label {
	min-width: 90px;
	font-weight: 600;
}

.btn-toggle {
	border: 1.5px solid var(--line);
	background: var(--paper);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.btn-toggle--yes.is-active {
	background: var(--win);
	border-color: var(--win);
	color: var(--white);
}

.btn-toggle--no.is-active {
	background: var(--loss);
	border-color: var(--loss);
	color: var(--white);
}

.schedule-item__ics {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
}

.attendance-row {
	flex-direction: column;
	align-items: stretch;
}

.attendance-row__buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.attendance-row__comment {
	display: flex;
	gap: 8px;
	margin: 8px 0 4px 0;
}

.attendance-row__comment textarea {
	flex: 1;
	font-family: var(--font-body);
	font-size: 13px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	min-height: 40px;
	resize: vertical;
}

.schedule-roster {
	margin-top: 12px;
}

.schedule-roster summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--green);
}

.schedule-roster ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.roster-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 0;
	font-size: 14px;
}

.roster-line__icon {
	width: 18px;
	text-align: center;
	font-weight: 700;
}

.roster-line--yes .roster-line__icon {
	color: var(--win);
}

.roster-line--no .roster-line__icon {
	color: var(--loss);
}

.roster-line--pending .roster-line__icon {
	color: var(--muted);
}

.roster-line__comment {
	color: var(--muted);
	font-style: italic;
	font-size: 13px;
}

/* ---------- Schedule calendar ---------- */

.schedule-calendar {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	margin-bottom: 28px;
}

.schedule-calendar__header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 12px;
	font-family: var(--font-display);
	font-weight: 600;
}

.schedule-calendar__header button {
	border: none;
	background: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--green);
}

.schedule-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.schedule-calendar__dow {
	text-align: center;
	font-size: 11px;
	color: var(--muted);
	font-weight: 600;
	padding-bottom: 4px;
}

.schedule-calendar__day {
	position: relative;
	aspect-ratio: 1;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.schedule-calendar__day.is-today {
	border-color: var(--green);
	font-weight: 700;
}

.schedule-calendar__day.has-status {
	background: var(--white);
}

.schedule-calendar__badge {
	position: absolute;
	bottom: 2px;
	right: 4px;
	font-size: 11px;
	font-weight: 700;
}

.schedule-calendar__day.status-yes .schedule-calendar__badge {
	color: var(--win);
}

.schedule-calendar__day.status-no .schedule-calendar__badge {
	color: var(--loss);
}

.schedule-calendar__badge--dot {
	color: var(--muted);
}

/* One tiny dot per distinct team category/type on that day — same
   colour-coding as the list below, so the mini calendar reflects the
   whole club's training and fixtures, not just the viewer's own. */
.schedule-calendar__dots {
	display: flex;
	justify-content: center;
	gap: 2px;
	flex-wrap: wrap;
}

.schedule-calendar__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--muted);
}

.schedule-calendar__dot--match-senior {
	background: var(--green);
}

.schedule-calendar__dot--training-senior {
	background: var(--white);
	border: 1.5px solid var(--green);
}

.schedule-calendar__dot--match-youth_boys,
.schedule-calendar__dot--training-youth_boys {
	background: #b8d4f5;
}

.schedule-calendar__dot--match-youth_girls,
.schedule-calendar__dot--training-youth_girls {
	background: #f3b8d8;
}

.schedule-date.is-highlighted {
	animation: ctfc-highlight 1.5s ease;
}

@keyframes ctfc-highlight {
	0% { color: var(--accent-dark); }
	100% { color: inherit; }
}

/* ---------- Chat pane header ---------- */

.chat-pane__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
	flex: none;
}

.chat-pane__heading {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.chat-pane__title {
	font-family: var(--font-display);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-pane__subtitle {
	font-size: 12px;
	color: var(--muted);
}

.chat-pane__subtitle.is-typing {
	color: var(--green);
	font-style: italic;
}

.chat-back {
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	width: 40px;
	height: 40px;
	margin: -6px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* The back arrow only means something on mobile's single-column layout
   — desktop/tablet always shows the channel list alongside the pane. */
@media (min-width: 781px) {
	.chat-back {
		display: none;
	}
	/* The icon rail (always visible at this width) is the desktop way to
	   reach everything the hamburger's drawer offered on mobile — the
	   drawer itself stays a mobile-only affordance. */
	.chat-menu-toggle {
		display: none;
	}
}

.chat-pane-menu {
	position: relative;
	flex-shrink: 0;
}

.chat-pane-menu__toggle {
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--muted);
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.chat-pane-menu__dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	margin-top: 4px;
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--shadow);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 160px;
}

.chat-pane-menu__item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	font-size: 13px;
	white-space: nowrap;
	border: none;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	font-family: inherit;
	color: var(--ink);
}

.chat-pane-menu__item:hover {
	background: var(--surface-alt, rgba(12, 18, 10, 0.06));
}

.chat-info-btn {
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--muted);
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.chat-fullscreen-btn {
	border: none;
	background: none;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	color: var(--muted);
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

/* Mobile is always full screen — there's no "embedded" state to shrink
   back to, so the toggle simply isn't offered. */
@media (max-width: 780px) {
	.chat-fullscreen-btn {
		display: none;
	}
}

/* Matches the existing body.kf-modal-open pattern: lock background
   scroll while an overlay owns the screen. */
body.chat-fullscreen-active {
	overflow: hidden;
}

/* html is this site's actual scrolling box (it has its own overflow-y
   rather than inheriting/deferring to body's), so body's overflow:hidden
   above doesn't stop the page scrolling underneath the fixed chat
   overlay on its own — this is the rule that actually pins it. */
html.chat-fullscreen-active {
	overflow-y: hidden;
}

/* ---------- Channel members sheet (WhatsApp-style group info) ---------- */

.chat-members-sheet {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.chat-members-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 18, 10, 0.45);
	animation: ctfc-fade-in 0.15s ease-out;
}

@keyframes ctfc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.chat-members-sheet__panel {
	position: relative;
	background: var(--white);
	border-radius: var(--radius) var(--radius) 0 0;
	width: 100%;
	max-width: 480px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 0 0 env(safe-area-inset-bottom, 0);
	animation: ctfc-sheet-in 0.2s ease-out;
}

@keyframes ctfc-sheet-in {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.chat-members-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-weight: 600;
	position: sticky;
	top: 0;
	background: var(--white);
	/* Each member row's .chat-avatar is `position: relative` (for its
	   presence dot) with no z-index of its own — at equal z-index:auto,
	   later DOM order wins, so without this the list scrolls on top of
	   the sticky header instead of under it. */
	z-index: 1;
}

.chat-members-sheet__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	color: var(--muted);
	cursor: pointer;
	flex-shrink: 0;
}

.chat-members-sheet__add {
	padding: 16px 20px 4px;
	border-bottom: 1px solid var(--line);
}

.chat-members-sheet__add .contact-form__field {
	margin-bottom: 10px;
}

.chat-members-sheet__add-btn {
	width: 100%;
	justify-content: center;
	margin-bottom: 16px;
}

.chat-members-sheet__add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.chat-members-sheet__list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.chat-members-sheet__footer {
	padding: 4px 20px 20px;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}

.chat-members-sheet__leave-btn {
	width: 100%;
	justify-content: center;
	color: var(--loss);
	border-color: var(--loss);
}

.chat-members-sheet__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--line);
}

.chat-members-sheet__item:last-child {
	border-bottom: none;
}

.chat-members-sheet__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	line-height: 1.3;
}

.chat-members-sheet__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-members-sheet__presence {
	font-size: 12px;
	color: var(--muted);
}

.chat-members-sheet__loading {
	padding: 20px;
	text-align: center;
	color: var(--muted);
	list-style: none;
}

@media (min-width: 641px) {
	.chat-members-sheet {
		align-items: center;
	}
	.chat-members-sheet__panel {
		border-radius: var(--radius);
		max-height: 60vh;
	}
}

/* ---------- Reactions ---------- */

.chat-reactions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	position: relative;
}

.chat-reaction-chip {
	border: 1px solid var(--line);
	background: var(--white);
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 13px;
	cursor: pointer;
}

/* Rendered as a <span> (not a <button>) on your own messages — you can
   see who reacted, but can't react to yourself. */
span.chat-reaction-chip {
	cursor: default;
}

.chat-reaction-chip.is-mine {
	border-color: var(--accent-dark);
	background: rgba(70, 105, 61, 0.25);
}

.chat-reaction-add {
	border: 1px dashed var(--line);
	background: none;
	border-radius: 999px;
	width: 22px;
	height: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--muted);
}

.chat-reaction-menu {
	position: absolute;
	bottom: 100%;
	left: 0;
	display: flex;
	gap: 4px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 6px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 4px;
}

.chat-reaction-menu button {
	border: none;
	background: none;
	font-size: 16px;
	cursor: pointer;
}

/* ---------- Polls ---------- */

/* Poll bubbles stand apart from ordinary text bubbles: the vote-count
   progress bars and option list need a light, legible surface, so an
   artifact bubble never takes on the green/black speech-bubble colours,
   own message or not. */
.chat-bubble--artifact,
.chat-bubble--artifact.chat-bubble--own {
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
	max-width: 85%;
}

/* The pitch diagram + legend need more elbow room than a poll/bot card —
   let the teamsheet bubble claim nearly the full message width instead. */
.chat-bubble--teamsheet,
.chat-bubble--teamsheet.chat-bubble--own {
	max-width: 95%;
}

.chat-bubble--artifact .chat-bubble__meta {
	color: var(--muted);
}

.chat-bubble--artifact .chat-bubble__time {
	color: var(--muted);
}

.chat-bubble--artifact .chat-receipt {
	color: var(--muted);
}

.chat-bubble--artifact .chat-receipt--read-all {
	color: var(--green);
}

.poll-card {
	width: 100%;
	max-width: 220px;
}

.poll-card__question {
	font-weight: 600;
	margin-bottom: 10px;
}

.poll-option {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	text-align: left;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	padding: 8px 12px;
	margin-bottom: 6px;
	cursor: pointer;
	overflow: hidden;
	z-index: 0;
}

.poll-option::before {
	content: '';
	position: absolute;
	inset: 0;
	width: var(--poll-pct, 0%);
	background: rgba(70, 105, 61, 0.12);
	z-index: -1;
	transition: width 0.2s ease;
}

.poll-option.is-chosen {
	border-color: var(--green);
}

.poll-option__count {
	font-weight: 600;
	color: var(--muted);
}

.poll-card__hint {
	font-size: 12px;
	color: var(--muted);
	margin-top: 4px;
}

.chat-poll-composer {
	border-top: 1px solid var(--line);
	padding: 16px;
}

/* ---------- Bot cards: training / fixture / result ---------- */

.bot-card {
	width: 100%;
	max-width: 220px;
}

.bot-card__badge {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted);
	margin-bottom: 6px;
}

.bot-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 4px;
}

.bot-card--result .bot-card__title {
	font-size: 18px;
}

.bot-card__meta {
	font-size: 13px;
	color: var(--muted);
}

.bot-card__attendance {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Fixture/result cards embed a real .fixture-card/.result-card (server-
   rendered — see cardHtml in inc/social/bot.php) — wider than training's
   compact card so the badges/home-away layout has room, and the embedded
   card gives up its own border/shadow/padding since .chat-bubble--artifact
   already supplies that box, same pattern as .schedule-item--match and
   .wp-block-ctfc-fixture-result. */
.bot-card--fixture,
.bot-card--result {
	max-width: 340px;
}

.bot-card--fixture .fixture-card,
.bot-card--result .result-card {
	border: none;
	box-shadow: none;
	padding: 0;
}

.bot-card__rsvp-counts {
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
}

.bot-card__attendance-rows {
	margin-top: 8px;
}

.bot-card__attendance-rows .attendance-row {
	margin-top: 6px;
}

.bot-card__attendance-rows .attendance-row:first-child {
	margin-top: 0;
}

/* ---------- Mobile: one full-height screen at a time ---------- */

@media (max-width: 780px) {
	.section--chat {
		padding: 0;
	}

	/* Below the desktop/tablet breakpoint the rail leaves the column layout
	   entirely and becomes a fixed bottom tab bar (icon + label, since
	   touch has no hover/title to fall back on) — freeing its 60px of
	   width for column 2/3, which are still two full-height screens
	   sharing the rest of the width; only one shows at once. Every scroll
	   area behind it (channel list, conversation composer, schedule) gets
	   matching bottom padding so the bar never covers real content. */
	.chat-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		flex: none;
		flex-direction: row;
		width: 100%;
		justify-content: space-around;
		gap: 0;
		border-right: none;
		border-top: 1px solid var(--line);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
	}

	.chat-rail__btn {
		flex-direction: column;
		gap: 3px;
		width: auto;
		height: auto;
		flex: 1;
		min-width: 0;
		padding: 6px 2px;
	}

	.chat-rail__label {
		display: block;
		font-size: 10px;
		line-height: 1.1;
		font-weight: 600;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chat-channels {
		flex: 1;
		min-height: 0;
		border-right: none;
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	}
	.chat-schedule__body {
		padding-bottom: calc(32px + 60px + env(safe-area-inset-bottom, 0px));
	}
	.chat-composer {
		padding-bottom: calc(16px + 60px + env(safe-area-inset-bottom, 0px));
	}
	.chat-pane {
		display: none;
	}

	/* The pitch diagram is the one bubble where "as wide as a comfortable
	   line of chat text" isn't the goal — it's a diagram, more space reads
	   better. width (not just max-width) forces it past the 95% cap above,
	   and the card/pitch's own 340px desktop cap is lifted too, since
	   otherwise it'd stop growing well short of 80vw on a larger phone. */
	.chat-bubble--teamsheet,
	.chat-bubble--teamsheet.chat-bubble--own {
		width: 80vw;
		max-width: 80vw;
	}
	.chat-bubble--teamsheet .teamsheet-card,
	.chat-bubble--teamsheet .teamsheet-pitch {
		max-width: none;
	}

	body.chat-open .chat-channels {
		display: none;
	}
	body.chat-open .chat-pane {
		display: flex;
		flex-direction: column;
		animation: ctfc-pane-in 0.18s ease-out;
	}

	/* Background page can't be reached behind the fixed fullscreen
	   overlay anyway, but this stops iOS Safari's rubber-band scroll
	   leaking through. */
	body.chat-active {
		overflow: hidden;
	}

	/* The WP admin bar is fixed at the very top with a huge z-index
	   (99999) — without this, it sits on top of (and swallows taps on)
	   the chat app bar for anyone logged in as staff. WP itself switches
	   the bar to its 46px "mobile" height at 782px, just above our own
	   780px breakpoint, so 46px applies throughout this entire range. */
	body.admin-bar .chat-wrap.chat-fullscreen {
		top: 46px;
		height: calc(100dvh - 46px);
	}
}

@keyframes ctfc-pane-in {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ---------- My Team (coach roster) ---------- */

.my-team-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: clamp(18px, 3vw, 28px);
	margin-bottom: 24px;
}

.my-team-card ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.my-team-card li[data-roster-row] {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
}

/* ---------- Find the ground ---------- */

.find-us {
	padding-top: 0;
}

.find-us__title {
	font-size: clamp(22px, 3vw, 28px);
	margin-bottom: 18px;
}

.pitch-map-card {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--line);
	line-height: 0;
}

.pitch-map-card img {
	display: block;
	width: 100%;
	height: auto;
}

.find-us__address {
	margin: 16px 0 18px;
	color: var(--muted);
	font-weight: 500;
}

/* ---------- Coaches & Committee ---------- */

.people-section-title {
	font-size: clamp(20px, 2.6vw, 26px);
	margin: 0 0 24px;
}

.people-category {
	margin-bottom: 36px;
}

.people-category:last-child {
	margin-bottom: 0;
}

.people-category__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
	padding-left: 14px;
	position: relative;
}

.people-category__head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10%;
	bottom: 10%;
	width: 4px;
	border-radius: 3px;
	background: var(--green);
}

.people-category__title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

.people-category__count {
	font-size: 13px;
	color: var(--muted);
	font-weight: 500;
}

.people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}

.people-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 16px 18px;
}

.people-card__team {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--green-deep);
}

.people-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.people-card li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 3px 0;
}

.people-list__role {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--paper);
	border-radius: 4px;
	padding: 2px 8px;
}

.people-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.people-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
}

.people-list li:last-child {
	border-bottom: none;
}

.people-list__name {
	font-weight: 600;
}

/* ---------- Match Replays ---------- */

.replay-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 18px;
	margin-bottom: 32px;
}

.replay-card__embed {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--ink);
}

.replay-card__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.replay-card__title {
	margin: 14px 0 16px;
	font-size: 18px;
}

.replay-comments {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.replay-comment {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}

.replay-comment__author {
	font-weight: 600;
	margin-right: 8px;
}

.replay-comment__date {
	font-size: 12px;
	color: var(--muted);
}

.replay-comment__text {
	margin: 4px 0 0;
}

.replay-comment-form textarea {
	width: 100%;
}

/* ---------- Season Ticket (wallet card) ---------- */

.wallet-card {
	position: relative;
	max-width: 380px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 20px;
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 26px),
		linear-gradient(160deg, var(--green-deep), var(--ink) 85%);
	color: var(--white);
	box-shadow: 0 16px 40px rgba(12, 18, 10, 0.35);
	overflow: hidden;
}

.wallet-card__ribbon {
	position: absolute;
	top: 18px;
	right: -34px;
	transform: rotate(45deg);
	background: var(--loss);
	color: var(--white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 40px;
}

.wallet-card--expired {
	filter: grayscale(0.5);
}

.wallet-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.wallet-card__crest {
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.wallet-card__label {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.wallet-card__season {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wallet-card__name {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 2px;
	margin-bottom: 20px;
}

.wallet-card__qr {
	background: var(--white);
	border-radius: 14px;
	width: fit-content;
	padding: 12px;
	margin: 0 auto 20px;
	line-height: 0;
}

.wallet-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 14px;
	font-size: 13px;
}

.wallet-card__footer-label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 2px;
}

.wallet-card__code {
	font-family: 'Courier New', monospace;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.wallet-card-hint {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	margin-top: 16px;
}