/**
 * Phone layer (2026-09-17). Loaded last (psp_child_enqueue_mobile_layer()).
 * Every rule is inside a max-width media query, so desktop never changes.
 *
 *   1. Info bar: short date + "Total Views" counter on one line
 *   2. App-bar header: menu at the left edge, search at the right edge,
 *      animated icons (burger → X, magnifier glint → X)
 *   3. Menu panel: dark glass drawer with large tap rows
 *   4. Auto-sliding category rows (js/cricket-mobile.js)
 *   5. Site-wide small-screen polish
 */

:root {
	--m-navy: #0a1830;
	--m-navy-2: #0d2a4d;
	--m-gold: #ffb020;
	--m-gold-2: #ffd66b;
	--m-ice: #eaf4ff;
	--m-muted: rgba( 234, 244, 255, 0.62 );
	--m-line: rgba( 255, 255, 255, 0.1 );
	--m-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* Desktop keeps its wording; the phone label only shows on phones. */
.cricket-visitor-count__label-phone,
.cricket-date-short {
	display: none;
}

@media ( max-width: 991px ) {

	/* =================================================================
	 * 1. Info bar — one compact line
	 * ============================================================== */

	#masthead .info-bar .contact-section {
		flex: 0 0 100%;
		max-width: 100%;
	}

	#masthead .cricket-infobar-row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-height: 40px;
		padding: 5px 0;
	}

	/* The parent reserves 100px on the right for top-bar menus this site
	   doesn't show on phones. */
	#masthead .info-bar .container {
		padding-right: 15px !important;
	}

	#masthead .info-bar .contact-section {
		padding-right: 0;
	}

	#masthead .cricket-infobar-row .date {
		flex: 0 0 auto;
		width: auto !important;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}

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

	/* Phone date chip: mini calendar tile + "Thu, 17 Sep" */
	#masthead .cricket-infobar-row .date li.cricket-date {
		float: none;
		gap: 8px;
		margin: 0;
		padding: 3px 10px 3px 3px;
		line-height: 1.2;
	}

	#masthead .cricket-date .cricket-date__tile {
		width: 26px;
		height: 28px;
		border-radius: 7px;
	}

	#masthead .cricket-date .cricket-date__tile b {
		height: 9px;
		font-size: 6.5px;
		line-height: 9px;
	}

	#masthead .cricket-date .cricket-date__tile i {
		font-size: 13px;
	}

	#masthead .cricket-date .cricket-date__weekday,
	#masthead .cricket-date .cricket-date-long {
		display: none;
	}

	#masthead .cricket-date .cricket-date-short {
		display: inline;
		font-family: 'Outfit', 'PT Sans', sans-serif;
		font-size: 12.5px;
		font-weight: 800;
		letter-spacing: 0.01em;
		white-space: nowrap;
		color: var( --m-ice );
	}


	#masthead .cricket-visitor-count {
		flex: 0 0 auto;
		margin: 0 0 0 auto;
		gap: 6px;
		padding: 3px 10px 3px 3px;
	}

	#masthead .cricket-visitor-count .cricket-visitor-count__number {
		font-size: 12.5px;
		letter-spacing: -0.01em;
	}

	#masthead .cricket-visitor-count .cricket-visitor-count__live {
		display: none;
	}

	.cricket-visitor-count__label-wide {
		display: none;
	}

	#masthead .cricket-visitor-count .cricket-visitor-count__label {
		display: inline-flex !important;
		align-items: center;
	}

	.cricket-visitor-count__label-phone {
		display: inline;
		font-size: 9.5px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var( --m-gold-2 );
	}

	/* =================================================================
	 * 2. App-bar: [menu] logo · name ........ [search]
	 * ============================================================== */

	#masthead .navbar-brand-wrap {
		position: relative;
		flex-wrap: nowrap;
		justify-content: flex-start;
		min-height: 64px;
		padding-left: 64px !important;
		padding-right: 62px !important;
	}

	#masthead .navbar-brand-wrap .navbar-brand {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	#masthead .navbar-brand-wrap .navigation-icons-wrap {
		position: absolute;
		top: 50%;
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		margin: 0;
		transform: translateY( -50% );
		pointer-events: none;
		z-index: 5;
	}

	#masthead .navigation-icons-wrap .navbar-toggler,
	#masthead .navigation-icons-wrap .search-toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 14px;
		color: var( --m-ice );
		background: linear-gradient( 160deg, rgba( 255, 255, 255, 0.14 ), rgba( 255, 255, 255, 0.04 ) );
		box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.16 ), 0 8px 18px -10px rgba( 0, 0, 0, 0.8 );
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
		pointer-events: auto;
		transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s var( --m-ease );
	}

	#masthead .navigation-icons-wrap .navbar-toggler {
		order: 1;
	}

	#masthead .navigation-icons-wrap .search-toggle {
		order: 3;
	}

	#masthead .navigation-icons-wrap .navbar-toggler::before,
	#masthead .navigation-icons-wrap .search-toggle::before {
		content: none !important;
		display: none !important;
	}

	#masthead .navigation-icons-wrap .navbar-toggler:active,
	#masthead .navigation-icons-wrap .search-toggle:active {
		transform: scale( 0.9 );
	}

	#masthead .navigation-icons-wrap .navbar-toggler:focus-visible,
	#masthead .navigation-icons-wrap .search-toggle:focus-visible {
		outline: 2px solid var( --m-gold );
		outline-offset: 2px;
	}

	/* Soft gold halo that breathes around both buttons */
	#masthead .navigation-icons-wrap .navbar-toggler::after,
	#masthead .navigation-icons-wrap .search-toggle::after {
		content: "";
		position: absolute;
		inset: -3px;
		border-radius: 17px;
		border: 1.5px solid rgba( 255, 176, 32, 0.55 );
		opacity: 0;
		animation: m-halo 3.6s ease-in-out infinite;
		pointer-events: none;
	}

	#masthead .navigation-icons-wrap .search-toggle::after {
		animation-delay: 1.8s;
	}

	@keyframes m-halo {
		0%, 70%, 100% { opacity: 0; transform: scale( 0.92 ); }
		80% { opacity: 1; transform: scale( 1 ); }
		95% { opacity: 0; transform: scale( 1.12 ); }
	}

	/* ---- Burger: three bars, staggered widths, morphs into an X ---- */
	.cricket-burger {
		position: relative;
		display: block;
		width: 22px;
		height: 16px;
	}

	.cricket-burger i {
		position: absolute;
		left: 0;
		height: 2.5px;
		border-radius: 3px;
		background: currentColor;
		transition: transform 0.35s var( --m-ease ), width 0.35s var( --m-ease ), top 0.35s var( --m-ease ), opacity 0.2s ease, background 0.25s ease;
	}

	.cricket-burger i:nth-child( 1 ) {
		top: 0;
		width: 22px;
	}

	.cricket-burger i:nth-child( 2 ) {
		top: 7px;
		width: 15px;
		background: var( --m-gold );
		animation: m-burger-mid 3.2s ease-in-out infinite;
	}

	.cricket-burger i:nth-child( 3 ) {
		top: 14px;
		width: 19px;
	}

	@keyframes m-burger-mid {
		0%, 100% { width: 15px; }
		50% { width: 22px; }
	}

	#masthead .navbar-toggler[aria-expanded="true"] .cricket-burger i:nth-child( 1 ),
	#masthead.is-menu-open .navbar-toggler .cricket-burger i:nth-child( 1 ) {
		top: 7px;
		width: 22px;
		transform: rotate( 45deg );
	}

	#masthead .navbar-toggler[aria-expanded="true"] .cricket-burger i:nth-child( 2 ),
	#masthead.is-menu-open .navbar-toggler .cricket-burger i:nth-child( 2 ) {
		opacity: 0;
		transform: translateX( -8px );
		animation: none;
	}

	#masthead .navbar-toggler[aria-expanded="true"] .cricket-burger i:nth-child( 3 ),
	#masthead.is-menu-open .navbar-toggler .cricket-burger i:nth-child( 3 ) {
		top: 7px;
		width: 22px;
		transform: rotate( -45deg );
	}

	#masthead .navigation-icons-wrap .navbar-toggler[aria-expanded="true"],
	#masthead.is-menu-open .navigation-icons-wrap .navbar-toggler,
	#masthead .navigation-icons-wrap .search-toggle.active {
		color: #1a1200;
		background: linear-gradient( 140deg, #ffe08a, var( --m-gold ) 60%, #ff8a5c );
		box-shadow: 0 10px 22px -10px rgba( 255, 140, 60, 0.9 );
	}

	#masthead .navbar-toggler[aria-expanded="true"] .cricket-burger i,
	#masthead.is-menu-open .navbar-toggler .cricket-burger i {
		background: #1a1200;
	}

	/* Search icon internals are shared with desktop — see cricket-header.css
	   ("Search button + date chip"). */

	/* The decorative batsman animation sat on top of the search button on
	   tablets (it was already hidden on phones). */
	#masthead .cricket-header-animation {
		display: none !important;
	}

	/* Brand beside the menu button */
	#masthead .navbar-brand-wrap .site-branding.brand-inline {
		gap: 9px;
	}

	#masthead .navbar-brand-wrap .site-title-wrap {
		min-width: 0;
	}

	#masthead .navbar-brand-wrap .site-title {
		margin: 0;
		overflow: hidden;
		font-size: clamp( 16px, 4.6vw, 22px ) !important;
		line-height: 1.15;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#masthead .navbar-brand-wrap .site-description {
		margin: 2px 0 0;
		overflow: hidden;
		font-size: clamp( 10.5px, 3.1vw, 13px ) !important;
		line-height: 1.2;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* =================================================================
	 * 3. Menu panel
	 * ============================================================== */

	#masthead .navbar-main {
		background: transparent !important;
	}

	#masthead #navbarCollapse {
		max-width: none;
		padding: 0;
	}

	#masthead #navbarCollapse.show,
	#masthead #navbarCollapse.collapsing {
		margin: 4px 10px 12px;
		border-radius: 20px;
		background:
			radial-gradient( 120% 80% at 0% 0%, rgba( 255, 176, 32, 0.14 ), transparent 55% ),
			linear-gradient( 180deg, rgba( 13, 42, 77, 0.98 ), rgba( 7, 20, 39, 0.98 ) );
		box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.1 ), 0 24px 44px -20px rgba( 0, 0, 0, 0.9 );
		overflow: hidden;
	}

	#masthead #navbarCollapse .main-navigation {
		padding: 10px;
	}

	#masthead #navbarCollapse .nav-menu {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
	}

	#masthead #navbarCollapse .nav-menu > li {
		border: 0 !important;
		margin: 0;
	}

	#masthead #navbarCollapse .nav-menu > li > a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 52px;
		padding: 8px 44px 8px 16px !important;
		border-radius: 14px;
		font-family: 'Outfit', 'PT Sans', sans-serif;
		font-size: 16.5px;
		font-weight: 700;
		letter-spacing: 0.01em;
		text-transform: none;
		color: var( --m-ice ) !important;
		-webkit-text-fill-color: var( --m-ice ) !important;
		background: rgba( 255, 255, 255, 0.04 ) !important;
		box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.06 );
		text-shadow: none !important;
		animation: none;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.2s ease, transform 0.2s var( --m-ease );
	}

	/* Chevron on every row */
	#masthead #navbarCollapse .nav-menu > li > a::after {
		content: "" !important;
		position: absolute;
		top: 50%;
		right: 16px;
		left: auto !important;
		bottom: auto !important;
		width: 8px !important;
		height: 8px !important;
		margin-top: -4px;
		border: 0 !important;
		border-top: 2px solid rgba( 234, 244, 255, 0.45 ) !important;
		border-right: 2px solid rgba( 234, 244, 255, 0.45 ) !important;
		border-radius: 1px;
		background: none !important;
		transform: rotate( 45deg ) !important;
		opacity: 1 !important;
		transition: transform 0.2s ease, border-color 0.2s ease;
	}

	#masthead #navbarCollapse .nav-menu > li > a:active {
		transform: scale( 0.98 );
		background: rgba( 255, 176, 32, 0.12 ) !important;
	}

	#masthead #navbarCollapse .nav-menu > li.current-menu-item > a,
	#masthead #navbarCollapse .nav-menu > li.current_page_item > a {
		color: #1a1200 !important;
		-webkit-text-fill-color: #1a1200 !important;
		background: linear-gradient( 90deg, #ffd66b, var( --m-gold ) ) !important;
		box-shadow: 0 10px 22px -12px rgba( 255, 140, 60, 0.9 );
	}

	#masthead #navbarCollapse .nav-menu > li.current-menu-item > a::after,
	#masthead #navbarCollapse .nav-menu > li.current_page_item > a::after {
		border-color: #1a1200 !important;
	}

	/* Account row keeps its avatar pill look, just bigger */
	#masthead #navbarCollapse .nav-menu > li > a.cricket-nav-account-link {
		background: rgba( 255, 176, 32, 0.08 ) !important;
		box-shadow: inset 0 0 0 1px rgba( 255, 176, 32, 0.3 );
	}

	/* Rows slide in one after another when the menu opens */
	#masthead #navbarCollapse.show .nav-menu > li {
		animation: m-menu-in 0.45s var( --m-ease ) both;
	}

	#masthead #navbarCollapse.show .nav-menu > li:nth-child( 1 ) { animation-delay: 0.03s; }
	#masthead #navbarCollapse.show .nav-menu > li:nth-child( 2 ) { animation-delay: 0.08s; }
	#masthead #navbarCollapse.show .nav-menu > li:nth-child( 3 ) { animation-delay: 0.13s; }
	#masthead #navbarCollapse.show .nav-menu > li:nth-child( 4 ) { animation-delay: 0.18s; }
	#masthead #navbarCollapse.show .nav-menu > li:nth-child( 5 ) { animation-delay: 0.23s; }
	#masthead #navbarCollapse.show .nav-menu > li:nth-child( 6 ) { animation-delay: 0.28s; }
	#masthead #navbarCollapse.show .nav-menu > li:nth-child( n + 7 ) { animation-delay: 0.33s; }

	@keyframes m-menu-in {
		from { opacity: 0; transform: translateX( -18px ); }
		to { opacity: 1; transform: none; }
	}

	/* Sub-menus inside the drawer */
	#masthead #navbarCollapse .main-navigation li ul {
		position: static !important;
		margin: 6px 0 0 14px;
		padding: 0;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
	}

	#masthead #navbarCollapse .main-navigation li ul a {
		color: var( --m-muted ) !important;
		-webkit-text-fill-color: var( --m-muted ) !important;
	}

	/* Search panel under the app-bar */
	#masthead.cricket-site-header .search-block {
		margin: 4px 10px 12px;
		width: auto;
		border-radius: 20px;
		box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.1 ), 0 24px 44px -20px rgba( 0, 0, 0, 0.9 );
	}

	#masthead.cricket-site-header .search-block .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* =================================================================
	 * 4. Auto-sliding rows (the snap would fight the glide)
	 * ============================================================== */

	[data-autoslide].is-autosliding {
		scroll-snap-type: none !important;
		scroll-behavior: auto !important;
	}

	[data-autoslide].is-autosliding > * {
		scroll-snap-align: none !important;
	}
}

/* =====================================================================
 * 5. Site-wide small-screen polish (phones)
 * ================================================================== */

@media ( max-width: 767px ) {

	/* Taps feel native: no grey flash, quicker press feedback */
	a,
	button,
	[role="button"] {
		-webkit-tap-highlight-color: rgba( 255, 176, 32, 0.12 );
	}

	/* iOS zooms into any field under 16px; keep forms steady */
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px !important;
	}

	/* Media never wider than the screen */
	.entry-content img,
	.entry-content video,
	.entry-content iframe:not( [id^="dsq"] ),
	.entry-content embed,
	.entry-content object {
		max-width: 100% !important;
	}

	.entry-content img {
		height: auto !important;
	}

	/* Wide tables in old posts scroll sideways inside the article instead
	   of stretching the page */
	.entry-content .cricket-table-scroll {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Long words/URLs in old posts wrap instead of overflowing */
	.entry-content p,
	.entry-content li,
	.entry-content td {
		overflow-wrap: anywhere;
	}

	/* Room above the floating chat / back-to-top buttons at the very end */
	.site-footer,
	#colophon {
		padding-bottom: calc( 72px + env( safe-area-inset-bottom, 0px ) ) !important;
	}

	/* Floating buttons clear the iPhone home bar */
	.back-to-top {
		right: 14px !important;
		bottom: calc( 22px + env( safe-area-inset-bottom, 0px ) ) !important;
	}

	.back-to-top a {
		width: 46px !important;
		height: 46px !important;
	}

	.cricket-chat-fab {
		bottom: calc( 22px + env( safe-area-inset-bottom, 0px ) ) !important;
	}

	/* Section headings breathe less on small screens */
	.cricket-home-head__title,
	.cricket-feed-section__title {
		text-wrap: balance;
	}
}

@media ( max-width: 340px ) {
	#masthead .cricket-infobar-row .date {
		display: none;
	}

	#masthead .navbar-brand-wrap .site-description {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	#masthead .navigation-icons-wrap .navbar-toggler::after,
	#masthead .navigation-icons-wrap .search-toggle::after,
	.cricket-burger i,
	#masthead #navbarCollapse.show .nav-menu > li {
		animation: none !important;
	}
}

/* Narrow phones: the calendar tile alone carries the date, so the
   "Total Views" chip keeps its full width. */
@media ( max-width: 400px ) {
	#masthead .cricket-date .cricket-date-short {
		display: none;
	}

	#masthead .cricket-infobar-row .date li.cricket-date {
		padding: 3px;
		border-radius: 10px;
	}
}