/*
 * HockeyCove front end.
 *
 * Sioux City Beer League: blue, white, red.
 *
 * Brand tokens live here rather than in the Elementor global kit because the
 * plugin renders every data page and must look right without a page builder
 * loaded. The Elementor kit mirrors these values so the header and footer match.
 *
 * Contrast, measured against white:
 *   --scbl-blue  #0B2A6B  13.2:1  safe for body text
 *   --scbl-royal #1B4F9C   7.4:1  safe for body text and links
 *   --scbl-red   #C8102E   5.9:1  passes AA for normal text, use sparingly
 * Red is an accent, not a body ink. Never set long copy in red.
 */

:root {
	--scbl-blue: #0b2a6b;
	--scbl-royal: #1b4f9c;
	--scbl-red: #c8102e;
	--scbl-red-dark: #9b0c23;
	--scbl-white: #fff;
	--scbl-ink: #14171c;
	--scbl-muted: #5b6472;
	--scbl-surface: #f4f6f9;
	--scbl-line: #e2e8f0;
	--scbl-radius: 10px;
	--scbl-shadow: 0 1px 2px rgba(20, 23, 28, .06), 0 4px 12px rgba(20, 23, 28, .05);
}

/* ---------- Layout ---------- */

.hc-wrap {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 16px;
	color: var(--scbl-ink);
}

.hc-section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.hc-section-title h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.2;
	color: var(--scbl-blue);
}

.hc-section-title a {
	font-size: .875rem;
	font-weight: 600;
	color: var(--scbl-royal);
	text-decoration: none;
}

.hc-section-title a:hover { text-decoration: underline; }

/* ---------- Tables ----------
 * Mobile first: the wrapper scrolls horizontally rather than letting a wide
 * stats table blow out the page. Players check these on a phone at the rink.
 */

.hc-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--scbl-line);
	border-radius: var(--scbl-radius);
	background: var(--scbl-white);
	box-shadow: var(--scbl-shadow);
}

table.hc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	min-width: 520px;
}

table.hc-table caption {
	caption-side: top;
	text-align: left;
	padding: 12px 14px 0;
	font-weight: 700;
	color: var(--scbl-blue);
}

table.hc-table th,
table.hc-table td {
	padding: 10px 12px;
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid var(--scbl-line);
}

table.hc-table th {
	background: var(--scbl-blue);
	color: var(--scbl-white);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	position: sticky;
	top: 0;
}

/* First column is the name column: left aligned, allowed to be the wide one. */
table.hc-table th:first-child,
table.hc-table td:first-child {
	text-align: left;
	white-space: normal;
	min-width: 160px;
}

table.hc-table tbody tr:nth-child(even) { background: var(--scbl-surface); }
table.hc-table tbody tr:hover { background: #eaf0f8; }
table.hc-table tbody tr:last-child td { border-bottom: 0; }

/* Rank column in standings and leaders. */
.hc-rank {
	color: var(--scbl-muted);
	font-variant-numeric: tabular-nums;
	width: 2.5rem;
}

/* Numeric cells line up properly across rows. */
.hc-num { font-variant-numeric: tabular-nums; }

.hc-pts { font-weight: 700; color: var(--scbl-blue); }

/* ---------- Team and player identity ---------- */

.hc-team-cell {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hc-team-logo {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex: 0 0 auto;
}

.hc-team-cell a,
.hc-player-cell a {
	color: var(--scbl-ink);
	text-decoration: none;
	font-weight: 600;
}

.hc-team-cell a:hover,
.hc-player-cell a:hover { color: var(--scbl-royal); text-decoration: underline; }

/* Captain and alternate letters, shown next to the player name. */
.hc-designation {
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: super;
	margin-left: 4px;
	color: var(--scbl-red);
}

.hc-jersey {
	display: inline-block;
	min-width: 1.9em;
	padding: 1px 5px;
	margin-right: 8px;
	border-radius: 4px;
	background: var(--scbl-blue);
	color: var(--scbl-white);
	font-size: .75rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---------- Schedule ---------- */

.hc-game {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--scbl-line);
}

.hc-game:last-child { border-bottom: 0; }
.hc-game-home { justify-self: end; text-align: right; }
.hc-game-away { justify-self: start; }

.hc-game-score {
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--scbl-blue);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hc-game-meta {
	grid-column: 1 / -1;
	font-size: .8125rem;
	color: var(--scbl-muted);
	text-align: center;
}

.hc-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.hc-badge-final { background: var(--scbl-blue); color: var(--scbl-white); }
.hc-badge-scheduled { background: var(--scbl-surface); color: var(--scbl-muted); }
.hc-badge-postponed,
.hc-badge-cancelled { background: var(--scbl-red); color: var(--scbl-white); }
.hc-badge-ot { background: var(--scbl-red); color: var(--scbl-white); }

/* ---------- Empty state ---------- */

.hc-empty {
	padding: 24px 16px;
	text-align: center;
	color: var(--scbl-muted);
	background: var(--scbl-surface);
	border: 1px dashed var(--scbl-line);
	border-radius: var(--scbl-radius);
}

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
	table.hc-table th,
	table.hc-table td { padding: 8px 10px; }

	table.hc-table th:first-child,
	table.hc-table td:first-child { min-width: 140px; }

	.hc-game { grid-template-columns: 1fr auto 1fr; gap: 8px; }
}

/* ---------- Team and player profiles ---------- */

.hc-single {
	padding: 24px 0 48px;
}

.hc-team-header,
.hc-player-header {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 20px 0 18px;
	border-bottom: 3px solid var(--scbl-team, var(--scbl-blue));
	margin-bottom: 20px;
}

.hc-team-header-logo,
.hc-player-photo {
	flex: 0 0 auto;
	object-fit: contain;
	border-radius: 8px;
}

.hc-player-photo {
	object-fit: cover;
	border-radius: 50%;
}

.hc-team-header h1,
.hc-player-header h1 {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1.15;
	color: var(--scbl-blue);
}

.hc-team-header-meta,
.hc-player-header-meta {
	margin: 4px 0 0;
	color: var(--scbl-muted);
	font-size: .9375rem;
}

.hc-sponsor {
	color: var(--scbl-royal);
	font-weight: 600;
}

/* Figure strip. Divider separated, no gap, so the columns stay flush. */
.hc-statline {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 22px;
	border: 1px solid var(--scbl-line);
	border-radius: var(--scbl-radius);
	background: var(--scbl-white);
	overflow: hidden;
}

.hc-statline-item {
	flex: 1 1 0;
	min-width: 72px;
	padding: 14px 8px;
	text-align: center;
	border-right: 1px solid var(--scbl-line);
}

.hc-statline-item:last-child {
	border-right: 0;
}

.hc-statline-value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--scbl-blue);
	font-variant-numeric: tabular-nums;
}

.hc-statline-label {
	display: block;
	margin-top: 2px;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--scbl-muted);
}

.hc-bio {
	max-width: 68ch;
	line-height: 1.7;
}

@media (max-width: 600px) {
	.hc-statline-item {
		min-width: 60px;
		padding: 11px 4px;
	}

	.hc-statline-value {
		font-size: 1.2rem;
	}
}

/* ---------- Game box score ---------- */

.hc-score {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 22px 16px;
	margin: 18px 0 10px;
	background: var(--scbl-blue);
	color: var(--scbl-white);
	border-radius: var(--scbl-radius);
}

.hc-score-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.hc-score-logo {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.hc-score-team {
	color: var(--scbl-white);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
	line-height: 1.2;
}

.hc-score-team:hover { text-decoration: underline; }

.hc-score-label {
	font-size: .625rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
}

.hc-score-num {
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* The winner is called out rather than left for the reader to compare. */
.hc-score-side.is-winner .hc-score-num { color: #ffd45e; }

.hc-score-mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.hc-game-when {
	margin: 0 0 20px;
	color: var(--scbl-muted);
	font-size: .9375rem;
}

.hc-boxscore-link {
	color: var(--scbl-royal);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.hc-boxscore-link:hover { text-decoration: underline; }

.hc-game-score a {
	color: inherit;
	text-decoration: none;
}

.hc-game-score a:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.hc-score { padding: 16px 10px; gap: 8px; }
	.hc-score-logo { width: 52px; height: 52px; }
	.hc-score-num { font-size: 2rem; }
	.hc-score-team { font-size: .9375rem; }
}