/*
Theme Name: FPDC Pitch
Theme URI: https://footballpakistan.com/
Author: FootballPakistan.com (FPDC)
Description: A modern magazine theme for FootballPakistan.com. Rounded panels, a bold lead story, category sections and tag chips, in the original FPDC green and charcoal. Works with the existing posts, categories, tags, menus and widgets.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fpdc-pitch
Tags: news, blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, sticky-post, threaded-comments
*/

/* ==========================================================================
   Design tokens. Every colour, font, size and spacing value lives here.
   ========================================================================== */
:root {
	/* Colours (from the original FootballPakistan.com palette) */
	--color-green: #32b373;
	--color-green-dark: #26915c;
	--color-green-soft: rgba(50, 179, 115, 0.12);
	--color-green-line: rgba(50, 179, 115, 0.45);
	--color-charcoal: #2b2b2b;
	--color-ink: #1b1b1b;
	--color-ink-deep: #151515;
	--color-grey: #767572;
	--color-grey-light: #c9c6c6;
	--color-line: #dcdcdc;
	--color-page: #f4f4f4;
	--color-surface: #fcfcfc;
	--color-white: #ffffff;
	--color-yellow: #ffcd02;
	--color-red: #dd0000;
	--color-overlay: rgba(43, 43, 43, 0.72);
	--color-white-soft: rgba(255, 255, 255, 0.12);
	--color-white-muted: rgba(255, 255, 255, 0.72);
	--color-white-faint: rgba(255, 255, 255, 0.5);
	--color-shadow: rgba(0, 0, 0, 0.06);
	--color-none: transparent;
	--gradient-plain: linear-gradient(135deg, var(--color-green-dark), var(--color-charcoal));

	/* Font families */
	--font-display: "Rubik One", "Arial Black", "Arial", sans-serif;
	--font-heading: "Oswald", "Arial Narrow", "Arial", sans-serif;
	--font-body: "Rubik", "Arial", "Helvetica", sans-serif;
	--font-mono: "IBM Plex Mono", "Courier New", monospace;

	/* Font sizes */
	--fs-xxs: 0.7rem;
	--fs-xs: 0.78rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.3rem;
	--fs-xl: 1.6rem;
	--fs-xxl: clamp(1.6rem, 3vw, 2.1rem);
	--fs-title: clamp(1.9rem, 4vw, 2.9rem);
	--fs-hero: clamp(1.6rem, 3.6vw, 2.75rem);
	--fs-mark: clamp(3.5rem, 9vw, 8rem);

	/* Font weights, line heights, letter spacing */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-bold: 700;
	--line-tight: 1.12;
	--line-snug: 1.3;
	--line-base: 1.65;
	--track-wide: 0.06em;
	--track-none: 0;

	/* Spacing */
	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 4rem;
	--gap-card: var(--space-5);
	--gap-layout: var(--space-5);
	--gutter: var(--space-6);
	--gutter-compact: var(--space-4);
	--panel-pad: var(--space-6);
	--panel-pad-compact: var(--space-4);

	/* Sizes */
	--zero: 0;
	--full: 100%;
	--half: 50%;
	--container: 1400px;
	--content-width: 48rem;
	--sidebar-width: 22rem;
	--logo-height: 3.25rem;
	--logo-height-compact: 2.5rem;
	--promo-logo-height: 7rem;
	--header-pad: var(--space-3);
	--nav-height: 3.75rem;
	--icon-size: 1.25rem;
	--icon-sm: 1rem;
	--control-size: 2.5rem;
	--social-size: 2.25rem;
	--avatar-size: 1.75rem;
	--thumb-size: 5rem;
	--hero-height: 34rem;
	--hero-height-compact: 26rem;
	--caption-width: 46rem;
	--dot-size: 0.25rem;
	--border-thin: 1px;
	--border-thick: 2px;
	--border-heavy: 3px;
	--hairline: 1px;
	--radius-sm: 0.375rem;
	--radius-md: 0.875rem;
	--radius-lg: 1.5rem;
	--radius-pill: 999px;
	--radius-round: 50%;
	--shadow-panel: 0 1px 2px var(--color-shadow);
	--blur: 10px;
	--ratio-card: 16 / 9;
	--ratio-thumb: 1 / 1;
	--input-height: 2.75rem;
	--textarea-height: 9rem;
	--admin-bar-height: 32px;
	--z-sticky: 50;

	/* Columns (whole numbers, switched by layout classes) */
	--cols-post: 4;
	--cols-feature: 2;
	--cols-post-compact: 2;
	--cols-post-narrow: 1;
	--cols-feature-narrow: 1;
	--cols-match: 3;
	--cols-match-compact: 2;
	--cols-match-narrow: 1;
	--cols-player: 3;
	--cols-player-compact: 2;
	--cols-player-narrow: 1;

	/* Breakpoints, read by the layout script (px, unitless) */
	--bp-compact: 1024;
	--bp-narrow: 640;

	/* Motion and effects */
	--transition: 0.18s ease;
	--opacity-dot: 0.6;
	--scale-hover: scale(1.04);
	--rotate-flip: rotate(180deg);
	--viewport-height: 100vh;
	--footer-col: 10rem;
	--panel-col: 14rem;
	--match-card-width: 15.5rem;
	--badge-size: 2.25rem;
	--player-photo: 4.5rem;
	--opacity-disabled: 0.35;
}

/* Layout switches (set on <html> by the inline script in functions.php) */
.is-compact {
	--cols-post: var(--cols-post-compact);
	--cols-match: var(--cols-match-compact);
	--cols-player: var(--cols-player-compact);
	--gutter: var(--gutter-compact);
	--panel-pad: var(--panel-pad-compact);
	--hero-height: var(--hero-height-compact);
	--logo-height: var(--logo-height-compact);
}

.is-narrow {
	--cols-post: var(--cols-post-narrow);
	--cols-match: var(--cols-match-narrow);
	--cols-player: var(--cols-player-narrow);
	--cols-feature: var(--cols-feature-narrow);
}

/* ==========================================================================
   Base
   ========================================================================== */
* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: var(--full);
}

body {
	margin: var(--space-0);
	background: var(--color-page);
	color: var(--color-charcoal);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--line-base);
	display: flex;
	flex-direction: column;
	min-height: var(--viewport-height);
}

a {
	color: var(--color-green-dark);
	text-decoration: none;
	transition: color var(--transition);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: var(--border-thick) solid var(--color-yellow);
	outline-offset: var(--border-thick);
}

img,
video,
iframe {
	max-width: var(--full);
	height: auto;
}

button {
	font: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: var(--line-tight);
	color: var(--color-ink);
	margin: var(--space-0);
}

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

ul,
ol {
	margin: var(--space-0);
}

.screen-reader-text {
	display: inline-block;
	width: var(--hairline);
	height: var(--hairline);
	overflow: hidden;
	clip-path: inset(var(--half));
	white-space: nowrap;
	margin: var(--space-0);
	padding: var(--space-0);
	border: var(--zero);
}

.skip-link {
	display: block;
	height: var(--zero);
	overflow: hidden;
	background: var(--color-yellow);
	color: var(--color-ink);
	font-weight: var(--weight-bold);
	text-align: center;
}

.skip-link:focus {
	height: auto;
	padding: var(--space-3);
}

.icon {
	width: var(--icon-size);
	height: var(--icon-size);
	fill: currentColor;
	flex-shrink: 0;
}

.container {
	width: var(--full);
	max-width: var(--container);
	margin: var(--space-0) auto;
	padding: var(--space-0) var(--gutter);
}

/* ==========================================================================
   Buttons, chips, meta
   ========================================================================== */
.button-primary,
.button-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	border: var(--border-thin) solid var(--color-green);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	white-space: nowrap;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

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

.button-primary:hover {
	background: var(--color-green-dark);
	border-color: var(--color-green-dark);
	color: var(--color-white);
}

.button-outline {
	background: var(--color-white);
	color: var(--color-green-dark);
}

.button-outline:hover {
	background: var(--color-green);
	color: var(--color-white);
}

.button-outline .icon,
.button-primary .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.button-block {
	display: flex;
	width: var(--full);
}

.button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-size);
	height: var(--control-size);
	border-radius: var(--radius-round);
	border: var(--border-thin) solid var(--color-green);
	background: var(--color-white);
	color: var(--color-green-dark);
	padding: var(--space-0);
	transition: background var(--transition), color var(--transition);
}

.button-icon:hover,
.button-icon[aria-expanded="true"] {
	background: var(--color-green);
	color: var(--color-white);
}

.chip-category,
.chip-tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--space-1);
	font-family: var(--font-mono);
	font-size: var(--fs-xxs);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--track-none);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-green-soft);
	color: var(--color-green-dark);
	transition: background var(--transition), color var(--transition);
}

.chip-tag {
	font-size: var(--fs-xs);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-page);
	color: var(--color-charcoal);
	border: var(--border-thin) solid var(--color-line);
}

.chip-category:hover,
.chip-tag:hover {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-white);
}

.chip-hash {
	color: var(--color-green);
}

.chip-tag:hover .chip-hash {
	color: var(--color-white);
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: var(--space-0);
}

.chip-item {
	display: flex;
}

.post-date {
	font-family: var(--font-mono);
	font-size: var(--fs-xxs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--color-grey);
}

.meta-dot {
	display: inline-block;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: var(--radius-round);
	background: currentColor;
	opacity: var(--opacity-dot);
	flex-shrink: 0;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.lead-text {
	color: var(--color-grey);
	font-size: var(--fs-md);
}

/* ==========================================================================
   Header (standalone component, see header.php)
   ========================================================================== */
.site-header {
	background: var(--color-white);
	border-top: var(--border-heavy) solid var(--color-green);
}

.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--header-pad);
	padding-bottom: var(--header-pad);
}

.brand {
	display: flex;
	align-items: center;
	min-width: var(--zero);
}

.brand-link {
	display: flex;
	align-items: center;
}

.brand-logo {
	height: var(--logo-height);
	width: auto;
	display: block;
}

.brand-text {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--color-green-dark);
	line-height: var(--line-tight);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.is-narrow .header-button {
	display: none;
}

.header-search {
	border-top: var(--border-thin) solid var(--color-line);
	padding: var(--space-4) var(--space-0);
	background: var(--color-surface);
}

.header-search[hidden] {
	display: none;
}

.search-form {
	display: flex;
	gap: var(--space-2);
	width: var(--full);
}

.search-field {
	flex: 1 1 auto;
	min-width: var(--zero);
	height: var(--input-height);
	padding: var(--space-0) var(--space-4);
	border: var(--border-thin) solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-charcoal);
	font-family: var(--font-body);
	font-size: var(--fs-base);
}

.search-submit {
	height: var(--input-height);
}

/* ==========================================================================
   Navigation bar (sticky)
   ========================================================================== */
.site-nav {
	position: sticky;
	top: var(--zero);
	z-index: var(--z-sticky);
	background: var(--color-charcoal);
	color: var(--color-white);
}

.admin-bar .site-nav {
	top: var(--admin-bar-height);
}

.nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--nav-height);
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-none);
	border: var(--border-thin) solid var(--color-white-faint);
	border-radius: var(--radius-pill);
	color: var(--color-white);
	padding: var(--space-1) var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.nav-toggle-close {
	display: none;
}

.nav-toggle-open,
.nav-toggle-close {
	align-items: center;
}

.nav-menu-wrap {
	display: flex;
	flex: 1 1 auto;
	min-width: var(--zero);
}

.nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: var(--space-0);
	margin: var(--space-0);
}

.nav-menu .menu-item,
.nav-menu .cat-item {
	display: flex;
	align-items: center;
}

.nav-menu a {
	display: flex;
	align-items: center;
	min-height: var(--nav-height);
	padding: var(--space-0) var(--space-3);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	border-bottom: var(--border-heavy) solid var(--color-none);
	border-top: var(--border-heavy) solid var(--color-none);
}

.nav-menu > .menu-item > a:hover,
.nav-menu > .is-active > a,
.nav-menu > .current-menu-item > a,
.nav-menu > .current-menu-ancestor > a,
.nav-menu > .current-menu-parent > a {
	color: var(--color-white);
	border-bottom-color: var(--color-green);
}

.nav-menu .sub-menu {
	display: none;
	list-style: none;
	padding: var(--space-0);
	margin: var(--space-0);
}

.submenu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--control-size);
	height: var(--control-size);
	background: var(--color-none);
	border: var(--zero);
	color: var(--color-white);
	padding: var(--space-0);
}

.nav-social {
	display: flex;
	align-items: center;
}

.nav-social .social-link {
	background: var(--color-white-soft);
	color: var(--color-white);
}

/* Desktop dropdown panel (in flow under the bar) */
.nav-panel {
	background: var(--color-ink);
	border-top: var(--border-thin) solid var(--color-white-soft);
}

.nav-panel[hidden] {
	display: none;
}

.nav-panel-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
}

.panel-head {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	color: var(--color-green);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--track-wide);
}

.panel-head:hover {
	color: var(--color-white);
}

.panel-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	list-style: none;
	padding: var(--space-0);
	margin: var(--space-0);
}

.panel-menu > .menu-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: var(--panel-col);
	flex: 0 1 auto;
}

.panel-menu a {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--weight-medium);
	padding: var(--space-1) var(--space-0);
}

.panel-menu a:hover,
.panel-menu .current-menu-item > a {
	color: var(--color-green);
}

.panel-menu .sub-menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: var(--space-0) var(--space-0) var(--space-2) var(--space-4);
	margin: var(--space-0);
	border-left: var(--border-thin) solid var(--color-white-soft);
}

.panel-menu .sub-menu a {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--weight-regular);
	color: var(--color-white-muted);
}

/* Compact (tablet / phone) navigation */
.is-compact .nav-row {
	flex-wrap: wrap;
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
	min-height: var(--zero);
}

.is-compact .nav-toggle {
	display: inline-flex;
}

.is-compact .nav-menu-wrap {
	display: none;
	order: 3;
	flex: 1 1 var(--full);
}

.is-compact .site-nav.is-open .nav-menu-wrap {
	display: flex;
}

.is-compact .site-nav.is-open .nav-toggle-open {
	display: none;
}

.is-compact .site-nav.is-open .nav-toggle-close {
	display: inline-flex;
}

.is-compact .nav-menu {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	width: var(--full);
	padding: var(--space-2) var(--space-0);
}

.is-compact .nav-menu .menu-item,
.is-compact .nav-menu .cat-item {
	flex-wrap: wrap;
	border-top: var(--border-thin) solid var(--color-white-soft);
}

.is-compact .nav-menu a {
	flex: 1 1 auto;
	min-height: var(--control-size);
	border: var(--zero);
}

.is-compact .submenu-toggle {
	display: inline-flex;
}

.is-compact .menu-item.is-open > .submenu-toggle .icon {
	transform: var(--rotate-flip);
}

.is-compact .menu-item.is-open > .sub-menu {
	display: flex;
	flex-direction: column;
	flex: 1 1 var(--full);
	padding-left: var(--space-4);
}

.is-compact .sub-menu a {
	text-transform: none;
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	color: var(--color-white-muted);
}

.is-compact .nav-panel {
	display: none;
}

/* ==========================================================================
   Social icons
   ========================================================================== */
.social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: var(--space-0);
	margin: var(--space-0);
}

.social-item {
	display: flex;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--social-size);
	height: var(--social-size);
	border-radius: var(--radius-round);
	background: var(--color-page);
	color: var(--color-charcoal);
	transition: background var(--transition), color var(--transition);
}

.social-link .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

.social-link:hover,
.nav-social .social-link:hover {
	background: var(--color-green);
	color: var(--color-white);
}

/* ==========================================================================
   Page layout and panels
   ========================================================================== */
.site-content {
	flex: 1 0 auto;
	padding: var(--space-6) var(--space-0);
}

.layout {
	display: flex;
	align-items: flex-start;
	gap: var(--gap-layout);
}

.layout-main {
	display: flex;
	flex-direction: column;
	gap: var(--gap-layout);
	flex: 1 1 auto;
	min-width: var(--zero);
}

.layout-side {
	display: flex;
	flex-direction: column;
	gap: var(--gap-layout);
	flex: 0 0 var(--sidebar-width);
	min-width: var(--zero);
}

.is-compact .layout {
	flex-direction: column;
	align-items: stretch;
}

.is-compact .layout-side {
	flex-basis: auto;
}

.panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--panel-pad);
	box-shadow: var(--shadow-panel);
	min-width: var(--zero);
}

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-thick) solid var(--color-charcoal);
}

.section-title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--fs-xxl);
	line-height: var(--line-tight);
	color: var(--color-ink);
	margin: var(--space-0);
}

.layout-side .section-title {
	font-size: var(--fs-lg);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-card);
}

.card-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.card-feature,
.card-post {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: var(--zero);
}

.card-feature {
	flex: 0 0 calc((var(--full) - (var(--cols-feature) - 1) * var(--gap-card)) / var(--cols-feature));
}

.card-post {
	flex: 0 0 calc((var(--full) - (var(--cols-post) - 1) * var(--gap-card)) / var(--cols-post));
}

.card-list {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.card-thumb {
	display: flex;
	overflow: hidden;
	border-radius: var(--radius-md);
	aspect-ratio: var(--ratio-card);
	background: var(--color-page);
}

.card-list .card-thumb {
	flex: 0 0 var(--thumb-size);
	aspect-ratio: var(--ratio-thumb);
}

.card-image {
	width: var(--full);
	height: var(--full);
	object-fit: cover;
	display: block;
	transition: transform var(--transition);
}

.card-thumb:hover .card-image {
	transform: var(--scale-hover);
}

.card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--full);
	height: var(--full);
	background: var(--gradient-plain);
}

.placeholder-mark {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--color-white-faint);
	letter-spacing: var(--track-wide);
}

.card-list .placeholder-mark {
	font-size: var(--fs-xs);
}

.card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: var(--zero);
}

.card-title {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--fs-md);
	line-height: var(--line-snug);
}

.card-feature .card-title {
	font-size: var(--fs-lg);
}

.card-list .card-title {
	font-size: var(--fs-base);
}

.card-title a {
	color: var(--color-ink);
}

.card-title a:hover {
	color: var(--color-green-dark);
}

.card-excerpt {
	color: var(--color-grey);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   Hero (lead story)
   ========================================================================== */
.hero-feature {
	display: flex;
	align-items: flex-end;
	min-height: var(--hero-height);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-charcoal);
	background-size: cover;
	background-position: center;
}

.hero-plain {
	background-image: var(--gradient-plain);
}

.hero-caption {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: var(--full);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-overlay);
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
	color: var(--color-white);
}

.hero-caption .chip-category {
	background: var(--color-green);
	color: var(--color-white);
}

.hero-title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--fs-hero);
	line-height: var(--line-tight);
	max-width: var(--caption-width);
}

.hero-title a {
	color: var(--color-white);
}

.hero-title a:hover {
	color: var(--color-yellow);
}

.hero-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.hero-byline {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-white-muted);
}

.hero-byline .post-date {
	color: var(--color-white-muted);
}

.avatar-small {
	width: var(--avatar-size);
	height: var(--avatar-size);
	border-radius: var(--radius-round);
	display: block;
}

/* ==========================================================================
   Sidebar promo card
   ========================================================================== */
.promo-card {
	padding: var(--space-0);
	overflow: hidden;
	gap: var(--space-0);
}

.promo-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6) var(--space-5);
	background: var(--color-page);
	border-bottom: var(--border-heavy) solid var(--color-green);
}

.promo-logo {
	max-height: var(--promo-logo-height);
	width: auto;
	display: block;
}

.promo-media .placeholder-mark {
	color: var(--color-green);
	font-size: var(--fs-xxl);
}

.promo-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
}

.promo-title {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	line-height: var(--line-snug);
}

.promo-text {
	font-size: var(--fs-sm);
	color: var(--color-grey);
}

/* Widgets inside sidebar panels */
.widget ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: var(--space-0);
}

.widget li {
	padding: var(--space-2) var(--space-0);
	border-bottom: var(--border-thin) solid var(--color-line);
}

.widget li:last-child {
	border-bottom: var(--zero);
}

.widget ul ul {
	padding-left: var(--space-4);
}

.widget a {
	color: var(--color-charcoal);
	font-weight: var(--weight-medium);
}

.widget a:hover {
	color: var(--color-green-dark);
}

.widget select {
	width: var(--full);
	height: var(--input-height);
	padding: var(--space-0) var(--space-3);
	border: var(--border-thin) solid var(--color-line);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
}

.tagcloud,
.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tagcloud a,
.wp-block-tag-cloud a {
	font-size: var(--fs-xs) !important;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-page);
	border: var(--border-thin) solid var(--color-line);
}

/* ==========================================================================
   Archive heads, pagination
   ========================================================================== */
.archive-head {
	gap: var(--space-3);
	border-top: var(--border-heavy) solid var(--color-green);
}

.page-title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--fs-title);
	line-height: var(--line-tight);
}

.archive-desc {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: var(--color-grey);
}

.pagination-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
	padding: var(--space-0);
}

.pagination-item {
	display: flex;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-size);
	height: var(--control-size);
	padding: var(--space-0) var(--space-3);
	border-radius: var(--radius-pill);
	border: var(--border-thin) solid var(--color-line);
	color: var(--color-charcoal);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

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

.pagination .page-numbers .icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
}

/* ==========================================================================
   Single article
   ========================================================================== */
.article-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.article-title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--fs-title);
	line-height: var(--line-tight);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-grey);
}

.byline-name a {
	color: var(--color-charcoal);
	font-weight: var(--weight-medium);
}

.article-media {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-0);
}

.article-image {
	width: var(--full);
	height: auto;
	border-radius: var(--radius-md);
	display: block;
}

.media-caption,
.wp-caption-text,
.wp-element-caption,
.gallery-caption {
	font-size: var(--fs-xs);
	color: var(--color-grey);
}

.entry-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	font-size: var(--fs-md);
	max-width: var(--content-width);
	width: var(--full);
	overflow-wrap: break-word;
}

.entry-content > * {
	margin-top: var(--space-0);
	margin-bottom: var(--space-0);
	max-width: var(--full);
}

.entry-content h2 {
	font-size: var(--fs-xl);
	padding-top: var(--space-3);
}

.entry-content h3 {
	font-size: var(--fs-lg);
	padding-top: var(--space-2);
}

.entry-content h4 {
	font-size: var(--fs-md);
}

.entry-content a {
	color: var(--color-green-dark);
	text-decoration: underline;
	text-decoration-color: var(--color-green-line);
	text-underline-offset: var(--border-heavy);
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-5);
}

.entry-content li {
	margin-bottom: var(--space-1);
}

.entry-content blockquote {
	margin-left: var(--space-0);
	margin-right: var(--space-0);
	padding: var(--space-3) var(--space-5);
	border-left: var(--border-heavy) solid var(--color-green);
	background: var(--color-page);
	border-radius: var(--space-0) var(--radius-md) var(--radius-md) var(--space-0);
	font-size: var(--fs-lg);
	font-family: var(--font-heading);
	color: var(--color-ink);
}

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

.entry-content figure,
.entry-content .wp-caption {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-left: var(--space-0);
	margin-right: var(--space-0);
	width: auto !important;
}

.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter {
	align-self: center;
}

.entry-content table {
	width: var(--full);
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.entry-content th,
.entry-content td {
	padding: var(--space-2) var(--space-3);
	border-bottom: var(--border-thin) solid var(--color-line);
	text-align: left;
}

.entry-content th {
	background: var(--color-charcoal);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
}

.entry-content tr:nth-child(even) td {
	background: var(--color-page);
}

.entry-content iframe {
	width: var(--full);
	border: var(--zero);
	border-radius: var(--radius-md);
}

.entry-content hr {
	width: var(--full);
	border: var(--zero);
	border-top: var(--border-thin) solid var(--color-line);
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.gallery-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1 1 var(--thumb-size);
	margin: var(--space-0);
}

.gallery-item img {
	width: var(--full);
	height: auto;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

.article-foot {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-top: var(--space-5);
	border-top: var(--border-thin) solid var(--color-line);
}

.tag-row,
.share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.tag-label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--color-grey);
}

.post-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-layout);
}

.post-nav-link {
	flex: 1 1 var(--sidebar-width);
	gap: var(--space-2);
	transition: box-shadow var(--transition);
}

.post-nav-link:hover {
	box-shadow: inset var(--zero) var(--zero) var(--zero) var(--border-thick) var(--color-green);
}

.post-nav-title {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	color: var(--color-ink);
}

/* ==========================================================================
   Comments
   ========================================================================== */
.comment-list,
.comment-list .children {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	padding: var(--space-0);
}

.comment-list .children {
	padding-left: var(--space-5);
	padding-top: var(--space-4);
}

.comment-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--color-page);
	border-radius: var(--radius-md);
}

.comment-meta,
.comment-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
}

.comment-author .avatar {
	width: var(--control-size);
	height: var(--control-size);
	border-radius: var(--radius-round);
}

.comment-metadata a {
	color: var(--color-grey);
	font-family: var(--font-mono);
	font-size: var(--fs-xxs);
}

.reply a {
	font-size: var(--fs-sm);
	font-weight: var(--weight-medium);
}

.comment-respond {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.comment-form p {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.comment-form .comment-form-cookies-consent {
	flex-direction: row;
	align-items: center;
	gap: var(--space-2);
}

.comment-form label {
	font-size: var(--fs-sm);
	font-weight: var(--weight-medium);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: var(--full);
	padding: var(--space-2) var(--space-3);
	min-height: var(--input-height);
	border: var(--border-thin) solid var(--color-line);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--fs-base);
}

.comment-form textarea {
	min-height: var(--textarea-height);
}

.comment-form .form-submit {
	flex-direction: row;
}

/* ==========================================================================
   Footer (standalone component, see footer.php)
   ========================================================================== */
.site-footer {
	padding-bottom: var(--space-6);
}

.footer-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	background: var(--color-charcoal);
	color: var(--color-white-muted);
	border-radius: var(--radius-lg);
	padding: var(--space-7) var(--panel-pad) var(--space-5);
}

.footer-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-7);
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1 1 var(--sidebar-width);
}

.footer-mark {
	display: flex;
}

.footer-mark-line {
	font-family: var(--font-display);
	font-size: var(--fs-mark);
	line-height: var(--line-tight);
	color: var(--color-green);
	letter-spacing: var(--track-wide);
}

.footer-mark:hover .footer-mark-line {
	color: var(--color-yellow);
}

.footer-tagline {
	font-size: var(--fs-sm);
	max-width: var(--sidebar-width);
}

.footer-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	flex: 1 1 var(--sidebar-width);
	max-width: var(--caption-width);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-5);
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	list-style: none;
	padding: var(--space-0);
	margin: var(--space-0);
	flex: 1 1 var(--sidebar-width);
}

.footer-menu .menu-item {
	display: flex;
	flex: 0 0 var(--footer-col);
}

.footer-menu a {
	color: var(--color-white);
	font-size: var(--fs-sm);
}

.footer-menu a:hover {
	color: var(--color-green);
}

.site-footer .social-link {
	background: var(--color-white-soft);
	color: var(--color-white);
}

.footer-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

.footer-title {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--fs-xl);
	color: var(--color-white);
}

.footer-text {
	font-size: var(--fs-sm);
}

.footer-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.footer-widget {
	flex: 1 1 var(--sidebar-width);
}

.footer-widget a {
	color: var(--color-white);
}

.footer-copy {
	text-align: center;
	font-size: var(--fs-xs);
	color: var(--color-white-faint);
	padding-top: var(--space-4);
	border-top: var(--border-thin) solid var(--color-white-soft);
}

/* ==========================================================================
   Matches (homepage strip and National Team page)
   ========================================================================== */
.page-stack {
	display: flex;
	flex-direction: column;
	gap: var(--gap-layout);
}

.match-scroll {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.match-track {
	display: flex;
	gap: var(--space-4);
	flex: 1 1 auto;
	min-width: var(--zero);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.scroll-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--control-size);
	height: var(--control-size);
	padding: var(--space-0);
	border-radius: var(--radius-round);
	border: var(--border-thin) solid var(--color-green);
	background: var(--color-white);
	color: var(--color-green-dark);
	transition: background var(--transition), color var(--transition);
}

.scroll-button:hover {
	background: var(--color-green);
	color: var(--color-white);
}

.scroll-button:disabled {
	opacity: var(--opacity-disabled);
	cursor: default;
}

.is-narrow .scroll-button {
	display: none;
}

.card-match {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 0 0 var(--match-card-width);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-page);
	color: var(--color-charcoal);
	scroll-snap-align: start;
	transition: box-shadow var(--transition);
}

.card-row .card-match {
	flex: 0 0 calc((var(--full) - (var(--cols-match) - 1) * var(--gap-card)) / var(--cols-match));
}

a.card-match:hover {
	color: var(--color-charcoal);
	box-shadow: inset var(--zero) var(--zero) var(--zero) var(--border-thick) var(--color-green);
}

.match-badge {
	align-self: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-mono);
	font-size: var(--fs-xxs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.is-result .match-badge {
	background: var(--color-charcoal);
}

.match-teams {
	display: flex;
	flex-direction: column;
	gap: var(--hairline);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.match-team {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-charcoal);
	color: var(--color-white);
}

.match-team.is-pakistan {
	background: var(--color-green-dark);
}

.team-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--badge-size);
	height: var(--badge-size);
	border-radius: var(--radius-round);
	background: var(--color-white-soft);
	font-family: var(--font-mono);
	font-size: var(--fs-xxs);
	font-weight: var(--weight-medium);
}

.team-name {
	flex: 1 1 auto;
	min-width: var(--zero);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
}

.team-score {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: var(--line-tight);
}

.match-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	text-align: center;
	font-size: var(--fs-xs);
	color: var(--color-grey);
}

.match-comp {
	color: var(--color-charcoal);
	font-weight: var(--weight-medium);
}

/* Squad */
.squad-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.group-title {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.card-player {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 calc((var(--full) - (var(--cols-player) - 1) * var(--gap-card)) / var(--cols-player));
	min-width: var(--zero);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background: var(--color-page);
}

.player-photo {
	display: flex;
	flex: 0 0 var(--player-photo);
	height: var(--player-photo);
	border-radius: var(--radius-round);
	overflow: hidden;
	background: var(--gradient-plain);
}

.player-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--full);
	height: var(--full);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	color: var(--color-white);
}

.player-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: var(--zero);
}

.player-number {
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: var(--line-tight);
	color: var(--color-green);
}

.player-name {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	color: var(--color-ink);
}

.player-role {
	font-size: var(--fs-sm);
	color: var(--color-grey);
}

.chip-tag[aria-current="page"] {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-white);
}

/* Instagram follow card (shown when the Instagram Feed plugin is inactive) */
.follow-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-page);
	text-align: center;
}

.follow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--thumb-size);
	height: var(--thumb-size);
	border-radius: var(--radius-round);
	background: var(--color-green);
	color: var(--color-white);
}

.follow-icon .icon {
	width: var(--control-size);
	height: var(--control-size);
}

.follow-handle {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--weight-bold);
	color: var(--color-ink);
}

.follow-note {
	font-size: var(--fs-sm);
	color: var(--color-grey);
}

/* Default block widgets (Search, Latest Posts, Archives, Categories) */
.widget .wp-block-group,
.widget .wp-block-group__inner-container,
.footer-widget .wp-block-group,
.footer-widget .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.widget .wp-block-heading,
.widget .wp-block-search__label {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: var(--fs-lg);
	line-height: var(--line-tight);
	color: var(--color-ink);
	margin: var(--space-0);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-thick) solid var(--color-charcoal);
}

.wp-block-search__label {
	margin-bottom: var(--space-4);
}

.wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--space-2);
}

.wp-block-search__input {
	flex: 1 1 auto;
	min-width: var(--zero);
	height: var(--input-height);
	padding: var(--space-0) var(--space-4);
	border: var(--border-thin) solid var(--color-line);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-base);
}

.wp-block-search__button {
	height: var(--input-height);
	margin: var(--space-0);
	padding: var(--space-0) var(--space-4);
	border: var(--zero);
	border-radius: var(--radius-pill);
	background: var(--color-green);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--weight-medium);
}

.wp-block-search__button:hover {
	background: var(--color-green-dark);
}

.widget .wp-block-latest-comments {
	padding: var(--space-0);
	margin: var(--space-0);
}

.footer-widget {
	color: var(--color-white-muted);
	font-size: var(--fs-sm);
}

.footer-widget h2,
.footer-widget .wp-block-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	text-transform: uppercase;
	letter-spacing: var(--track-wide);
	color: var(--color-white);
	margin: var(--space-0);
}

.footer-widget ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	list-style: none;
	padding: var(--space-0);
	margin: var(--space-0);
}

/* ==========================================================================
   WordPress core helpers
   ========================================================================== */
.wp-block-image,
.wp-block-embed {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.wp-block-button__link {
	background: var(--color-green);
	color: var(--color-white) !important;
	border-radius: var(--radius-pill);
	text-decoration: none !important;
}