/**
 * Cricket header redesign — scoped entirely to #masthead / .cricket-* / .sticky-wrapper.
 * Nothing here targets footer, sidebar, article, or homepage-content selectors.
 */

#masthead.cricket-site-header {
	--cricket-navy-deep: #071427;
	--cricket-navy: #0d2a4d;
	--cricket-blue: #1e5087;
	--cricket-blue-light: #3a86e0;
	--cricket-accent: #ffb020;
	--cricket-ice: #eaf4ff;
	--cricket-glass-border: rgba(255, 255, 255, 0.14);
	position: relative;
	isolation: isolate;
	/* isolation:isolate alone makes #masthead its own stacking context, but
	   at implicit z-index:auto (~0) among ITS OWN siblings — any later page
	   section using position:relative + an explicit z-index (e.g. the
	   leaderboard page's own .container{z-index:1}) escapes into the SAME
	   root-level comparison and, at z-index:1, paints ABOVE an auto-level
	   #masthead despite the sticky nav's own internal z-index:999 (that
	   999 only wins comparisons *inside* #masthead's isolated context).
	   An explicit, very high z-index here is what actually keeps the whole
	   header above everything else on the page while scrolling. */
	z-index: 9999;
}

#masthead.cricket-site-header,
#masthead.cricket-site-header *,
#masthead.cricket-site-header *::before,
#masthead.cricket-site-header *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Layer 1 — World Clock Bar
 * ------------------------------------------------------------------- */

.cricket-world-clock {
	position: relative;
	overflow: hidden;
	background: linear-gradient( 90deg, var( --cricket-navy-deep ), var( --cricket-navy ) 50%, var( --cricket-navy-deep ) );
	border-bottom: 1px solid var( --cricket-glass-border );
}

.cricket-world-clock::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, transparent 0%, rgba( 255, 255, 255, 0.08 ) 45%, transparent 55% );
	background-size: 220% 100%;
	animation: cricket-clock-sheen 9s linear infinite;
	pointer-events: none;
}

.cricket-world-clock__viewport {
	overflow: hidden;
	max-width: 1320px;
	margin-inline: auto;
}

.cricket-world-clock__track {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: cricket-clock-scroll 36s linear infinite;
}

.cricket-world-clock__viewport:hover .cricket-world-clock__track,
.cricket-world-clock__viewport:focus-within .cricket-world-clock__track {
	animation-play-state: paused;
}

.cricket-world-clock__item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	white-space: nowrap;
	font-size: 11.5px;
	letter-spacing: 0.03em;
	color: rgba( 255, 255, 255, 0.82 );
	border-right: 1px solid var( --cricket-glass-border );
}

.cricket-world-clock__item:last-child {
	border-right: none;
}

.cricket-world-clock__flag {
	font-size: 13px;
	line-height: 1;
}

.cricket-world-clock__label {
	font-weight: 600;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.6 );
}

.cricket-world-clock__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --cricket-ice );
}

/* ---------------------------------------------------------------------
 * Info-bar row — real date (left) + total-site-visitor counter (right)
 * ------------------------------------------------------------------- */

.cricket-infobar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.cricket-visitor-count,
.cricket-visitor-count * {
	/* The Customizer's Additional CSS has a legacy duplicate .info-bar rule
	   that sets color to fully transparent (#ffffff00) — real bug, not a
	   design choice, already removed at the source, but this stays as a
	   defensive belt-and-braces override since Additional CSS loads last
	   and can reintroduce the same class of bug for anything else dropped
	   into .info-bar later (see the standing Additional CSS gotcha). */
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.cricket-visitor-count {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
}

.cricket-visitor-count__icon {
	display: inline-flex;
	color: var( --cricket-accent );
}

.cricket-visitor-count__number {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.cricket-visitor-count__label {
	color: rgba( 255, 255, 255, 0.75 ) !important;
	-webkit-text-fill-color: rgba( 255, 255, 255, 0.75 ) !important;
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
 * Brand / title gloss
 * ------------------------------------------------------------------- */

#masthead.cricket-site-header .site-title-link {
	background-image: linear-gradient( 90deg, #ff6b6b, #ffb020, #ffe066, #6ee7a8, #4fd1c5, #6c8cff, #c77dff, #ff6b6b );
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.6 ), 0 0 18px rgba( 0, 0, 0, 0.3 );
	animation: cricket-nav-rainbow 7s linear infinite;
	display: inline-block;
}

#masthead.cricket-site-header .site-description {
	background-image: linear-gradient( 90deg, #ff6b6b, #ffb020, #ffe066, #6ee7a8, #4fd1c5, #6c8cff, #c77dff, #ff6b6b );
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.55 ), 0 0 12px rgba( 0, 0, 0, 0.3 );
	animation: cricket-nav-rainbow 7s linear infinite;
	animation-delay: -3s;
	letter-spacing: 0.02em;
	display: inline-block;
}

/* Entrance animation for the brand block, once, on load */
#masthead.cricket-site-header .site-branding {
	animation: cricket-brand-in 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

/* ---------------------------------------------------------------------
 * Layer 3 — animated cricket scene
 * ------------------------------------------------------------------- */

.cricket-header-animation {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY( -50% );
	width: 140px;
	height: 50px;
	pointer-events: none;
	opacity: 0.92;
	z-index: 1;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.cricket-header-animation svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.cricket-anim__stumps rect {
	fill: var( --cricket-accent );
	opacity: 0.85;
	animation: cricket-stumps-glow 6s ease-in-out infinite;
}

.cricket-anim__batter .cricket-anim__body,
.cricket-anim__batter .cricket-anim__head {
	fill: var( --cricket-ice );
	opacity: 0.9;
}

.cricket-anim__bat {
	fill: #d7c49e;
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: cricket-bat-swing 6s ease-in-out infinite;
}

.cricket-anim__ball {
	fill: #ff5a3c;
	animation: cricket-ball-travel 6s ease-in-out infinite;
}

.cricket-anim__spark circle {
	fill: var( --cricket-accent );
}

.cricket-anim__spark {
	opacity: 0;
	animation: cricket-spark-pulse 6s ease-in-out infinite;
}

@keyframes cricket-ball-travel {
	0%, 6% { transform: translateX( -30px ); opacity: 0; }
	14% { opacity: 1; }
	28% { transform: translateX( 0 ); }
	46% { transform: translateX( 120px ); }
	62%, 100% { transform: translateX( 120px ); opacity: 0; }
}

@keyframes cricket-bat-swing {
	0%, 24% { transform: rotate( 0deg ); }
	30% { transform: rotate( -42deg ); }
	40%, 100% { transform: rotate( 0deg ); }
}

@keyframes cricket-spark-pulse {
	0%, 27% { opacity: 0; }
	31% { opacity: 1; }
	40%, 100% { opacity: 0; }
}

@keyframes cricket-stumps-glow {
	0%, 55% { opacity: 0.7; }
	65% { opacity: 1; }
	80%, 100% { opacity: 0.7; }
}

/* ---------------------------------------------------------------------
 * Stadium atmosphere behind the main nav (lights, fireworks, crowd)
 * ------------------------------------------------------------------- */

#masthead.cricket-site-header nav.navbar {
	/* No overflow:hidden here — the fx layer clips itself (see .cricket-nav-fx
	   below); clipping the nav itself would cut off the dropdown sub-menus,
	   which extend below the nav's own box. */
	position: relative;
	background: linear-gradient( 180deg, rgba( 7, 20, 39, 0.18 ), rgba( 7, 20, 39, 0 ) 40% );
}

#masthead.cricket-site-header nav.navbar > .navbar-header-container {
	position: relative;
	z-index: 2;
}

.cricket-nav-fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* slow rotating multi-colour stadium-light wash */
.cricket-nav-fx::before {
	content: "";
	position: absolute;
	inset: -60% -20%;
	background: conic-gradient(
		from 0deg,
		rgba( 255, 90, 90, 0.14 ),
		rgba( 255, 209, 102, 0.14 ),
		rgba( 79, 209, 197, 0.14 ),
		rgba( 108, 140, 255, 0.14 ),
		rgba( 190, 100, 255, 0.14 ),
		rgba( 255, 90, 90, 0.14 )
	);
	mix-blend-mode: screen;
	opacity: 0.55;
	animation: cricket-nav-hue-spin 24s linear infinite;
}

/* floodlight beams sweeping across */
.cricket-nav-fx__beam {
	position: absolute;
	top: -60%;
	width: 120px;
	height: 220%;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.18 ), rgba( 255, 255, 255, 0 ) 72% );
	transform: rotate( 16deg );
	filter: blur( 2px );
	mix-blend-mode: screen;
	animation: cricket-beam-sweep 7s ease-in-out infinite;
}

.cricket-nav-fx__beam:nth-child( 1 ) {
	left: -8%;
	animation-delay: 0s;
	background: linear-gradient( 180deg, rgba( 120, 190, 255, 0.26 ), rgba( 120, 190, 255, 0 ) 72% );
}

.cricket-nav-fx__beam:nth-child( 2 ) {
	left: 38%;
	animation-delay: 2.3s;
	background: linear-gradient( 180deg, rgba( 255, 214, 120, 0.22 ), rgba( 255, 214, 120, 0 ) 72% );
}

.cricket-nav-fx__beam:nth-child( 3 ) {
	left: 78%;
	animation-delay: 4.6s;
}

@keyframes cricket-beam-sweep {
	0%, 100% { transform: rotate( 12deg ) translateX( 0 ); opacity: 0.5; }
	50% { transform: rotate( 22deg ) translateX( 26px ); opacity: 1; }
}

/* firework sparkle bursts */
.cricket-nav-fx__sparks {
	position: absolute;
	inset: 0;
}

.cricket-nav-fx__spark {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	opacity: 0;
	transform: scale( 0 );
	animation: cricket-spark-burst 5.5s ease-out infinite;
}

.cricket-nav-fx__spark:nth-child( 1 ) { left: 8%;  top: 28%; background: #ffd166; box-shadow: 12px 0 #ffd166, -12px 0 #ffd166, 0 12px #ffd166, 0 -12px #ffd166, 9px 9px #ffd166, -9px 9px #ffd166, 9px -9px #ffd166, -9px -9px #ffd166; animation-delay: 0s; }
.cricket-nav-fx__spark:nth-child( 2 ) { left: 22%; top: 68%; background: #ff5a5a; box-shadow: 12px 0 #ff5a5a, -12px 0 #ff5a5a, 0 12px #ff5a5a, 0 -12px #ff5a5a, 9px 9px #ff5a5a, -9px 9px #ff5a5a, 9px -9px #ff5a5a, -9px -9px #ff5a5a; animation-delay: 1.1s; }
.cricket-nav-fx__spark:nth-child( 3 ) { left: 37%; top: 22%; background: #4fd1c5; box-shadow: 12px 0 #4fd1c5, -12px 0 #4fd1c5, 0 12px #4fd1c5, 0 -12px #4fd1c5, 9px 9px #4fd1c5, -9px 9px #4fd1c5, 9px -9px #4fd1c5, -9px -9px #4fd1c5; animation-delay: 2.3s; }
.cricket-nav-fx__spark:nth-child( 4 ) { left: 53%; top: 60%; background: #6c8cff; box-shadow: 12px 0 #6c8cff, -12px 0 #6c8cff, 0 12px #6c8cff, 0 -12px #6c8cff, 9px 9px #6c8cff, -9px 9px #6c8cff, 9px -9px #6c8cff, -9px -9px #6c8cff; animation-delay: 3.4s; }
.cricket-nav-fx__spark:nth-child( 5 ) { left: 66%; top: 26%; background: #c77dff; box-shadow: 12px 0 #c77dff, -12px 0 #c77dff, 0 12px #c77dff, 0 -12px #c77dff, 9px 9px #c77dff, -9px 9px #c77dff, 9px -9px #c77dff, -9px -9px #c77dff; animation-delay: 0.7s; }
.cricket-nav-fx__spark:nth-child( 6 ) { left: 80%; top: 62%; background: #63e6a4; box-shadow: 12px 0 #63e6a4, -12px 0 #63e6a4, 0 12px #63e6a4, 0 -12px #63e6a4, 9px 9px #63e6a4, -9px 9px #63e6a4, 9px -9px #63e6a4, -9px -9px #63e6a4; animation-delay: 2.9s; }
.cricket-nav-fx__spark:nth-child( 7 ) { left: 92%; top: 34%; background: #ffe066; box-shadow: 12px 0 #ffe066, -12px 0 #ffe066, 0 12px #ffe066, 0 -12px #ffe066, 9px 9px #ffe066, -9px 9px #ffe066, 9px -9px #ffe066, -9px -9px #ffe066; animation-delay: 4.1s; }

@keyframes cricket-spark-burst {
	0%, 86% { opacity: 0; transform: scale( 0 ); }
	90% { opacity: 1; transform: scale( 0.45 ); }
	94% { opacity: 0.85; transform: scale( 1 ); }
	100% { opacity: 0; transform: scale( 1.35 ); }
}

/* bobbing crowd strip along the bottom edge of the nav */
.cricket-nav-fx__crowd {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 5%;
}

.cricket-nav-fx__crowd i {
	width: 5px;
	height: 6px;
	border-radius: 2px 2px 0 0;
	opacity: 0.5;
	animation: cricket-fan-bob 1.7s ease-in-out infinite;
	animation-delay: calc( var( --i, 0 ) * 90ms );
}

.cricket-nav-fx__crowd i:nth-child( 4n + 1 ) { background: #ffd166; }
.cricket-nav-fx__crowd i:nth-child( 4n + 2 ) { background: #ff5a5a; }
.cricket-nav-fx__crowd i:nth-child( 4n + 3 ) { background: #4fd1c5; }
.cricket-nav-fx__crowd i:nth-child( 4n ) { background: #6c8cff; }

@keyframes cricket-fan-bob {
	0%, 100% { transform: translateY( 0 ); opacity: 0.4; }
	50% { transform: translateY( -6px ); opacity: 0.9; }
}

@keyframes cricket-nav-hue-spin {
	to { transform: rotate( 360deg ); }
}

/* ---------------------------------------------------------------------
 * Navigation polish
 * ------------------------------------------------------------------- */

#masthead.cricket-site-header .nav-menu > li > a {
	position: relative;
	transition: color 0.2s ease;
	background-image: linear-gradient( 90deg, #ff6b6b, #ffb020, #ffe066, #6ee7a8, #4fd1c5, #6c8cff, #c77dff, #ff6b6b );
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 ), 0 0 14px rgba( 0, 0, 0, 0.35 );
	animation: cricket-nav-rainbow 7s linear infinite;
}

#masthead.cricket-site-header .nav-menu > li:nth-child( 2 ) > a { animation-delay: -2.3s; }
#masthead.cricket-site-header .nav-menu > li:nth-child( 3 ) > a { animation-delay: -4.6s; }
#masthead.cricket-site-header .nav-menu > li:nth-child( 4 ) > a { animation-delay: -1.5s; }
#masthead.cricket-site-header .nav-menu > li:nth-child( 5 ) > a { animation-delay: -3.8s; }

@keyframes cricket-nav-rainbow {
	to { background-position: -300% 0; }
}

#masthead.cricket-site-header .nav-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var( --cricket-accent );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.25s ease;
}

#masthead.cricket-site-header .nav-menu > li:hover > a::after,
#masthead.cricket-site-header .nav-menu > li > a:focus-visible::after {
	transform: scaleX( 1 );
}

/* Kill the parent theme's solid highlight box on the active nav item — it read as
   a jarring blue/grey rectangle against the new gradient nav. The underline below
   is the only "you are here" indicator now. */
#masthead.cricket-site-header .nav-menu > li.current-menu-item > a,
#masthead.cricket-site-header .nav-menu > li.current_page_item > a,
#masthead.cricket-site-header .nav-menu > li.current-menu-ancestor > a,
#masthead.cricket-site-header .nav-menu > li.current_page_ancestor > a {
	background-color: transparent;
}

#masthead.cricket-site-header .nav-menu > li.current-menu-item > a::after,
#masthead.cricket-site-header .nav-menu > li.current_page_item > a::after {
	transform: scaleX( 1 );
}

/* Sub-menu dropdown — the parent theme's plain white popup box (its own
   `.main-navigation li ul { background:#fff }`) never got restyled for the
   dark header, so any menu item with children still showed a jarring white
   card on hover. Desktop only (matches the parent's own >991px hover
   behaviour) — the mobile drawer opens/closes its own way and isn't
   affected by this override. Faded in via opacity/transform instead of the
   parent's abrupt display:none/block toggle, and `display:block` is forced
   here (this selector's ID beats the parent's plain class selector) so the
   transition actually has something to animate. */
@media ( min-width: 992px ) {
	#masthead.cricket-site-header .main-navigation li ul {
		display: block;
		width: 230px;
		margin-top: 10px;
		padding: 8px;
		background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.98 ), rgba( 8, 20, 40, 0.98 ) );
		backdrop-filter: blur( 18px ) saturate( 160% );
		border: 1px solid var( --cricket-glass-border );
		border-radius: 12px;
		box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.45 ), inset 0 1px 0 rgba( 255, 255, 255, 0.06 );
		opacity: 0;
		visibility: hidden;
		transform: translateY( 6px );
		/* Closing waits 0.25s, so a pointer that briefly slips off the menu
		   on its way down doesn't snap it shut. */
		transition: opacity 0.2s ease 0.25s, transform 0.2s ease 0.25s, visibility 0s linear 0.45s;
		pointer-events: none;
	}

	/* Hover bridge. The dropdown sits 10px below its menu item (margin-top
	   above). Without this, moving the mouse down crossed that empty gap,
	   the parent <li> lost :hover, and the menu vanished before the pointer
	   reached "My Account" / "Privacy Policy" / "Cookie Policy". This
	   invisible strip belongs to the <ul>, so hovering it keeps the parent
	   <li> hovered. */
	#masthead.cricket-site-header .main-navigation li ul::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 14px;
	}

	#masthead.cricket-site-header .main-navigation li:hover > ul,
	#masthead.cricket-site-header .main-navigation li.focus > ul,
	#masthead.cricket-site-header .main-navigation li:focus-within > ul {
		opacity: 1;
		visibility: visible;
		transform: translateY( 0 );
		pointer-events: auto;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
	}

	#masthead.cricket-site-header .main-navigation li ul a {
		color: var( --cricket-ice );
		background: none;
		padding: 10px 14px;
		border-radius: 8px;
		font-weight: 600;
		font-size: 14px;
		-webkit-text-fill-color: currentColor;
		transition: background-color 0.16s ease, color 0.16s ease;
	}

	#masthead.cricket-site-header .main-navigation li ul li:hover > a,
	#masthead.cricket-site-header .main-navigation li ul li.current-menu-item > a,
	#masthead.cricket-site-header .main-navigation li ul li.current_page_item > a {
		background: rgba( 255, 176, 32, 0.14 );
		color: var( --cricket-accent );
	}

	#masthead.cricket-site-header .main-navigation ul li.menu-item-has-children > a::after,
	#masthead.cricket-site-header .main-navigation ul li.page_item_has_children > a::after {
		color: rgba( 234, 244, 255, 0.6 );
		-webkit-text-fill-color: rgba( 234, 244, 255, 0.6 );
	}
}

/* Account/login nav item (psp_account_menu_icon() in functions.php),
   redesigned 2026-09-16. Guests see a gold "Log in" pill with a user icon;
   members see their initials in a gradient avatar with a spinning conic
   ring and a green online dot. The other nav links clip a gradient to
   text, so this link resets that and uses real colours. */
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link {
	background-image: none;
	-webkit-text-fill-color: currentColor;
	color: var( --cricket-ice );
	animation: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* No sliding underline on the pill/avatar. */
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link::after {
	display: none;
}

@property --cricket-acct-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.cricket-nav-account-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: transform 0.25s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.25s ease;
}

/* Rotating conic ring (both states). */
.cricket-nav-account-icon::before {
	content: "";
	position: absolute;
	inset: -3px;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient( from var( --cricket-acct-angle ), #ffd66b, #ff8a5c, #7c5cff, #3ad0ff, #ffd66b );
	animation: cricket-account-spin 4s linear infinite;
}

/* Guest: gold coin with a dark icon, inside a glassy pill. */
.cricket-nav-account-icon--guest {
	width: 30px;
	height: 30px;
	color: #1a1200;
	background: linear-gradient( 140deg, #ffe08a, #ffb020 55%, #ff8a5c );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.6 ), 0 4px 12px -4px rgba( 255, 150, 40, 0.8 );
}

.cricket-nav-account-icon--guest::before {
	display: none;
}

#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest ) {
	padding: 4px 14px 4px 4px;
	margin-block: auto;
	border-radius: 999px;
	background: rgba( 255, 176, 32, 0.1 );
	box-shadow: inset 0 0 0 1px rgba( 255, 176, 32, 0.45 );
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	animation: cricket-account-pulse 2.8s ease-in-out infinite;
}

.cricket-nav-account-label {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	color: #ffd66b;
	-webkit-text-fill-color: #ffd66b;
}

#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest ):hover,
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest ):focus-visible {
	background: rgba( 255, 176, 32, 0.2 );
	box-shadow: inset 0 0 0 1px rgba( 255, 176, 32, 0.8 ), 0 8px 22px -10px rgba( 255, 150, 40, 0.9 );
	transform: translateY( -1px );
}

#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:hover .cricket-nav-account-icon--guest {
	transform: rotate( -12deg ) scale( 1.08 );
}

/* Member: initials avatar. */
.cricket-nav-account-icon--user {
	background: linear-gradient( 140deg, #1f4f8f, #122c56 60%, #0a1830 );
	box-shadow: inset 0 0 0 2px #0a1830;
}

.cricket-nav-account-initials {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

.cricket-nav-account-dot {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #2ee58a;
	box-shadow: 0 0 0 2px #0a1830;
}

.cricket-nav-account-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #2ee58a;
	animation: cricket-account-ping 2s cubic-bezier( 0, 0, 0.2, 1 ) infinite;
}

#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:hover .cricket-nav-account-icon--user,
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:focus-visible .cricket-nav-account-icon--user {
	transform: scale( 1.1 );
	box-shadow: inset 0 0 0 2px #0a1830, 0 0 0 6px rgba( 255, 176, 32, 0.16 );
}

@keyframes cricket-account-pulse {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba( 255, 176, 32, 0.45 ), 0 0 0 0 rgba( 255, 176, 32, 0.35 ); }
	50% { box-shadow: inset 0 0 0 1px rgba( 255, 176, 32, 0.45 ), 0 0 0 7px rgba( 255, 176, 32, 0 ); }
}

@keyframes cricket-account-spin {
	to { --cricket-acct-angle: 360deg; }
}

@keyframes cricket-account-ping {
	75%, 100% { transform: scale( 2.2 ); opacity: 0; }
}

#masthead.cricket-site-header a:focus-visible,
#masthead.cricket-site-header button:focus-visible {
	outline: 2px solid var( --cricket-accent );
	outline-offset: 2px;
}

/* Search overlay — the parent theme's own plain white dropdown (350px,
   flat shadow, default Bootstrap input) never got restyled for the dark
   header; it now matches the same dark-glass language as the nav
   dropdown and account icon (blur, border, gold accents). The theme's
   own jQuery still drives the .off/.on toggle + fadeIn/fadeOut — only
   the panel's appearance changes here. */
#masthead.cricket-site-header .search-block {
	top: calc( 100% + 14px );
	width: 420px;
	max-width: calc( 100vw - 32px );
	padding: 20px;
	background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.98 ), rgba( 8, 20, 40, 0.98 ) );
	backdrop-filter: blur( 20px ) saturate( 160% );
	border: 1px solid var( --cricket-glass-border );
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.5 ), inset 0 1px 0 rgba( 255, 255, 255, 0.06 );
}

#masthead.cricket-site-header .search-block .container {
	position: relative;
	padding: 0;
}

#masthead.cricket-site-header .search-block__label {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba( 234, 244, 255, 0.55 );
	margin: 0 0 14px;
}

#masthead.cricket-site-header .search-block .search-form .input-group {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

#masthead.cricket-site-header .search-block .form-control {
	flex: 1 1 auto;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid var( --cricket-glass-border );
	border-radius: 10px;
	color: var( --cricket-ice );
	font-size: 15px;
	padding: 13px 16px;
	height: auto;
	min-height: 48px;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

#masthead.cricket-site-header .search-block .form-control::placeholder {
	color: rgba( 234, 244, 255, 0.4 );
}

#masthead.cricket-site-header .search-block .form-control:focus {
	outline: none;
	background: rgba( 255, 255, 255, 0.1 );
	border-color: var( --cricket-accent );
	box-shadow: 0 0 0 3px rgba( 255, 176, 32, 0.18 );
}

#masthead.cricket-site-header .search-block .input-group-prepend .btn-theme {
	background: linear-gradient( 135deg, var( --cricket-accent ), #ff6b6b );
	border: none;
	border-radius: 10px;
	min-height: 48px;
	min-width: 48px;
	padding: 0 18px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#masthead.cricket-site-header .search-block .input-group-prepend .btn-theme::before {
	color: #1a1200;
}

#masthead.cricket-site-header .search-block .input-group-prepend .btn-theme:hover,
#masthead.cricket-site-header .search-block .input-group-prepend .btn-theme:focus-visible {
	transform: translateY( -1px );
	box-shadow: 0 10px 22px rgba( 255, 107, 107, 0.35 );
}

/* Explicit close control for the search overlay (the theme's own open/close
   toggle icon sits underneath the opened panel with no visible affordance to
   close it again — Escape works but isn't discoverable). */
.cricket-search-close {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --cricket-glass-border );
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --cricket-ice );
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cricket-search-close:hover,
.cricket-search-close:focus-visible {
	background: var( --cricket-accent );
	border-color: var( --cricket-accent );
	color: #1a1200;
	transform: scale( 1.08 );
}

@media ( max-width: 991px ) {
	#masthead.cricket-site-header .search-block {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		max-width: none;
		background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.98 ), rgba( 8, 20, 40, 0.98 ) );
		border-radius: 12px;
		margin: 10px 0;
	}
}

/* ---------------------------------------------------------------------
 * Sticky compaction (hooks into the theme's existing jquery.sticky classes)
 * ------------------------------------------------------------------- */

.sticky-wrapper.is-sticky #sticky-navigation-bar {
	/* In normal (non-sticky) flow, the nav's own background is just a
	   faint top-fade gradient — intentional, since it sits directly on top
	   of whatever hero/section background is already behind it there. Once
	   sticky (jquery.sticky.js sets position:fixed inline via JS), the nav
	   detaches from that flow and floats over ARBITRARY scrolled content
	   instead — with no real background of its own, page content was
	   visibly (and functionally — it was also winning hit-tests) showing
	   straight through it, most obviously over light-background sections
	   like the Leaderboard page's table. This gives it a real backdrop only
	   once it's actually sticky. jquery.sticky.js sets z-index:999 inline
	   on this same element; !important is required to raise it (the
	   #masthead z-index:9999 fix above handles the header as a whole, this
	   is defense in depth for the nav specifically).
	*/
	background: linear-gradient( 180deg, rgba( 7, 20, 39, 0.97 ), rgba( 10, 26, 51, 0.95 ) );
	backdrop-filter: blur( 14px ) saturate( 150% );
	-webkit-backdrop-filter: blur( 14px ) saturate( 150% );
	box-shadow: 0 6px 24px rgba( 5, 15, 30, 0.35 );
	z-index: 9999 !important;
}

.sticky-wrapper.is-sticky .cricket-header-animation {
	transform: translateY( -50% ) scale( 0.72 );
	opacity: 0.6;
}

/* ---------------------------------------------------------------------
 * News ticker
 * ------------------------------------------------------------------- */

.cricket-news-ticker {
	background: linear-gradient( 90deg, var( --cricket-navy-deep ), var( --cricket-blue ) 60%, var( --cricket-navy-deep ) );
	border-top: 1px solid var( --cricket-glass-border );
	border-bottom: 1px solid var( --cricket-glass-border );
}

.cricket-news-ticker__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
}

.cricket-news-ticker__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.1 );
	border: 1px solid var( --cricket-glass-border );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --cricket-ice );
}

.cricket-news-ticker__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff4d4d;
	box-shadow: 0 0 6px rgba( 255, 77, 77, 0.8 );
	animation: cricket-dot-pulse 1.6s ease-in-out infinite;
}

.cricket-news-ticker__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}

.cricket-news-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: cricket-ticker-scroll 32s linear infinite;
}

.cricket-news-ticker__viewport:hover .cricket-news-ticker__track,
.cricket-news-ticker__viewport:focus-within .cricket-news-ticker__track {
	animation-play-state: paused;
}

.cricket-news-ticker__item,
.cricket-news-ticker__item:visited {
	/* :visited needs its own rule — a.cricket-news-ticker__item:visited
	   (0,2,1) still loses to the browser/parent-theme default a:visited
	   (0,1,1)? No — but a bare a:visited elsewhere in the cascade can still
	   tie/beat a class-only base rule, which is exactly what made already-
	   -read posts show the UA/theme default blue instead of gold. */
	color: #ffe89b;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	padding: 2px 4px;
	border-radius: 3px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.cricket-news-ticker__item:hover,
.cricket-news-ticker__item:focus-visible {
	color: #ffffff;
	background-color: rgba( 255, 255, 255, 0.1 );
}

/* The single most recent post — stays visually flagged as it scrolls by. */
.cricket-news-ticker__item--latest,
.cricket-news-ticker__item--latest:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1a1200;
	font-weight: 700;
	padding: 3px 10px 3px 4px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.35 ), 0 2px 10px rgba( 255, 140, 60, 0.45 );
	animation: cricket-latest-glow 2.4s ease-in-out infinite;
}

.cricket-news-ticker__item--latest:hover,
.cricket-news-ticker__item--latest:focus-visible {
	color: #1a1200;
	background: linear-gradient( 90deg, #ffe066, #ff8a5c );
}

.cricket-news-ticker__item-flag {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba( 8, 20, 40, 0.75 );
	color: #ffe066;
	font-size: 9.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.cricket-news-ticker__sep {
	color: rgba( 255, 255, 255, 0.35 );
	font-size: 6px;
	margin: 0 14px;
}

@keyframes cricket-ticker-scroll {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

@keyframes cricket-clock-scroll {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

@keyframes cricket-dot-pulse {
	0%, 100% { opacity: 1; transform: scale( 1 ); }
	50% { opacity: 0.5; transform: scale( 0.8 ); }
}

/* ---------------------------------------------------------------------
 * Shared keyframes
 * ------------------------------------------------------------------- */

@keyframes cricket-clock-sheen {
	from { background-position: 0% 0; }
	to { background-position: -220% 0; }
}

@keyframes cricket-brand-in {
	from { opacity: 0; transform: translateY( -6px ); }
	to { opacity: 1; transform: translateY( 0 ); }
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

@media ( max-width: 991px ) {
	.cricket-header-animation {
		width: 96px;
		height: 36px;
		right: 8px;
	}

	.cricket-news-ticker__badge span:not(.cricket-news-ticker__dot) {
		display: none;
	}
}

@media ( max-width: 767px ) {
	.cricket-nav-fx__crowd {
		display: none;
	}

	.cricket-nav-fx__beam {
		width: 80px;
	}
}

@media ( max-width: 575px ) {
	.cricket-header-animation {
		display: none;
	}

	.cricket-world-clock__item {
		padding: 6px 10px;
		font-size: 11px;
	}

	.cricket-news-ticker__sep {
		margin: 0 10px;
	}

	.cricket-nav-fx__sparks {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.cricket-world-clock::before,
	#masthead.cricket-site-header .site-title-link,
	#masthead.cricket-site-header .site-description,
	#masthead.cricket-site-header .site-branding,
	.cricket-anim__stumps rect,
	.cricket-anim__bat,
	.cricket-anim__ball,
	.cricket-anim__spark,
	.cricket-news-ticker__track,
	.cricket-news-ticker__dot,
	.cricket-world-clock__track,
	.cricket-nav-fx::before,
	.cricket-nav-fx__beam,
	.cricket-nav-fx__spark,
	.cricket-nav-fx__crowd i,
	.cricket-news-ticker__item--latest,
	.cricket-nav-account-icon,
	.cricket-nav-account-icon::before,
	.cricket-nav-account-dot::after,
	#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link,
	#masthead.cricket-site-header .nav-menu > li > a {
		animation: none !important;
		transition: none !important;
	}

	.cricket-anim__ball {
		transform: translateX( 60px );
		opacity: 1;
	}

	.cricket-anim__bat {
		transform: rotate( -20deg );
	}

	.cricket-news-ticker__viewport,
	.cricket-world-clock__viewport {
		overflow-x: auto;
	}

	.cricket-nav-fx__sparks {
		display: none;
	}
}

/* =====================================================================
 * Header polish v3 (2026-09-16): visitor counter chip, login button and
 * member chip. Appended last so these win over the earlier rules.
 * ===================================================================== */

/* ---- Visitor counter: glass chip, gold eye disc, live dot, gold number */
.cricket-visitor-count {
	position: relative;
	gap: 8px;
	padding: 3px 12px 3px 3px;
	border-radius: 999px;
	background: linear-gradient( 180deg, rgba( 4, 14, 32, 0.55 ), rgba( 4, 14, 32, 0.35 ) );
	box-shadow: inset 0 0 0 1px rgba( 255, 214, 107, 0.35 ), 0 6px 16px -10px rgba( 0, 0, 0, 0.8 );
	font-family: 'Outfit', 'PT Sans', sans-serif;
	overflow: hidden;
}

/* Slow light sweep across the chip */
.cricket-visitor-count::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -40%;
	width: 30%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.18 ), transparent );
	transform: skewX( -20deg );
	animation: cricket-visitor-sweep 6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes cricket-visitor-sweep {
	0%, 60% { left: -40%; }
	100% { left: 130%; }
}

.cricket-visitor-count__icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient( 140deg, #ffe08a, #ffb020 60%, #ff8a5c );
	box-shadow: 0 0 10px rgba( 255, 176, 32, 0.45 );
}

.cricket-visitor-count__icon,
.cricket-visitor-count__icon * {
	color: #1a1200 !important;
	-webkit-text-fill-color: #1a1200 !important;
}

.cricket-visitor-count__icon svg {
	width: 12px;
	height: 12px;
}

.cricket-visitor-count__live {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2ee58a;
	box-shadow: 0 0 6px rgba( 46, 229, 138, 0.9 );
}

.cricket-visitor-count__live::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #2ee58a;
	animation: cricket-account-ping 2s cubic-bezier( 0, 0, 0.2, 1 ) infinite;
}

.cricket-visitor-count .cricket-visitor-count__number {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.02em;
	background: linear-gradient( 100deg, #ffffff, #ffe9b3 55%, #ffb020 );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.cricket-visitor-count .cricket-visitor-count__number.is-bumped {
	animation: cricket-visitor-bump 0.6s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes cricket-visitor-bump {
	40% { transform: translateY( -3px ) scale( 1.06 ); }
}

.cricket-visitor-count .cricket-visitor-count__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba( 234, 244, 255, 0.7 ) !important;
	-webkit-text-fill-color: rgba( 234, 244, 255, 0.7 ) !important;
}

/* ---- Login button (guests) */
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest ) {
	position: relative;
	gap: 9px;
	padding: 4px 16px 4px 4px;
	overflow: hidden;
	background: linear-gradient( 100deg, #ffe08a, #ffb020 55%, #ff8a5c );
	box-shadow: 0 10px 24px -12px rgba( 255, 140, 60, 0.95 ), inset 0 1px 0 rgba( 255, 255, 255, 0.55 );
	animation: none;
}

/* Shine sweep */
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest )::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.65 ), transparent );
	transform: skewX( -20deg );
	animation: cricket-login-shine 4.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes cricket-login-shine {
	0%, 65% { left: -60%; }
	100% { left: 140%; }
}

#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest ):hover,
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--guest ):focus-visible {
	background: linear-gradient( 100deg, #fff0b8, #ffc043 55%, #ff9a70 );
	box-shadow: 0 14px 28px -12px rgba( 255, 140, 60, 1 ), inset 0 1px 0 rgba( 255, 255, 255, 0.7 );
	transform: translateY( -2px );
}

.cricket-nav-account-icon--guest {
	width: 30px;
	height: 30px;
	color: #ffd66b;
	background: #0a1830;
	box-shadow: inset 0 0 0 1.5px rgba( 255, 214, 107, 0.5 );
}

.cricket-nav-account-label {
	display: flex;
	flex-direction: column;
	gap: 1px;
	color: #1a1200;
	-webkit-text-fill-color: #1a1200;
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

.cricket-nav-account-label small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba( 26, 18, 0, 0.7 );
	-webkit-text-fill-color: rgba( 26, 18, 0, 0.7 );
}

/* ---- Member chip: avatar + "My account / Name" */
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--user ) {
	gap: 10px;
	padding: 3px 14px 3px 3px;
	margin-block: auto;
	border-radius: 999px;
	background: rgba( 4, 14, 32, 0.45 );
	box-shadow: inset 0 0 0 1px rgba( 255, 214, 107, 0.35 );
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--user ):hover,
#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link:has( .cricket-nav-account-icon--user ):focus-visible {
	background: rgba( 255, 176, 32, 0.14 );
	box-shadow: inset 0 0 0 1px rgba( 255, 214, 107, 0.8 ), 0 10px 24px -12px rgba( 255, 150, 40, 0.8 );
	transform: translateY( -1px );
}

.cricket-nav-account-icon--user {
	width: 32px;
	height: 32px;
}

.cricket-nav-account-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 110px;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-nav-account-name small {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffd66b;
	-webkit-text-fill-color: #ffd66b;
}

@media ( max-width: 1199px ) and ( min-width: 992px ) {
	.cricket-nav-account-name,
	.cricket-nav-account-label small {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-visitor-count::after,
	.cricket-visitor-count__live::after,
	#masthead.cricket-site-header .nav-menu > li > a.cricket-nav-account-link::before {
		animation: none !important;
	}
}

.cricket-visitor-count {
	white-space: nowrap;
	flex-wrap: nowrap;
}

@media ( max-width: 380px ) {
	.cricket-visitor-count .cricket-visitor-count__label {
		display: none;
	}
}

/* =====================================================================
 * Circular logo badge (2026-09-16). The uploaded logo (Customizer, Site
 * Identity, Logo) sits in a white disc inside a slowly rotating gold/blue
 * ring with a soft glow, beside the site name.
 * ===================================================================== */
@property --cricket-logo-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

#masthead.cricket-site-header .site-branding.brand-inline {
	flex-wrap: nowrap;
	gap: 14px;
}

#masthead.cricket-site-header .site-branding .custom-logo-link {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	margin: 0;
	padding: 3px;
	border-radius: 50%;
	background: conic-gradient( from var( --cricket-logo-angle ), #ffd66b, #ff8a5c, #3a86e0, #3ad0ff, #ffd66b );
	box-shadow: 0 0 0 4px rgba( 10, 24, 48, 0.9 ), 0 0 26px rgba( 255, 176, 32, 0.35 ), 0 12px 26px -12px rgba( 0, 0, 0, 0.9 );
	animation: cricket-logo-spin 8s linear infinite;
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.3s ease;
}

/* Inner white disc */
#masthead.cricket-site-header .site-branding .custom-logo-link::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: radial-gradient( circle at 35% 30%, #ffffff, #eef4fb 70%, #dde7f3 );
	box-shadow: inset 0 2px 6px rgba( 10, 24, 48, 0.25 );
}

/* Glossy highlight */
#masthead.cricket-site-header .site-branding .custom-logo-link::after {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: 2;
	border-radius: 50%;
	background: linear-gradient( 160deg, rgba( 255, 255, 255, 0.45 ), transparent 40% );
	pointer-events: none;
}

#masthead.cricket-site-header .site-branding .custom-logo-link img.custom-logo {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 7px 5px;
	border-radius: 50%;
	object-fit: contain;
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

#masthead.cricket-site-header .site-branding .custom-logo-link:hover,
#masthead.cricket-site-header .site-branding .custom-logo-link:focus-visible {
	transform: scale( 1.06 ) rotate( -4deg );
	box-shadow: 0 0 0 4px rgba( 10, 24, 48, 0.9 ), 0 0 36px rgba( 255, 176, 32, 0.6 ), 0 14px 28px -12px rgba( 0, 0, 0, 0.9 );
	outline: none;
}

#masthead.cricket-site-header .site-branding .custom-logo-link:hover img.custom-logo {
	transform: scale( 1.08 );
}

@keyframes cricket-logo-spin {
	to { --cricket-logo-angle: 360deg; }
}

#masthead.cricket-site-header .site-branding .custom-logo-link + .site-title-wrap {
	flex: 0 1 auto;
	min-width: 0;
}

@media ( max-width: 991px ) {
	#masthead.cricket-site-header .site-branding .custom-logo-link {
		width: 56px;
		height: 56px;
		padding: 2px;
		box-shadow: 0 0 0 3px rgba( 10, 24, 48, 0.9 ), 0 0 16px rgba( 255, 176, 32, 0.35 );
	}

	#masthead.cricket-site-header .site-branding .custom-logo-link::before,
	#masthead.cricket-site-header .site-branding .custom-logo-link::after {
		inset: 2px;
	}

	#masthead.cricket-site-header .site-branding .custom-logo-link img.custom-logo {
		padding: 5px 4px;
	}

	#masthead.cricket-site-header .site-branding.brand-inline {
		gap: 10px;
	}
}

@media ( max-width: 400px ) {
	#masthead.cricket-site-header .site-branding .custom-logo-link {
		width: 46px;
		height: 46px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#masthead.cricket-site-header .site-branding .custom-logo-link {
		animation: none;
	}
}

/* Wide logo: fill more of the disc (clipped to the circle). */
#masthead.cricket-site-header .site-branding .custom-logo-link {
	overflow: hidden;
}

#masthead.cricket-site-header .site-branding .custom-logo-link img.custom-logo {
	padding: 3px;
	transform: scale( 1.14 );
}

#masthead.cricket-site-header .site-branding .custom-logo-link:hover img.custom-logo {
	transform: scale( 1.24 );
}

/* =====================================================================
 * Search button + date chip (2026-09-17). The icon internals are shared
 * by the desktop nav button and the phone app-bar button
 * (cricket-mobile.css styles the phone tile around it).
 * ===================================================================== */

@property --cricket-search-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* ---- Icon ---------------------------------------------------------- */
.cricket-search-ico {
	position: relative;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.cricket-search-ico svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 22px;
	height: 22px;
	overflow: visible;
}

.cricket-search-ico__lens {
	stroke: #ffffff;
	stroke-width: 2.4;
	fill: rgba( 125, 211, 252, 0.16 );
	transform-origin: 10.5px 10.5px;
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 ), opacity 0.2s ease, fill 0.3s ease;
}

.cricket-search-ico__shine {
	stroke: #ffffff;
	stroke-width: 1.6;
	stroke-dasharray: 6;
	stroke-dashoffset: 6;
	opacity: 0.9;
	animation: cricket-search-shine 4s ease-in-out infinite;
}

.cricket-search-ico__handle {
	stroke: #ffb020;
	stroke-width: 3.2;
	transform-origin: 15.3px 15.3px;
	transition: transform 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 ), opacity 0.2s ease;
	filter: drop-shadow( 0 0 3px rgba( 255, 176, 32, 0.6 ) );
}

.cricket-search-ico__x {
	stroke: #1a1200;
	stroke-width: 2.8;
	opacity: 0;
	transform: scale( 0.3 ) rotate( -90deg );
	transform-origin: 12px 12px;
	transition: opacity 0.2s ease, transform 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

@keyframes cricket-search-shine {
	0%, 62% { stroke-dashoffset: 6; opacity: 0; }
	70% { opacity: 1; }
	86% { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: -6; opacity: 0; }
}

/* Rotating gold/blue ring around the button */
.cricket-search-ico__ring {
	position: absolute;
	inset: -11px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient( from var( --cricket-search-angle ), rgba( 255, 176, 32, 0.95 ), rgba( 58, 134, 224, 0.15 ) 30%, rgba( 125, 211, 252, 0.85 ) 55%, rgba( 58, 134, 224, 0.15 ) 80%, rgba( 255, 176, 32, 0.95 ) );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask: linear-gradient( #000 0 0 ) content-box exclude, linear-gradient( #000 0 0 );
	animation: cricket-search-orbit 6s linear infinite;
	opacity: 0.85;
}

@keyframes cricket-search-orbit {
	to { --cricket-search-angle: 360deg; }
}

/* Hover / focus: lens zooms, handle tilts */
.search-toggle:hover .cricket-search-ico__lens,
.search-toggle:focus-visible .cricket-search-ico__lens {
	transform: scale( 1.12 );
	fill: rgba( 125, 211, 252, 0.3 );
}

.search-toggle:hover .cricket-search-ico__handle,
.search-toggle:focus-visible .cricket-search-ico__handle {
	transform: rotate( -18deg ) translate( 1px, 1px );
}

/* Open: magnifier folds away, X springs in */
.search-toggle.active .cricket-search-ico__lens,
.search-toggle.active .cricket-search-ico__handle,
.search-toggle.active .cricket-search-ico__shine {
	opacity: 0;
	transform: scale( 0.4 );
	animation: none;
}

.search-toggle.active .cricket-search-ico__x {
	opacity: 1;
	transform: none;
}

.search-toggle.active .cricket-search-ico__ring {
	animation-duration: 2.5s;
	opacity: 0.5;
}

/* Phone tile: ring hugs the rounded tile */
#masthead .navigation-icons-wrap .search-toggle .cricket-search-ico__ring {
	border-radius: 15px;
}

/* ---- Desktop nav button ---------------------------------------------- */
@media ( min-width: 992px ) {
	#masthead .navbar-main .search-toggle.cricket-search-btn {
		top: 50%;
		bottom: auto;
		right: 0;
		display: grid;
		place-items: center;
		width: 44px;
		min-width: 0;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		background: radial-gradient( circle at 35% 30%, rgba( 29, 67, 118, 0.95 ), rgba( 10, 24, 48, 0.95 ) 70% );
		box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.12 ), 0 10px 24px -12px rgba( 0, 0, 0, 0.9 );
		transform: translateY( -50% );
		transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.25s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	}

	#masthead .navbar-main .search-toggle.cricket-search-btn::before {
		content: none !important;
		display: none !important;
	}

	#masthead .navbar-main .search-toggle.cricket-search-btn .cricket-search-ico__ring {
		inset: -11px;
		border-radius: 50%;
	}

	#masthead .navbar-main .search-toggle.cricket-search-btn:hover,
	#masthead .navbar-main .search-toggle.cricket-search-btn:focus-visible {
		transform: translateY( -50% ) scale( 1.06 );
		box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.16 ), 0 0 0 5px rgba( 255, 176, 32, 0.14 ), 0 14px 28px -12px rgba( 255, 140, 60, 0.55 );
		outline: none;
	}

	#masthead .navbar-main .search-toggle.cricket-search-btn.active {
		background: linear-gradient( 140deg, #ffe08a, #ffb020 60%, #ff8a5c );
		box-shadow: 0 12px 26px -10px rgba( 255, 140, 60, 0.85 );
	}

	/* "Search  /" tip under the button */
	#masthead .navbar-main .search-toggle.cricket-search-btn::after {
		content: attr( data-tip ) "  /";
		position: absolute;
		top: calc( 100% + 10px );
		left: 50%;
		padding: 4px 10px;
		border-radius: 999px;
		white-space: pre;
		font-family: 'JetBrains Mono', Consolas, monospace;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: #ffd66b;
		background: #0a1830;
		box-shadow: inset 0 0 0 1px rgba( 255, 214, 107, 0.4 );
		opacity: 0;
		transform: translate( -50%, -4px );
		transition: opacity 0.2s ease, transform 0.2s ease;
		pointer-events: none;
		z-index: 30;
	}

	#masthead .navbar-main .search-toggle.cricket-search-btn:hover::after,
	#masthead .navbar-main .search-toggle.cricket-search-btn:focus-visible::after {
		opacity: 1;
		transform: translate( -50%, 0 );
	}

	#masthead .navbar-main .search-toggle.cricket-search-btn.active::after {
		opacity: 0;
	}

	.sticky-wrapper.is-sticky #masthead .navbar-main .search-toggle.cricket-search-btn,
	.sticky-wrapper.is-sticky .navbar-main .search-toggle.cricket-search-btn {
		width: 40px;
		height: 40px;
	}
}

/* ---- Date chip ------------------------------------------------------- */
.cricket-date {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 3px 14px 3px 3px;
	border-radius: 12px;
	background: linear-gradient( 180deg, rgba( 4, 14, 32, 0.55 ), rgba( 4, 14, 32, 0.3 ) );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.14 ), 0 6px 16px -10px rgba( 0, 0, 0, 0.8 );
	list-style: none;
}

.cricket-date::before {
	content: none !important;
	display: none !important;
}

.cricket-date__tile {
	flex: none;
	display: flex;
	flex-direction: column;
	width: 30px;
	height: 32px;
	overflow: hidden;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 4px 10px -4px rgba( 0, 0, 0, 0.7 );
	text-align: center;
}

.cricket-date__tile b {
	display: block;
	height: 11px;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 7.5px;
	font-weight: 900;
	line-height: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1a1200;
	background: linear-gradient( 90deg, #ffd66b, #ffb020 );
}

.cricket-date__tile i {
	display: grid;
	flex: 1;
	place-items: center;
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	color: #0a1830;
}

.cricket-date__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.1;
	white-space: nowrap;
}

.cricket-date__weekday {
	font-family: 'JetBrains Mono', Consolas, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffd66b;
}

.cricket-date .cricket-date-long {
	font-family: 'Outfit', 'PT Sans', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: #ffffff;
}

.cricket-date .cricket-date-short {
	display: none;
}

@media ( min-width: 992px ) {
	#masthead .cricket-infobar-row .date {
		width: auto;
	}

	#masthead .cricket-infobar-row .date ul {
		margin: 0;
		padding: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-search-ico__ring,
	.cricket-search-ico__shine {
		animation: none;
	}
}