/* ============================================================================
   Kadence chrome skin — restyles the parent-rendered header/footer to the
   Vantix design 1:1 (ported from the retired header.php/footer.php inline
   styles, now in legacy-templates/chrome-*.php). Loads AFTER Kadence's CSS
   (see vantix_chrome_assets, priority 20) so it wins the cascade.
   ========================================================================== */

/* --- Palette: map Vantix onto Kadence's global palette so the parent's own
       dynamic CSS (body background, defaults) paints dark automatically.
       :root:root outguns Kadence's inline :root palette. ------------------- */
:root:root {
	--global-palette1: #e10600; /* accent (brand red) */
	--global-palette2: #c8102e; /* accent alt (deep red) */
	--global-palette3: #ffffff; /* strongest text */
	--global-palette4: #c0c4c8; /* silver */
	--global-palette5: #9aa0a6; /* body grey */
	--global-palette6: #7d8389; /* dim grey */
	--global-palette7: #121417; /* surface light end */
	--global-palette8: #0a0b0c; /* surface dark end */
	--global-palette9: #000000; /* stage */
	--global-heading-font-family: var(--font-saira), sans-serif;
	--global-body-font-family: var(--font-barlow), sans-serif;
}

html,
body {
	background: #000;
}

/* ============================ HEADER ==================================== */

/* Sticky bar: gradient, blur, red hairline + glow (was the old <nav>). */
#masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	font-family: var(--font-saira), sans-serif;
}
#masthead .site-header-wrap,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container {
	background: transparent !important;
}
#masthead .site-header-inner-wrap {
	background: rgba(0, 0, 0, 0.92) !important;
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #1a1d20;
	box-shadow: none;
}
/* Full-bleed row with the old 14px 5vw padding. */
#masthead .site-header-row-container-inner > .site-container {
	max-width: 100%;
	padding: 14px 5vw;
}

/* Brand: logo + stacked metal VANTIX / red ESPORTS. */
#masthead .site-branding a.brand {
	display: flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
}
#masthead .site-branding .custom-logo,
#masthead .site-branding img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}
#masthead .site-title-wrap {
	display: flex;
	flex-direction: column;
	line-height: 0.92;
}
#masthead .site-title {
	margin: 0;
	font-family: var(--font-saira), sans-serif;
	font-weight: 900;
	font-size: 23px;
	letter-spacing: 3px;
	color: #f2f4f6;
}
#masthead .site-description {
	margin: 2px 0 0;
	font-family: var(--font-saira), sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 7px;
	color: #8a9097;
}

/* Nav links (was .vx-navlink). --vx-nav-inset drives the underline insets so
   the narrow-width padding steps below only have to set it once. min-height
   keeps every link a >=40px tap target at every width. */
#masthead .header-navigation .header-menu-container > ul > li > a {
	--vx-nav-inset: 13px;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 9px 11px;
	color: #c0c4c8;
	font-family: var(--font-saira), sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	background: transparent !important;
	transition: color 0.15s;
}
#masthead .header-navigation .header-menu-container > ul > li > a:hover {
	color: #fff;
}
/* Active page: red gradient underline glow. */
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a::after,
#masthead .header-navigation .header-menu-container > ul > li.current_page_item > a::after {
	content: "";
	position: absolute;
	left: var(--vx-nav-inset);
	right: var(--vx-nav-inset);
	bottom: 2px;
	height: 2px;
	background: #e10600;
}

/* Tryout button: red skewed slab, upright label. Kadence renders ONE <a>, so
   the skewed skin is a ::before pseudo (the old markup used two nested spans). */
#masthead .header-button {
	position: relative;
	display: inline-block;
	margin-left: 6px;
	padding: 10px 18px;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	color: #fff !important;
	font-family: var(--font-saira), sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
#masthead .header-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: skewX(-12deg);
	background: #e10600;
	border: 1px solid #ff4a44;
	transition: background 0.12s;
}
#masthead .header-button:hover::before {
	background: #ff1a1a;
}

/* ================== NAV: ALWAYS EXPANDED, EVERY WIDTH ===================
   There is no hamburger and no drawer at any viewport (Quin 2026-08-09). The
   burger/drawer this file used to skin was Kadence's, not ours — the parent
   emits a whole second header (#mobile-header) and swaps to it below the
   `header_mobile_switch` breakpoint via its own dynamic CSS:

     #mobile-header{display:block} #main-header{display:none}
     @media (min-width:720px){ #mobile-header{display:none} #main-header{display:block} }

   That breakpoint is a theme_mod, i.e. a DB value we cannot rely on reaching
   an already-installed site — so the switch is killed here in CSS, which
   ships with the theme and applies whatever the stored breakpoint says.
   !important is required: Kadence's rule is `.wp-site-blocks #mobile-header`. */
#mobile-header {
	display: none !important;
}
#main-header {
	display: block !important;
}

/* The link row wraps instead of collapsing. Kadence's menu is a flex row; it
   was pinned nowrap while the drawer existed to stop a 0-width nav stacking
   one item per line. With no drawer to fall back to, wrapping IS the mobile
   strategy. */
#masthead .header-navigation .header-menu-container > ul,
#masthead .main-navigation .menu {
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 2px;
}

/* Step 1 (<=900px): scale the links down before anything has to wrap. */
@media (max-width: 900px) {
	#masthead .site-header-row-container-inner > .site-container {
		padding: 12px 4vw;
	}
	#masthead .header-navigation .header-menu-container > ul > li > a {
		--vx-nav-inset: 8px;
		padding: 8px 8px;
		font-size: 12px;
		letter-spacing: 1.1px;
	}
	#masthead .header-button {
		margin-left: 4px;
		padding: 9px 14px;
		font-size: 12px;
		letter-spacing: 1.4px;
	}
}

/* Step 2 (<=720px): the row that used to become a burger. Branding keeps the
   first line to itself; the links + CTA take the full width beneath it and
   wrap among themselves. Kadence's header row is a grid — flex is what makes
   a full-width second line possible. */
@media (max-width: 720px) {
	#masthead .site-header-row {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		row-gap: 6px;
	}
	#masthead .site-header-main-section-left,
	#masthead .site-header-main-section-right {
		min-width: 0;
	}
	#masthead .site-header-main-section-right {
		flex: 1 1 100%;
		/* The CTA sits on the FIRST link row, not floating between the two the
		   links wrap into — centred it reads as unattached. */
		align-items: flex-start;
	}
	#masthead .header-navigation .header-menu-container > ul,
	#masthead .main-navigation .menu {
		justify-content: flex-start;
	}
	#masthead .site-header-item-main-navigation {
		min-width: 0;
	}
	#masthead .header-button {
		margin-left: 0;
	}
	/* The tagline is the first thing to go: 7px letter-spacing on a 10px face
	   is the widest cheap thing in the branding stack, and "ESPORTS" under a
	   50px mark is decoration, not navigation. */
	#masthead .site-description {
		letter-spacing: 4px;
	}
}

/* Step 3 (<=460px): the 320-414 band, plus the 421-460 strip where step 2's
   12px links wrapped to three rows and made the bar its tallest anywhere.
   Everything still visible, just tight. */
@media (max-width: 460px) {
	#masthead .site-header-row-container-inner > .site-container {
		padding: 10px 3vw;
	}
	#masthead .header-navigation .header-menu-container > ul > li > a {
		--vx-nav-inset: 5px;
		padding: 8px 5px;
		font-size: 11px;
		letter-spacing: 0.4px;
	}
	#masthead .header-button {
		padding: 9px 11px;
		font-size: 11px;
		letter-spacing: 1px;
	}
	#masthead .site-branding .custom-logo,
	#masthead .site-branding img {
		width: 40px;
		height: 40px;
	}
	#masthead .site-title {
		font-size: 19px;
		letter-spacing: 2px;
	}
	#masthead .site-description {
		font-size: 9px;
		letter-spacing: 3px;
	}
}

/* ============================ FOOTER ==================================== */

#colophon {
	position: relative;
	background: #000 !important;
	border-top: 1px solid #1a1d20;
	font-family: var(--font-saira), sans-serif;
	overflow: hidden;
}
/* The footer's only flourish: a 3px crimson tick at the left edge of the top
   rule. One mark, at one place — where the old glow bled across the whole band. */
#colophon::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 88px;
	height: 2px;
	background: #e10600;
	pointer-events: none;
}
#colophon .site-footer-wrap {
	position: relative;
}
#colophon .site-top-footer-wrap,
#colophon .site-bottom-footer-wrap {
	background: transparent !important;
}
/* Columns: contained 1180px, brand column wide, link columns natural. */
#colophon .site-top-footer-wrap .site-container {
	max-width: 1180px;
	padding: 48px 5vw 30px;
}
#colophon .site-top-footer-inner-wrap {
	grid-template-columns: minmax(0, 340px) auto auto auto;
	justify-content: space-between;
	gap: 40px;
}
/* Copyright bar. */
#colophon .site-bottom-footer-wrap .site-container {
	max-width: 100%;
	border-top: 1px solid #16181a;
	padding: 18px 5vw;
}
#colophon .site-info {
	font-family: var(--font-barlow), sans-serif;
	color: #8a9097;
	font-size: 13px;
	letter-spacing: 1px;
}

/* Mobile footer. The 4-column track above is desktop-only: below ~900px it
   squeezed the brand column to 0px wide, wrapped the blurb one word per line
   and pushed the Connect column past #colophon's overflow:hidden, so the
   socials were literally cut off the screen. Stack instead. */
@media (max-width: 900px) {
	#colophon .site-top-footer-inner-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 34px 26px;
	}
	/* Brand blurb spans the full width; the link columns pair up beneath it. */
	#colophon .site-footer-top-section-1 { grid-column: 1 / -1; }
	#colophon .site-footer-top-section-1 > * { max-width: none !important; }
}
@media (max-width: 560px) {
	#colophon .site-top-footer-inner-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
	#colophon .site-top-footer-wrap .site-container { padding: 42px 6vw 26px; }
	#colophon .site-bottom-footer-wrap .site-container { padding: 16px 6vw; }
	#colophon .site-info { font-size: 12px; text-align: center; }
}

/* ======================= FINE-TUNE: HEADER MOTION ======================= */

/* Condense the bar once the page scrolls — same design, less chrome in the
   way. .vx-scrolled is toggled in theme.js. */
#masthead .site-header-inner-wrap {
	transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#masthead .site-header-row-container-inner > .site-container {
	transition: padding .3s cubic-bezier(.22, 1, .36, 1);
}
#masthead .site-branding .custom-logo,
#masthead .site-branding img {
	transition: width .3s cubic-bezier(.22, 1, .36, 1), height .3s cubic-bezier(.22, 1, .36, 1);
}
#masthead.vx-scrolled .site-header-row-container-inner > .site-container {
	padding-top: 8px;
	padding-bottom: 8px;
}
#masthead.vx-scrolled .site-branding .custom-logo,
#masthead.vx-scrolled .site-branding img {
	width: 40px;
	height: 40px;
}
#masthead.vx-scrolled .site-header-inner-wrap {
	border-bottom-color: #2a2d31;
	box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.95);
}

/* Nav links: the active underline, drawn on hover from the centre out. */
#masthead .header-navigation .header-menu-container > ul > li > a::before {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 2px;
	height: 2px;
	background: #4a4f55;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	#masthead .header-navigation .header-menu-container > ul > li > a:hover::before {
		transform: scaleX(1);
	}
}
/* The current page keeps its solid glowing underline (rule above) — hide the
   hover line there so the two don't stack. */
#masthead .header-navigation .header-menu-container > ul > li.current-menu-item > a::before,
#masthead .header-navigation .header-menu-container > ul > li.current_page_item > a::before {
	display: none;
}

/* Tryout button: same press/lift language as the in-page buttons. */
#masthead .header-button::before { transition: box-shadow .22s, transform .22s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
	#masthead .header-button:hover::before { transform: skewX(-12deg) translateY(-2px); }
}
#masthead .header-button:active::before { transform: skewX(-12deg) translateY(1px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
	#masthead .site-header-inner-wrap,
	#masthead .site-header-row-container-inner > .site-container,
	#masthead .site-branding img,
	#masthead .header-navigation .header-menu-container > ul > li > a::before,
	#masthead .header-button::before { transition: none; }
}