/* We-Ha Sports Scoreboard
 *
 * MATCHES THE MOCKUP ALREADY SHOWN TO WE-HA.COM. The tokens, card treatment,
 * section bars and pill flags below are lifted from weha-mvp's reader build --
 * the Town Hall dashboard Bob and Ronni have already seen -- so the sports board
 * reads as the second product in one suite rather than a separate thing that
 * happens to sit on the same domain.
 *
 * The first version of this file inherited everything from the host theme. That
 * is defensible in isolation and wrong here: it made the board look like
 * whatever page it landed on, and the client has already been shown a specific
 * look. Consistency with the thing they approved beats neutrality.
 *
 * Everything stays scoped under .weha-sb, and the tokens are namespaced, so
 * nothing here can leak into the rest of we-ha.com.
 *
 * On pinning rather than inheriting: we-ha.com's own body face is already
 * Manrope and its palette already carries #0048fe, so pinning the suite's house
 * style agrees with their site rather than fighting it. `inherit` remains the
 * final fallback in the font stack.
 */

.weha-sb {
	--weha-blue: #0048fe;
	--weha-blue-dark: #0038c6;
	--weha-red: #bd272c;
	--weha-ink: #191d21;
	--weha-gray-700: #45505a;
	--weha-gray-500: #63717f;
	--weha-gray-300: #d2dbe2;
	--weha-gray-200: #e8edf1;
	--weha-gray-100: #f7f8fa;
	--weha-white: #ffffff;
	--weha-font: Manrope, Arial, Helvetica, sans-serif;

	font-family: var(--weha-font);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--weha-ink);
	-webkit-font-smoothing: antialiased;
	margin: 0 0 2rem;
}

/* ---- byline ------------------------------------------------------------- */

.weha-sb__byline {
	color: var(--weha-gray-500);
	font-size: 0.95rem;
	margin: 0 0 1.4em;
	max-width: 62ch;
}

.weha-sb__attrib {
	white-space: nowrap;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.weha-sb__attrib:hover {
	text-decoration: underline;
}

/* Colour wordmark, sized to the byline's x-height so it reads as part of the
 * sentence rather than a banner. Brand colours live in the SVG itself. */
.weha-sb__wordmark {
	display: inline-block;
	height: 1.15em;
	width: auto;
	vertical-align: -0.28em;
	margin-left: 0.15em;
}

/* ---- section bar: uppercase kicker over the heading, 2px rule under ------ */

.weha-sb__group {
	margin-top: 2em;
}

.weha-sb__group:first-of-type {
	margin-top: 0;
}

.weha-sb__heading {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 0 0.3em;
	border-bottom: 2px solid var(--weha-gray-300);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--weha-ink);
	margin: 0 0 0.9em;
}

.weha-sb__date {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--weha-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 1.4em 0 0.5em;
}

.weha-sb__day:first-of-type .weha-sb__date {
	margin-top: 0;
}

/* ---- game rows are CARDS, matching the mockup's meeting rows ------------- */

.weha-sb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.weha-sb__row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.7em 0.9em;
	background: var(--weha-white);
	border: 1px solid var(--weha-gray-300);
	border-radius: 8px;
}

.weha-sb__sport {
	flex: 0 0 9rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--weha-gray-500);
}

.weha-sb__match {
	flex: 1 1 auto;
	color: var(--weha-ink);
}

.weha-sb__vs {
	color: var(--weha-gray-500);
}

.weha-sb__score,
.weha-sb__time {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.weha-sb__score {
	font-weight: 800;
	color: var(--weha-ink);
}

.weha-sb__time {
	color: var(--weha-gray-500);
	font-size: 0.9rem;
}

/* ---- pill flags, same shape as the mockup's .meeting-flag --------------- */

.weha-sb__badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--weha-gray-200);
	color: var(--weha-gray-500);
}

/* A playoff is the most newsworthy row on the board; it gets the house red,
 * which is the same accent the mockup reserves for things that matter. */
.weha-sb__badge--playoff {
	background: var(--weha-red);
	color: var(--weha-white);
}

.weha-sb__ad {
	margin: 1.6rem 0;
	text-align: center;
}

.weha-sb__empty,
.weha-sb--empty {
	color: var(--weha-gray-500);
	font-style: italic;
	font-size: 0.95rem;
}

/* The sport label and the matchup stack on phones; a 9rem fixed column would
 * squeeze opponent names to two or three characters on a 360px screen. */
@media (max-width: 600px) {
	.weha-sb__row {
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
	}

	.weha-sb__sport {
		flex: 0 0 100%;
	}

	.weha-sb__match {
		flex: 1 1 60%;
	}
}

/* Kicker + title inside the section bar, mirroring .pane-bar-kicker /
 * .pane-bar-title from the mockup. */
.weha-sb__kicker {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--weha-gray-500);
}

.weha-sb__title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--weha-ink);
}