/* JVF Fight Hub components. Tokens fall back to defaults if the child theme is not active. */
:root {
	--jvf-ink: #0A1628;
	--jvf-ink-2: #13233D;
	--jvf-gold: #D4AF37;
	--jvf-gold-ink: #7A5E0F;
	--jvf-paper: #FFFFFF;
	--jvf-mist: #F1F4F8;
	--jvf-line: #D6DCE6;
	--jvf-muted: #4A5568;
	--jvf-red: #B3202A;
	--jvf-blue: #1C4FA0;
	--jvf-display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--jvf-radius: 6px;
}

/* Hero: the fight poster */
.jvf-hero {
	position: relative;
	margin: 0 0 2rem;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
	background: var(--jvf-ink);
	color: #fff;
	border-radius: var(--jvf-radius);
	text-align: center;
	overflow: hidden;
}
.jvf-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 6px;
	background: linear-gradient(90deg, var(--jvf-red) 0 50%, var(--jvf-blue) 50% 100%);
}
.jvf-hero__title {
	margin: 0 0 1rem;
	font-family: var(--jvf-display);
	font-weight: 700;
	line-height: .95;
	letter-spacing: .01em;
	color: #fff;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .4em;
	font-size: clamp(2rem, 5.2vw, 4rem);
}
.jvf-hero__name { text-transform: uppercase; }
.jvf-hero__name--a { text-align: right; }
.jvf-hero__name--b { text-align: left; }
.jvf-hero__vs {
	font-size: .38em;
	font-weight: 500;
	color: var(--jvf-ink);
	background: var(--jvf-gold);
	border-radius: 50%;
	width: 2.2em;
	height: 2.2em;
	display: inline-grid;
	place-items: center;
	text-transform: lowercase;
}
.jvf-hero__when { margin: 0 0 1.25rem; font-size: 1.05rem; color: #C9D3E3; }
.jvf-hero__times, .jvf-hero__watch { margin: .75rem 0 0; font-size: .95rem; color: #C9D3E3; }
.jvf-hero__times time { color: #fff; font-weight: 600; }
.jvf-hero__watch { color: var(--jvf-gold); }
.jvf-hero__result { margin: 0; font-size: 1.25rem; color: #fff; }

/* Countdown */
.jvf-count__label { margin: 0 0 .5rem; font-size: .9rem; color: #C9D3E3; }
.jvf-count__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 5.5rem));
	justify-content: center;
	gap: .5rem;
}
.jvf-count__cell {
	background: var(--jvf-ink-2);
	border: 1px solid rgba(212, 175, 55, .35);
	border-radius: var(--jvf-radius);
	padding: .6rem .25rem .5rem;
}
.jvf-count__num {
	display: block;
	font-family: var(--jvf-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 6vw, 2.6rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.jvf-count__unit { display: block; margin-top: .3rem; font-size: .75rem; color: #AEB9CC; }
.jvf-box { background: var(--jvf-ink); color: #fff; border-radius: var(--jvf-radius); padding: 1.25rem; margin: 0 0 1.5rem; text-align: center; }

/* Tables */
.jvf-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; -webkit-overflow-scrolling: touch; }
.jvf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	background: var(--jvf-paper);
	border: 1px solid var(--jvf-line);
}
/* Captions stay in the HTML for screen readers and crawlers; the section H2 already labels the table visually. */
.jvf-table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.jvf-table th, .jvf-table td {
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--jvf-line);
	text-align: left;
	vertical-align: top;
}
.jvf-table thead th { background: var(--jvf-ink); color: #fff; font-weight: 600; border-bottom: 3px solid var(--jvf-gold); }
.jvf-table tbody th { font-weight: 600; color: var(--jvf-ink); width: 38%; }
.jvf-table tbody tr:nth-child(even) { background: var(--jvf-mist); }
.jvf-times td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jvf-local { background: #FFF7DD !important; }
.jvf-tape thead th { text-align: center; }
.jvf-tape thead td { background: var(--jvf-ink); border-bottom: 3px solid var(--jvf-gold); }
.jvf-tape .jvf-tape__a { box-shadow: inset 0 -3px 0 var(--jvf-red); }
.jvf-tape .jvf-tape__b { box-shadow: inset 0 -3px 0 var(--jvf-blue); }
.jvf-tape tbody td { text-align: center; }
.jvf-tape tbody th { width: 30%; }
.jvf-card__main th, .jvf-card__main td { font-weight: 700; }
.jvf-note { font-size: .9rem; color: var(--jvf-muted); margin: 0 0 1.5rem; }

/* E-E-A-T */
.jvf-byline {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: -1rem 0 1.75rem;
	padding: .35rem .85rem .35rem .7rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--jvf-muted);
	background: var(--jvf-mist);
	border: 1px solid var(--jvf-line);
	border-radius: 999px;
}
.jvf-byline__icon { flex: 0 0 auto; color: var(--jvf-gold-ink); }
.jvf-byline time { color: var(--jvf-ink); font-weight: 600; }
.jvf-byline:first-child { margin-top: 0; }
.jvf-byline a { color: inherit; font-weight: 600; }
.jvf-author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 2.5rem 0 0;
	padding: 1.25rem;
	border-top: 3px solid var(--jvf-gold);
	background: var(--jvf-mist);
	border-radius: 0 0 var(--jvf-radius) var(--jvf-radius);
}
.jvf-author__badge {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--jvf-ink);
	color: var(--jvf-gold);
	font-family: var(--jvf-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .04em;
}
.jvf-author__body p { margin: 0 0 .4rem; }
.jvf-author__name { font-weight: 700; color: var(--jvf-ink); }
.jvf-author__bio, .jvf-author__check { font-size: .95rem; color: var(--jvf-muted); }

@media (max-width: 700px) {
	.jvf-hero__title { grid-template-columns: 1fr; gap: .25em; font-size: clamp(2.2rem, 11vw, 3.2rem); }
	.jvf-hero__name--a, .jvf-hero__name--b { text-align: center; }
	.jvf-hero__vs { justify-self: center; }
}

@media (max-width: 544px) {
	.jvf-count__grid { gap: .35rem; }
	.jvf-table th, .jvf-table td { padding: .6rem .6rem; font-size: .95rem; }
	.jvf-author { flex-direction: column; }
}

/* ---------- 1.2.0 premium components ---------- */

/* Reset theme list indents for component lists */
.entry-content ul.jvf-guides, .entry-content ol.jvf-updates, .entry-content .jvf-qnav ul, .entry-content dl.jvf-facts-grid { margin-left: 0; padding-left: 0; }
.entry-content ol.jvf-updates { padding-left: 0; }

/* Jump links */
.jvf-qnav { display: flex; align-items: center; gap: .75rem; margin: 0 0 2rem; padding: .75rem 0; border-top: 1px solid var(--jvf-line); border-bottom: 1px solid var(--jvf-line); }
.jvf-qnav__label { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--jvf-muted); }
.jvf-qnav ul { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.jvf-qnav ul::-webkit-scrollbar { display: none; }
.jvf-qnav li { flex: 0 0 auto; margin: 0; }
.jvf-qnav a { display: block; padding: .4rem .85rem; border: 1px solid var(--jvf-line); border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--jvf-ink); text-decoration: none; white-space: nowrap; background: var(--jvf-paper); }
.jvf-qnav a:hover, .jvf-qnav a:focus-visible { border-color: var(--jvf-gold); color: var(--jvf-ink); background: #FFF7DD; }
.entry-content h2[id] { scroll-margin-top: 90px; }

/* Key facts grid */
.jvf-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin: 0 0 2rem; padding: 0; }
.jvf-fact { margin: 0; padding: 1rem 1.1rem; background: var(--jvf-paper); border: 1px solid var(--jvf-line); border-top: 3px solid var(--jvf-ink); border-radius: var(--jvf-radius); }
.jvf-fact:first-child { border-top-color: var(--jvf-gold); }
.jvf-fact dt { margin: 0 0 .3rem; font-size: .8rem; font-weight: 600; color: var(--jvf-muted); }
.jvf-fact dd { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--jvf-ink); }
.jvf-fact dd time { font-variant-numeric: tabular-nums; }

/* Latest updates */
.jvf-updates { list-style: none; margin: 0 0 2rem; padding: 0; border-left: 3px solid var(--jvf-gold); }
.jvf-updates li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; margin: 0; padding: .7rem 0 .7rem 1rem; border-bottom: 1px solid var(--jvf-line); }
.jvf-updates li:last-child { border-bottom: 0; }
.jvf-updates time { font-family: var(--jvf-display); font-weight: 600; color: var(--jvf-gold-ink); white-space: nowrap; }
.jvf-updates li:first-child time { color: var(--jvf-ink); }

/* Fight guides */
.jvf-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.jvf-guides li { margin: 0; }
.jvf-guide { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem 1.1rem; background: var(--jvf-mist); border: 1px solid transparent; border-left: 4px solid var(--jvf-ink); border-radius: var(--jvf-radius); text-decoration: none; }
.jvf-guide:hover, .jvf-guide:focus-visible { background: var(--jvf-paper); border-color: var(--jvf-line); border-left-color: var(--jvf-gold); }
.jvf-guide__title { font-family: var(--jvf-display); font-size: 1.15rem; font-weight: 600; color: var(--jvf-ink); line-height: 1.2; }
.jvf-guide__desc { font-size: .9rem; color: var(--jvf-muted); line-height: 1.45; }

/* Tale of the tape: broadcast style */
.jvf-vs { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; background: var(--jvf-ink); color: #fff; border-radius: var(--jvf-radius); overflow: hidden; }
.jvf-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jvf-vs th, .jvf-vs td { padding: .75rem 1rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.jvf-vs thead th { font-family: var(--jvf-display); font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; text-transform: uppercase; color: #fff; padding-top: 1.1rem; padding-bottom: 1rem; }
.jvf-vs thead .jvf-vs__a { box-shadow: inset 0 -4px 0 var(--jvf-red); }
.jvf-vs thead .jvf-vs__b { box-shadow: inset 0 -4px 0 var(--jvf-blue); }
.jvf-vs thead .jvf-vs__mid span { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--jvf-gold); color: var(--jvf-ink); font-family: var(--jvf-display); font-weight: 600; }
.jvf-vs .jvf-vs__a { text-align: right; width: 38%; }
.jvf-vs .jvf-vs__b { text-align: left; width: 38%; }
.jvf-vs .jvf-vs__mid { text-align: center; width: 24%; font-size: .8rem; font-weight: 600; color: #AEB9CC; }
.jvf-vs tbody td { font-weight: 600; font-variant-numeric: tabular-nums; }
.jvf-vs tbody tr:last-child th, .jvf-vs tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 544px) {
	.jvf-qnav { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.jvf-qnav ul { width: 100%; }
	.jvf-vs th, .jvf-vs td { padding: .6rem .5rem; font-size: .9rem; }
	.jvf-vs .jvf-vs__mid { font-size: .72rem; }
	.jvf-updates li { grid-template-columns: 3.8rem 1fr; }
	.jvf-guides { grid-template-columns: 1fr; }
}