/*
 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;
}

.kk-author-tag {
	font-size: 0.8em;
	color: #666;
	margin-left: 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);
}

.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;
}

/* 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-4.webp");
	background-size: cover;
	background-position: center 65%;
	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: 0;
	padding-bottom: 0;
}

/* 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: 140px !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;
}

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

#site-navigation .menu-item > a {
	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;
}

.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;
}

@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;
}

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

.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: 16px;
	align-items: center !important;
	padding: 16px;
	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);
}

.kk-news-item:last-child {
	margin-bottom: 0;
}

.kk-news-image {
	flex: 0 0 200px;
	height: 140px;
	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-terms a {
	color: #fff;
}

.kk-news-text .wp-block-post-author-name {
	font-size: 0.8em;
	color: #666;
}

.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;
}

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

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

/* ===== 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 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--base-2);
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	padding: 30px 12px;
	text-decoration: none;
	color: #1a2b4c;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.kk-tile:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

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

.kk-tile-label {
	font-size: 0.95rem;
}

/* ===== 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 (logos either side of the names) ===== */
.kk-fixture-teams-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.kk-fixture-team-col {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

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

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

.kk-fixture-vs-col {
	flex: 1 1 auto;
	text-align: center;
	min-width: 0;
}

.kk-fixture-team-name {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #1a2b4c;
	line-height: 1.3;
	/* .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 bigger logos left less room here. */
	overflow-wrap: normal;
	word-break: normal;
}

.kk-fixture-vs {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: #9aa3b2;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 4px 0;
}

.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);
}

/* ===== 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;
}

.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);
}

/* ===== 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__list li:first-child {
	background: rgba(39, 106, 255, 0.06);
	border: 1px solid rgba(39, 106, 255, 0.15);
}

.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;
	}
}