/* ==========================================================================
   MLB Theme — front-end styles
   Lato body / Roboto headings, palette from melbetskenya.com.
   ========================================================================== */

:root {
	--mlb-primary: #172147;
	--mlb-accent:  #EDBA2C;
	--mlb-accent-2: #FED42D;
	--mlb-accent-3: #B69B24;
	--mlb-text:    #7A7A7A;
	--mlb-heading: #333333;
	--mlb-dark:    #020101;
	--mlb-white:   #FFFFFF;
}

/* Base ---------------------------------------------------------------------*/
body {
	font-family: "Lato", system-ui, -apple-system, sans-serif;
	color: var(--mlb-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

/* Kill the default block-gap that WP adds between site-block children
   (header, main, footer). The absolute header overlays the hero,
   so we don't want any gap creating a white strip on top. ---------------*/
.wp-site-blocks { padding-top: 0 !important; }
.wp-site-blocks > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-site-blocks > main { margin: 0 !important; }

a { color: var(--mlb-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--mlb-primary); }

h1, h2, h3, h4, h5, h6 {
	font-family: "Roboto", system-ui, sans-serif;
	color: var(--mlb-heading);
	font-weight: 700;
	line-height: 1.25;
}

img { max-width: 100%; height: auto; display: block; }

/* Header — sits over (and inside) the hero ------------------------------*/
.wp-site-blocks > header.site-header,
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--mlb-dark);
	border-bottom: none;
	margin: 0 !important;
}
/* When the page opens with a dark hero, header is transparent and tucked
   into the hero — no separate strip. */
body.mlb-has-hero .site-header {
	background: transparent;
}
/* Modern fallback if WP/PHP body class isn't applied (e.g. live preview) */
body:has(.mlb-hero) .site-header,
body:has(.mlb-page-hero) .site-header {
	background: transparent;
}
.site-header.is-scrolled {
	background: rgba(2, 1, 1, .85) !important;
	backdrop-filter: saturate(140%) blur(8px);
	transition: background .25s;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

/* Logo ------------------------------------------------------------------*/
.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.site-header__logo img {
	display: block;
	max-height: 56px;
	width: auto;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Nav ---------------------------------------------------------------*/
.site-header__nav {
	margin-left: auto !important;
	flex: 0 1 auto;
}
.site-header__nav .wp-block-navigation__container {
	gap: 40px !important;
	justify-content: flex-end;
	flex-wrap: nowrap;
}
.site-header__nav .wp-block-navigation-item__content {
	color: #ffffff !important;
	transition: color .2s;
	text-shadow: 0 1px 4px rgba(0,0,0,.5);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 15px;
	white-space: nowrap;
}
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--mlb-accent) !important;
}

/* Burger / close buttons (shared) -------------------------------------*/
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close {
	color: #ffffff !important;
	background: transparent !important;
	border: 0;
	padding: 8px;
	cursor: pointer;
}
.site-header__nav .wp-block-navigation__responsive-container-open svg,
.site-header__nav .wp-block-navigation__responsive-container-close svg {
	fill: #ffffff !important;
	width: 32px;
	height: 32px;
	filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

/* Default state: burger hidden on desktop, close button hidden always
   except when overlay is open. ----------------------------------------*/
.site-header__nav .wp-block-navigation__responsive-container-open { display: none; }
.site-header__nav .wp-block-navigation__responsive-container-close { display: none; }

/* Show burger and hide inline list at <= 900px -----------------------*/
@media (max-width: 900px) {
	.site-header__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.site-header__nav > .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open) {
		display: none !important;
	}
}

/* Open overlay menu --------------------------------------------------*/
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(2, 1, 1, .97) !important;
	backdrop-filter: blur(12px);
	z-index: 100000 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	width: 100%;
	padding: 80px 24px 40px;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex !important;
	position: absolute !important;
	top: 24px;
	right: 24px;
	z-index: 10;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	gap: 32px !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0;
	margin: 0;
	list-style: none;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	text-align: center;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: inline-block;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	color: #ffffff !important;
	text-shadow: none !important;
	padding: 8px 16px;
	border-radius: 4px;
	transition: color .2s, background-color .2s;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--mlb-accent) !important;
	background: transparent !important;
	outline: none !important;
}

/* Lock body scroll when menu is open */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden;
}

/* Header overlay compensation for non-hero pages ----------------------*/
main { padding-top: 0; }
main:not(.front-page):not(.page-app):not(.page-registration) { padding-top: 110px; }

/* Hero ---------------------------------------------------------------------*/
.mlb-hero {
	text-align: center;
}

.mlb-hero h1.mlb-hero__title,
.mlb-page-hero h1.mlb-hero__title {
	color: #ffffff !important;
	font-family: "Roboto", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(32px, 4.4vw, 56px) !important;
	line-height: 1.15 !important;
	letter-spacing: 0;
	text-transform: none !important;
	margin: 0 auto !important;
	max-width: 1100px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.mlb-page-hero h1.mlb-hero__title {
	font-size: clamp(28px, 3.6vw, 44px) !important;
}

.mlb-hero p.mlb-hero__subtitle,
.mlb-page-hero p.mlb-hero__subtitle {
	color: #ffffff !important;
	font-size: 22px;
	line-height: 1.55;
	max-width: 760px;
	margin: 24px auto 40px !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.mlb-hero__subtitle strong {
	color: var(--mlb-accent-2);
	font-weight: 700;
}

.mlb-hero__buttons {
	gap: 24px !important;
	margin-top: 8px;
}
.mlb-hero__buttons .wp-block-button { margin: 0; }

/* Buttons ------------------------------------------------------------------*/
.mlb-btn .wp-block-button__link {
	font-family: "Roboto", system-ui, sans-serif !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-width: 220px;
	padding: 14px 56px !important;
	border-radius: 0 !important;
	transition: background-color .25s, border-color .25s, color .25s, transform .15s;
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

.mlb-btn--primary .wp-block-button__link {
	background-color: var(--mlb-accent) !important;
	border: 0 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(237, 186, 44, .35);
}
.mlb-btn--primary .wp-block-button__link:hover {
	background-color: rgba(237, 186, 44, .85) !important;
	transform: translateY(-1px);
}

.mlb-btn--ghost .wp-block-button__link {
	background: transparent !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	padding: 12px 56px !important;
}
.mlb-btn--ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .15) !important;
	transform: translateY(-1px);
}

/* Section helpers ---------------------------------------------------------*/
.mlb-section h2.wp-block-heading,
.mlb-section h3.wp-block-heading { color: var(--mlb-heading); }
.mlb-section h2.wp-block-heading { text-transform: uppercase; letter-spacing: .5px; }

.mlb-divider {
	border: none;
	height: 1px;
	max-width: 80px;
	margin-left: auto;
	margin-right: auto;
}

.mlb-section--intro .mlb-intro__logo img { max-width: 380px; margin: 0 auto; }

/* Inner page content ------------------------------------------------------*/
.mlb-page-content h2 {
	margin-top: 32px;
	color: var(--mlb-heading);
}
.mlb-page-content p { margin-bottom: 18px; }
.mlb-page-content .wp-block-image { margin: 28px auto; }

/* Features (4 icons) ------------------------------------------------------*/
.mlb-features { gap: 32px; }
.mlb-feature { text-align: center; }
.mlb-feature__icon img { margin: 0 auto; width: 80px; height: auto; }
.mlb-feature__title { color: var(--mlb-heading); }

/* Live betting strip ------------------------------------------------------*/
.mlb-livestrip { background-size: cover; background-position: center center; }
.mlb-livestrip .wp-block-cover__background { background-color: rgba(0,0,0,0); }

/* Casino / Live-Virtuals figures -----------------------------------------*/
.mlb-section--live-virtuals .wp-block-image img,
.mlb-section--casino .wp-block-image img,
.mlb-section--offer .wp-block-image img {
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/* Payment methods (split block) ------------------------------------------*/
.mlb-payment__columns { margin-bottom: 0; gap: 0; }
.mlb-payment__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 540px;
	overflow: hidden;
	padding: 40px;
}
.mlb-payment__visual .mlb-payment__image img { max-width: 100%; height: auto; }
.mlb-payment__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mlb-payment__copy h2,
.mlb-payment__copy p { color: var(--mlb-white); }

/* Footer ------------------------------------------------------------------*/
.site-footer { letter-spacing: .5px; }

/* Responsive --------------------------------------------------------------*/
@media (max-width: 900px) {
	.mlb-hero { min-height: 460px; }
	.mlb-hero__title { font-size: 28px !important; }
	.mlb-payment__visual { min-height: 320px; }
	.mlb-payment__copy { padding: 48px 28px !important; }
}

@media (max-width: 900px) {
	.site-header {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.site-header__logo img {
		max-height: 44px;
	}
}

@media (max-width: 700px) {
	.site-header__nav .wp-block-navigation__container { gap: 20px; }
	.mlb-hero__buttons { flex-direction: column; }
	.mlb-btn .wp-block-button__link { min-width: 240px; }
	.mlb-features { gap: 40px; }
	.mlb-section { padding-left: 20px !important; padding-right: 20px !important; }
}