/*
 * Home Page Spruce-Up Stylesheet (body.btl-home only)
 * 100% reversible: loaded only when $isHomeLayout is true in templates/btl/index.php.
 * Does NOT alter module widths or slideshow/menu JS positioning.
 */

/* 0. Hide Phoca Cart badge row on the home page so there is zero empty gap under the navbar */
body.btl-home #nav > .inner[data-position="position-1"] {
	gap: 0 !important;
}

body.btl-home #nav > .inner[data-position="position-1"] > .tck-module:has(.ph-cart-module-box),
body.btl-home #nav .ph-cart-module-box {
	display: none !important;
}

/* 1. Top 3 Columns: Venues, Welcome, Weather (#modules1) - Compact vertically */
body.btl-home #modules1 {
	margin-top: 0.35rem !important;
	margin-bottom: 0.35rem !important;
}

body.btl-home #modules1 > .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

body.btl-home #modules1 > .inner > .flexiblemodule {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 881px) {
	body.btl-home #modules1 .n3 > #modules1mod1 {
		width: 34% !important;
		flex: 0 0 34% !important;
	}
	body.btl-home #modules1 .n3 > #modules1mod2 {
		width: 35% !important;
		flex: 0 0 35% !important;
	}
	body.btl-home #modules1 .n3 > #modules1mod3 {
		width: 31% !important;
		flex: 0 0 31% !important;
	}
}

@media screen and (max-width: 880px) and (min-width: 769px) {
	body.btl-home #modules1 .n3 > #modules1mod1 {
		width: 33% !important;
		flex: 0 0 33% !important;
	}
	body.btl-home #modules1 .n3 > #modules1mod2 {
		width: 35% !important;
		flex: 0 0 35% !important;
	}
	body.btl-home #modules1 .n3 > #modules1mod3 {
		width: 32% !important;
		flex: 0 0 32% !important;
	}
}

@media screen and (max-width: 1000px) and (min-width: 769px) {
	body.btl-home #modules1mod1 > .inner,
	body.btl-home #modules1mod2 > .inner,
	body.btl-home #modules1mod3 > .inner {
		padding: 0.55rem 0.6rem 0.55rem !important;
	}
}

body.btl-home #modules1mod1 > .inner,
body.btl-home #modules1mod2 > .inner,
body.btl-home #modules1mod3 > .inner {
	flex: 1 1 auto;
	width: auto !important;
	background: linear-gradient(180deg, #faf8ff 0%, #ffffff 2.25rem);
	border: 1px solid rgba(113, 0, 226, 0.18);
	border-radius: 0.55rem;
	box-shadow: 0 2px 6px rgba(40, 20, 70, 0.05);
	padding: 0.65rem 0.85rem 0.65rem !important;
	margin: 0 4px !important;
	box-sizing: border-box;
	position: relative;
}

body.btl-home #modules1mod1 > .inner::before,
body.btl-home #modules1mod2 > .inner::before,
body.btl-home #modules1mod3 > .inner::before {
	content: "";
	display: block;
	height: 3px;
	margin: -0.65rem -0.85rem 0.5rem;
	border-radius: 0.55rem 0.55rem 0 0;
	background: linear-gradient(90deg, #7100e2, #8bb805);
}

body.btl-home #modules1 .tck-module-title {
	margin: 0 0 0.45rem !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #7100e2 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

/* Venues slideshow: rounded photo frame + compact single-row pagination dots */
body.btl-home #camera_wrap_115 {
	margin-bottom: 0 !important;
}

body.btl-home #camera_wrap_115 .camera_target,
body.btl-home #camera_wrap_115 .camera_fakehover {
	border-radius: 0.4rem;
	overflow: hidden;
}

body.btl-home #camera_wrap_115 .camera_pag .camera_pag_ul {
	text-align: center !important;
	padding-top: 0.25rem !important;
	margin: 0 !important;
	line-height: 1 !important;
}

body.btl-home #camera_wrap_115 .camera_pag .camera_pag_ul li {
	margin: 2px 2px !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
}

body.btl-home #camera_wrap_115 .camera_pag .camera_pag_ul li > span {
	top: 1px !important;
	left: 1px !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
}

body.btl-home #camera_wrap_115 .camera_pag .camera_pag_ul li.cameracurrent > span {
	background: #7100e2 !important;
}

/* Welcome text: compact height so it matches the slideshow without stretching the row */
body.btl-home #mod-custom89 p {
	text-align: left !important;
	margin: 0 0 0.28rem !important;
	padding: 0 !important;
	line-height: 1.34 !important;
}

body.btl-home #mod-custom89 p:empty,
body.btl-home #mod-custom89 p:last-child {
	display: none !important;
}

body.btl-home #mod-custom89 span,
body.btl-home #mod-custom89 strong {
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
	font-size: clamp(0.74rem, 0.68vw + 0.36rem, 0.90rem) !important;
	font-weight: 500 !important;
	color: #262230 !important;
}

body.btl-home #mod-custom89 p:nth-of-type(2) {
	display: block !important;
	margin-top: 0.28rem !important;
	margin-bottom: 0 !important;
	padding: 0.25rem 0.55rem !important;
	background: rgba(139, 184, 5, 0.1);
	border-left: 3px solid #8bb805;
	border-radius: 0 0.35rem 0.35rem 0;
}

body.btl-home #mod-custom89 p:nth-of-type(2) span,
body.btl-home #mod-custom89 p:nth-of-type(2) strong {
	font-size: clamp(0.70rem, 0.52vw + 0.36rem, 0.83rem) !important;
	color: #3a2048 !important;
	font-weight: 600 !important;
}

/* Weather column: put Weather heading at top and style Met Office link as a compact pill */
body.btl-home #modules1mod3 > .inner {
	display: flex;
	flex-direction: column;
}

body.btl-home #modules1mod3 > .inner > .tck-module:nth-child(2) {
	order: 1;
	margin-bottom: 0 !important;
}

body.btl-home #modules1mod3 #mod-custom143 {
	margin-bottom: 0 !important;
}

body.btl-home #modules1mod3 .widget-left {
	height: auto !important;
	min-height: auto !important;
	overflow: hidden !important;
	box-shadow: 0 2px 8px rgba(40, 20, 70, 0.12) !important;
	border: 1px solid rgba(113, 0, 226, 0.12);
	margin: 0 auto !important;
}

body.btl-home #modules1mod3 .widget-left--compact {
	max-width: 100% !important;
}

body.btl-home #modules1mod3 > .inner > .tck-module:nth-child(1) {
	order: 2;
	margin-top: 1.15rem !important;
	margin-bottom: 0.25rem !important;
	text-align: center !important;
}

body.btl-home #mod-custom139 p:first-child,
body.btl-home #mod-custom139 p:nth-child(2) {
	display: none !important;
}

body.btl-home #mod-custom139 p:last-child {
	margin: 0 !important;
	padding: 0 !important;
}

body.btl-home #mod-custom139 a {
	display: inline-block;
	padding: 0.28rem 0.75rem;
	border: 1px solid rgba(113, 0, 226, 0.25);
	border-radius: 999px;
	background: #faf8ff;
	color: #7100e2 !important;
	font-family: "Segoe UI", sans-serif !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.btl-home #mod-custom139 a:hover {
	border-color: #8bb805;
	background: rgba(139, 184, 5, 0.14);
	color: #3a2048 !important;
}

/* 2. Scrolling Zenath Banner Strip (#breakingnewsline) - Slim & Vertically Centered */
body.btl-home #breakingnewsline {
	margin: 0.35rem 4px 0.4rem !important;
}

body.btl-home #breakingnewsline > .inner {
	background: linear-gradient(90deg, rgba(113, 0, 226, 0.04) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(139, 184, 5, 0.06) 100%);
	border: 1px solid rgba(113, 0, 226, 0.15);
	border-radius: 0.5rem;
	padding: 0.15rem 0.4rem !important;
	box-shadow: 0 1px 4px rgba(40, 20, 70, 0.04);
}

body.btl-home #breakingnewsline #track {
	padding-bottom: 0 !important;
}

body.btl-home #breakingnewsline #track > a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem;
	vertical-align: middle !important;
}

/* Make BTL logo 30% smaller (from 100x108 to 70x76) */
body.btl-home #breakingnewsline #track > a > img,
body.btl-home #breakingnewsline #track img[src*="Logo-01"] {
	width: 70px !important;
	height: 76px !important;
	object-fit: contain;
	vertical-align: middle !important;
	flex-shrink: 0;
}

/* Vertically center text and inline Zenath logo to the middle of the BTL logo */
body.btl-home #breakingnewsline #track > a > span,
body.btl-home #breakingnewsline #track > a > span > strong {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem;
	line-height: 1.1 !important;
	vertical-align: middle !important;
}

body.btl-home #breakingnewsline #track > a > span > strong > img,
body.btl-home #breakingnewsline #track img[src*="zenath-log"] {
	width: 46px !important;
	height: 34px !important;
	object-fit: contain;
	vertical-align: middle !important;
	flex-shrink: 0;
}

/* 3. Five League Columns (#modulestop) - Compact cards & full-width fitted buttons */
body.btl-home #modulestop {
	margin-bottom: 0.5rem !important;
}

body.btl-home #modulestop > .inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

body.btl-home #modulestop > .inner > .flexiblemodule {
	display: flex;
	flex-direction: column;
}

body.btl-home #modulestop .flexiblemodule > .inner {
	flex: 1 1 auto;
	width: auto !important;
	background: linear-gradient(180deg, #faf8ff 0%, #ffffff 2.2rem);
	border: 1px solid rgba(113, 0, 226, 0.18);
	border-radius: 0.55rem;
	box-shadow: 0 2px 6px rgba(40, 20, 70, 0.05);
	padding: 0.6rem 0.45rem 0.55rem !important;
	margin: 0 4px !important;
	box-sizing: border-box;
	position: relative;
}

body.btl-home #modulestop .flexiblemodule > .inner::before {
	content: "";
	display: block;
	height: 3px;
	margin: -0.6rem -0.45rem 0.45rem;
	border-radius: 0.55rem 0.55rem 0 0;
	background: linear-gradient(90deg, #7100e2, #8bb805);
}

body.btl-home #modulestop .tck-module-title {
	margin: 0 0 0.45rem !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #7100e2 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

/* Override gregos fixed 55px/45px heights and 96%/20px widths so buttons fit 100% cleanly */
body.btl-home #modulestop div.maximenuckv,
body.btl-home #modulestop nav.maximenuck {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1 {
	display: block !important;
	background: none !important;
	border: 0 !important;
	margin: 0 0 0.32rem 0 !important;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1:last-child {
	margin-bottom: 0 !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1 > a.maximenuck,
body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1 > span.separator {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: auto !important;
	min-height: 2rem !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border: 1px solid rgba(113, 0, 226, 0.22) !important;
	border-radius: 0.4rem !important;
	box-shadow: 0 1px 2px rgba(40, 20, 70, 0.04) !important;
	padding: 0.35rem 0.25rem !important;
	margin: 0 !important;
	text-align: center !important;
	text-shadow: none !important;
	text-decoration: none !important;
	white-space: normal !important;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1:hover > a.maximenuck,
body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1:hover > span.separator {
	background: linear-gradient(180deg, #faf8ff 0%, rgba(139, 184, 5, 0.14) 100%) !important;
	border-color: #8bb805 !important;
	box-shadow: 0 2px 6px rgba(40, 20, 70, 0.1) !important;
	transform: translateY(-1px);
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1 .titreck,
body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1 .titreck-text,
body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1 .titreck-title {
	float: none !important;
	display: inline !important;
	color: #3a2048 !important;
	font-family: "Segoe UI", system-ui, sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
	line-height: 1.2 !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.maximenuck.level1:hover .titreck-title {
	color: #7100e2 !important;
}

/* Keep parent submenu indicator arrow inline on the right instead of wrapping onto a 2nd line */
body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.level1.parent > a:after,
body.btl-home #modulestop div.maximenuckv ul.maximenuck > li.level1.parent > span.separator:after {
	float: none !important;
	margin: 0 0 0 4px !important;
	border-width: 4px 0 4px 5px !important;
	border-color: transparent transparent transparent #7100e2 !important;
	flex-shrink: 0;
}

/* Flyout submenu (e.g. New League -> Ladies / Men / Mixed) */
body.btl-home #modulestop div.maximenuckv div.floatck,
body.btl-home #modulestop div.maximenuckv div.maxidrop-main {
	background: #ffffff !important;
	border: 1px solid rgba(113, 0, 226, 0.25) !important;
	border-radius: 0.45rem !important;
	box-shadow: 0 6px 18px rgba(40, 20, 70, 0.14) !important;
	padding: 0.3rem !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck2 li.maximenuck {
	background: none !important;
	border: 0 !important;
	margin: 0 0 0.2rem 0 !important;
	padding: 0 !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck2 li.maximenuck:last-child {
	margin-bottom: 0 !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck2 li.maximenuck > a.maximenuck {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.4rem 0.6rem !important;
	margin: 0 !important;
	border-radius: 0.35rem !important;
	background: #faf8ff !important;
	color: #3a2048 !important;
	text-shadow: none !important;
	text-decoration: none !important;
}

body.btl-home #modulestop div.maximenuckv ul.maximenuck2 li.maximenuck:hover > a.maximenuck {
	background: rgba(139, 184, 5, 0.15) !important;
	color: #7100e2 !important;
}

/* 4. Hide redundant empty bottom "Banbury Tennis Leagues" component heading & extra margin on home page */
body.btl-home #maincontent,
body.btl-home #maincontent > .inner {
	margin-top: 0 !important;
	padding: 0 !important;
}

body.btl-home.com_content.view-featured #maincontent .blog-featured,
body.btl-home.com_content.view-featured #center > .inner {
	display: none !important;
}

/* Mobile adjustments so cards stack cleanly with breathing room */
@media screen and (max-width: 768px) {
	body.btl-home #modules1 > .inner,
	body.btl-home #modulestop > .inner {
		display: block;
	}

	body.btl-home #modules1mod1 > .inner,
	body.btl-home #modules1mod2 > .inner,
	body.btl-home #modules1mod3 > .inner,
	body.btl-home #modulestop .flexiblemodule > .inner {
		margin: 0 0 0.65rem 0 !important;
	}
}