/* ============================================================================
 * WP-specific state styles — the bits that were React inline-state in the Next
 * app (open/active/selected). Loaded after theme.css. Idle styles stay inline
 * in the templates; these classes apply the "active" look.
 * ========================================================================== */

/* --- FAQ accordion --------------------------------------------------------- */
.vx-faq { transition: border-color .18s; }
.vx-faq[data-open="true"] { border-color: rgba(225, 6, 0, 0.45) !important; }
.vx-faq-q { color: #C0C4C8; transition: color .18s; }
.vx-faq[data-open="true"] .vx-faq-q { color: #fff; }
.vx-faq-plus { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.vx-faq[data-open="true"] .vx-faq-plus { transform: rotate(135deg); }

/* Panel slides instead of snapping. Was display:none/block — that can't animate.
   ponytail: 1500px max-height ceiling; an answer taller than that would clip.
   Swap to a grid-rows 0fr/1fr wrapper if answers ever get that long. */
.vx-faq-panel {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top-color: transparent !important;
	transition:
		max-height .38s cubic-bezier(.22, 1, .36, 1),
		padding .38s cubic-bezier(.22, 1, .36, 1),
		opacity .24s ease,
		border-top-color .38s ease,
		visibility 0s linear .38s;
}
.vx-faq[data-open="true"] .vx-faq-panel {
	max-height: 1500px;
	opacity: 1;
	visibility: visible;
	padding-top: 18px !important;
	padding-bottom: 24px !important;
	border-top-color: #1c1f22 !important;
	transition-delay: 0s, 0s, .06s, 0s, 0s;
}

/* --- Segmented controls: schedule filter / tryout role / tryout language ----
   "On" is a filled crimson block. The fill/rim values live once in the
   MATCH-REPORT LAYER at the bottom of this file; these three only carry the
   shared behaviour. (Each used to repeat its own red gradient + halo.) */
.vx-filter,
.vx-role,
.vx-lang { transition: all .15s; }
.vx-filter-on,
.vx-role-on,
.vx-lang-on { color: #fff !important; }

/* --- Form error lines: hidden until JS reveals them ------------------------ */
.vx-form-error,
.vx-ask-error { display: none; }

/* ============================================================================
 * FINE-TUNE LAYER — polish only. No markup, no behaviour, no token changes:
 * every value below is the existing palette, just applied with more care.
 * ========================================================================== */

/* --- Global feel ----------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
::selection { background: #E10600; color: #fff; }
html { scrollbar-color: #2A2D31 #000; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #23262A; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #3A3E43; }

/* Hero emblem: a 1104px image that still scales in on reveal — promote it once
   instead of re-rasterising every frame. (The drop-shadow and the bob loop it
   used to carry are gone; see the MATCH-REPORT LAYER below.) */
.vx-hero-emblem { will-change: transform; }

/* --- Buttons: lift and press feedback --------------------------------------
   The showroom light-sweep that used to run across the primary button on hover
   is gone (see the MATCH-REPORT LAYER at the bottom of this file). */
.vx-btn > .vx-btn-skin {
	position: relative;
	transition:
		transform .22s cubic-bezier(.22, 1, .36, 1),
		background .14s,
		box-shadow .22s cubic-bezier(.22, 1, .36, 1),
		border-color .22s;
}
.vx-btn:active > .vx-btn-skin { transform: skewX(-12deg) translateY(1px) scale(.985); }
.vx-submit .vx-submit-skin { position: relative; }

@media (hover: hover) and (pointer: fine) {
	.vx-btn:hover > .vx-btn-skin { transform: skewX(-12deg) translateY(-2px); }
}

/* --- Cards: softer easing on the hover state -------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.vx-card {
		transition:
			border-color .3s cubic-bezier(.22, 1, .36, 1),
			transform .3s cubic-bezier(.22, 1, .36, 1),
			box-shadow .3s cubic-bezier(.22, 1, .36, 1);
	}
	/* Hover elevation only — the red rim-light and halo it used to add are
	   retired (see the MATCH-REPORT LAYER at the bottom of this file). */
}
/* Touch devices keep :hover stuck after a tap — never lift there. */
@media (hover: none) {
	.vx-card:hover { transform: none; }
}

/* --- Inputs: calmer focus ring, no layout shift ---------------------------- */
.vx-input { transition: border-color .2s, box-shadow .2s, background .2s; }
.vx-input:hover:not(:focus) { border-color: #3A3E43; }

/* --- Segmented controls (filter / role / lang): shared spring --------------- */
.vx-filter,
.vx-role,
.vx-lang {
	transition:
		background .2s cubic-bezier(.22, 1, .36, 1),
		color .2s,
		border-color .2s,
		box-shadow .2s,
		transform .16s cubic-bezier(.22, 1, .36, 1);
}
.vx-filter:active,
.vx-role:active,
.vx-lang:active { transform: scale(.96); }

/* --- Mobile: comfortable tap targets + tighter rhythm ---------------------- */
@media (max-width: 720px) {
	.vx-filter,
	.vx-role,
	.vx-lang,
	.vx-faq-toggle { min-height: 44px; }
	.vx-btn > .vx-btn-skin { padding-left: 30px; padding-right: 30px; }
}

/* --- Short viewports: keep the hero CTAs above the fold -------------------- */
@media (min-width: 721px) and (max-height: 900px) {
	.vx-hero-emblem { width: min(460px, 70vw) !important; }
}

/* Everything above is decoration — reduced-motion users get none of it. */
@media (prefers-reduced-motion: reduce) {
	.vx-faq-panel,
	.vx-faq[data-open="true"] .vx-faq-panel { transition: none; }
	.vx-hero-emblem { will-change: auto; }
}

/* ============================================================================
 * MATCH-REPORT LAYER — the de-templating pass.
 *
 * Same brand (black stage, Vantix crimson, Saira/Barlow), different register:
 * the site reads like a broadcast match sheet instead of a glowing gamer
 * landing page. Four rules drive everything below.
 *
 *   1. No gradient text.  Chrome-plated headings are the loudest generated-UI
 *      tell there is. One committed off-white carries further.
 *   2. Red is a marker, not a light source.  Flat #E10600 fills and 1px rules;
 *      elevation comes from black shadow, never from a red halo.
 *   3. Flat surfaces.  A panel is one colour with a hairline, not a 155deg ramp.
 *   4. The skew is used ONCE — on the button.  A gesture on every badge, chip,
 *      slab and dot stops being a signature and becomes wallpaper.
 * ========================================================================== */

/* --- 1. Solid display type ------------------------------------------------- */
.vx-metal {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: #f2f4f6;
	color: #f2f4f6;
}

/* Numbers that sit in columns (scores, dates, counts) must not jitter. */
.vx-count,
.vx-tabular { font-variant-numeric: tabular-nums; }

/* Stat strip: grid so the dividers know where a row starts. Flex-wrap left the
   second row indented by the divider padding it inherited from row one. */
.vx-statstrip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.vx-statstrip > * {
	padding: 26px 0 24px 26px;
	border-left: 1px solid #16181a;
}
.vx-statstrip > :nth-child(odd) { border-left: 0; padding-left: 0; }
@media (min-width: 900px) {
	.vx-statstrip { grid-template-columns: repeat(4, 1fr); }
	.vx-statstrip > :nth-child(odd) { border-left: 1px solid #16181a; padding-left: 26px; }
	.vx-statstrip > :first-child { border-left: 0; padding-left: 0; }
}

/* --- 2/3. Buttons: flat crimson, black elevation --------------------------- */
.vx-btn--primary > .vx-btn-skin,
.vx-btn--nav > .vx-btn-skin {
	background: #e10600;
	border: 1px solid #ff4a44;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.9);
}
.vx-btn--primary:hover > .vx-btn-skin,
.vx-btn--nav:hover > .vx-btn-skin {
	background: #ff1a1a;
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.95);
}
.vx-btn--ghost > .vx-btn-skin {
	background: transparent;
	border: 1px solid #3a3e43;
	box-shadow: none;
}
.vx-btn--ghost:hover > .vx-btn-skin {
	border-color: #f2f4f6;
	background: rgba(255, 255, 255, 0.04);
}
/* The single light sweep was the last bit of showroom chrome on the CTA; it is
   deleted at the source above, not just hidden. */

/* --- 3. Cards: one flat surface, hairline, honest shadow ------------------- */
.vx-card:hover { border-color: #3a3e43 !important; }
@media (hover: hover) and (pointer: fine) {
	.vx-card:hover {
		box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 1);
	}
	/* The 4–5px lift on every card was the uniform reflex. Cards that link
	   somewhere still answer the pointer; static ones hold still. */
	.vx-card:hover,
	.vx-card--lift5:hover { transform: none; }
	a.vx-card:hover { transform: translateY(-3px); }
}

/* --- Inputs: a crisp rule on focus, no halo -------------------------------- */
.vx-input { background: #0c0e10; border-color: #2a2d31; }
.vx-input:focus {
	border-color: #e10600;
	box-shadow: inset 0 -2px 0 #e10600;
}
.vx-input::placeholder { color: #7d8389; }
/* Contrast: the old #5a5f64 placeholder sat at ~3.4:1 on #0a0b0c — under the
   4.5:1 placeholders need. #7d8389 clears it. */
.vx-input::-moz-placeholder { color: #7d8389; }
[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #ff1a1a;
	outline-offset: 2px;
	box-shadow: none;
}

/* The tryout submit shared the halo language; give it the button's flat one. */
.vx-submit .vx-submit-skin { transition: background .15s; }
.vx-submit:hover .vx-submit-skin {
	background: #ff1a1a !important;
	box-shadow: none !important;
}

/* --- Segmented controls: selection reads as a filled block ---------------- */
.vx-filter-on,
.vx-role-on,
.vx-lang-on {
	background: #e10600 !important;
	border-color: #ff4a44 !important;
	box-shadow: none !important;
}
.vx-filter:hover:not(.vx-filter-on),
.vx-role:hover:not(.vx-role-on) { border-color: #4a4f55 !important; color: #fff !important; }

/* --- FAQ: a ruled list. The open row is marked by the question going white
       and the + rotating, not by a red border wash on the whole card. ------- */
.vx-faq[data-open="true"] { border-color: #2a2d31 !important; }
.vx-faq[data-open="true"] .vx-faq-panel { border-top-color: transparent !important; }
.vx-faq-q { color: #b6bbc0; }

/* --- 4. Retire the skew everywhere except the button ---------------------- */
.vx-slab,
.vxb-slab { transform: none; }

/* --- Featured staff panel: the two-up splits below the portrait width ----- */
@media (max-width: 640px) {
	.vx-staff-lead { grid-template-columns: 1fr !important; }
	.vx-staff-lead > div:last-child { border-left: 0 !important; border-top: 1px solid #1a1d20; }
}

/* --- Fixture rows (schedule) ---------------------------------------------- */
.vx-row-hover:hover { background: #0c0e10 !important; }
@media (max-width: 560px) {
	/* 66px + fixture + a right-aligned time column stops fitting: put the
	   time and status under the fixture instead of letting it crush. */
	.vx-match-row { grid-template-columns: 56px 1fr !important; }
	.vx-match-row > :last-child { grid-column: 2; text-align: left !important; }
	.vx-match-row > :last-child > div:last-child { justify-content: flex-start !important; }
}

/* --- League-table rows (squads) ------------------------------------------- */
.vx-squad-row { transition: background .2s cubic-bezier(.22, 1, .36, 1); }
.vx-squad-row h3 { transition: color .2s; }
@media (hover: hover) and (pointer: fine) {
	.vx-squad-row:hover { background: #0c0e10; }
	.vx-squad-row:hover h3 { color: #fff; }
}
@media (max-width: 640px) {
	.vx-squad-row { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* --- Section rhythm: alternate the breathing room so the page has a pulse -- */
.vx-sec-rule {
	border: 0;
	border-top: 1px solid #1a1d20;
	margin: 0 auto;
	max-width: 1180px;
	width: 90vw;
}

/* --- Rosters on phones -------------------------------------------------------
   The player grid is `auto-fit minmax(230px,1fr)` inline, so below ~530px it
   collapses to ONE full-width column — a single tall 230px near-black photo box
   per athlete, which reads as empty/broken on a phone (esp. before photos are
   uploaded). Force a compact 2-up team-sheet grid instead: denser, less empty,
   closer to the desktop density. Scoped to .vx-roster-grid so staff-grid (which
   also uses .vx-card) is untouched. Desktop is unchanged — inline styles still
   win above this breakpoint. ponytail: !important is required to beat the inline
   grid/height; adding classes + a media query is the smallest safe diff. */
@media (max-width: 600px) {
	.vx-roster-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
	.vx-roster-grid .vx-card > div:first-child { height: 152px !important; }
	.vx-roster-grid .vx-card > div:last-child { padding: 12px 12px 14px !important; }
	.vx-roster-grid .vx-card > div:last-child > div:first-child {
		font-size: 17px !important;
		overflow-wrap: anywhere;
	}
}
@media (max-width: 360px) {
	.vx-roster-grid .vx-card > div:last-child > div:first-child { font-size: 15px !important; }
}

/* --- Staff flip cards ---------------------------------------------------------
   Tapping the photo turns a staff card over to that person's own story. The
   markup is .vx-flip > .vx-flip-inner > (.vx-flip-front-ish face + .vx-flip-back);
   the front face stays in normal flow so it sets the height, and the back is
   absolute over it. Only the block's render.php emits this — a card with no story
   ships without .vx-flip-back and simply never flips.

   backface-visibility hides the away-facing side from the eye only: its buttons
   and text stay in the tab order and the accessibility tree, so a keyboard or
   screen-reader user would land inside the side of the card nobody can see. That
   is handled with the `inert` attribute rather than more CSS — render.php ships
   the back inert and theme.js swaps it on each turn, so it is also correct with
   JS off, when the card never turns at all. ---------------------------------- */
.vx-flip { position: relative; perspective: 1200px; }
.vx-flip-inner {
	position: relative;
	transform-style: preserve-3d;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.vx-flip.is-flipped .vx-flip-inner { transform: rotateY(180deg); }
.vx-flip-face { backface-visibility: hidden; }
.vx-flip-back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	padding: 18px;
}
/* A grid card is only as tall as the photo above the name, so the story it turns
   to is usually a line or two longer than the box: it scrolls, and the scrollbar
   is dressed to match rather than left as the OS default. The lead card is wide
   enough for the whole thing, so it gets the front card's padding and type back —
   and a measure, because a 1100px-wide line of 14px text is unreadable. */
.vx-flip-back p { font-size: 13.5px; line-height: 1.5; scrollbar-width: thin; scrollbar-color: #3a3e43 transparent; }
.vx-flip-back p::-webkit-scrollbar { width: 6px; }
.vx-flip-back p::-webkit-scrollbar-thumb { background: #3a3e43; }
.vx-flip-back--lead { padding: clamp(24px, 3vw, 32px); }
.vx-flip-back--lead p { font-size: 15px; line-height: 1.55; max-width: 78ch; }

/* The INFO badge is the only hint the photo does anything; lift it on hover the
   way every other card affordance here does. */
[data-flip-toggle] > span { transition: background .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) {
	[data-flip-toggle]:hover > span { background: #ff1a1a; transform: translateY(-2px); }
}