/* ==========================================================
   NGFP Data Hub
   Competition Hub Visual System
   ========================================================== */


/* ==========================================================
   1. Design Tokens
   ========================================================== */

:root {
	--ngfp-green: #0b7a3e;
	--ngfp-blue: #0a2e5d;
	--ngfp-gold: #f5a623;

	--ngfp-text: #1f2937;
	--ngfp-text-muted: #6b7280;
	--ngfp-border: #e5e7eb;
	--ngfp-surface: #ffffff;
	--ngfp-surface-soft: #f8fafc;

	--ngfp-radius-sm: 8px;
	--ngfp-radius-md: 12px;
	--ngfp-radius-lg: 18px;

	--ngfp-shadow-sm:
		0 1px 2px rgba( 0, 0, 0, 0.04 ),
		0 1px 3px rgba( 0, 0, 0, 0.06 );

	--ngfp-shadow-md:
		0 10px 30px rgba( 15, 23, 42, 0.08 );

	--ngfp-content-width: 1200px;

	--ngfp-space-1: clamp( 0.5rem, 0.45rem + 0.25vw, 0.75rem );
	--ngfp-space-2: clamp( 0.75rem, 0.65rem + 0.35vw, 1rem );
	--ngfp-space-3: clamp( 1rem, 0.85rem + 0.5vw, 1.5rem );
	--ngfp-space-4: clamp( 1.5rem, 1.2rem + 0.8vw, 2.25rem );
	--ngfp-space-5: clamp( 2rem, 1.5rem + 1.2vw, 3rem );
	--ngfp-space-6: clamp( 2.5rem, 1.8rem + 1.8vw, 4rem );

	--ngfp-font-sm: clamp( 0.875rem, 0.84rem + 0.1vw, 0.95rem );
	--ngfp-font-base: clamp( 1rem, 0.95rem + 0.2vw, 1.08rem );
	--ngfp-font-lg: clamp( 1.125rem, 1rem + 0.35vw, 1.35rem );
	--ngfp-font-xl: clamp( 1.5rem, 1.2rem + 1vw, 2.2rem );
	--ngfp-font-2xl: clamp( 2rem, 1.4rem + 2vw, 3.25rem );
}


/* ==========================================================
   2. Competition Page Foundation
   ========================================================== */

.ngfp-competition-profile {
	width: min(
		calc( 100% - clamp( 1rem, 4vw, 3rem ) ),
		var( --ngfp-content-width )
	);

	margin-inline: auto;
	padding-block: var( --ngfp-space-4 ) var( --ngfp-space-6 );

	color: var( --ngfp-text );

	font-size: var( --ngfp-font-base );
	line-height: 1.6;

	overflow-wrap: anywhere;
}


/*
 * Prevent children from forcing the page wider than
 * the available viewport.
 */
.ngfp-competition-profile *,
.ngfp-competition-profile *::before,
.ngfp-competition-profile *::after {
	box-sizing: border-box;
	min-width: 0;
}


/* ==========================================================
   3. Shared Section Rhythm
   ========================================================== */

.ngfp-competition-profile > section {
	margin-top: var( --ngfp-space-5 );
}


.ngfp-section-header {
	margin-bottom: var( --ngfp-space-3 );
}


.ngfp-section-header h2,
.ngfp-competition-summary h2,
.ngfp-competition-about h2 {
	margin: 0;

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-xl );
	font-weight: 700;
	line-height: 1.2;
}


/* ==========================================================
   4. Shared Text Behaviour
   ========================================================== */

.ngfp-competition-profile p {
	max-width: 75ch;
}


.ngfp-competition-profile a {
	text-underline-offset: 0.15em;
}


/* ==========================================================
   5. Responsive Media Safety
   ========================================================== */

.ngfp-competition-profile img,
.ngfp-competition-profile svg,
.ngfp-competition-profile video,
.ngfp-competition-profile iframe {
	max-width: 100%;
}


/* ==========================================================
   6. SportsPress / Wide Content Safety
   ========================================================== */

.ngfp-competition-standing-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}









/* ==========================================================
   7. Competition Hero / Header
   ========================================================== */

.ngfp-competition-header {
	position: relative;

	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: end;
	gap: var( --ngfp-space-4 );

	padding:
		clamp( 1.5rem, 3vw, 2.75rem )
		clamp( 1.25rem, 3vw, 2.75rem );

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-lg );

	background:
		linear-gradient(
			135deg,
			rgba( 11, 122, 62, 0.07 ),
			rgba( 10, 46, 93, 0.035 ) 55%,
			#ffffff 100%
		);

	box-shadow: var( --ngfp-shadow-sm );

	overflow: hidden;
}


/*
 * NGFP green accent.
 */
.ngfp-competition-header::before {
	content: "";

	position: absolute;
	inset: 0 auto 0 0;

	width: 5px;

	background: var( --ngfp-green );
}


/* ==========================================================
   8. Competition Identity
   ========================================================== */

.ngfp-competition-heading {
	display: flex;
	align-items: flex-start;
	gap: clamp( 0.75rem, 2vw, 1.25rem );
}


.ngfp-competition-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;

	width: clamp( 2.75rem, 5vw, 3.75rem );
	aspect-ratio: 1;

	border-radius: 50%;

	background: rgba( 245, 166, 35, 0.14 );

	font-size: clamp( 1.35rem, 2vw, 1.8rem );
	line-height: 1;
}


.ngfp-competition-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


.ngfp-competition-title h1 {
	max-width: 24ch;

	margin: 0;

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-2xl );
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;

	text-wrap: balance;
}


/* ==========================================================
   9. Competition Type
   ========================================================== */

.ngfp-competition-type {
	display: inline-flex;
	align-items: center;

	margin-top: var( --ngfp-space-2 );
	padding: 0.35rem 0.7rem;

	border: 1px solid rgba( 11, 122, 62, 0.18 );
	border-radius: 999px;

	background: rgba( 11, 122, 62, 0.08 );

	color: var( --ngfp-green );

	font-size: var( --ngfp-font-sm );
	font-weight: 700;
	line-height: 1.2;
}


/* ==========================================================
   10. Competition Organizer
   ========================================================== */

.ngfp-competition-organizer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;

	margin-top: var( --ngfp-space-2 );

	font-size: var( --ngfp-font-sm );
}


.ngfp-competition-organizer-label {
	color: var( --ngfp-text-muted );
}


.ngfp-competition-organizer-link {
	color: var( --ngfp-blue );
	font-weight: 700;
	text-decoration: none;
}


.ngfp-competition-organizer-link:hover {
	color: var( --ngfp-green );
	text-decoration: underline;
}


.ngfp-competition-organizer-link:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.5 );
	outline-offset: 3px;
	border-radius: 2px;
}


/* ==========================================================
   11. Competition Geographic Scope
   ========================================================== */

/*
 * Overrides the older scope styling currently living
 * in directory.css.
 */
.ngfp-competition-scope {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;

	max-width: 100%;

	margin-top: var( --ngfp-space-2 );
	padding: 0;

	border: 0;
	border-radius: 0;

	background: transparent;

	color: var( --ngfp-text-muted );

	font-size: var( --ngfp-font-sm );
	line-height: 1.45;
}


.ngfp-competition-scope-label {
	color: var( --ngfp-text-muted );
	font-weight: 600;
}


.ngfp-competition-scope-value {
	color: var( --ngfp-text );
	font-weight: 500;
}


/* ==========================================================
   12. Season Selector
   ========================================================== */

.ngfp-competition-season {
	display: grid;
	gap: 0.4rem;

	min-width: clamp( 8rem, 12vw, 10rem );
}


.ngfp-competition-season label {
	color: var( --ngfp-text-muted );

	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.06em;
	text-transform: uppercase;
}


.ngfp-competition-season select {
	width: 100%;
	min-height: 46px;

	padding: 0.65rem 2.5rem 0.65rem 0.85rem;

	border: 1px solid #cbd5e1;
	border-radius: var( --ngfp-radius-sm );

	background-color: var( --ngfp-surface );

	color: var( --ngfp-blue );

	font: inherit;
	font-weight: 700;

	cursor: pointer;
}


.ngfp-competition-season select:hover {
	border-color: var( --ngfp-green );
}


.ngfp-competition-season select:focus {
	border-color: var( --ngfp-green );

	outline: 3px solid rgba( 11, 122, 62, 0.14 );
	outline-offset: 1px;
}


/* ==========================================================
   13. Competition Header Responsive Behaviour
   ========================================================== */

@media ( max-width: 700px ) {

	.ngfp-competition-header {
		grid-template-columns: 1fr;
		align-items: stretch;
	}


	.ngfp-competition-season {
		width: min( 100%, 18rem );
	}


	.ngfp-competition-title h1 {
		max-width: none;
	}

}


@media ( max-width: 420px ) {

	.ngfp-competition-heading {
		gap: 0.75rem;
	}


	.ngfp-competition-icon {
		width: 2.5rem;
	}


	.ngfp-competition-header {
		padding:
			1.25rem
			1rem;
	}

}


/* ==========================================================
   14. Competition Summary
   ========================================================== */

.ngfp-competition-summary {
	margin-top: var( --ngfp-space-5 );
}


.ngfp-competition-summary h2 {
	margin-bottom: var( --ngfp-space-3 );
}


/* ==========================================================
   15. Competition Summary Grid
   ========================================================== */

.ngfp-competition-summary-grid {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(
				min( 100%, 10rem ),
				1fr
			)
		);

	gap: var( --ngfp-space-2 );
}


/* ==========================================================
   16. Competition Summary Stat Card
   ========================================================== */

.ngfp-competition-stat {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;

	min-height: clamp( 6.5rem, 10vw, 8rem );

	padding:
		clamp( 1rem, 2vw, 1.35rem )
		clamp( 1rem, 2vw, 1.4rem );

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface );

	box-shadow: var( --ngfp-shadow-sm );

	overflow: hidden;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}


/*
 * Subtle NGFP accent strip.
 */
.ngfp-competition-stat::before {
	content: "";

	position: absolute;
	inset: 0 auto 0 0;

	width: 4px;

	background: var( --ngfp-green );
}


.ngfp-competition-stat:hover {
	transform: translateY( -2px );

	border-color: rgba( 11, 122, 62, 0.32 );

	box-shadow: var( --ngfp-shadow-md );
}


/* ==========================================================
   17. Competition Summary Numbers
   ========================================================== */

.ngfp-competition-stat strong {
	display: block;

	margin: 0;

	color: var( --ngfp-blue );

	font-size:
		clamp(
			1.7rem,
			1.35rem + 1.1vw,
			2.5rem
		);

	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
}


/* ==========================================================
   18. Competition Summary Labels
   ========================================================== */

.ngfp-competition-stat span {
	display: block;

	margin-top: 0.45rem;

	color: var( --ngfp-text-muted );

	font-size: var( --ngfp-font-sm );
	font-weight: 600;
	line-height: 1.3;
}


/* ==========================================================
   19. Competition Summary Mobile Refinement
   ========================================================== */

@media ( max-width: 480px ) {

	.ngfp-competition-summary-grid {
		grid-template-columns:
			repeat(
				3,
				minmax( 0, 1fr )
			);

		gap: 0.55rem;
	}


	.ngfp-competition-stat {
		min-height: 5.75rem;

		padding:
			0.9rem
			0.65rem;
	}


	.ngfp-competition-stat strong {
		font-size:
			clamp(
				1.4rem,
				8vw,
				1.9rem
			);
	}


	.ngfp-competition-stat span {
		font-size: 0.8rem;
	}

}




/* ==========================================================
   20. Competition Section System
   ========================================================== */

.ngfp-competition-profile > section {
	position: relative;

	margin-top: var( --ngfp-space-5 );
}


/*
 * Shared section headings.
 */
.ngfp-section-header h2,
.ngfp-competition-about h2,
.ngfp-competition-standings > h2,
.ngfp-competition-explore h2 {
	position: relative;

	margin: 0 0 var( --ngfp-space-3 );

	padding-bottom: 0.7rem;

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-xl );
	font-weight: 750;
	line-height: 1.2;

	letter-spacing: -0.015em;
}


/*
 * Short NGFP accent beneath major section headings.
 */
.ngfp-section-header h2::after,
.ngfp-competition-about h2::after,
.ngfp-competition-standings > h2::after,
.ngfp-competition-explore h2::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 0;

	width: clamp( 2.75rem, 6vw, 4rem );
	height: 3px;

	border-radius: 999px;

	background: var( --ngfp-green );
}


/* ==========================================================
   21. About the Competition
   ========================================================== */

.ngfp-competition-about {
	padding:
		clamp( 1.2rem, 2.5vw, 1.75rem )
		clamp( 1.2rem, 2.5vw, 1.8rem );

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface-soft );
}


.ngfp-competition-about h2 {
	margin-bottom: var( --ngfp-space-2 );
}


.ngfp-competition-about p {
	margin:
		var( --ngfp-space-2 )
		0
		0;

	color: var( --ngfp-text );

	line-height: 1.75;
}


.ngfp-competition-about p:first-of-type {
	margin-top: 0;
}


/* ==========================================================
   22. Section Header Layout
   ========================================================== */

.ngfp-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;

	gap: var( --ngfp-space-2 );

	margin-bottom: var( --ngfp-space-3 );
}


.ngfp-section-header h2 {
	margin-bottom: 0;
}


/* ==========================================================
   23. Shared Section Links
   ========================================================== */

.ngfp-section-header a,
.ngfp-competition-profile .ngfp-section-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;

	color: var( --ngfp-green );

	font-size: var( --ngfp-font-sm );
	font-weight: 700;

	text-decoration: none;
}


.ngfp-section-header a:hover,
.ngfp-competition-profile .ngfp-section-link:hover {
	color: var( --ngfp-blue );
	text-decoration: underline;
}


.ngfp-section-header a:focus-visible,
.ngfp-competition-profile .ngfp-section-link:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.45 );
	outline-offset: 3px;
	border-radius: 3px;
}


/* ==========================================================
   24. Small-screen Section Refinement
   ========================================================== */

@media ( max-width: 480px ) {

	.ngfp-section-header {
		align-items: flex-start;
	}


	.ngfp-section-header h2,
	.ngfp-competition-about h2,
	.ngfp-competition-standings > h2,
	.ngfp-competition-explore h2 {
		padding-bottom: 0.6rem;
	}

}



/* ==========================================================
   25. Competition Match List
   ========================================================== */

.ngfp-competition-match-list {
	display: grid;
	gap: var( --ngfp-space-3 );
}


/* ==========================================================
   26. Competition Match Card
   ========================================================== */

.ngfp-competition-match {
	position: relative;

	display: grid;
	gap: var( --ngfp-space-2 );

	padding:
		clamp( 1.1rem, 2.5vw, 1.5rem )
		clamp( 1.1rem, 2.5vw, 1.6rem );

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface );

	box-shadow: var( --ngfp-shadow-sm );

	overflow: hidden;

	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}


.ngfp-competition-match::before {
	content: "";

	position: absolute;
	inset: 0 auto 0 0;

	width: 4px;

	background: var( --ngfp-green );
}


.ngfp-competition-match:hover {
	transform: translateY( -2px );

	border-color: rgba( 11, 122, 62, 0.28 );

	box-shadow: var( --ngfp-shadow-md );
}


/* ==========================================================
   27. Match Date + Kick-off
   ========================================================== */

.ngfp-match-date {
	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-sm );
	font-weight: 800;
	line-height: 1.3;

	letter-spacing: 0.025em;
	text-transform: uppercase;
}


.ngfp-match-time {
	display: inline-flex;
	align-items: center;

	width: fit-content;

	padding: 0.3rem 0.6rem;

	border-radius: 999px;

	background: rgba( 10, 46, 93, 0.07 );

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-sm );
	font-weight: 700;
	line-height: 1.25;
}


/* ==========================================================
   28. Match Teams
   ========================================================== */

.ngfp-match-teams {
	display: grid;
	gap: 0.5rem;

	padding-block: 0.25rem;
}


.ngfp-match-team {
	display: grid;

	grid-template-columns:
		minmax( 0, 1fr )
		auto;

	align-items: center;
	gap: var( --ngfp-space-2 );
}


.ngfp-match-team-name {
	color: var( --ngfp-text );

	font-size: var( --ngfp-font-lg );
	font-weight: 700;
	line-height: 1.3;
}


.ngfp-match-team-score {
	display: grid;
	place-items: center;

	min-width: 2.4rem;
	min-height: 2.4rem;

	padding: 0.25rem 0.55rem;

	border-radius: var( --ngfp-radius-sm );

	background: var( --ngfp-blue );

	color: #ffffff;

	font-size: clamp( 1.1rem, 1rem + 0.4vw, 1.4rem );
	font-weight: 800;
	line-height: 1;
}


/* ==========================================================
   29. Match Versus
   ========================================================== */

.ngfp-match-versus {
	display: flex;
	align-items: center;
	gap: 0.65rem;

	color: var( --ngfp-text-muted );

	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}


.ngfp-match-versus::before,
.ngfp-match-versus::after {
	content: "";

	flex: 1;

	height: 1px;

	background: var( --ngfp-border );
}


/* ==========================================================
   30. Venue + Geography
   ========================================================== */

.ngfp-match-venue,
.ngfp-match-location {
	position: relative;

	margin: 0;
	padding-left: 1.35rem;

	font-size: var( --ngfp-font-sm );
	line-height: 1.5;
}


.ngfp-match-venue {
	margin-top: 0.15rem;

	color: var( --ngfp-text );
	font-weight: 650;
}


.ngfp-match-location {
	color: var( --ngfp-text-muted );
}


.ngfp-match-venue::before {
	content: "⌖";

	position: absolute;
	left: 0;
	top: 0;

	color: var( --ngfp-green );

	font-weight: 800;
}


.ngfp-match-location::before {
	content: "•";

	position: absolute;
	left: 0.35rem;
	top: 0;

	color: var( --ngfp-gold );

	font-weight: 800;
}


/* ==========================================================
   31. Match Status
   ========================================================== */

.ngfp-match-status {
	display: inline-flex;
	align-items: center;

	width: fit-content;

	padding: 0.32rem 0.65rem;

	border: 1px solid rgba( 11, 122, 62, 0.18 );
	border-radius: 999px;

	background: rgba( 11, 122, 62, 0.08 );

	color: var( --ngfp-green );

	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.2;

	letter-spacing: 0.025em;
}


/* ==========================================================
   32. View Match Action
   ========================================================== */

.ngfp-match-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: fit-content;
	min-height: 42px;

	margin-top: 0.25rem;
	padding: 0.55rem 0.9rem;

	border: 1px solid rgba( 11, 122, 62, 0.25 );
	border-radius: var( --ngfp-radius-sm );

	background: rgba( 11, 122, 62, 0.06 );

	color: var( --ngfp-green );

	font-size: var( --ngfp-font-sm );
	font-weight: 800;

	text-decoration: none;
}


.ngfp-match-link:hover {
	border-color: var( --ngfp-green );

	background: var( --ngfp-green );

	color: #ffffff;

	text-decoration: none;
}


.ngfp-match-link:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.5 );
	outline-offset: 3px;
}


/* ==========================================================
   33. See All Results / Fixtures
   ========================================================== */

.ngfp-competition-profile
.ngfp-competition-match-list
+ p {
	margin-top: var( --ngfp-space-2 );
}


/* ==========================================================
   34. Match Card Small-screen Behaviour
   ========================================================== */

@media ( max-width: 480px ) {

	.ngfp-competition-match {
		padding:
			1rem
			0.95rem;
	}


	.ngfp-match-team {
		gap: 0.65rem;
	}


	.ngfp-match-team-name {
		font-size: 1rem;
	}


	.ngfp-match-team-score {
		min-width: 2.15rem;
		min-height: 2.15rem;
	}


	.ngfp-match-link {
		width: 100%;
	}

}


/* ==========================================================
   35. Reduced Motion
   ========================================================== */

@media ( prefers-reduced-motion: reduce ) {

	.ngfp-competition-match,
	.ngfp-competition-stat {
		transition: none;
	}


	.ngfp-competition-match:hover,
	.ngfp-competition-stat:hover {
		transform: none;
	}

}


/* ==========================================================
   36. Explore Competition
   ========================================================== */

.ngfp-competition-explore {
	margin-top: var( --ngfp-space-5 );
}


/* ==========================================================
   37. Explore Navigation Grid
   ========================================================== */

.ngfp-competition-explore-links {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax( 0, 1fr )
		);

	gap: var( --ngfp-space-2 );
}


/* ==========================================================
   38. Explore Navigation Cards
   ========================================================== */

.ngfp-competition-explore-links a {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ngfp-space-2 );

	min-height: clamp( 4.75rem, 8vw, 6rem );

	padding:
		clamp( 1rem, 2vw, 1.35rem )
		clamp( 1rem, 2vw, 1.4rem );

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface );

	box-shadow: var( --ngfp-shadow-sm );

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-lg );
	font-weight: 750;
	line-height: 1.25;

	text-decoration: none;

	overflow: hidden;

	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}


/*
 * NGFP accent.
 */
.ngfp-competition-explore-links a::before {
	content: "";

	position: absolute;
	inset: 0 auto 0 0;

	width: 4px;

	background: var( --ngfp-green );
}


/*
 * Navigation arrow.
 *
 * The existing textual arrow remains valid,
 * so this adds a restrained visual cue rather
 * than requiring PHP changes.
 */
.ngfp-competition-explore-links a::after {
	content: "→";

	display: grid;
	flex: 0 0 auto;
	place-items: center;

	width: 2rem;
	height: 2rem;

	border-radius: 50%;

	background: rgba( 11, 122, 62, 0.08 );

	color: var( --ngfp-green );

	font-size: 1.1rem;
	font-weight: 800;

	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}


.ngfp-competition-explore-links a:hover {
	transform: translateY( -2px );

	border-color: rgba( 11, 122, 62, 0.3 );

	background: var( --ngfp-surface-soft );

	box-shadow: var( --ngfp-shadow-md );

	color: var( --ngfp-green );

	text-decoration: none;
}


.ngfp-competition-explore-links a:hover::after {
	transform: translateX( 3px );

	background: var( --ngfp-green );

	color: #ffffff;
}


.ngfp-competition-explore-links a:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.5 );
	outline-offset: 3px;
}


/* ==========================================================
   39. Explore Responsive Behaviour
   ========================================================== */

@media ( max-width: 700px ) {

	.ngfp-competition-explore-links {
		grid-template-columns: 1fr;
	}


	.ngfp-competition-explore-links a {
		min-height: 4.5rem;
	}

}


/* ==========================================================
   40. Explore Reduced Motion
   ========================================================== */

@media ( prefers-reduced-motion: reduce ) {

	.ngfp-competition-explore-links a,
	.ngfp-competition-explore-links a::after {
		transition: none;
	}


	.ngfp-competition-explore-links a:hover {
		transform: none;
	}


	.ngfp-competition-explore-links a:hover::after {
		transform: none;
	}

}




/* ==========================================================
   41. SportsPress Standings Container
   ========================================================== */

.ngfp-competition-standings-content {
	display: grid;
	gap: var( --ngfp-space-4 );
}


.ngfp-competition-standing {
	margin: 0;
}


/*
 * Visual boundary around each SportsPress standings table.
 */
.ngfp-competition-standing-table {
	max-width: 100%;

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface );

	box-shadow: var( --ngfp-shadow-sm );

	overflow-x: auto;
	overflow-y: hidden;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}


/* ==========================================================
   42. SportsPress League Table
   ========================================================== */

.ngfp-competition-standing-table table {
	width: 100%;

	margin: 0;

	border-collapse: collapse;

	background: var( --ngfp-surface );
}


/*
 * Keep the table usable rather than crushing columns
 * excessively on narrow screens.
 */
.ngfp-competition-standing-table .sp-league-table {
	min-width: 38rem;
}


/* ==========================================================
   43. Standings Header
   ========================================================== */

.ngfp-competition-standing-table table thead th {
	padding: 0.8rem 0.75rem;

	border-bottom: 2px solid var( --ngfp-green );

	background: var( --ngfp-blue );

	color: #ffffff;

	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.25;

	letter-spacing: 0.025em;
	text-transform: uppercase;

	white-space: nowrap;
}


/* ==========================================================
   44. Standings Rows
   ========================================================== */

.ngfp-competition-standing-table table tbody td {
	padding: 0.75rem;

	border-bottom: 1px solid var( --ngfp-border );

	color: var( --ngfp-text );

	font-size: var( --ngfp-font-sm );
	line-height: 1.35;

	vertical-align: middle;
}


.ngfp-competition-standing-table table tbody tr:last-child td {
	border-bottom: 0;
}


.ngfp-competition-standing-table table tbody tr:hover td {
	background: rgba( 11, 122, 62, 0.035 );
}


/* ==========================================================
   45. Club Column + Logos
   ========================================================== */

.ngfp-competition-standing-table
.sp-league-table
.team-logo {
	width: 2rem;
	height: 2rem;

	margin-right: 0.5rem;

	object-fit: contain;

	vertical-align: middle;
}


.ngfp-competition-standing-table
.sp-league-table
td[data-label="Club"] {
	font-weight: 700;
}


/* ==========================================================
   46. Numeric Standings Columns
   ========================================================== */

.ngfp-competition-standing-table
.sp-league-table
td:not([data-label="Club"]) {
	font-variant-numeric: tabular-nums;
}


/* ==========================================================
   47. Standings Links
   ========================================================== */

.ngfp-competition-standing-table a {
	color: var( --ngfp-blue );

	font-weight: 650;

	text-decoration: none;
}


.ngfp-competition-standing-table a:hover {
	color: var( --ngfp-green );

	text-decoration: underline;
}


.ngfp-competition-standing-table a:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.45 );
	outline-offset: 2px;
	border-radius: 2px;
}


/* ==========================================================
   48. Standings Mobile Behaviour
   ========================================================== */

@media ( max-width: 700px ) {

	.ngfp-competition-standing-table {
		/*
		 * Deliberately allow horizontal scrolling inside
		 * the standings component instead of compressing
		 * the entire SportsPress table beyond readability.
		 */
		overscroll-behavior-inline: contain;
	}


	.ngfp-competition-standing-table table thead th,
	.ngfp-competition-standing-table table tbody td {
		padding:
			0.65rem
			0.6rem;
	}

}



/* ==========================================================
   49. Competition Sub-page Navigation
   ========================================================== */

.ngfp-competition-section-navigation {
	margin-top: var( --ngfp-space-3 );
}


.ngfp-competition-section-navigation a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;

	min-height: 42px;

	padding: 0.5rem 0.8rem;

	border-radius: var( --ngfp-radius-sm );

	color: var( --ngfp-green );

	font-size: var( --ngfp-font-sm );
	font-weight: 700;

	text-decoration: none;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}


.ngfp-competition-section-navigation a:hover {
	background: rgba( 11, 122, 62, 0.07 );

	color: var( --ngfp-blue );

	text-decoration: none;
}


.ngfp-competition-section-navigation a:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.45 );
	outline-offset: 2px;
}


/* ==========================================================
   50. Competition Sub-page Hero
   ========================================================== */

/*
 * Results, Fixtures and Clubs use the same Competition
 * header architecture as the main profile, but do not
 * currently contain the trophy/icon element.
 *
 * Keep their identity block balanced without requiring
 * duplicate template markup.
 */
.ngfp-competition-results-page
.ngfp-competition-heading {
	align-items: center;
}


/*
 * The contextual label — e.g.
 * "2026 Season · Results" — remains a compact pill.
 */
.ngfp-competition-results-page
.ngfp-competition-type {
	margin-top: var( --ngfp-space-2 );
}


/* ==========================================================
   51. Results Content
   ========================================================== */

.ngfp-competition-results-page
.ngfp-competition-results {
	margin-top: var( --ngfp-space-4 );
}


/* ==========================================================
   52. Results Score Emphasis
   ========================================================== */

.ngfp-competition-results-page
.ngfp-match-team-score {
	min-width: 2.65rem;
	min-height: 2.65rem;

	font-size:
		clamp(
			1.2rem,
			1.05rem + 0.5vw,
			1.55rem
		);
}


/* ==========================================================
   53. Results Empty State
   ========================================================== */

.ngfp-competition-results-page
.ngfp-placeholder {
	margin: 0;

	padding:
		clamp( 1.25rem, 3vw, 2rem );

	border: 1px dashed #cbd5e1;
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface-soft );

	color: var( --ngfp-text-muted );

	text-align: center;
}


/* ==========================================================
   54. Results Small-screen Behaviour
   ========================================================== */

@media ( max-width: 700px ) {

	.ngfp-competition-results-page
	.ngfp-competition-section-navigation {
		margin-top: var( --ngfp-space-2 );
	}

}


@media ( max-width: 480px ) {

	.ngfp-competition-results-page
	.ngfp-match-team-score {
		min-width: 2.25rem;
		min-height: 2.25rem;
	}

}


/* ==========================================================
   55. Sub-page Reduced Motion
   ========================================================== */

@media ( prefers-reduced-motion: reduce ) {

	.ngfp-competition-section-navigation a {
		transition: none;
	}

}



/* ==========================================================
   62. Competition Clubs Page
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-competition-heading {
	align-items: center;
}


.ngfp-competition-clubs-page
.ngfp-competition-clubs {
	margin-top: var( --ngfp-space-4 );
}


/* ==========================================================
   63. Competition Clubs Directory Grid
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(
				min( 100%, 18rem ),
				1fr
			)
		);

	gap: var( --ngfp-space-3 );
}


/* ==========================================================
   64. Competition Club Card
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory-item {
	position: relative;

	display: block;

	min-height: 100%;

	padding:
		clamp( 1.1rem, 2.5vw, 1.5rem )
		clamp( 1.1rem, 2.5vw, 1.55rem );

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface );

	box-shadow: var( --ngfp-shadow-sm );

	overflow: hidden;

	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}


.ngfp-competition-clubs-page
.ngfp-directory-item::before {
	content: "";

	position: absolute;
	inset: 0 auto 0 0;

	width: 4px;

	background: var( --ngfp-green );
}


.ngfp-competition-clubs-page
.ngfp-directory-item:hover {
	transform: translateY( -2px );

	border-color: rgba( 11, 122, 62, 0.3 );

	box-shadow: var( --ngfp-shadow-md );
}


/* ==========================================================
   65. Club Card Link
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory-link {
	display: block;

	height: 100%;

	color: inherit;
	text-decoration: none;
}


.ngfp-competition-clubs-page
.ngfp-directory-link:focus-visible {
	outline: 3px solid rgba( 245, 166, 35, 0.5 );
	outline-offset: 3px;
	border-radius: var( --ngfp-radius-sm );
}


/* ==========================================================
   66. Club Card Header
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory-top {
	display: grid;

	grid-template-columns:
		auto
		minmax( 0, 1fr )
		auto;

	align-items: center;

	gap: 0.75rem;
}


.ngfp-competition-clubs-page
.ngfp-directory-icon {
	display: grid;
	place-items: center;

	width: 2.35rem;
	height: 2.35rem;

	border-radius: 50%;

	background: rgba( 11, 122, 62, 0.08 );

	color: var( --ngfp-green );

	font-size: 1.1rem;
	line-height: 1;
}


/* ==========================================================
   67. Club Name
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory-name {
	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-lg );
	font-weight: 750;
	line-height: 1.3;

	overflow-wrap: anywhere;
}


.ngfp-competition-clubs-page
.ngfp-directory-item:hover
.ngfp-directory-name {
	color: var( --ngfp-green );
}


/* ==========================================================
   68. Club Arrow
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory-arrow {
	display: grid;
	place-items: center;

	width: 2rem;
	height: 2rem;

	border-radius: 50%;

	background: rgba( 11, 122, 62, 0.07 );

	color: var( --ngfp-green );

	font-size: 1rem;

	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}


.ngfp-competition-clubs-page
.ngfp-directory-item:hover
.ngfp-directory-arrow {
	transform: translateX( 3px );

	background: var( --ngfp-green );

	color: #ffffff;
}


/* ==========================================================
   69. Club Geography / Location
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-directory-location {
	position: relative;

	margin:
		var( --ngfp-space-2 )
		0
		0;

	padding-left: 1.3rem;

	color: var( --ngfp-text-muted );

	font-size: var( --ngfp-font-sm );
	line-height: 1.5;
}


.ngfp-competition-clubs-page
.ngfp-directory-location::before {
	content: "⌖";

	position: absolute;
	left: 0;
	top: 0;

	color: var( --ngfp-green );

	font-weight: 800;
}


/* ==========================================================
   70. Competition Clubs Pagination
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	gap: 0.4rem;

	margin-top: var( --ngfp-space-4 );
}


.ngfp-competition-clubs-page
.ngfp-pagination
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 44px;
	min-height: 44px;

	margin: 0;
	padding: 0.55rem 0.75rem;

	border: 1px solid var( --ngfp-border );
	border-radius: var( --ngfp-radius-sm );

	background: var( --ngfp-surface );

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-sm );
	font-weight: 700;

	text-decoration: none;
}


.ngfp-competition-clubs-page
.ngfp-pagination
.page-numbers:hover {
	border-color: var( --ngfp-green );

	background: rgba( 11, 122, 62, 0.06 );

	color: var( --ngfp-green );
}


.ngfp-competition-clubs-page
.ngfp-pagination
.current {
	border-color: var( --ngfp-green );

	background: var( --ngfp-green );

	color: #ffffff;
}


/* ==========================================================
   71. Clubs Empty State
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-placeholder {
	margin: 0;

	padding:
		clamp( 1.25rem, 3vw, 2rem );

	border: 1px dashed #cbd5e1;
	border-radius: var( --ngfp-radius-md );

	background: var( --ngfp-surface-soft );

	color: var( --ngfp-text-muted );

	text-align: center;
}


/* ==========================================================
   72. Clubs Responsive Refinement
   ========================================================== */

@media ( max-width: 480px ) {

	.ngfp-competition-clubs-page
	.ngfp-directory {
		grid-template-columns: 1fr;
	}


	.ngfp-competition-clubs-page
	.ngfp-directory-item {
		padding:
			1rem
			0.95rem;
	}

}


/* ==========================================================
   73. Clubs Reduced Motion
   ========================================================== */

@media ( prefers-reduced-motion: reduce ) {

	.ngfp-competition-clubs-page
	.ngfp-directory-item,

	.ngfp-competition-clubs-page
	.ngfp-directory-arrow {
		transition: none;
	}


	.ngfp-competition-clubs-page
	.ngfp-directory-item:hover,

	.ngfp-competition-clubs-page
	.ngfp-directory-item:hover
	.ngfp-directory-arrow {
		transform: none;
	}

}




/* ==========================================================
   74. Competition Clubs Directory Alignment
   ========================================================== */

/*
 * The reusable directory contains its own heading.
 * Inside a Competition Clubs page that heading must
 * occupy the complete grid row rather than consuming
 * one of the club-card columns.
 */
.ngfp-competition-clubs-page
.ngfp-directory
> h2,
.ngfp-competition-clubs-page
.ngfp-directory
> h3,
.ngfp-competition-clubs-page
.ngfp-directory
> .ngfp-directory-heading,
.ngfp-competition-clubs-page
.ngfp-directory
> .ngfp-directory-title {
	grid-column: 1 / -1;

	margin:
		0
		0
		var( --ngfp-space-1 );

	color: var( --ngfp-blue );

	font-size: var( --ngfp-font-lg );
	font-weight: 700;
	line-height: 1.3;
}


/*
 * Any pagination belonging to the directory must also
 * occupy the complete grid row.
 */
.ngfp-competition-clubs-page
.ngfp-directory
> .ngfp-pagination {
	grid-column: 1 / -1;
}


/* ==========================================================
   75. Wide-screen Club Grid Refinement
   ========================================================== */

@media ( min-width: 900px ) {

	.ngfp-competition-clubs-page
	.ngfp-directory {
		grid-template-columns:
			repeat(
				3,
				minmax( 0, 1fr )
			);
	}

}


/* ==========================================================
   76. Medium-screen Club Grid
   ========================================================== */

@media ( min-width: 560px ) and ( max-width: 899px ) {

	.ngfp-competition-clubs-page
	.ngfp-directory {
		grid-template-columns:
			repeat(
				2,
				minmax( 0, 1fr )
			);
	}

}


/* ==========================================================
   77. Narrow-screen Club Grid
   ========================================================== */

@media ( max-width: 559px ) {

	.ngfp-competition-clubs-page
	.ngfp-directory {
		grid-template-columns: 1fr;
	}

}





/* ==========================================================
   78. Shared Competition Sub-page Header System
   ========================================================== */

.ngfp-competition-clubs-page,
.ngfp-competition-fixtures-page,
.ngfp-competition-results-page {
	--ngfp-subpage-gap: clamp( 1rem, 2vw, 1.5rem );
}


/* ==========================================================
   79. Shared Sub-page Hero Alignment
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-competition-header,

.ngfp-competition-fixtures-page
.ngfp-competition-header,

.ngfp-competition-results-page
.ngfp-competition-header {
	align-items: center;
}


/*
 * Keep Competition identity vertically balanced
 * with the season selector.
 */
.ngfp-competition-clubs-page
.ngfp-competition-heading,

.ngfp-competition-fixtures-page
.ngfp-competition-heading,

.ngfp-competition-results-page
.ngfp-competition-heading {
	align-items: center;
}


/* ==========================================================
   80. Shared Sub-page Title Treatment
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-competition-title h1,

.ngfp-competition-fixtures-page
.ngfp-competition-title h1,

.ngfp-competition-results-page
.ngfp-competition-title h1 {
	max-width: 22ch;
}


/*
 * Sub-page context badge:
 *
 * 2026 Season · Clubs
 * 2026 Season · Fixtures
 * 2026 Season · Results
 */
.ngfp-competition-clubs-page
.ngfp-competition-type,

.ngfp-competition-fixtures-page
.ngfp-competition-type,

.ngfp-competition-results-page
.ngfp-competition-type {
	margin-top: var( --ngfp-space-2 );

	background: rgba( 11, 122, 62, 0.1 );

	color: var( --ngfp-green );
}


/* ==========================================================
   81. Shared Back Navigation
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-competition-section-navigation,

.ngfp-competition-fixtures-page
.ngfp-competition-section-navigation,

.ngfp-competition-results-page
.ngfp-competition-section-navigation {
	margin-top: var( --ngfp-subpage-gap );
	margin-bottom: var( --ngfp-space-3 );
}


.ngfp-competition-clubs-page
.ngfp-competition-section-navigation a,

.ngfp-competition-fixtures-page
.ngfp-competition-section-navigation a,

.ngfp-competition-results-page
.ngfp-competition-section-navigation a {
	position: relative;

	padding-left: 0.2rem;

	background: transparent;
}


.ngfp-competition-clubs-page
.ngfp-competition-section-navigation a:hover,

.ngfp-competition-fixtures-page
.ngfp-competition-section-navigation a:hover,

.ngfp-competition-results-page
.ngfp-competition-section-navigation a:hover {
	background: transparent;

	color: var( --ngfp-blue );

	text-decoration: underline;
}


/* ==========================================================
   82. Shared Sub-page Main Section Spacing
   ========================================================== */

.ngfp-competition-clubs-page
> .ngfp-competition-clubs,

.ngfp-competition-fixtures-page
> .ngfp-competition-fixtures,

.ngfp-competition-results-page
> .ngfp-competition-results {
	margin-top: 0;
}


/* ==========================================================
   83. Shared Sub-page Section Headings
   ========================================================== */

.ngfp-competition-clubs-page
.ngfp-competition-clubs
> h2,

.ngfp-competition-fixtures-page
.ngfp-section-header h2,

.ngfp-competition-results-page
.ngfp-section-header h2 {
	margin-top: 0;
}


/* ==========================================================
   84. Shared Sub-page Mobile Header Behaviour
   ========================================================== */

@media ( max-width: 700px ) {

	.ngfp-competition-clubs-page
	.ngfp-competition-header,

	.ngfp-competition-fixtures-page
	.ngfp-competition-header,

	.ngfp-competition-results-page
	.ngfp-competition-header {
		grid-template-columns: 1fr;

		align-items: stretch;
	}


	.ngfp-competition-clubs-page
	.ngfp-competition-season,

	.ngfp-competition-fixtures-page
	.ngfp-competition-season,

	.ngfp-competition-results-page
	.ngfp-competition-season {
		width: min( 100%, 18rem );
	}


	.ngfp-competition-clubs-page
	.ngfp-competition-title h1,

	.ngfp-competition-fixtures-page
	.ngfp-competition-title h1,

	.ngfp-competition-results-page
	.ngfp-competition-title h1 {
		max-width: none;
	}

}


/* ==========================================================
   85. Shared Sub-page Very Narrow Refinement
   ========================================================== */

@media ( max-width: 420px ) {

	.ngfp-competition-clubs-page
	.ngfp-competition-section-navigation,

	.ngfp-competition-fixtures-page
	.ngfp-competition-section-navigation,

	.ngfp-competition-results-page
	.ngfp-competition-section-navigation {
		margin-bottom: var( --ngfp-space-2 );
	}

}


/* ==========================================================
   86. Summary Cards — Narrow-screen Stack
   ========================================================== */

@media ( max-width: 600px ) {

	.ngfp-competition-profile
	.ngfp-competition-summary-grid {
		grid-template-columns: 1fr;
	}


	.ngfp-competition-profile
	.ngfp-competition-stat {
		min-height: auto;

		padding:
			1rem
			1.1rem;
	}


	.ngfp-competition-profile
	.ngfp-competition-stat strong {
		font-size: 1.65rem;
	}


	.ngfp-competition-profile
	.ngfp-competition-stat span {
		margin-top: 0.3rem;

		font-size: 0.85rem;
	}

}