/*
 Theme Name:   KK Sports Child
 Theme URI:    https://example.com
 Description:  Child theme of GeneratePress for the Karachi Kings Fans Hub sports portal.
 Author:       Mickey
 Template:     generatepress
 Version:      1.0.0
*/

.kk-category-badge {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-size: 0.75em;
	padding: 2px 10px;
	border-radius: 3px;
	text-decoration: none;
	margin-bottom: 6px;
}

/* Let post grids size to however many posts actually exist, instead of
   leaving empty tracks when there are fewer posts than columns, and keep
   them centered instead of stuck against the left edge. */
.wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 360px)) !important;
	justify-content: center;
}

/* Give each post its own visible card, instead of floating text/images
   directly on the page background. */
.wp-block-post-template.is-layout-grid > li {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-post-template.is-layout-grid > li:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	transform: translateY(-2px);
}

/* GeneratePress's own single-post "page header image" feature renders
   the featured image at its native full size with no cap - fine for a
   wide landscape photo, but our AI-generated hero images are tall
   portrait shots, so uncapped they were rendering enormous (over 2000px
   tall on a normal content width). Capping the height and cropping with
   object-fit keeps it a normal banner regardless of the source image's
   own aspect ratio. */
.page-header-image-single img.wp-post-image {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}

@media (max-width: 600px) {
	.page-header-image-single img.wp-post-image {
		height: 240px;
	}
}

.wp-block-post-template .wp-block-post-featured-image {
	margin: 0 !important;
}

.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
	display: block;
}

.wp-block-post-template .wp-block-post-title {
	margin-top: 14px;
	font-size: 1.2em;
}

.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template .wp-block-post-date {
	color: #767676;
	font-size: 0.85em;
}

/* Consistent section rhythm: tinted background so a sparse (few-post)
   section reads as a bounded section, not a rendering glitch. */
.kk-section {
	background: #ffffff;
	border: 1px solid #e2e6ea;
	padding: 32px;
	border-radius: 10px;
	margin-bottom: 28px;
}

/* GeneratePress's own ".entry-content:not(:first-child){margin-top:2em}"
   (34px, since entry-content isn't technically the article's first
   child) outranks a plain ".entry-content" rule on specificity alone,
   so it kept winning regardless of load order. It gives the main
   content column a bigger top margin than the sidebar's
   ".inside-right-sidebar" (20px), so the first card in the main column
   and the first widget in the sidebar started at different heights even
   though both columns' own top edges line up. Match the sidebar's value
   so both start flush. */
.entry-content:not(:first-child) {
	margin-top: 20px;
}

/* WordPress core auto-adds a default 30px left/right padding to any
   Gutenberg "constrained" layout group's inner container (a global
   styles fallback, not something we set). These homepage sections nest
   several constrained groups (the section itself, the query block, the
   hero text column), so that 30px was stacking three levels deep on top
   of our own explicit padding - on a narrow phone it squeezed the
   featured-post title down to about 100px wide, forcing it to wrap
   mid-word. We size every one of these ourselves already, so this
   default padding is pure redundant bloat here - remove it. */
.kk-section .wp-block-group__inner-container.is-layout-constrained {
	padding-left: 0;
	padding-right: 0;
}

/* ===== Reserved ad zone placeholders (layout space only) ===== */
.kk-ad-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	margin: 0 auto;
	background: repeating-linear-gradient(45deg, #f1f2f4, #f1f2f4 10px, #e6e8eb 10px, #e6e8eb 20px);
	border: 1px dashed #c7cdd6;
	border-radius: 10px;
	color: #8a92a0;
	font-size: 0.8rem;
	font-family: "Inter", sans-serif;
}

.kk-ad-tag {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a8afba;
}

.kk-ad-leaderboard-wrap {
	display: flex;
	justify-content: center;
	padding: 12px 20px;
}

.kk-ad-mobile-sticky {
	display: none;
}

.kk-ad-close {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 18px;
	height: 18px;
	line-height: 16px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.12);
	color: #6b7280;
	font-size: 0.85rem;
	cursor: pointer;
}

.kk-ad-close:hover {
	background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 768px) {
	.kk-ad-mobile-sticky {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		height: 50px;
		min-height: 50px;
		z-index: 999;
		border-radius: 0;
		border-width: 1px 0 0 0;
	}

	.kk-ad-mobile-sticky.kk-ad-dismissed {
		display: none;
	}
}

.kk-ad-in-article {
	width: 100%;
	margin: 24px auto;
}

/* GeneratePress gives every ".main-navigation" element (both the
   hamburger's own wrapper <nav> AND the menu/search <nav>) a white
   background by default (background-color: var(--base-3)) - this is
   the actual white rectangle that kept showing behind/around the
   hamburger button no matter what was set on the button itself, since
   the button only ever covers part of its parent nav's padding box. */
.mobile-menu-control-wrapper,
.main-navigation,
#site-navigation,
#site-navigation.toggled,
#site-navigation .inside-navigation,
#site-navigation .menu-toggle,
#site-navigation .main-nav,
#site-navigation .main-nav ul,
#site-navigation .main-nav ul li,
.kk-nav-search,
.kk-nav-search form,
.kk-nav-search label {
	background: transparent !important;
}

.mobile-menu-control-wrapper .menu-toggle,
nav#site-navigation button.menu-toggle,
.has-inline-mobile-toggle #site-navigation button.menu-toggle,
.has-inline-mobile-toggle #site-navigation.toggled button.menu-toggle {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	border-radius: 0 !important;
	color: #fff !important;
}

/* GeneratePress renders this "inline toggle" layout with two hamburger
   buttons in the markup: one in .mobile-menu-control-wrapper (right next
   to the logo - the one we style/use) and a second, redundant one inside
   #site-navigation itself. Both show by default below 768px, which reads
   as duplicate/overlapping boxes. Keep only the first. */
@media (max-width: 1280px) {
	#site-navigation .inside-navigation > button.menu-toggle {
		display: none !important;
	}
}

/* Widen GeneratePress's own hamburger breakpoint from its native 768px
   to 1100px: a full horizontal row (title + 7 links + search) needs
   real room, and repeatedly trying to shrink-fit it into the in-between
   tablet/small-laptop range kept breaking. Below 1100px, everything
   goes behind the hamburger instead; only genuinely wide screens get
   the full row. */
@media (max-width: 1280px) {
	.mobile-menu-control-wrapper .menu-toggle {
		display: block !important;
	}

	.main-navigation:not(.toggled) .main-nav > ul {
		display: none !important;
	}

	.main-navigation.toggled .main-nav > ul {
		display: block !important;
	}
}

@media (min-width: 1281px) {
	.mobile-menu-control-wrapper .menu-toggle {
		display: none !important;
	}
}

/* ===== Header: font, color, and alignment cleanup ===== */

.site-header {
	background:
		linear-gradient(rgba(13, 27, 61, 0.55), rgba(13, 27, 61, 0.55)),
		url("https://staging.karachikings.com/wp-content/uploads/2026/09/hero-slide-stadium2.webp");
	background-size: cover;
	background-position: center 55%;
	border-bottom: 3px solid var(--secondary);
	box-shadow: none;
}

.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* Below desktop width: an explicit CSS grid instead of flexbox wrap.
   GeneratePress's own stylesheet puts conflicting rules on these same
   elements (an unconditional "margin-left:auto" on the toggle, another
   on the nav via its own ".nav-float-right" rule, and a mobile-toggle
   visibility rule that only re-enables the toggle below 768px even
   though our breakpoint is wider) - fighting flexbox's automatic line
   placement against those kept failing in a new way each round: the
   search box collapsing to zero width, landing on the wrong row, or
   both toggle buttons showing at once. A grid sidesteps all of it -
   each piece gets its own named cell, so there's nothing left to
   fight over, and every property that matters is set explicitly here
   rather than relying on GP's cascade to behave a particular way. */
@media (max-width: 1280px) {
	.inside-header {
		display: grid !important;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"branding branding"
			"search   toggle";
		align-items: center;
		column-gap: 12px;
		row-gap: 10px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.site-branding-container {
		grid-area: branding;
	}

	#site-navigation {
		grid-area: search;
		display: flex !important;
		align-items: center;
		width: 100%;
		min-width: 0;
		margin: 0 !important;
	}

	#site-navigation .inside-navigation {
		display: flex !important;
		align-items: center;
		width: 100%;
		min-width: 0;
		padding: 0 !important;
	}

	.kk-nav-search {
		width: 100%;
		min-width: 0;
		margin: 0 !important;
	}

	.mobile-menu-control-wrapper {
		grid-area: toggle;
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
	}

	.mobile-menu-control-wrapper .menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

.site-branding-container {
	display: flex;
	align-items: center;
	gap: 16px;
}

.site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-logo,
.site-logo a {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.site-logo img {
	height: 200px !important;
	width: auto !important;
	max-width: none;
	border-radius: 50% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	display: block;
}

.kk-title-gold {
	color: var(--secondary);
}

.kk-tagline {
	display: block;
	width: 100%;
	text-align: center;
	color: var(--secondary);
	font-family: "Inter", sans-serif;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-top: 4px;
}

/* The full badge logo has its wordmark baked into a small raster image -
   text that small in a photo/PNG is never actually legible no matter how
   much the whole badge is scaled up. Using the clean icon mark plus real
   HTML text instead: real text stays crisp at any size, unlike a scaled
   raster image. */

.site-branding .main-title,
.site-branding .main-title a {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Header on tablets/phones - the badge artwork already carries the
   wordmark and tagline as part of its own design, and once the logo is
   sized to be legible on its own (see below) there's no longer enough
   room next to it for the separate HTML title/tagline without cramping
   both. Drop the HTML text here and let the logo carry the branding by
   itself, left-aligned (centering it read oddly floating in the middle
   of the row) and sized up now that it isn't sharing the row. */
@media (max-width: 768px) {
	.site-logo img {
		height: 210px !important;
	}

	.site-branding .main-title {
		display: none;
	}

	.site-branding-container {
		justify-content: flex-start;
		gap: 0;
	}
}

@media (max-width: 480px) {
	.site-logo img {
		height: 180px !important;
	}

	.kk-section {
		padding: 18px 14px;
	}

	.kk-hero-text {
		padding: 16px 4px;
		flex-basis: 100%;
	}

	.kk-hero-image {
		flex-basis: 100%;
		min-height: 220px;
	}

	.kk-hero-text .wp-block-post-title {
		font-size: 1.25rem;
		line-height: 1.3;
	}

	.kk-banner-image {
		margin: 16px -14px 24px -14px !important;
	}

	.kk-news-item,
	.kk-fixture-card {
		padding: 12px;
	}
}

/* Only force the nav into a horizontal row on desktop widths. Below the
   mobile-menu breakpoint, GeneratePress's own JS/CSS needs to hide this
   list by default and toggle it open via the hamburger - forcing
   display:flex unconditionally here (an ID selector, which outranks
   GP's own class-based rules) was overriding that entirely, which is
   why the hamburger had nothing to reveal and the menu just overflowed
   the screen instead of collapsing. */
@media (min-width: 1281px) {
	#site-navigation,
	#site-navigation .inside-navigation,
	#site-navigation .main-nav,
	#site-navigation .main-nav ul {
		display: flex;
		align-items: center;
	}

	/* GP gives the nav element its own white background by default -
	   fine for the mobile dropdown (which keeps dark text on purpose),
	   but on the desktop row it should just show the dark header
	   underneath instead of a white bar. */
	#site-navigation {
		background: transparent;
	}
}

/* White nav text at every width - the dark navy header background
   (and the mobile dropdown, which turns out to inherit that same dark
   background rather than GP's default white) both need light text. */
#site-navigation .menu-item > a {
	color: #fff;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 0.92rem;
	display: flex;
	align-items: center;
	height: 36px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	border-bottom: 2px solid transparent;
}

#site-navigation .menu-item > a:hover,
#site-navigation .current-menu-item > a {
	color: var(--secondary);
	border-bottom-color: var(--secondary);
}

.kk-nav-search .search-field,
.kk-nav-search .search-submit {
	height: 36px;
	box-sizing: border-box;
}

/* Hide the redundant "Home" page-title heading on the front page. */
.home .entry-title {
	display: none;
}

/* Brand colours from the client's logo kit. */
:root {
	--accent: #276AFF;
	--secondary: #EDAD34;
}

/* Search box injected into the primary nav menu - sits inline after the
   last menu item, vertically centered by the nav's own flex row. */
.kk-nav-search {
	display: flex;
	align-items: center;
	margin-left: 14px;
}

.kk-nav-search form {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}

/* GeneratePress wraps the actual <input> in a bare <label> - the label,
   not the input, is form's real flex child, and it had never been told
   to shrink. Without this, the input just rendered at its browser-default
   intrinsic width (about 220px) regardless of how little room was left
   next to the hamburger, overflowing straight over/behind it. */
.kk-nav-search form label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.kk-nav-search .search-field {
	width: 100%;
	max-width: 220px;
	min-width: 0;
	flex: 1 1 auto;
	padding: 6px 12px;
	border: 1px solid #fff;
	border-right: none;
	border-radius: 20px 0 0 20px;
	background: #fff;
	color: #222;
	transition: border-color 0.2s ease;
}

.kk-nav-search .search-field:focus {
	outline: none;
	border-color: var(--accent);
}

/* Keep title + nav + search on a single row instead of wrapping -
   desktop only, same reason as above: forcing this on mobile fought
   GP's own vertical dropdown list and pushed it wider than the screen. */
@media (min-width: 1281px) {
	#site-navigation .main-nav ul,
	#site-navigation ul.menu {
		flex-wrap: nowrap;
	}

	#site-navigation .menu-item > a {
		white-space: nowrap;
		padding-left: 7px;
		padding-right: 7px;
	}
}

.kk-nav-search .search-submit {
	padding: 6px 14px;
	border: none;
	border-radius: 0 20px 20px 0;
	background: var(--secondary);
	color: #0d1b3d;
	cursor: pointer;
	transition: background 0.2s ease;
}

.kk-nav-search .search-submit:hover {
	background: #d99a1f;
}

/* Below 1101px, the whole row (nav + search) hides behind the
   hamburger instead of trying to shrink-fit into a narrowing space -
   the search item renders full-width inside that vertical dropdown,
   instead of the inline flex-row style used on the wide desktop row. */
@media (max-width: 1280px) {
	.kk-nav-search {
		width: 100%;
		margin: 10px 0 0 0;
	}

	.kk-nav-search form {
		width: 100%;
	}

	.kk-nav-search .search-field {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
		border-color: #d8dce2;
	}

	/* Overrides the block above specifically for the copy that JS moves
	   out to GP's always-visible "navigation-search" slot next to the
	   hamburger button - that's a horizontal row, not the stacked
	   vertical dropdown, so it needs to grow/shrink with the row instead
	   of the stacked list's full 100% width or a fixed cap. */
	.navigation-search.kk-nav-search {
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
		max-width: none;
		margin: 0;
	}

	/* GP gives this row its own white background by default - strip it
	   so the dark header colour behind it shows through instead. */
	#site-navigation .inside-navigation {
		background: transparent;
	}
}

/* Breathing room on the sides of the main content area, since this
   layout mode stretches full-width with no side padding by default. */
.site-content {
	padding-left: 40px;
	padding-right: 40px;
}

/* The homepage carries GeneratePress's own "full-width-content" layout
   setting, which stretches ".grid-container" (site-content's parent) to
   100% width - giving the homepage's left/right edges only this 40px
   padding as margin, versus the sitewide 1555px contained width (from
   the Customizer's Container Width setting) every other page uses,
   which reads as noticeably wider outer margins there. Restoring that
   same 1555px width here keeps the homepage's margins consistent with
   the rest of the site. (".home.full-width-content .container" beats
   GP's own ".full-width-content .container.grid-container" rule on
   specificity alone, regardless of load order.) */
.home.full-width-content .container.grid-container {
	max-width: 1555px;
}

@media (max-width: 768px) {
	.site-content {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Consistent thumbnail size on archive/blog listing cards - featured
   images vary wildly in their native aspect ratio depending on what
   was uploaded, so without this every card ends up a different height. */
.post-image {
	overflow: hidden;
	border-radius: 6px;
}

.post-image img.wp-post-image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wp-block-post-template.is-layout-grid > li:hover .post-image img.wp-post-image {
	transform: scale(1.05);
}

/* ===== Sitewide modern typography ===== */
html {
	overflow-x: hidden;
	max-width: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #2b2b2b;
	background: var(--base-2);
	overflow-x: hidden;
	max-width: 100%;
}

/* GeneratePress gives .inside-article its own white background, which
   was showing through as white in the gaps between homepage sections
   instead of the page's gray background. Scoped to the homepage only. */
.home .inside-article {
	background-color: var(--base-2);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	color: #1a2b4c;
}

/* Accent dash before every homepage section heading. */
h2.wp-block-heading.section-spacing {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 0;
	margin-bottom: 20px;
	font-size: 1.5rem;
}

h2.wp-block-heading.section-spacing::before {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	width: 22px;
	height: 3px;
	background: var(--secondary);
	border-radius: 2px;
}

/* ===== Featured Posts hero card ===== */
.kk-hero {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	align-items: stretch !important;
}

.kk-hero-image {
	flex: 1 1 360px;
	min-height: 320px;
	margin: 0 !important;
	position: relative;
}

.kk-hero-image .wp-block-group__inner-container {
	position: absolute;
	inset: 0;
}

.kk-hero-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.kk-hero-text {
	flex: 1 1 360px;
	padding: 28px 32px;
	min-width: 0;
}

.kk-hero-text .wp-block-group__inner-container {
	width: 100%;
}

/* ===== Featured Posts image slider ===== */
.kk-slider {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kk-slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.kk-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.kk-slide.active {
	opacity: 1;
}

.kk-slider-dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.kk-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.kk-dot.active {
	background: #fff;
	transform: scale(1.25);
}

.kk-hero-text .wp-block-post-title {
	margin-top: 0;
	font-size: 1.7rem;
	line-height: 1.25;
}

.kk-hero-badge {
	margin-bottom: 12px;
}

.kk-hero-badge a {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--accent);
	background: rgba(39, 106, 255, 0.1);
	border-radius: 999px;
	padding: 5px 14px;
	text-decoration: none;
}

.kk-hero-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	font-size: 0.85rem;
	color: #6b7280;
}

.kk-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Feather-style inline SVG icons (see kk_icon_svg() in functions.php) -
   sized in em so each one automatically matches whatever text size it's
   sitting next to (badge, meta row, button, etc.) without a separate
   rule per context. */
.kk-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.kk-meta-icon {
	font-size: 0.9rem;
	color: #9aa3b2;
}

.kk-meta-sep {
	color: #d3d8de;
}

/* ===== Latest News: compact stacked list, same visual language as the
   Featured Posts hero (image + text side by side, white card). ===== */
.kk-news-item {
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	margin-bottom: 14px;
	align-items: center !important;
	padding: 14px;
	gap: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kk-news-item:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Each .kk-news-item sits inside its own <li> from the query loop (one
   post per <li>), so it's always technically its parent's last child -
   a ":last-child" rule here would (incorrectly) zero out the margin on
   every single card, not just the actual last post in the list. That's
   exactly what was silently cancelling every spacing change above. */

.kk-news-image {
	flex: 0 0 365px;
	height: 270px;
	align-self: center;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 !important;
}

.kk-news-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kk-news-item:hover .kk-news-image img {
	transform: scale(1.06);
}

.kk-news-text {
	flex: 1 1 300px;
}

.kk-news-text .wp-block-post-terms {
	margin-bottom: 8px;
}

.kk-news-text .wp-block-post-title {
	margin-top: 6px;
	margin-bottom: 6px;
	font-size: 1.15rem;
	line-height: 1.3;
}

.kk-news-text .wp-block-post-excerpt {
	color: #4a4a4a;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Category badge colours, keyed off the actual category slug (added via
   the render_block_core/post-terms filter) rather than guessing from
   display text - each category reads at a glance instead of every
   badge being the same solid blue. */
.kk-news-category.kk-cat-news {
	background: rgba(39, 106, 255, 0.12);
	color: var(--accent);
}

.kk-news-category.kk-cat-squad-and-stats {
	background: rgba(31, 157, 85, 0.12);
	color: #1f9d55;
}

.kk-news-category.kk-cat-opinion {
	background: rgba(124, 58, 237, 0.12);
	color: #7c3aed;
}

.kk-news-category.kk-cat-match-center {
	background: rgba(237, 173, 52, 0.18);
	color: #b9800f;
}

.kk-news-category {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
}

.kk-news-category a {
	color: inherit !important;
	text-decoration: none !important;
}

.kk-news-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	font-size: 0.85rem;
	color: #6b7280;
}

/* The arrow is a real wp:post-title block (so it links to the right
   post without needing to thread a permalink through by hand) with its
   text visually collapsed to font-size:0 - the circle + arrow glyph
   comes entirely from the ::after pseudo-element instead. */
.kk-news-arrow {
	flex: 0 0 auto;
	align-self: center;
	margin-left: auto;
}

.kk-news-arrow h6 {
	margin: 0;
}

.kk-news-arrow a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(39, 106, 255, 0.1);
	color: var(--accent);
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.kk-news-arrow a::after {
	content: "\2192";
	font-size: 1.2rem;
	line-height: 1;
}

.kk-news-arrow a:hover {
	background: var(--accent);
	color: #fff;
	transform: scale(1.08);
}

@media (max-width: 560px) {
	.kk-news-image {
		flex-basis: 100%;
		height: 180px;
	}

	.kk-news-text {
		flex-basis: 100%;
	}

	.kk-news-arrow {
		margin-left: 0;
	}
}

/* ===== Match Center banner image - bleeds to the section's edges ===== */
.kk-banner-image {
	margin: 16px -32px 24px -32px !important;
}

.kk-banner-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	border-radius: 8px;
}

/* ===== Outline button (lighter alternative to the solid blue button,
   used per-card so a row of cards doesn't repeat the same solid button
   three times) ===== */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--accent);
	color: var(--accent);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--accent);
	color: #fff;
}

/* ===== Explore by Section: icon tiles instead of plain buttons ===== */
.kk-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 12px;
	padding: 24px;
	padding-right: 56px;
	text-decoration: none;
	color: #1a2b4c;
	transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kk-tile:hover {
	box-shadow: 0 10px 24px rgba(13, 27, 61, 0.1);
	transform: translateY(-3px);
}

.kk-tile-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	margin-bottom: 14px;
}

.kk-tile-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* Simple icon+label tile variant (About page's "What You'll Find Here"
   grid) - no arrow badge here, so the 56px right padding reserved for
   that on the richer tile variant is just wasted space that was
   squeezing "Squad & Stats" onto two lines. */
.kk-tile:has(.kk-tile-label) {
	padding-right: 16px;
}

.kk-tile-label {
	font-weight: 600;
	font-size: 0.88rem;
	white-space: nowrap;
}

.kk-tile-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #1a2b4c;
	margin-bottom: 4px;
}

.kk-tile-desc {
	font-size: 0.85rem;
	color: #6b7280;
	line-height: 1.45;
}

.kk-tile-arrow {
	position: absolute;
	top: 24px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.05rem;
	transition: transform 0.25s ease;
}

.kk-tile:hover .kk-tile-arrow {
	transform: translateX(3px);
}

.kk-tile-news .kk-tile-icon-wrap {
	background: rgba(39, 106, 255, 0.12);
}

.kk-tile-news .kk-tile-arrow {
	background: rgba(39, 106, 255, 0.12);
	color: var(--accent);
}

.kk-tile-match .kk-tile-icon-wrap {
	background: rgba(217, 83, 79, 0.12);
}

.kk-tile-match .kk-tile-arrow {
	background: rgba(217, 83, 79, 0.12);
	color: #d9534f;
}

.kk-tile-squad .kk-tile-icon-wrap {
	background: rgba(31, 157, 85, 0.12);
}

.kk-tile-squad .kk-tile-arrow {
	background: rgba(31, 157, 85, 0.12);
	color: #1f9d55;
}

.kk-tile-opinion .kk-tile-icon-wrap {
	background: rgba(124, 58, 237, 0.12);
}

.kk-tile-opinion .kk-tile-arrow {
	background: rgba(124, 58, 237, 0.12);
	color: #7c3aed;
}

/* ===== Fixture cards (live cricket data - Match Center) ===== */
.kk-fixture-row {
	margin-bottom: 20px;
	column-gap: 24px;
	row-gap: 20px;
}

.kk-fixture-card {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.08);
	padding: 28px 24px !important;
	overflow: hidden;
	transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kk-fixture-card:hover {
	box-shadow: 0 10px 24px rgba(13, 27, 61, 0.14);
	transform: translateY(-3px);
}

.kk-fixture-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 7px 18px;
	border-radius: 999px;
	background: #eef1f6;
	color: #4a4a4a;
	margin-bottom: 18px;
}

.kk-fixture-win .kk-fixture-badge {
	background: rgba(31, 157, 85, 0.12);
	color: #1f9d55;
}

.kk-fixture-loss .kk-fixture-badge {
	background: rgba(217, 83, 79, 0.1);
	color: #d9534f;
}

.kk-fixture-live .kk-fixture-badge {
	background: rgba(217, 83, 79, 0.1);
	color: #d9534f;
	animation: kk-live-pulse 1.6s ease-in-out infinite;
}

.kk-fixture-upcoming .kk-fixture-badge {
	background: rgba(237, 173, 52, 0.15);
	color: #b9800f;
}

@keyframes kk-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

/* ===== Team vs team row =====
   Each team gets its own column (logo above name), with a small "vs"
   badge between them - putting the name below its own logo instead of
   squeezed into a shared middle strip between two logos gives it close
   to half the card's width to work with, so longer names ("Peshawar
   Zalmi", "Quetta Gladiators") wrap cleanly instead of crowding into
   the logos on either side. */
.kk-fixture-teams-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.kk-fixture-team-block {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-align: center;
}

.kk-fixture-team-col {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 10px;
}

.kk-team-logo {
	max-width: 72px;
	max-height: 72px;
	object-fit: contain;
}

.kk-team-logo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: #0d1b3d;
	color: var(--secondary);
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
}

.kk-fixture-team-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: #1a2b4c;
	line-height: 1.3;
	letter-spacing: -0.01em;
	/* .site-content (GeneratePress) sets word-wrap:break-word site-wide;
	   combined with this column's min-width:0 that was forcing team
	   names to break mid-word ("Kar-achi Kin-gs") instead of at whole
	   word boundaries once the column got narrow. */
	overflow-wrap: normal;
	word-break: normal;
}

/* A plain "vs" sitting between two stacked names read as an
   afterthought - a small pill/badge divider (the classic sports
   matchup treatment) gives it its own visual weight instead. */
.kk-fixture-vs {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 28px;
	height: 28px;
	margin-top: 22px;
	border-radius: 50%;
	background: #eef1f6;
	color: #8890a0;
	font-family: "Inter", sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.kk-fixture-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 0.95rem;
	color: #6b7280;
	margin: 0 0 18px;
}

.kk-fixture-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.kk-fixture-meta .kk-meta-icon {
	font-size: 1.1rem;
}

.kk-fixture-detail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 8px;
	padding: 13px 16px;
	margin: 0 0 20px;
	background: #f2f3f5;
	color: #4a4a4a;
}

.kk-fixture-detail-win {
	background: rgba(31, 157, 85, 0.1);
	color: #1f9d55;
}

.kk-fixture-detail-loss {
	background: rgba(217, 83, 79, 0.08);
	color: #d9534f;
}

.kk-fixture-card .wp-block-buttons {
	display: flex !important;
	justify-content: center !important;
	width: 100%;
}

.kk-fixture-card .wp-block-button {
	width: auto !important;
}

.kk-fixture-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto;
	padding: 10px 22px !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--accent) !important;
	border: 1.5px solid var(--accent) !important;
	font-size: 0.92rem !important;
	line-height: 1.2 !important;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kk-fixture-btn::after {
	content: "\2192";
	font-size: 0.85rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.kk-fixture-btn:hover {
	background: var(--accent) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

.kk-fixture-btn:hover::after {
	transform: translateX(3px);
}

/* ===== Consistent buttons/pills sitewide ===== */
.gb-text[class*="gb-text-"],
.wp-block-button__link {
	border-radius: 10px !important;
	font-weight: 600;
	transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gb-text[class*="gb-text-"]:hover,
.wp-block-button__link:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* ===== Sidebar widgets as cards ===== */
.widget-area .widget {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	margin-bottom: 24px;
}

/* Sticky sidebar ad rail (300x250 + 300x600). Only these two ad widgets
   stick - not the whole sidebar, which is deliberately back to normal
   flow after the client asked for the accidental full-sidebar stickiness
   from Milestone 1 to be removed. Each has its own "top" offset, staggered
   by the height of the ad above it plus a gap, so they stack as a unit
   instead of overlapping, and native sticky positioning naturally lets
   go before they'd run into the footer. */
#right-sidebar #custom_html-2 {
	position: sticky;
	top: 20px;
}

#right-sidebar #custom_html-3 {
	position: sticky;
	top: 290px;
}

.widget-area .widget-title,
.widget-area h2 {
	font-size: 1.1rem;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 10px;
	margin-bottom: 14px;
	display: inline-block;
}

/* ===== Footer band ===== */
.site-footer {
	background: #1a2b4c;
	color: #cbd5e1;
	margin-top: 40px;
}

.site-footer .widget-title,
.site-footer h2 {
	color: #fff;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 10px;
	display: inline-block;
}

.site-footer a {
	color: #cbd5e1;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer .widget {
	background: transparent;
	box-shadow: none;
}

/* GeneratePress gives #footer-widgets its own white background, which
   was painting over the dark navy footer band. */
#footer-widgets {
	background-color: #1a2b4c;
}

.site-info {
	background: #142140;
	color: #9aa7bd;
	text-align: center;
	padding: 16px 20px;
}

.site-info a {
	color: #cbd5e1;
}

/* ===== Affiliate disclosure notice ===== */
.kk-affiliate-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.8rem;
	font-style: italic;
	color: #6b7280;
	background: #f7f8f9;
	border: 1px solid #e2e6ea;
	border-left: 3px solid var(--secondary);
	border-radius: 6px;
	padding: 12px 16px;
	margin: 16px 0;
}

.kk-affiliate-icon {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--secondary);
}

/* ===== Social feed (lazy-loaded) =====
   A reserved min-height keeps this from causing layout shift while
   kk-social.js waits for the section to scroll into view before it
   requests Twitter's embed script. */
.kk-social-feed {
	max-width: 550px;
	min-height: 400px;
	margin: 0 auto;
}

/* Styled as a proper "Follow us" card by default - Twitter/X's own
   widget script replaces this element with the live timeline once it
   successfully loads, but their free embed API has become unreliable
   (frequent rate-limit errors on their end, independent of our site).
   Styling the fallback link this way means visitors always see a
   deliberate-looking card either way, instead of a bare blue link
   whenever X's API is having one of its outages. */
.kk-social-feed a.twitter-timeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	min-height: 180px;
	padding: 32px 28px;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--accent);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kk-social-feed a.twitter-timeline::before {
	content: "\1D54F";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #0d1b3d;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
}

.kk-social-feed a.twitter-timeline:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.kk-social-feed a.kk-youtube-subscribe {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	min-height: 120px;
	padding: 28px;
	margin-top: 16px;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--accent);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kk-social-feed a.kk-youtube-subscribe::before {
	content: "\25B6";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ff0000;
	color: #fff;
	font-size: 1.1rem;
	padding-left: 3px;
}

.kk-social-feed a.kk-youtube-subscribe:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* ===== Soft scroll-in animation (see kk-animate.js) =====
   Cards/tiles/widgets start slightly lower and faded out, then ease into
   place once scrolled into view - kk-animate.js adds "kk-visible" via an
   IntersectionObserver. Kept purely opacity/transform (GPU-friendly,
   no layout thrashing) and disabled entirely for anyone who's asked
   their OS for reduced motion. */
.kk-animate {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kk-animate.kk-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.kk-animate {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ===== TEMPORARY placeholder content (Squad Profiles / About / Contact) =====
   Client asked for these pages filled with demo content so they don't
   look empty for review before go-live - remove this block, the
   .kk-demo-banner markup, and the page content itself once Milestone 5
   (go-live) is complete and the client has real squad/about/contact
   content to put here instead. */
.kk-demo-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff7e6;
	border: 1px solid #f3d99b;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 24px;
	font-size: 0.85rem;
	color: #8a6d1f;
}

.kk-player-card {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.08);
	padding: 28px 20px 24px;
	text-align: center;
	overflow: hidden;
	transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kk-player-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--accent);
}

.kk-player-card:hover {
	box-shadow: 0 10px 24px rgba(13, 27, 61, 0.14);
	transform: translateY(-3px);
}

.kk-player-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #0d1b3d;
	color: var(--secondary);
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
}

/* Real player photo from the API - same size/position as the initials
   circle above so a squad grid mixing "has a photo on file" and
   "doesn't" players still lines up card to card. */
.kk-player-avatar-photo {
	object-fit: cover;
	background: #eef1f6;
}

.kk-squad-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
}

.kk-player-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #1a2b4c;
	margin-bottom: 4px;
}

.kk-player-role {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--accent);
	background: rgba(39, 106, 255, 0.1);
	border-radius: 999px;
	padding: 3px 12px;
	margin-bottom: 12px;
}

.kk-player-bio {
	font-size: 0.85rem;
	color: #6b7280;
	line-height: 1.5;
}

.kk-contact-card {
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.06);
	padding: 32px;
}

.kk-contact-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #eef1f4;
}

.kk-contact-row:last-child {
	border-bottom: none;
}

.kk-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(39, 106, 255, 0.1);
	color: var(--accent);
	font-size: 1.1rem;
}

.kk-contact-row a {
	color: #1a2b4c;
	font-weight: 600;
	text-decoration: none;
}

.kk-contact-row a:hover {
	color: var(--accent);
}

.kk-contact-form {
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.06);
	padding: 32px;
	margin-top: 24px;
}

.kk-form-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.kk-form-row {
	margin-bottom: 18px;
}

.kk-form-row label {
	display: block;
	font-weight: 600;
	color: #1a2b4c;
	margin-bottom: 6px;
	font-size: 0.9rem;
}

.kk-form-row input,
.kk-form-row textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #dde2e8;
	border-radius: 8px;
	background: #fff;
	color: #222;
	font-family: inherit;
	font-size: 0.95rem;
	transition: border-color 0.2s ease;
}

.kk-form-row textarea {
	resize: vertical;
}

.kk-form-row input:focus,
.kk-form-row textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.kk-form-submit {
	border: none;
	cursor: pointer;
}

.kk-form-notice {
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-weight: 600;
}

.kk-form-notice-success {
	background: rgba(39, 106, 255, 0.08);
	color: #1a2b4c;
	border: 1px solid rgba(39, 106, 255, 0.25);
}

.kk-form-notice-error {
	background: rgba(217, 48, 48, 0.08);
	color: #7a1f1f;
	border: 1px solid rgba(217, 48, 48, 0.25);
}

/* ===== Recent Posts sidebar widget (core/latest-posts) =====
   The block's own markup renders the thumbnail, title and date as flat
   siblings inside each <li> (not pre-grouped), so a CSS grid - rather
   than flex - is what lets the title+date stack as a text column next
   to the thumbnail regardless of that DOM order. */
.widget-area .wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget-area .wp-block-latest-posts__list li {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 2px;
	align-items: center;
	padding: 10px 26px 10px 10px;
	border-radius: 8px;
	transition: background 0.2s ease;
}

.widget-area .wp-block-latest-posts__list li:not(:last-child) {
	margin-bottom: 4px;
}

.widget-area .wp-block-latest-posts__list li:hover {
	background: #f7f8f9;
}

.widget-area .wp-block-latest-posts__featured-image {
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0 !important;
}

.widget-area .wp-block-latest-posts__featured-image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.widget-area .wp-block-latest-posts__post-title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.35;
	color: #1a2b4c;
	text-decoration: none;
}

.widget-area .wp-block-latest-posts__post-title:hover {
	color: var(--accent);
}

.widget-area .wp-block-latest-posts__post-date {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	font-size: 0.72rem;
	color: #9aa3b2;
}

.widget-area .wp-block-latest-posts__list li::after {
	content: "\203A";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #c7cdd6;
	font-size: 1.3rem;
}

/* ===== Match Center: custom section header ===== */
.kk-mc-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}

.kk-mc-header-accent {
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent);
	margin-bottom: 10px;
}

.kk-mc-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: #1a2b4c;
	margin: 0 0 6px;
}

.kk-mc-subtitle {
	font-size: 0.9rem;
	color: #6b7280;
	margin: 0;
}

.kk-mc-schedule-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 1.5px solid var(--accent);
	border-radius: 999px;
	background: #fff;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.kk-mc-schedule-btn:hover {
	background: var(--accent);
	color: #fff;
	transform: translateY(-2px);
}

/* ===== Match Center: banner with overlay text ===== */
.kk-mc-banner {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	min-height: 260px;
	margin-bottom: 24px;
	background-size: cover;
	background-position: center;
}

.kk-mc-banner-overlay {
	position: relative;
	height: 100%;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 40px;
	background: linear-gradient(90deg, rgba(13, 27, 61, 0.95) 0%, rgba(13, 27, 61, 0.85) 38%, rgba(13, 27, 61, 0.15) 70%, rgba(13, 27, 61, 0) 100%);
}

.kk-mc-banner-eyebrow {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 2px;
	color: #fff;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--accent);
	margin-bottom: 14px;
	width: fit-content;
}

.kk-mc-banner-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.15;
}

.kk-mc-banner-subtitle {
	font-size: 1rem;
	color: #dbe3f0;
	margin: 0;
	max-width: 320px;
}

@media (max-width: 600px) {
	.kk-mc-banner-overlay {
		background: linear-gradient(180deg, rgba(13, 27, 61, 0.95) 0%, rgba(13, 27, 61, 0.85) 55%, rgba(13, 27, 61, 0.4) 100%);
		padding: 24px;
	}

	.kk-mc-banner-title {
		font-size: 1.6rem;
	}
}

/* ===== Archive/blog listing cards (News, category archives, search) =====
   Scoped to "not .wp-singular" (the body class WP gives every single
   post/page, but no archive/listing view) so none of this touches the
   full single-post reading layout - only the card grid on pages like
   /news/. Reorders the card via flex "order" instead of touching GP's
   own template markup: the badge/meta row are injected via the
   generate_after_entry_header hook, which always fires right after the
   title, so pulling the badge above the title (and leaving the meta row
   below it) needs a layout reorder rather than a DOM reorder. */
body:not(.wp-singular) article.hentry {
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.06);
	margin-bottom: 28px;
	overflow: hidden;
	transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body:not(.wp-singular) article.hentry:hover {
	box-shadow: 0 10px 24px rgba(13, 27, 61, 0.1);
	transform: translateY(-3px);
}

body:not(.wp-singular) .inside-article {
	display: flex;
	flex-direction: column;
	padding: 28px;
}

body:not(.wp-singular) .entry-header {
	order: 2;
}

/* GP's own default "Date by Author" line - replaced by the icon meta
   row below, which carries the same two facts in the site's own style. */
body:not(.wp-singular) .entry-header .entry-meta {
	display: none;
}

body:not(.wp-singular) .kk-archive-badge {
	order: 1;
}

body:not(.wp-singular) .kk-archive-meta {
	order: 3;
}

body:not(.wp-singular) .post-image {
	order: 4;
}

body:not(.wp-singular) .entry-summary {
	order: 5;
}

body:not(.wp-singular) footer.entry-meta {
	order: 6;
}

.kk-archive-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 5px 16px;
	border-radius: 999px;
	background: rgba(39, 106, 255, 0.12);
	color: var(--accent);
	text-decoration: none;
	margin-bottom: 16px;
}

.kk-archive-badge:hover {
	text-decoration: none;
}

/* Reuse the same per-category colours as the homepage's Latest News
   badges (.kk-news-category.kk-cat-*) instead of redefining them. */
.kk-news-category.kk-cat-news,
.kk-archive-badge.kk-cat-news {
	background: rgba(39, 106, 255, 0.12);
	color: var(--accent);
}

.kk-news-category.kk-cat-squad-and-stats,
.kk-archive-badge.kk-cat-squad-and-stats {
	background: rgba(31, 157, 85, 0.12);
	color: #1f9d55;
}

.kk-news-category.kk-cat-opinion,
.kk-archive-badge.kk-cat-opinion {
	background: rgba(124, 58, 237, 0.12);
	color: #7c3aed;
}

.kk-news-category.kk-cat-match-center,
.kk-archive-badge.kk-cat-match-center {
	background: rgba(237, 173, 52, 0.18);
	color: #b9800f;
}

.kk-archive-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 0.85rem;
	color: #6b7280;
}

body:not(.wp-singular) .post-image {
	margin: 0 0 20px !important;
	border-radius: 12px;
}

body:not(.wp-singular) .post-image img.wp-post-image {
	height: 360px;
}

body:not(.wp-singular) .entry-summary {
	color: #4a4a4a;
}

body:not(.wp-singular) .entry-summary .read-more {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

body:not(.wp-singular) .entry-summary .read-more:hover {
	text-decoration: underline;
}

body:not(.wp-singular) .entry-summary .read-more::after {
	content: "\2192";
	margin-left: 4px;
}

body:not(.wp-singular) footer.entry-meta {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #eef1f4;
	font-size: 0.85rem;
}

body:not(.wp-singular) footer.entry-meta .cat-links,
body:not(.wp-singular) footer.entry-meta .comments-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #9aa3b2;
}

body:not(.wp-singular) footer.entry-meta a {
	color: var(--accent);
	text-decoration: none;
}

body:not(.wp-singular) footer.entry-meta a:hover {
	text-decoration: underline;
}

@media (max-width: 560px) {
	body:not(.wp-singular) .inside-article {
		padding: 18px;
	}

	body:not(.wp-singular) .post-image img.wp-post-image {
		height: 200px;
	}
}

/* ===== Match Centre page: hero header =====
   Page-specific (not reused elsewhere), so it's simplest as a single
   custom HTML block in the page content rather than new PHP/hooks -
   this just hides the theme's own auto page title (a plain "Match
   Centre" heading with none of the badge/subtitle/photo styling) so it
   doesn't print twice above it. */
.page-id-15 .entry-header {
	display: none;
}

/* GeneratePress's own ".entry-content:not(:first-child){margin-top:2em}"
   still matches here - display:none on entry-header doesn't remove it
   from the DOM, so entry-content is never actually :first-child. That
   stray ~34px was thrown off the hero photo's bleed math below (it's
   sized to bleed flush with the card's own 40px padding, not an
   arbitrary extra gap on top of it). Same specificity-match fix as the
   homepage/sidebar alignment case elsewhere in this file. */
.page-id-15 .entry-content {
	margin-top: 0;
}

.kk-page-hero {
	margin-bottom: 32px;
}

.kk-page-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 8px 18px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.kk-page-hero-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 2.75rem;
	color: #1a2b4c;
	margin: 0 0 14px;
	line-height: 1.1;
}

.kk-page-hero-subtitle {
	font-size: 1rem;
	color: #6b7280;
	max-width: 520px;
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.kk-page-hero-title {
		font-size: 2.1rem;
	}
}

/* ===== Match Centre page: section headers (Recent Results / Upcoming
   Fixtures) - only used when the [kk_fixtures] shortcode's layout="row"
   attribute is set, i.e. on the Match Centre page itself. ===== */
.kk-fx-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0 20px;
}

.kk-fx-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 1.35rem;
}

.kk-fx-section-bar {
	width: 4px;
	height: 26px;
	border-radius: 2px;
	background: var(--accent);
	flex: 0 0 auto;
}

.kk-fx-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(39, 106, 255, 0.1);
	color: var(--accent);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.kk-fx-view-all:hover {
	background: var(--accent);
	color: #fff;
}

/* ===== Match Centre page: full-width single-row fixture cards =====
   Reuses the grid layout's badge/team-block/vs/meta/result-banner/button
   classes as-is (see the "Fixture cards" section above) - only the card
   shell and the horizontal team+score row below are new. */
.kk-fx-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 8px;
}

.kk-fx-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.08);
	padding: 28px 32px;
	overflow: hidden;
	transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.kk-fx-card:hover {
	box-shadow: 0 10px 24px rgba(13, 27, 61, 0.14);
	transform: translateY(-3px);
}

.kk-fx-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.kk-fx-row .kk-fixture-team-block {
	flex: 1 1 0;
}

.kk-fx-center {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-width: 120px;
}

.kk-fx-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.kk-fx-score-value {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	color: #1a2b4c;
}

.kk-fx-score-overs {
	font-size: 0.78rem;
	color: #9aa3b2;
}

.kk-fx-divider {
	width: 1px;
	height: 40px;
	background: #e2e6ea;
	flex: 0 0 auto;
}

.kk-fixture-meta-with-btn {
	justify-content: space-between;
}

.kk-fixture-meta-items {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}

@media (max-width: 700px) {
	.kk-fx-card {
		padding: 22px 18px;
	}

	.kk-fx-row {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.kk-fx-center {
		flex-basis: 100%;
		order: 3;
	}

	.kk-fixture-meta-with-btn {
		flex-direction: column;
		align-items: stretch;
	}

	.kk-fixture-meta-with-btn .kk-fixture-btn {
		justify-content: center;
	}
}

/* ===== PSL points table (Match Centre page) ===== */
.kk-points-table-wrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(13, 27, 61, 0.06);
	margin-bottom: 28px;
}

.kk-points-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.kk-points-table th,
.kk-points-table td {
	padding: 14px 12px;
	text-align: center;
	white-space: nowrap;
}

.kk-points-table thead th {
	font-family: "Montserrat", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #9aa3b2;
	border-bottom: 2px solid #eef1f4;
}

.kk-points-table tbody tr:not(:last-child) {
	border-bottom: 1px solid #eef1f4;
}

.kk-points-team-col {
	text-align: left;
	white-space: normal;
}

.kk-points-table tbody .kk-points-team-col {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: #1a2b4c;
}

.kk-points-team-logo {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex: 0 0 auto;
}

.kk-points-row-highlight {
	background: rgba(39, 106, 255, 0.06);
}

.kk-points-row-highlight .kk-points-team-col {
	color: var(--accent);
}