/* ═══════════════════════════════════
   Strawberry ASD — Football Post
   Used by: here-we-go-again.html

   Load this file after style.css and diary.css.
═══════════════════════════════════ */

/* Preserve the full hand-drawn illustration rather than cropping it to 16:9. */
body[data-entry-id="here-we-go-again"] .blog-post-hero-image {
	background: #fff;
}

	body[data-entry-id="here-we-go-again"] .blog-post-hero-image img {
		object-fit: contain;
		object-position: center;
	}

/* Keep all additions inside this post's content wrapper. */
.football-post-content {
	--football-blue: #215c78;
	--football-blue-light: #eaf4f8;
	--football-green: #39754b;
	--football-green-light: #edf7ef;
}

	/* Section headings inside the article */
	.football-post-content h2 {
		margin: 48px 0 18px;
		font-family: 'Playfair Display', Georgia, serif;
		font-size: clamp(1.5rem, 3vw, 1.9rem);
		font-weight: 700;
		line-height: 1.25;
		color: var(--text-primary);
	}

		.football-post-content h2::after {
			content: '';
			display: block;
			width: 48px;
			height: 3px;
			margin-top: 12px;
			background: var(--strawberry);
			border-radius: 3px;
		}

/* Team names at the start of the post */
.fixture-teams {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 28px;
}

	.fixture-teams span {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 8px 18px;
		background: #fff;
		border: 1px solid var(--warm-gray-200);
		border-radius: 100px;
		box-shadow: var(--shadow-sm);
		font-size: 0.9375rem;
		font-weight: 800;
		color: var(--text-primary);
	}

		.fixture-teams span::before {
			content: '⚽';
			margin-right: 8px;
			font-size: 0.875rem;
		}

/* Kya's quick matchday routine */
.matchday-routine {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

	.matchday-routine li {
		padding: 7px 14px;
		background: var(--strawberry-50);
		border: 1px solid rgba(192, 57, 43, 0.14);
		border-radius: 100px;
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--strawberry-dark);
	}

/* Sensory-room information panel */
.sensory-room-card {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 20px;
	margin: 40px 0;
	padding: 30px;
	background: linear-gradient(145deg, var(--football-blue-light), #fff 68%);
	border: 1px solid rgba(33, 92, 120, 0.18);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.sensory-room-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--football-blue);
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(33, 92, 120, 0.2);
	font-size: 1.5rem;
}

.sensory-room-card__eyebrow,
.football-book-card__eyebrow {
	margin-bottom: 6px !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--football-blue) !important;
}

.sensory-room-card h2,
.football-book-card h2 {
	margin: 0 0 16px;
	font-size: clamp(1.35rem, 3vw, 1.65rem);
}

	.sensory-room-card h2::after,
	.football-book-card h2::after {
		display: none;
	}

.sensory-room-card p,
.football-book-card p,
.supporter-card p {
	font-size: 1rem;
}

.sensory-room-steps {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: sensory-step;
}

	.sensory-room-steps li {
		position: relative;
		margin-bottom: 14px;
		padding-left: 42px;
		color: var(--text-secondary);
		line-height: 1.7;
		counter-increment: sensory-step;
	}

		.sensory-room-steps li::before {
			content: counter(sensory-step);
			position: absolute;
			top: 1px;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 28px;
			height: 28px;
			background: var(--football-blue);
			border-radius: 50%;
			font-size: 0.75rem;
			font-weight: 800;
			color: #fff;
		}

.sensory-room-card__note {
	margin: 0 0 20px !important;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.72);
	border-left: 3px solid var(--gold);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: 0.9375rem !important;
	line-height: 1.65 !important;
}

/* Shared call-to-action link */
.football-post-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 11px 20px;
	background: var(--strawberry);
	border: 2px solid var(--strawberry);
	border-radius: 100px;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

	.football-post-button:hover,
	.football-post-button:focus-visible {
		background: var(--strawberry-dark);
		border-color: var(--strawberry-dark);
		box-shadow: 0 8px 24px rgba(192, 57, 43, 0.24);
		color: #fff;
		transform: translateY(-2px);
	}

/* Martha and Kya comparison cards */
.supporter-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 32px 0;
}

.supporter-card {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--warm-gray-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

	.supporter-card:nth-child(1) {
		border-top: 4px solid var(--football-blue);
	}

	.supporter-card:nth-child(2) {
		border-top: 4px solid var(--strawberry);
	}

.supporter-card__icon {
	display: block;
	margin-bottom: 12px;
	font-size: 1.6rem;
}

.supporter-card h3 {
	margin-bottom: 8px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--text-primary);
}

.supporter-card p {
	margin-bottom: 0 !important;
	line-height: 1.7 !important;
}

/* Small book mention — intentionally not a large sales section */
.football-book-card {
	position: relative;
	overflow: hidden;
	margin: 30px 0 40px;
	padding: 32px;
	background: radial-gradient(circle at 100% 0, rgba(192, 57, 43, 0.10), transparent 42%), linear-gradient(145deg, var(--strawberry-50), #fff 70%);
	border: 1px solid rgba(192, 57, 43, 0.16);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

	.football-book-card::after {
		content: '⚽';
		position: absolute;
		right: 24px;
		bottom: 14px;
		font-size: 4.5rem;
		opacity: 0.08;
		transform: rotate(-12deg);
		pointer-events: none;
	}

.football-book-card__body {
	position: relative;
	z-index: 1;
}

.football-book-card__eyebrow {
	color: var(--strawberry) !important;
}

.football-book-card p:last-of-type {
	margin-bottom: 22px;
}

/* Fixture warning */
.fixture-note {
	margin-top: 40px !important;
	padding: 16px 18px;
	background: var(--gold-light);
	border: 1px solid rgba(212, 160, 23, 0.22);
	border-radius: var(--radius-md);
	font-size: 0.9rem !important;
	line-height: 1.65 !important;
	color: var(--text-secondary) !important;
}

/* Dark mode */
html.dark-mode .fixture-teams span,
html.dark-mode .supporter-card {
	background: var(--warm-gray-50);
	border-color: var(--warm-gray-100);
}

html.dark-mode .sensory-room-card {
	background: linear-gradient(145deg, rgba(33, 92, 120, 0.22), var(--warm-gray-50) 70%);
	border-color: rgba(113, 183, 214, 0.24);
}

html.dark-mode .sensory-room-card__note {
	background: rgba(255, 255, 255, 0.04);
}

html.dark-mode .football-book-card {
	background: radial-gradient(circle at 100% 0, rgba(192, 57, 43, 0.16), transparent 42%), var(--warm-gray-50);
}

html.dark-mode .fixture-note {
	background: rgba(212, 160, 23, 0.12);
}

/* Dyslexia-friendly setting */
html.dyslexia-font .football-post-content h2,
html.dyslexia-font .supporter-card h3,
html.dyslexia-font .sensory-room-card h2,
html.dyslexia-font .football-book-card h2 {
	font-family: 'Lexend', 'Nunito', sans-serif !important;
}

/* Responsive */
@media (max-width: 640px) {
	.football-post-content h2 {
		margin-top: 38px;
	}

	.fixture-teams,
	.matchday-routine {
		gap: 8px;
	}

		.fixture-teams span,
		.matchday-routine li {
			flex: 1 1 auto;
			justify-content: center;
			text-align: center;
		}

	.sensory-room-card {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 22px;
	}

	.sensory-room-card__icon {
		width: 48px;
		height: 48px;
		font-size: 1.25rem;
	}

	.supporter-grid {
		grid-template-columns: 1fr;
	}

	.supporter-card,
	.football-book-card {
		padding: 22px;
	}

	.football-post-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.football-post-button:hover,
	.football-post-button:focus-visible {
		transform: none;
	}
}
