/*
 * Sioux City Beer League brand layer.
 *
 * Heavy and high contrast, the way a sports league reads, not the airy civic
 * look. Big condensed uppercase headings, dark navy blocks, hard edges, and
 * numbers that line up.
 *
 * Type:
 *   Barlow Condensed  700/800, uppercase, tight leading. Headings and figures.
 *                     Condensed keeps long team names on one line in a table
 *                     header and reads as sport rather than corporate.
 *   Inter             400/600/700. Body, UI, and every stat cell. Chosen over
 *                     the Barlow body face specifically for its tabular
 *                     numerals, which keep stat columns aligned row to row.
 *
 * Both are free Google Fonts.
 */

:root {
	--scbl-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
	--scbl-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Dark end of the palette, for the heavy blocks. */
	--scbl-ink-deep: #002038;
	--scbl-navy-2: #0a3e7a;

	/* Hard edge instead of a soft radius, sport rather than SaaS. */
	--scbl-radius: 4px;
	--scbl-shadow: 0 2px 0 rgba(0, 32, 56, .08);
}

/* ---------- Type ---------- */

.hc-wrap,
.hc-single {
	font-family: var(--scbl-body);
}

.hc-section-title h2,
.hc-team-header h1,
.hc-player-header h1,
.hc-single h1,
.hc-single h2,
.hc-single h3 {
	font-family: var(--scbl-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.05;
}

.hc-section-title {
	position: relative;
	align-items: center;
	margin: 34px 0 14px;
	padding-left: 14px;
}

/* Red bar off the left of every section heading. One motif, used everywhere. */
.hc-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: .1em;
	bottom: .1em;
	width: 5px;
	background: var(--scbl-red);
}

.hc-section-title h2 {
	font-size: clamp(1.4rem, 3.2vw, 2rem);
	color: var(--scbl-ink-deep);
}

/* ---------- Tables: dense, striped, hard headers ---------- */

.hc-table-scroll {
	border: 0;
	border-radius: var(--scbl-radius);
	box-shadow: var(--scbl-shadow);
	overflow: hidden;
	overflow-x: auto;
}

table.hc-table {
	font-family: var(--scbl-body);
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
}

table.hc-table th {
	background: var(--scbl-ink-deep);
	color: #fff;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .06em;
	padding: 9px 12px;
	border-bottom: 3px solid var(--scbl-red);
}

table.hc-table td {
	padding: 11px 12px;
	border-bottom: 1px solid #e6ebf2;
}

table.hc-table tbody tr:nth-child(even) {
	background: #f7f9fc;
}

table.hc-table tbody tr:hover {
	background: #eaf0fa;
}

/* Points is the column people came for. */
table.hc-table .hc-pts {
	font-weight: 800;
	color: var(--scbl-ink-deep);
	background: rgba(0, 32, 56, .05);
}

/* Leader row gets a subtle rail so first place is obvious at a glance. Only on
   tables that are actually ordered by rank; a roster is ordered by position. */
table.hc-table:not(.hc-table--unranked) tbody tr:first-child td:first-child {
	box-shadow: inset 4px 0 0 var(--scbl-red);
}

.hc-jersey {
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .8125rem;
	border-radius: 3px;
	background: var(--scbl-ink-deep);
	letter-spacing: .02em;
}

.hc-designation {
	color: var(--scbl-red);
	font-weight: 800;
}

/* ---------- Headers on team and player pages ---------- */

.hc-team-header,
.hc-player-header {
	position: relative;
	margin: 0 0 22px;
	padding: 26px 20px;
	border: 0;
	border-left: 8px solid var(--scbl-team, var(--scbl-red));
	/* The team colour was doing nothing but painting an 8px rail, so every club
	   page looked identical. It now carries the far end of the gradient, with
	   the ink anchoring the end the name sits on. Every colour in use clears
	   5.8:1 against white, the red being the weakest. */
	background: linear-gradient(100deg, var(--scbl-ink-deep) 0%, var(--scbl-team, var(--scbl-navy-2)) 100%);
	color: #fff;
	border-radius: var(--scbl-radius);
	overflow: hidden;
}

/* Ice surface: soft grain plus occasional skate cuts, generated rather than
   stock, so it tiles and stays subtle over the navy. */
.hc-team-header::after,
.hc-player-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('img/ice.png');
	background-size: 700px auto;
	background-repeat: repeat;
	opacity: .85;
	mix-blend-mode: screen;
	pointer-events: none;
}

.hc-team-header > *,
.hc-player-header > * {
	position: relative;
	z-index: 1;
}

.hc-team-header h1,
.hc-player-header h1 {
	color: #fff;
	font-size: clamp(1.9rem, 6vw, 3.1rem);
}

.hc-team-header-meta,
.hc-player-header-meta {
	color: rgba(255, 255, 255, .72);
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}


/* ---------- Figure strip ---------- */

.hc-statline {
	border: 0;
	border-radius: var(--scbl-radius);
	background: var(--scbl-ink-deep);
	box-shadow: var(--scbl-shadow);
}

.hc-statline-item {
	border-right: 1px solid rgba(255, 255, 255, .12);
	padding: 16px 8px;
}

.hc-statline-value {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 2rem;
	color: #fff;
}

.hc-statline-label {
	color: rgba(255, 255, 255, .6);
	font-family: var(--scbl-display);
	font-weight: 600;
	letter-spacing: .1em;
	font-size: .75rem;
}

/* ---------- Scoreboard ---------- */

.hc-score {
	background: linear-gradient(100deg, var(--scbl-ink-deep) 0%, var(--scbl-navy-2) 100%);
	border-radius: var(--scbl-radius);
	border-bottom: 4px solid var(--scbl-red);
	position: relative;
	overflow: hidden;
}

.hc-score::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('img/ice.png');
	background-size: 760px auto;
	opacity: .9;
	mix-blend-mode: screen;
	pointer-events: none;
}

.hc-score > * { position: relative; z-index: 1; }

.hc-score-team {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.hc-score-num {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 3.4rem;
}

.hc-score-side.is-winner .hc-score-num { color: #ffc733; }

.hc-score-label {
	font-family: var(--scbl-display);
	letter-spacing: .14em;
	font-weight: 600;
}

/* ---------- Badges ---------- */

.hc-badge {
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .1em;
	border-radius: 3px;
	padding: 3px 9px;
}

.hc-badge-final { background: #fff; color: var(--scbl-ink-deep); }
.hc-badge-ot { background: var(--scbl-red); color: #fff; }

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

.hc-game {
	padding: 14px 16px;
	border-bottom: 1px solid #e6ebf2;
	background: #fff;
}

.hc-game:nth-child(even) { background: #f7f9fc; }

.hc-game-score {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--scbl-ink-deep);
	padding: 2px 12px;
	background: #eef2f8;
	border-radius: 3px;
}

.hc-game-meta {
	font-size: .8125rem;
	letter-spacing: .02em;
}

.hc-boxscore-link {
	text-transform: uppercase;
	font-family: var(--scbl-display);
	font-weight: 700;
	letter-spacing: .06em;
}

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

.hc-empty {
	border: 2px dashed #cfd8e6;
	border-radius: var(--scbl-radius);
	font-family: var(--scbl-display);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b7a90;
}

@media (max-width: 600px) {
	.hc-statline-value { font-size: 1.45rem; }
	.hc-score-num { font-size: 2.4rem; }
	.hc-score-team { font-size: 1rem; }
	.hc-section-title h2 { font-size: 1.35rem; }
}

/* ---------- Page furniture: hero, cards, team grid ---------- */

.scbl-hero {
	position: relative;
	background: linear-gradient(100deg, var(--scbl-ink-deep) 0%, var(--scbl-navy-2) 55%, #14498f 100%);
	color: #fff;
	overflow: hidden;
	border-bottom: 5px solid var(--scbl-red);
}

/* Rink-stripe motif, drawn in CSS. Placeholder until real photography lands. */
.scbl-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 14px),
		radial-gradient(ellipse at 78% 28%, rgba(168, 32, 42,.35) 0%, transparent 58%);
	pointer-events: none;
}

.scbl-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin-inline: auto;
	padding: clamp(48px, 9vw, 104px) 16px clamp(40px, 7vw, 76px);
}

.scbl-eyebrow {
	margin: 0 0 10px;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #ffc733;
}

.scbl-hero-title {
	margin: 0;
	font-family: var(--scbl-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .92;
	letter-spacing: -.005em;
	font-size: clamp(2.9rem, 10vw, 6.2rem);
	color: #fff;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}

.scbl-hero-sub {
	margin: 16px 0 26px;
	max-width: 46ch;
	font-size: clamp(1rem, 2vw, 1.1875rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

.scbl-hero-actions { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }

.scbl-btn {
	display: inline-block;
	padding: 13px 30px;
	background: var(--scbl-red);
	color: #fff !important;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
	border: 2px solid var(--scbl-red);
	transition: transform .12s ease, background .12s ease;
}

.scbl-btn:hover { background: var(--scbl-red-dark); border-color: var(--scbl-red-dark); transform: translateY(-2px); }

.scbl-btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); }
.scbl-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }

/* Team cards */

.scbl-teamgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 12px;
}

.scbl-teamcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 14px 18px;
	background: #fff;
	border-radius: var(--scbl-radius);
	border-bottom: 5px solid var(--scbl-team, var(--scbl-red));
	box-shadow: var(--scbl-shadow);
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease;
}

.scbl-teamcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 32, 56, .14);
}

.scbl-teamcard img { width: 92px; height: 92px; object-fit: contain; }

.scbl-teamcard-name {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.3rem;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
	text-align: center;
	line-height: 1.1;
}

.scbl-teamcard-meta {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--scbl-muted);
	text-align: center;
}

/* Info cards and link lists */

.scbl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.scbl-card {
	padding: 22px;
	background: #fff;
	border-radius: var(--scbl-radius);
	border-left: 6px solid var(--scbl-red);
	box-shadow: var(--scbl-shadow);
}

.scbl-card h3 {
	margin: 0 0 4px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.scbl-card-time {
	margin: 0 0 10px;
	font-family: var(--scbl-display);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .875rem;
	color: var(--scbl-royal);
}

.scbl-card p { margin: 0 0 8px; line-height: 1.6; }

.scbl-price {
	margin: 10px 0 0 !important;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 2rem;
	color: var(--scbl-red);
	line-height: 1;
}

.scbl-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}

.scbl-links a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 18px;
	background: #fff;
	border-radius: var(--scbl-radius);
	border-left: 5px solid var(--scbl-royal);
	box-shadow: var(--scbl-shadow);
	text-decoration: none;
	transition: transform .12s ease;
}

.scbl-links a:hover { transform: translateX(3px); border-left-color: var(--scbl-red); }

/* wpautop turns a newline between two inline elements into a <br>, and every
   one of those becomes a grid item holding a cell of its own - which scattered
   these cards across the grid instead of filling it. The page content keeps
   the anchors on one line; this is the guard for when someone edits the block
   in the WordPress editor and the newlines come back. */
.scbl-links br { display: none; }

.scbl-links strong {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.1875rem;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.scbl-links span { font-size: .875rem; color: var(--scbl-muted); }

/* The hero sits full bleed inside the theme's constrained content area. */
.scbl-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* ---------- Corrections found by screenshotting the real pages ---------- */

/* Table links were inheriting the theme's link color, which read as pink on
   a white row. Names are content, not links to be shouted about. */
table.hc-table a,
.hc-team-cell a,
.hc-player-cell a {
	color: var(--scbl-ink-deep);
	text-decoration: none;
	font-weight: 600;
}

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

/* Horizontal scroll on a stat table needs to look scrollable. */
.hc-table-scroll {
	background:
		linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
		linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 40px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(0, 32, 56,.14), transparent) left / 14px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 32, 56,.14), transparent) right / 14px 100% no-repeat,
		#fff;
	background-attachment: local, local, scroll, scroll, local;
}

/* Header utility bar: links were near invisible on the red. Elementor emits
   widget IDs as .elementor-element-<id>, not #<id>, so an ID selector here
   never matches. */
.elementor-element-scblutilr a,
.elementor-element-scblutill a {
	color: #fff !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	padding-bottom: 1px;
}

.elementor-element-scblutilr a:hover,
.elementor-element-scblutill a:hover {
	border-bottom-color: #fff;
	color: #fff !important;
}

/* Footer links were red on near black, which fails badly. */
/* Blanket footer link colour. It is !important, so any footer component that
   needs its own link colour - the rail's buttons, for one - has to say so
   with !important too. See the footer rail block at the end of this file. */
.elementor-location-footer a {
	color: #9FB6D9 !important;
	text-decoration: none;
}

.elementor-location-footer a:hover {
	color: #fff !important;
	text-decoration: underline;
}

@media (max-width: 767px) {
	/* The logo rendered enormous at phone width. */
	.elementor-location-header .elementor-widget-image img { max-width: 108px; }

	/* Utility strip should be a quiet line, not a headline. */
	.elementor-element-scblutill p { font-size: 11px !important; line-height: 1.4 !important; }
	.elementor-element-scblutilr p { font-size: 12px !important; text-align: center !important; }

	.scbl-hero-inner { padding-top: 44px; padding-bottom: 36px; }
}

/* ---------- Feature banner ---------- */

.scbl-banner {
	position: relative;
	margin: 0 0 8px;
	background: linear-gradient(100deg, var(--scbl-ink-deep) 0%, var(--scbl-navy-2) 100%);
	color: #fff;
	overflow: hidden;
	/* No rules above or below: the banner sits directly against the hero and
	   the strip, and the team colour is already carried by the logo plate. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

.scbl-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('img/ice.png');
	background-size: 900px auto;
	opacity: .9;
	mix-blend-mode: screen;
	pointer-events: none;
}

.scbl-banner-inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin-inline: auto;
	padding: 26px 16px;
}

.scbl-banner-kicker {
	display: block;
	margin-bottom: 12px;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #ffc733;
}

.scbl-banner-champ-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.scbl-banner-logo {
	width: 104px;
	height: 104px;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
	padding: 8px;
	flex: 0 0 auto;
}

.scbl-banner-champ-text { flex: 1 1 240px; }

.scbl-banner-champ-text h2 {
	margin: 0;
	font-family: var(--scbl-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .95;
	font-size: clamp(2.1rem, 5.5vw, 3.4rem);
}

.scbl-banner-champ-text h2 a { color: #fff; text-decoration: none; }
.scbl-banner-champ-text h2 a:hover { color: #ffc733; }

.scbl-banner-champ-sub {
	margin: 4px 0 0;
	font-family: var(--scbl-display);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .9375rem;
	color: rgba(255, 255, 255, .7);
}

.scbl-banner-record {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.scbl-banner-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 68px;
	padding: 10px 8px;
	background: rgba(255, 255, 255, .09);
	border-radius: 4px;
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
}

.scbl-banner-stat b {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	margin-bottom: 3px;
}

/* Next-game variant */
.scbl-banner-match {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.scbl-banner-team {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.6rem;
	text-transform: uppercase;
}

.scbl-banner-team img { width: 46px; height: 46px; object-fit: contain; }

.scbl-banner-vs {
	font-family: var(--scbl-display);
	font-weight: 600;
	color: rgba(255, 255, 255, .55);
	text-transform: uppercase;
	letter-spacing: .1em;
}

.scbl-banner-meta {
	display: block;
	margin-top: 10px;
	color: rgba(255, 255, 255, .72);
	font-size: .9375rem;
}

/* ---------- Game cards, rebuilt ---------- */

.hc-game {
	grid-template-columns: 1fr auto 1fr;
	gap: 10px 14px;
	padding: 16px 18px;
	border-bottom: 1px solid #e6ebf2;
	transition: background .12s ease;
}

.hc-game:hover { background: #eef3fb; }

.hc-game .hc-team-cell {
	gap: 12px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
}

.hc-game-home .hc-team-cell { flex-direction: row-reverse; }

.hc-game .hc-team-logo { width: 40px; height: 40px; }

.hc-game .hc-team-cell a {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.hc-game-score {
	min-width: 104px;
	text-align: center;
	font-size: 1.5rem;
	padding: 6px 14px;
	background: var(--scbl-ink-deep);
	color: #fff;
	border-radius: 4px;
}

.hc-game-score a { color: #fff; }

.hc-game-meta {
	padding-top: 4px;
	color: var(--scbl-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.hc-game { padding: 12px 10px; }
	.hc-game .hc-team-cell,
	.hc-game .hc-team-cell a { font-size: .9375rem; }
	.hc-game .hc-team-logo { width: 30px; height: 30px; }
	.hc-game-score { min-width: 74px; font-size: 1.15rem; padding: 5px 8px; }
	.scbl-banner-logo { width: 74px; height: 74px; }
	.scbl-banner-stat { min-width: 56px; }
	.scbl-banner-stat b { font-size: 1.35rem; }
}

/* ---------- Team stat strip: proper columns ---------- */

.hc-statline {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0;
	border-radius: var(--scbl-radius);
	overflow: hidden;
}

.hc-statline-item {
	min-width: 0;
	padding: 18px 6px;
	border-right: 1px solid rgba(255, 255, 255, .12);
}

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

@media (max-width: 900px) {
	.hc-statline { grid-template-columns: repeat(4, 1fr); }
	/* With 4 per row the 4th and 8th sit at the edge, so drop their divider. */
	.hc-statline-item:nth-child(4n) { border-right: 0; }
	.hc-statline-item:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.12); }
}

@media (max-width: 480px) {
	.hc-statline { grid-template-columns: repeat(4, 1fr); }
	.hc-statline-value { font-size: 1.4rem; }
	.hc-statline-item { padding: 12px 4px; }
}

/* ---------- Schedule and results read as one grouped block ---------- */

.hc-schedule-group {
	border-radius: var(--scbl-radius);
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #f4f7fc 100%);
	box-shadow:
		0 1px 0 rgba(0, 32, 56, .06),
		0 10px 26px -12px rgba(0, 32, 56, .38);
	border-top: 3px solid var(--scbl-ink-deep);
}

.hc-schedule-group .hc-game {
	background: transparent;
	border-bottom: 1px solid rgba(0, 32, 56, .07);
}

.hc-schedule-group .hc-game:nth-child(even) {
	background: rgba(0, 32, 56, .022);
}

.hc-schedule-group .hc-game:last-child { border-bottom: 0; }
.hc-schedule-group .hc-game:hover { background: rgba(14, 76, 146, .07); }

/* Compact leaderboards live inside narrow cards, where the full stat line
   overflows and gets clipped. */
.hc-compact { padding-inline: 0; max-width: none; }
.hc-compact table.hc-table { min-width: 0; font-size: .875rem; }
.hc-compact .hc-table-scroll { border-radius: 0; box-shadow: none; background: #fff; }
.hc-compact table.hc-table th,
.hc-compact table.hc-table td { padding: 9px 10px; }
.hc-compact table.hc-table th:first-child,
.hc-compact table.hc-table td:first-child { min-width: 0; }
.hc-compact .hc-team-cell { gap: 7px; }
.hc-compact .hc-team-logo { width: 22px; height: 22px; }
.hc-compact .hc-empty { margin: 16px; }

/* ---------- Game strip ---------- */

.hc-strip {
	max-width: 1140px;
	margin: 0 auto 10px;
	padding: 22px 16px 6px;
}

.hc-strip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	padding-left: 14px;
	position: relative;
}

.hc-strip-head::before {
	content: '';
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .12em;
	width: 5px;
	background: var(--scbl-red);
}

.hc-strip-head h2 {
	margin: 0;
	font-family: var(--scbl-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	color: var(--scbl-ink-deep);
	line-height: 1.05;
}

.hc-strip-nav { display: flex; gap: 6px; }

.hc-strip-btn {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 3px;
	background: var(--scbl-red);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .12s ease, opacity .12s ease;
}

.hc-strip-btn:hover:not(:disabled) { background: var(--scbl-red-dark); }
.hc-strip-btn:disabled { opacity: .28; cursor: default; }

/* Native horizontal scroll with snapping. Works without the arrows. */
.hc-strip-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--hc-strip-show) - 1) * 14px) / var(--hc-strip-show));
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #c3ccdb transparent;
}

.hc-strip-rail::-webkit-scrollbar { height: 6px; }
.hc-strip-rail::-webkit-scrollbar-thumb { background: #c3ccdb; border-radius: 99px; }

/* Selector is deliberately specific: Elementor ships `.elementor a
   { box-shadow: none }` at specificity 0,1,1, which outranks a single class
   and silently flattened these cards once the homepage moved into Elementor. */
.hc-strip a.hc-strip-card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	background: #fff;
	border-radius: 6px;
	/* Hairline stroke all the way round, with the top edge kept heavier so the
	   card still reads as a card rather than a plain box. */
	border: 1px solid #dbe3ee;
	border-top: 3px solid var(--scbl-ink-deep);
	box-shadow:
		0 1px 2px rgba(0, 32, 56, .07),
		0 10px 22px -10px rgba(0, 32, 56, .28);
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
	min-width: 0;
}

.hc-strip a.hc-strip-card:hover {
	transform: translateY(-4px);
	border-color: #c9d5e6;
	border-top-color: var(--scbl-red);
	box-shadow:
		0 2px 4px rgba(0, 32, 56, .1),
		0 18px 34px -14px rgba(0, 32, 56, .45);
}

.hc-strip-date {
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--scbl-royal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hc-strip-date em { font-style: normal; color: var(--scbl-muted); }

.hc-strip-row {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.hc-strip-row img { width: 30px; height: 30px; object-fit: contain; }
.hc-strip-nologo { width: 30px; height: 30px; }

.hc-strip-team {
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: 1.0625rem;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
	line-height: 1.1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.hc-strip-score {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.35rem;
	color: var(--scbl-muted);
	font-variant-numeric: tabular-nums;
}

.hc-strip-row.is-winner .hc-strip-team { color: var(--scbl-ink-deep); }
.hc-strip-row.is-winner .hc-strip-score { color: var(--scbl-red); }

.hc-strip-foot {
	margin-top: 2px;
	padding-top: 8px;
	border-top: 1px solid #eaeff7;
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--scbl-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 900px) {
	.hc-strip-rail { grid-auto-columns: calc((100% - 14px) / 2); }
}

@media (max-width: 560px) {
	.hc-strip-rail { grid-auto-columns: 78%; }
	.hc-strip-team { font-size: .9375rem; }
}

/* ---------- Interactive stats sheet ---------- */

.hc-sheet { margin: 8px 0 40px; }

.hc-sheet-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 16px;
	background: var(--scbl-ink-deep);
	border-radius: 4px 4px 0 0;
	border-bottom: 3px solid var(--scbl-red);
}

.hc-sheet-season {
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #ffc733;
	white-space: nowrap;
}

.hc-sheet-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-left: auto;
}

.hc-sheet-tab {
	border: 0;
	cursor: pointer;
	padding: 9px 16px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background .12s ease;
}

.hc-sheet-tab:hover { background: rgba(255, 255, 255, .2); }
.hc-sheet-tab.is-active { background: var(--scbl-red); }

.hc-sheet-panel {
	padding: 4px 0 0;
	background: transparent;
}

.hc-sheet-block { margin: 0 0 26px; }

.hc-sheet-block h3 {
	margin: 22px 0 10px;
	padding-left: 12px;
	position: relative;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.35rem;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.hc-sheet-block h3::before {
	content: '';
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 4px;
	background: var(--scbl-royal);
}

/* Panels inside the sheet already sit in a constrained wrapper. */
.hc-sheet .hc-wrap { padding-inline: 0; max-width: none; }

/* Without JavaScript every panel shows, one after another, rather than the
   page appearing empty. The script hides all but the active one. */
.hc-sheet-panel[hidden] { display: none; }

@media (max-width: 700px) {
	.hc-sheet-head { flex-direction: column; align-items: flex-start; }
	.hc-sheet-tabs { margin-left: 0; }
	.hc-sheet-tab { font-size: .9375rem; padding: 8px 12px; }
}

/* The whole strip card is one anchor, so every span inside was inheriting the
   theme's link colour and underline. Reset it and re-assert our own. */
.hc-strip-card,
.hc-strip-card:hover,
.hc-strip-card * {
	text-decoration: none !important;
}

.hc-strip-card .hc-strip-date { color: var(--scbl-royal); }
.hc-strip-card .hc-strip-date em { color: var(--scbl-muted); }
.hc-strip-card .hc-strip-team { color: var(--scbl-ink-deep); }
.hc-strip-card .hc-strip-score { color: var(--scbl-muted); }
.hc-strip-card .hc-strip-foot { color: var(--scbl-muted); }

/* Only the winning side is called out. */
.hc-strip-card .hc-strip-row.is-winner .hc-strip-score { color: var(--scbl-red); }
.hc-strip-card .hc-strip-row.is-winner .hc-strip-team { color: var(--scbl-ink-deep); font-weight: 800; }

/* Losing side sits back so the result is readable at a glance. */
.hc-strip-card .hc-strip-row:not(.is-winner) .hc-strip-team { color: #55617a; }
.hc-strip-card .hc-strip-row:not(.is-winner) img { opacity: .78; }

/* ---------- Homepage two column layout ---------- */

.scbl-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 30px;
	align-items: start;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
}

.scbl-main { min-width: 0; }

.scbl-side {
	min-width: 0;
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.scbl-side .hc-wrap { padding-inline: 0; max-width: none; }
.scbl-side .hc-section-title { margin-top: 0; }

/* Sidebar cards */
.scbl-widget {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 8px 22px -14px rgba(0, 32, 56, .5), 0 1px 0 rgba(0, 32, 56, .06);
	border-top: 3px solid var(--scbl-ink-deep);
}

.scbl-widget-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 15px;
	background: var(--scbl-ink-deep);
	border-bottom: 3px solid var(--scbl-red);
}

.scbl-widget-head h2 {
	margin: 0;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1;
}

.scbl-widget-head a {
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9FB6D9;
	text-decoration: none;
	white-space: nowrap;
}

.scbl-widget-head a:hover { color: #fff; }

.scbl-widget-body { padding: 15px; }
.scbl-widget-body > .hc-wrap:first-child { margin-top: 0; }

.scbl-widget-body p { margin: 0 0 10px; line-height: 1.6; font-size: .9375rem; }
.scbl-widget-body p:last-child { margin-bottom: 0; }

.scbl-widget-body h3 {
	margin: 16px 0 2px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.1rem;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.scbl-widget-body h3:first-child { margin-top: 0; }

.scbl-when {
	margin: 0 0 6px !important;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--scbl-royal);
}

.scbl-cost {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 9px;
	background: var(--scbl-red);
	color: #fff;
	border-radius: 3px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .9375rem;
}

.scbl-divider {
	height: 1px;
	background: #e6ebf2;
	margin: 14px 0;
}

/* Compact standings for the sidebar */
.hc-standings-compact { box-shadow: none; border-radius: 0; }
.hc-standings-compact table.hc-table { min-width: 0; font-size: .875rem; }
.hc-standings-compact table.hc-table th,
.hc-standings-compact table.hc-table td { padding: 8px 8px; }
.hc-standings-compact table.hc-table th:first-child,
.hc-standings-compact table.hc-table td:first-child { min-width: 0; width: 2rem; text-align: center; }
.hc-standings-compact .hc-team-cell { gap: 7px; }
.hc-standings-compact .hc-team-logo { width: 22px; height: 22px; }
.hc-standings-compact .hc-team-cell a { font-size: .875rem; }

/* Registration CTA */
.scbl-cta {
	background: linear-gradient(140deg, var(--scbl-ink-deep), var(--scbl-navy-2));
	border-top-color: var(--scbl-red);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.scbl-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('img/ice.png');
	background-size: 520px auto;
	opacity: .8;
	mix-blend-mode: screen;
	pointer-events: none;
}

.scbl-cta > * { position: relative; z-index: 1; }
.scbl-cta .scbl-widget-body { padding: 20px 18px; }
.scbl-cta h2 {
	margin: 0 0 6px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.65rem;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.05;
}
.scbl-cta p { color: rgba(255,255,255,.8); }
.scbl-cta .scbl-btn { margin-top: 12px; width: 100%; text-align: center; }

/* Google Form embed */
.hc-formwrap {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 10px 26px -14px rgba(0, 32, 56, .5);
	overflow: hidden;
}

.hc-formwrap iframe { display: block; width: 100%; border: 0; }

@media (max-width: 980px) {
	.scbl-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.scbl-side { position: static; }
}

/* Shorter hero for interior pages. */
.scbl-hero-sm .scbl-hero-inner { padding-top: clamp(34px, 5vw, 58px); padding-bottom: clamp(28px, 4vw, 44px); }
.scbl-hero-sm .scbl-hero-title { font-size: clamp(2.2rem, 7vw, 4rem); }

/* ---------- Filters ---------- */

.hc-filters {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	background: #fff;
	border-radius: 4px;
	border-left: 5px solid var(--scbl-royal);
	box-shadow: 0 6px 18px -12px rgba(0, 32, 56, .45);
	margin-bottom: 18px;
}

.hc-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--scbl-muted);
}

.hc-filters select {
	min-width: 160px;
	padding: 8px 10px;
	border: 1px solid #d3dbe8;
	border-radius: 3px;
	background: #fff;
	font-family: var(--scbl-body);
	font-size: .9375rem;
	color: var(--scbl-ink-deep);
}

.hc-filters-go {
	padding: 9px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--scbl-ink-deep);
	color: #fff;
	cursor: pointer;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hc-filters-go:hover { background: var(--scbl-red); }

/* ---------- Sticky name column on narrow screens ----------
 * A 70 row stats table scrolled sideways on a phone loses the player name,
 * which makes every other column meaningless.
 */

@media (max-width: 782px) {
	table.hc-table th:first-child,
	table.hc-table td:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #fff;
		box-shadow: 2px 0 0 rgba(0, 32, 56, .07);
	}

	table.hc-table thead th:first-child {
		z-index: 3;
		background: var(--scbl-ink-deep);
	}

	table.hc-table tbody tr:nth-child(even) td:first-child { background: #f7f9fc; }
	table.hc-table tbody tr:hover td:first-child { background: #eaf0fa; }

	/* The leader rail has to sit above the sticky background. */
	table.hc-table:not(.hc-table--unranked) tbody tr:first-child td:first-child {
		box-shadow: inset 4px 0 0 var(--scbl-red), 2px 0 0 rgba(0, 32, 56, .07);
	}

	table.hc-table--unranked tbody tr:first-child td:first-child {
		box-shadow: 2px 0 0 rgba(0, 32, 56, .07);
	}
}

/* ---------- Stats freshness line ---------- */

.hc-updated {
	margin: -4px 0 16px;
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--scbl-muted);
}

.hc-updated strong { color: var(--scbl-ink-deep); font-weight: 800; }


/* ---------- Two bar header, club style ----------
 * An identity bar carrying the mark and the links people actually came for,
 * over a separate nav bar. Splitting them means the nav can run edge to edge
 * without competing with the wordmark, which is how club sites handle a long
 * menu.
 */

.elementor-element-scblident .elementor-widget-image img {
	display: block;
}

/* Quick links: pills, so they read as actions rather than more navigation. */
.scbl-quick {
	display: inline-block;
	margin-left: 10px;
	padding: 6px 12px;
	border-radius: 3px;
	color: #fff !important;
	text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, .28);
	transition: background .12s ease, border-color .12s ease;
	white-space: nowrap;
}

.scbl-quick:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .55);
}

/* One of them is the actual call to action, so it gets the accent. */
.scbl-quick-cta {
	background: var(--scbl-red);
	border-color: var(--scbl-red);
}

.scbl-quick-cta:hover {
	background: #8c1a22;
	border-color: #8c1a22;
}

/* Nav bar: items run full height so the hover fill reads as a tab. */
.elementor-element-scblnavbar .elementor-nav-menu > li > a {
	height: 100%;
}

.elementor-element-scblnavbar {
	border-bottom: 3px solid var(--scbl-ink-deep);
}

@media (max-width: 900px) {
	.elementor-element-scblident .elementor-widget-heading .elementor-heading-title {
		font-size: 22px;
	}

	.scbl-quick { margin-left: 6px; padding: 5px 9px; font-size: 13px; }
}

@media (max-width: 767px) {
	.elementor-element-scblidright p { text-align: left !important; }
	.scbl-quick { margin: 4px 6px 0 0; }
	.elementor-element-scblnavbar { padding-top: 4px; padding-bottom: 4px; }
}

/* ---------- Game strip on a dark ground ----------
 * The strip now sits directly under the hero, so it carries a dark band and
 * the white cards read as lifted off it. Only the chrome around the cards
 * needs inverting; the cards themselves are unchanged.
 */

.elementor-element-hpband,
.elementor-element-hpstrip {
	position: relative;
}

.elementor-element-hpband .hc-strip-head h2,
.elementor-element-hpstrip .hc-strip-head h2 {
	color: #fff;
}

.elementor-element-hpband .hc-strip-btn,
.elementor-element-hpstrip .hc-strip-btn {
	background: var(--scbl-red);
	border: 0;
	color: #fff;
}

.elementor-element-hpband .hc-strip-btn:hover:not(:disabled),
.elementor-element-hpstrip .hc-strip-btn:hover:not(:disabled) {
	background: var(--scbl-red-dark);
}

.elementor-element-hpband .hc-strip-btn:disabled,
.elementor-element-hpstrip .hc-strip-btn:disabled {
	opacity: .3;
}

/* Scrollbar has to invert too or it disappears into the dark. */
.elementor-element-hpband .hc-strip-rail,
.elementor-element-hpstrip .hc-strip-rail {
	scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.elementor-element-hpband .hc-strip-rail::-webkit-scrollbar-thumb,
.elementor-element-hpstrip .hc-strip-rail::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .3);
}

/* Cards gain a little more separation against dark than they need on white. */
.elementor-element-hpband .hc-strip a.hc-strip-card,
.elementor-element-hpstrip .hc-strip a.hc-strip-card {
	border-color: transparent;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, .28),
		0 14px 30px -12px rgba(0, 0, 0, .55);
}

.elementor-element-hpband .hc-strip a.hc-strip-card:hover,
.elementor-element-hpstrip .hc-strip a.hc-strip-card:hover {
	border-color: transparent;
	box-shadow:
		0 3px 6px rgba(0, 0, 0, .34),
		0 22px 42px -14px rgba(0, 0, 0, .65);
}

/* The banner now follows the strip, so it needs a top edge of its own to
   separate it from the dark band above. */
.scbl-banner {
	border-top: 1px solid rgba(255, 255, 255, .1);
}


/* ---------- Bright red nav bar ----------
 * Both brand colours are now high-lightness, which puts them at 1.3:1 against
 * each other. Neither can carry state inside the other, so the active and
 * hover tab uses the identity ink: 3.3:1 against the red bar, and it reads as
 * a continuation of the bar above rather than a third colour.
 */

.elementor-element-scblnavbar {
	border-bottom: 3px solid #002038;
}

.elementor-element-scblident .scbl-quick-cta {
	background: #a8202a;
	border-color: #d8323f;
}

.elementor-element-scblident .scbl-quick-cta:hover {
	background: #8c1a22;
	border-color: #8c1a22;
}

/* Removing the stray wpautop <br> left the "complete through" line sitting
   directly against the nav bar. It needs its own breathing room rather than
   borrowing it from a markup accident. */
.page-content > .hc-wrap:first-child,
.page-content > p:first-child > .hc-wrap {
	padding-top: 26px;
}

/* ---------- Team page ----------
 * The kit sets `.elementor-kit-4 a` and `.elementor-kit-4 a:hover`, both at
 * 0,1,1. Every plugin link styled on a bare class loses to that, which is how
 * the sponsor button ended up with blue text on a red fill and red-on-red when
 * hovered. Everything here is written at 0,2,1 or higher so the component wins
 * on the cascade rather than on !important.
 */

.hc-team-header,
.hc-player-header {
	padding: 30px 24px;
	min-height: 148px;
	align-items: center;
}

/* The mark gets a plate of its own so a logo with a transparent or white
   ground does not dissolve into the team colour behind it. */
.hc-team-header .hc-team-header-logo {
	width: 108px;
	height: 108px;
	padding: 8px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}

.hc-team-header .hc-team-header-text {
	flex: 1 1 auto;
	min-width: 0;
}

.hc-team-header-meta,
.hc-player-header-meta {
	margin-top: 8px;
}

/* ---------- Sponsor button ---------- */

.hc-sponsor-wrap {
	margin: 16px 0 0;
}

.hc-wrap a.hc-sponsor {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 4px;
	color: #fff;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* Solid white on hover, with the team colour as the text. Every team colour in
   use clears 5.8:1 on white, the weakest being the red at 5.85. */
.hc-wrap a.hc-sponsor:hover,
.hc-wrap a.hc-sponsor:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--scbl-team, var(--scbl-ink-deep));
	text-decoration: none;
}

.hc-wrap a.hc-sponsor:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Drawn rather than a glyph, so it inherits colour and needs no icon font. */
.hc-sponsor-mark {
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	overflow: visible;
}

/* Wide screens: the header had a large empty right side while everything
   crowded the left. The button moves into it. */
@media (min-width: 860px) {
	.hc-team-header {
		padding-right: 240px;
	}

	.hc-team-header .hc-sponsor-wrap {
		position: absolute;
		right: 26px;
		bottom: 26px;
		z-index: 2;
		margin: 0;
	}
}

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

/* A finished game and a scheduled one used the same solid dark pill, so "at"
   read as if it were a score. The upcoming pill is now outlined and quiet. */
.hc-schedule-group .hc-game--scheduled .hc-game-score {
	background: transparent;
	border: 1px dashed var(--scbl-line);
	box-shadow: none;
}

.hc-schedule-group .hc-game--scheduled .hc-game-score a {
	color: var(--scbl-muted);
	font-size: .8125rem;
	letter-spacing: .12em;
}

.hc-schedule-group .hc-game--scheduled:hover .hc-game-score {
	border-color: var(--scbl-blue);
	border-style: solid;
}

.hc-schedule-group .hc-game--scheduled:hover .hc-game-score a {
	color: var(--scbl-blue);
}

/* Give the row's own team a touch more weight than its opponent so a season
   of results can be scanned down one side. */
.hc-schedule-group .hc-game-meta {
	color: var(--scbl-muted);
}

.hc-wrap a.hc-boxscore-link {
	color: var(--scbl-blue);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(14, 76, 146, .35);
}

.hc-wrap a.hc-boxscore-link:hover {
	color: var(--scbl-red);
	border-bottom-color: var(--scbl-red);
	text-decoration: none;
}

/* Team names inside tables and game rows are links, and the kit was turning
   them red with an underline on hover. */
.hc-wrap .hc-team-cell a,
.hc-wrap .hc-game-away a,
.hc-wrap .hc-game-home a {
	color: var(--scbl-ink-deep);
	text-decoration: none;
}

.hc-wrap .hc-team-cell a:hover,
.hc-wrap .hc-game-away a:hover,
.hc-wrap .hc-game-home a:hover {
	color: var(--scbl-blue);
	text-decoration: none;
}

/* Player names in the roster, same reason. */
.hc-wrap table.hc-table tbody td a {
	color: var(--scbl-ink-deep);
	text-decoration: none;
}

.hc-wrap table.hc-table tbody td a:hover {
	color: var(--scbl-blue);
	text-decoration: underline;
}

/* ---------- Team bar ----------
 * The top strip of the header. Names are spread edge to edge rather than
 * centred as a group, so the row reads as a league index and not as a second
 * navigation menu competing with the one below it.
 *
 * The strip's own gradient descends into the identity bar's flat colour, so
 * the two rows merge instead of stacking as two visible bands.
 */

.elementor-element-scblteambar {
	background-image: linear-gradient(180deg, #032b4c 0%, #002038 100%);
}

.hc-teambar {
	width: 100%;
}

.hc-teambar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 0 26px;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* Each division is its own run of names. The groups sit at the two ends of the
   strip so the split reads as a grouping rather than as one long list. */
.hc-teambar-group {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0 4px;
}

.hc-teambar-label {
	display: inline-flex;
	align-items: center;
	padding: 9px 10px 8px 0;
	color: rgba(255, 255, 255, .38);
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hc-teambar .hc-teambar-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 9px 6px 8px;
	color: rgba(255, 255, 255, .72);
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.hc-teambar .hc-teambar-item:hover,
.hc-teambar .hc-teambar-item:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* The club's own colour marks it, drawn as an underline that grows in rather
   than a fill, which would be unreadable for the near black teams. */
.hc-teambar .hc-teambar-item::after {
	content: '';
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 0;
	height: 3px;
	background: var(--scbl-team, var(--scbl-red));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.hc-teambar .hc-teambar-item:hover::after,
.hc-teambar .hc-teambar-item:focus-visible::after,
.hc-teambar .hc-teambar-item.is-current::after {
	transform: scaleX(1);
}

/* A near black club colour would vanish against the strip, so the marker for
   those falls back to white. */
.hc-teambar .hc-teambar-item.is-current {
	color: #fff;
}

.hc-teambar .hc-teambar-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

@media (max-width: 1100px) {
	.hc-teambar-inner {
		justify-content: center;
		gap: 0 14px;
	}

	.hc-teambar .hc-teambar-item {
		font-size: .75rem;
		letter-spacing: .05em;
		padding: 8px 5px 7px;
	}

	.hc-teambar-label {
		font-size: .625rem;
		letter-spacing: .12em;
		padding-right: 6px;
	}
}

/* Below this the two runs stop fitting side by side, so each division takes
   its own line rather than the names wrapping mid group. */
@media (max-width: 720px) {
	.hc-teambar-inner {
		gap: 0;
	}

	.hc-teambar-group {
		flex: 1 0 100%;
		justify-content: center;
	}

	.hc-teambar-group + .hc-teambar-group {
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
}

/* The row is a grid container, so the widget was landing in a single column
   and the strip only spanned as far as that cell. Spanning every column lets
   space-between actually distribute the names. */
.elementor-element-scblteambar > .elementor-element {
	grid-column: 1 / -1;
}

.elementor-element-scblteambar .elementor-widget-container,
.elementor-element-scblteambar .elementor-shortcode {
	width: 100%;
}

/* ---------- Team strip disclosure ----------
 * Wide screens never see the control and the list is always laid out; the
 * checkbox only does anything below the breakpoint.
 */

.hc-teambar-check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hc-teambar-summary {
	display: none;
}

.hc-teambar-inner {
	display: flex;
}

@media (max-width: 720px) {
	/* Nine club names is most of a phone screen before any of the site shows,
	   so the strip collapses to a single control. */
	.hc-teambar-summary {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 9px 12px;
		color: rgba(255, 255, 255, .72);
		font-family: var(--scbl-display);
		font-weight: 700;
		font-size: .75rem;
		letter-spacing: .14em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.hc-teambar-summary:hover,
	.hc-teambar-check:checked ~ .hc-teambar-summary {
		color: #fff;
	}

	.hc-teambar-check:focus-visible ~ .hc-teambar-summary {
		outline: 2px solid #fff;
		outline-offset: -2px;
	}

	.hc-teambar-caret {
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .2s ease;
	}

	.hc-teambar-check:checked ~ .hc-teambar-summary .hc-teambar-caret {
		transform: translateY(1px) rotate(-135deg);
	}

	.hc-teambar-check:not(:checked) ~ .hc-teambar-inner {
		display: none;
	}

	.hc-teambar-check:checked ~ .hc-teambar-inner {
		padding-bottom: 8px;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
}

/* ---------- Mobile navigation ----------
 * The nav widget is a flex item in the bar and was sizing to its own content,
 * so at 390px it occupied 251px starting 20px in. Everything inside it
 * inherited that box: the toggle centred on 145 instead of 195, and the
 * dropdown panel stopped short of the right edge.
 */

@media (max-width: 1024px) {
	.elementor-element-scblnavbar > .elementor-element,
	.elementor-element-scblnavbar .elementor-widget-nav-menu,
	.elementor-element-scblnavbar .elementor-widget-container {
		width: 100%;
		flex: 1 1 100%;
	}

	.elementor-element-scblnavbar .elementor-menu-toggle {
		margin-inline: auto;
	}

	/* The panel is a full width sheet under the bar rather than a floating box
	   inset from both edges. Its colours come from the widget now that they are
	   no longer bound to kit globals; only structure is set here. */
	.elementor-element-scblhnav .elementor-nav-menu--dropdown {
		border-radius: 0;
		box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .8);
	}

	.elementor-element-scblhnav .elementor-nav-menu--dropdown a {
		position: relative;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
	}

	/* Submenus sat on the same ground as their parent, so a section and its
	   children read as one flat list. */
	.elementor-element-scblhnav .elementor-nav-menu--dropdown .sub-menu {
		background-color: rgba(0, 0, 0, .3);
	}

	.elementor-element-scblhnav .elementor-nav-menu--dropdown .sub-menu a {
		padding-left: 36px;
		font-size: .875rem;
	}

	.elementor-element-scblhnav .elementor-nav-menu--dropdown .sub-menu a::before {
		content: '';
		position: absolute;
		left: 20px;
		top: 50%;
		width: 7px;
		height: 1px;
		background: rgba(255, 255, 255, .35);
	}
}

/* ---------- Footer ----------
 * Was a single flat block. It now runs in tiers - links, clubs, credit - with
 * the weight carried by a heavier top edge and by real separation between the
 * tiers rather than by more colour.
 */

/* The red top edge is now the footer nav bar itself, so the border that used
   to stand in for it would only make the red band taller than the header's. */
.elementor-location-footer .elementor-element-scblfoot {
	border-top: 0;
	background-image: linear-gradient(180deg, #032b4c 0%, #002038 320px);
}

.elementor-location-footer h3,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
	font-family: var(--scbl-display);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

/* ---------- Club columns ---------- */

.hc-teamcols {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 64px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Groups sit at their natural width rather than stretching to fill the row,
   which was leaving a hand's width of space inside each division. */
.hc-teamcol-group {
	flex: 0 1 auto;
}

.hc-teamcol-head {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, .55);
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hc-teamcol-list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-width: 140px;
	column-gap: 30px;
}

.hc-teamcol-list li {
	margin: 0 0 2px;
	break-inside: avoid;
}

.elementor-location-footer a.hc-teamcol-item {
	position: relative;
	display: block;
	padding: 5px 0 5px 13px;
	color: rgba(255, 255, 255, .8);
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .04em;
	text-decoration: none;
	transition: color .18s ease;
}

/* The club colour is a marker on the leading edge rather than the text
   colour, because the darkest club colours are unreadable as type here. */
.elementor-location-footer a.hc-teamcol-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--scbl-team, var(--scbl-red));
	transition: height .18s ease, margin-top .18s ease, border-radius .18s ease;
}

.elementor-location-footer a.hc-teamcol-item:hover {
	color: #fff;
	text-decoration: none;
}

.elementor-location-footer a.hc-teamcol-item:hover::before {
	height: 16px;
	margin-top: -8px;
	border-radius: 2px;
}

/* ---------- Credit line ---------- */

.elementor-element-scblfecw {
	flex-direction: row;
	align-items: center;
	width: auto;
}

.scbl-builtby {
	margin: 0;
	color: rgba(255, 255, 255, .45);
	font-family: var(--scbl-display);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.elementor-location-footer .elementor-element-scblfeclogo img {
	display: block;
	max-width: 128px;
	height: auto;
	opacity: .78;
	transition: opacity .18s ease;
}

.elementor-location-footer .elementor-element-scblfeclogo a:hover img {
	opacity: 1;
}

/* The credit line was dim enough to read as disabled text. */
.elementor-location-footer .elementor-element-scblfcp p {
	margin: 0;
	color: rgba(255, 255, 255, .55);
	font-size: .875rem;
}

@media (max-width: 720px) {
	.elementor-element-scblfbot {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.hc-teamcol-list {
		columns: 1;
	}
}

/* Elementor containers read their layout from custom properties, so plain
   declarations here are overwritten no matter the specificity. Setting the
   properties themselves is the only way to reach them from a stylesheet. */
.elementor-location-footer .elementor-element-scblfbot {
	--display: flex;
	--flex-direction: row;
	--justify-content: space-between;
	--align-items: center;
	--flex-wrap: wrap;
	--gap: 14px 24px;
}

.elementor-location-footer .elementor-element-scblfecw {
	--display: flex;
	--flex-direction: row;
	--align-items: center;
	--justify-content: flex-end;
	--gap: 0px 14px;
	--padding-bottom: 0px;
	width: auto;
	flex: 0 0 auto;
}

/* The clubs mirror the header strip: divisions at the two ends of the row
   rather than clustered against the left edge. */
.hc-teamcols {
	justify-content: space-between;
}

/* The teams tier was carrying its own bottom padding on top of the divider's
   margins, which opened a gap wider than the tier itself. */
.elementor-location-footer .elementor-element-scblfteams {
	--padding-bottom: 0px;
}

.elementor-location-footer .elementor-element-scblfdiv {
	--margin-block-start: 24px;
	--margin-block-end: 0px;
	margin-top: 24px;
	margin-bottom: 0;
}

/* A boxed Elementor container carries its padding on the inner element, so the
   value set on the outer one never reached the tier. Between that and the
   divider's own block padding the footer had a 70px hole in it. */
.elementor-location-footer .elementor-element-scblfteams > .e-con-inner {
	padding-bottom: 0;
}

.elementor-location-footer .elementor-element-scblfdiv {
	--divider-widget-padding: 0px;
	margin-top: 22px;
}

.elementor-location-footer .elementor-element-scblfdiv .elementor-divider {
	padding-block: 0;
}

/* ---------- Kit link guard ----------
 * The Elementor kit sets `.elementor-kit-4 a` and `a:hover` at specificity
 * 0,1,1, and its stylesheet loads after this one, so any plugin link coloured
 * on a single class loses the tie and silently inherits the kit's blue. That
 * has now produced three separate defects: the sponsor button (blue on red,
 * 1.32:1), the table links, and the score pill (blue on near black, 2.48:1).
 *
 * Every plugin link that carries a colour is restated below at 0,2,1 or
 * higher. Anything added later that colours an anchor belongs here too, not in
 * the component block, or it will lose the same tie.
 */

.hc-wrap .hc-game-score a,
.hc-wrap .hc-game-score a:hover {
	color: #fff;
	text-decoration: none;
}

.hc-wrap .hc-section-title a {
	color: var(--scbl-royal);
	text-decoration: none;
}

.hc-wrap .hc-section-title a:hover {
	color: var(--scbl-red);
	text-decoration: underline;
}

.hc-wrap table.hc-table a,
.hc-wrap .hc-team-cell a,
.hc-wrap .hc-player-cell a {
	color: var(--scbl-ink-deep);
	text-decoration: none;
}

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

/* No reliable ancestor here: the widget heads are Elementor markup, not
   shortcode output. The class is repeated to reach 0,2,1. */
.scbl-widget-head.scbl-widget-head a {
	color: #9fb6d9;
	text-decoration: none;
}

.scbl-widget-head.scbl-widget-head a:hover {
	color: #fff;
	text-decoration: none;
}

/* ---------- Substitute badge ---------- */

.hc-sub-badge {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 5px;
	border-radius: 2px;
	background: rgba(168, 32, 42, .12);
	color: var(--scbl-red);
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: 2px;
}

/* ---------- Buttons vs. the Hello Elementor reset ----------
 * hello-elementor/assets/css/reset.css ships a placeholder button style:
 *
 *   [type=button],[type=submit],button { border:1px solid #c36; color:#c36;
 *                                        background-color:transparent }
 *   [type=button]:hover,[type=submit]:hover,button:hover { background:#c36 }
 *
 * [type=button] is an attribute selector, so it carries the same 0,1,0 weight
 * as a bare .hc-sheet-tab, and the theme's reset is enqueued after this file.
 * The reset therefore won: pink text, a pink 1px outline, and a pink fill on
 * hover. Every plugin button is restated here with its tag name in front,
 * which lifts each rule to 0,1,1 (and the hover pairs to 0,2,1) so ours land
 * regardless of enqueue order. Keep any new plugin button in this block. */

button.hc-sheet-tab {
	border: 0;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	padding: 9px 16px;
	font-size: 1rem;
	white-space: normal;
}

button.hc-sheet-tab:hover,
button.hc-sheet-tab:focus {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

button.hc-sheet-tab.is-active,
button.hc-sheet-tab.is-active:hover,
button.hc-sheet-tab.is-active:focus {
	background: var(--scbl-red);
	color: #fff;
}

button.hc-strip-btn {
	/* reset.css also forces width:auto on buttons, which collapsed these to the
	   width of the arrow glyph, so the box size is restated here too. */
	width: 38px;
	height: 38px;
	border: 0;
	padding: 0;
	background: var(--scbl-red);
	color: #fff;
	font-size: 22px;
}

button.hc-strip-btn:hover:not(:disabled),
button.hc-strip-btn:focus:not(:disabled) {
	background: var(--scbl-red-dark);
	color: #fff;
}

button.hc-strip-btn:disabled,
button.hc-strip-btn:disabled:hover {
	background: var(--scbl-red);
	color: #fff;
	opacity: .28;
}

.elementor-element-hpband button.hc-strip-btn,
.elementor-element-hpstrip button.hc-strip-btn { width: 38px; height: 38px; padding: 0; }

button.hc-filters-go {
	border: 0;
	padding: 9px 20px;
	background: var(--scbl-ink-deep);
	color: #fff;
	font-size: 1rem;
}

button.hc-filters-go:hover,
button.hc-filters-go:focus {
	background: var(--scbl-red);
	color: #fff;
}

@media (max-width: 700px) {
	button.hc-sheet-tab { font-size: .9375rem; padding: 8px 12px; }
}

/* ---------- Footer rail: four columns ----------
 * The footer runs four columns on one rail - brand, Explore, Other Local
 * Hockey, and the quick actions carried over from the header. The fourth
 * column exists because three columns could not fill the rail's width, which
 * left a void under the two link lists and made the whole band read as
 * left-heavy.
 *
 * Anchor colours here are written at 0,2,1 or higher on purpose. See the kit
 * link guard above: `.elementor-kit-4 a` lands at 0,1,1 and its stylesheet is
 * enqueued after this one, so a link coloured on a single class loses the tie.
 */

/* Column headings carry the same red tick used by .hc-section-title and the
   stat sheet blocks, so the footer reads as part of the same system. */
.elementor-location-footer .scbl-fh .elementor-heading-title {
	position: relative;
	display: block;
	padding-left: 13px;
}

.elementor-location-footer .scbl-fh .elementor-heading-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: .16em;
	bottom: .16em;
	width: 4px;
	background: var(--scbl-red);
}

/* ---------- Link lists ---------- */

.elementor-location-footer .scbl-flinks a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	line-height: 1.5;
	text-decoration: none;
	transition: color .14s ease, border-color .14s ease;
}

/* The underline grows on hover rather than the text changing colour, which
   keeps the two lists legible against the dark band at rest. */
.elementor-location-footer .scbl-flinks a:hover,
.elementor-location-footer .scbl-flinks a:focus-visible {
	border-bottom-color: var(--scbl-red);
	text-decoration: none !important;
}

/* ---------- Facebook button in the brand column ---------- */

.elementor-location-footer a.scbl-fb {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 3px;
	color: #fff !important;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .14s ease, border-color .14s ease;
}

.elementor-location-footer a.scbl-fb:hover,
.elementor-location-footer a.scbl-fb:focus-visible {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .55);
	color: #fff !important;
	text-decoration: none !important;
}

/* Drawn as a background rather than inline SVG so the mark survives a round
   trip through the Elementor text editor, which strips svg elements. */
.elementor-location-footer a.scbl-fb::before {
	content: '';
	flex: none;
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.91h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Quick action column ---------- */

.elementor-location-footer .scbl-fcta p { margin: 0; }

.elementor-location-footer a.scbl-fcta-btn {
	display: block;
	margin-bottom: 9px;
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 3px;
	color: #fff !important;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .14s ease, border-color .14s ease;
}

.elementor-location-footer a.scbl-fcta-btn:last-child { margin-bottom: 0; }

.elementor-location-footer a.scbl-fcta-btn:hover,
.elementor-location-footer a.scbl-fcta-btn:focus-visible {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .55);
	color: #fff !important;
	text-decoration: none !important;
}

/* One of the three is the actual call to action, matching .scbl-quick-cta in
   the header. */
.elementor-location-footer a.scbl-fcta-btn--go {
	background: var(--scbl-red);
	border-color: var(--scbl-red);
}

.elementor-location-footer a.scbl-fcta-btn--go:hover,
.elementor-location-footer a.scbl-fcta-btn--go:focus-visible {
	background: var(--scbl-red-dark);
	border-color: var(--scbl-red-dark);
}

/* The brand blurb is the only prose in the rail; holding it to roughly 34
   characters stops it running wider than the crest above it. */
.elementor-location-footer .elementor-element-scblfbtxt p { max-width: 34ch; }
.elementor-location-footer .elementor-element-scblfbtxt p:last-child { margin-bottom: 0; }

/* At tablet the rail drops to two columns, so a full-width button would run
   to nearly 470px and read as a banner rather than an action. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-location-footer a.scbl-fcta-btn { max-width: 260px; }
}

@media (max-width: 767px) {
	.elementor-location-footer a.scbl-fcta-btn { text-align: left; }
	.elementor-location-footer .elementor-element-scblfbtxt p { max-width: none; }
}


/* ---------- Footer nav bar ----------
 * Mirrors the header's red rail at the top of the footer, so the page is
 * bookended by the same bar. Items run the full height of the bar, matching
 * .elementor-element-scblnavbar, so the hover fill reads as a tab.
 *
 * The blanket `.elementor-location-footer a` rule near the top of this file is
 * !important, so it reaches these links too and was turning them #9FB6D9 on
 * red, plus underlining them on hover. Restated here, also !important.
 */

.elementor-location-footer .elementor-element-scblfnav .elementor-nav-menu > li > a {
	height: 100%;
}

.elementor-location-footer .elementor-element-scblfnav .elementor-item,
.elementor-location-footer .elementor-element-scblfnav .elementor-item:hover,
.elementor-location-footer .elementor-element-scblfnav .elementor-item:focus,
.elementor-location-footer .elementor-element-scblfnav .elementor-item.elementor-item-active,
.elementor-location-footer .elementor-element-scblfnav .elementor-sub-item,
.elementor-location-footer .elementor-element-scblfnav .elementor-sub-item:hover {
	color: #fff !important;
	text-decoration: none !important;
}

/* Never collapses to a burger, so below the desktop rail the items wrap and
   centre rather than running off the edge. */
@media (max-width: 1024px) {
	.elementor-location-footer .elementor-element-scblfnav .elementor-nav-menu {
		flex-wrap: wrap;
		justify-content: center;
	}

	.elementor-location-footer .elementor-element-scblfnav .elementor-item {
		padding: 11px 12px !important;
	}
}

@media (max-width: 600px) {
	.elementor-location-footer .elementor-element-scblfnav .elementor-item {
		padding: 9px 9px !important;
		font-size: 15px;
		letter-spacing: 1px;
	}
}

/* ---------- Team columns on a page ----------
 * [hc_team_columns] was written for the dark strip that used to sit above the
 * logo, so its heading is white and its links are near white. Dropped onto the
 * white Teams page the division headings vanished entirely and the groups
 * spread themselves across the full width with space-between.
 *
 * The dark treatment stays scoped to the header and footer; in page content
 * the component gets ink on paper and an even grid.
 */
.hc-wrap .hc-teamcols,
.page-content .hc-teamcols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 30px 34px;
	justify-content: start;
	padding-top: 0;
	border-top: 0;
}

.hc-wrap .hc-teamcol-group,
.page-content .hc-teamcol-group { flex: none; }

.hc-wrap .hc-teamcol-head,
.page-content .hc-teamcol-head {
	margin: 0 0 10px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--scbl-red);
	color: var(--scbl-ink-deep);
	font-size: .8125rem;
	letter-spacing: .14em;
}

.hc-wrap .hc-teamcol-list,
.page-content .hc-teamcol-list { columns: 1; }

.hc-wrap a.hc-teamcol-item,
.page-content a.hc-teamcol-item {
	/* the marker is absolutely positioned, so the link has to be its anchor */
	position: relative;
	display: block;
	padding: 6px 0 6px 14px;
	color: var(--scbl-ink-deep);
	font-family: var(--scbl-body);
	font-weight: 500;
	font-size: .9375rem;
	letter-spacing: 0;
	text-decoration: none;
}

.hc-wrap a.hc-teamcol-item::before,
.page-content a.hc-teamcol-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--scbl-team, var(--scbl-royal));
	transition: height .18s ease, margin-top .18s ease, border-radius .18s ease;
}

.hc-wrap a.hc-teamcol-item:hover,
.page-content a.hc-teamcol-item:hover { color: var(--scbl-royal); }

.hc-wrap a.hc-teamcol-item:hover::before,
.page-content a.hc-teamcol-item:hover::before {
	height: 16px;
	margin-top: -8px;
	border-radius: 2px;
}

/* ---------- Sortable table headers ---------- */
table.hc-table th.hc-sortable {
	cursor: pointer;
	position: relative;
	padding-right: 20px;
	user-select: none;
}

table.hc-table th.hc-sortable::after {
	content: '';
	position: absolute;
	right: 7px;
	top: 50%;
	margin-top: -5px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .28;
}

table.hc-table th.hc-sorted-asc::after {
	border-top: 0;
	border-bottom: 5px solid currentColor;
	opacity: 1;
}

table.hc-table th.hc-sorted-desc::after { opacity: 1; }

table.hc-table th.hc-sortable:hover::after { opacity: .7; }

table.hc-table th.hc-sortable:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* The rank column is positional, so it stops being true once a visitor sorts
   on something else. */
table.hc-resorted td.hc-rank,
table.hc-resorted th.hc-rank { opacity: .35; }

/* A four item statline on a content page should span the rail rather than
   huddle at the left, which is what fixed width items were doing. */
.hc-wrap > .hc-statline { display: flex; }
.hc-wrap > .hc-statline .hc-statline-item { flex: 1 1 0; }

/* ---------- Teams mega menu ----------
 * Nine divisions, each holding its clubs. As an ordinary nested dropdown that
 * is a 48 item flyout chain, so on desktop the panel is laid out as columns.
 *
 * Laid out with multi column rather than grid on purpose. Elementor opens and
 * closes a dropdown by writing display:block then display:none inline, so any
 * rule that forces `display` has to guess which of those two states it is in.
 * An earlier attempt matched [style*="display"], which is true of BOTH, so the
 * panel reopened the moment it was told to close and then stayed put. Columns
 * work on the display:block the menu already sets, which leaves opening and
 * closing entirely to Elementor.
 */
@media (min-width: 1025px) {
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu {
		column-count: 5;
		column-gap: 26px;
		width: max-content;
		max-width: min(94vw, 1160px);
		padding: 24px 26px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	/* A division and its clubs must not be split across two columns. */
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu > li {
		break-inside: avoid;
		page-break-inside: avoid;
		display: block;
		margin-bottom: 16px;
	}

	/* Division heading: a label, not a target. */
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu > li > a.elementor-sub-item {
		padding: 0 0 7px !important;
		margin-bottom: 8px;
		border-bottom: 2px solid var(--scbl-red);
		background: none !important;
		color: #fff !important;
		font-family: var(--scbl-display);
		font-weight: 800;
		font-size: .8125rem;
		letter-spacing: .13em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* Clubs sit in the column instead of flying out. Safe to force: the panel
	   above them is what hides, and it takes these with it. */
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu > li > .sub-menu {
		position: static !important;
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-height: none !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu > li > .sub-menu a {
		padding: 5px 0 !important;
		background: none !important;
		color: #c8d6e8 !important;
		font-family: var(--scbl-body);
		font-weight: 500;
		font-size: .875rem;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
	}

	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu > li > .sub-menu a:hover {
		color: #fff !important;
		text-decoration: underline;
	}

	/* A caret on the heading would promise a flyout that is already open. */
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-21 > .sub-menu .sub-arrow { display: none !important; }
}

/* On a phone the club list would be 39 accordion rows, so the menu stops at
   the division, which links to that division on the Teams page. */
@media (max-width: 1024px) {
	.elementor-nav-menu--dropdown li.menu-item-21 .sub-menu .sub-menu { display: none !important; }
	.elementor-nav-menu--dropdown li.menu-item-21 .sub-menu .sub-arrow { display: none !important; }
}


/* ================= Content cards =================
 * The old card was a white box with a thick coloured bar down its left edge,
 * repeated for every list on every page. It read as a generic admin panel
 * rather than as this tournament. These replace it: a hairline card, a tinted
 * icon chip, and a red rule under the title that ties back to the section
 * headings used across the site.
 *
 * Icons are stroke SVGs carried as data URIs. Inline <svg> does not survive a
 * round trip through the WordPress editor, and an icon font would be another
 * request on a page that does not otherwise need one.
 */
.sns-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 18px;
	margin: 0 0 34px;
}

.sns-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 22px 24px;
	background: #fff;
	border: 1px solid var(--scbl-line);
	border-radius: var(--scbl-radius);
	box-shadow: 0 1px 2px rgba(0, 32, 56, .05);
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sns-card:hover {
	border-color: var(--scbl-royal);
	box-shadow: 0 10px 24px rgba(0, 32, 56, .1);
	transform: translateY(-2px);
}

.sns-card-icon {
	width: 42px;
	height: 42px;
	margin: 0 0 14px;
	border-radius: 50%;
	background-color: var(--scbl-royal);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px 21px;
	flex: none;
}

.sns-card h3 {
	margin: 0 0 8px;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--scbl-red);
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.sns-card .sns-meta {
	margin: 0 0 8px;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--scbl-royal);
}

.sns-card p { margin: 0 0 6px; font-size: .9375rem; line-height: 1.6; }
.sns-card p:last-child { margin-bottom: 0; }

.sns-card .sns-big {
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	color: var(--scbl-red);
}

/* ---- link rows ---- */
.sns-list { display: grid; gap: 10px; margin: 0 0 34px; }

.sns-list a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 44px 15px 18px;
	background: #fff;
	border: 1px solid var(--scbl-line);
	border-radius: var(--scbl-radius);
	text-decoration: none;
	transition: border-color .16s ease, background .16s ease;
}

.sns-list a:hover { border-color: var(--scbl-royal); background: var(--scbl-surface); }

.sns-list .sns-card-icon { width: 34px; height: 34px; margin: 0; background-size: 17px 17px; }

.sns-list strong {
	display: block;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.sns-list span { display: block; font-size: .875rem; color: var(--scbl-muted); }

.sns-list a::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	opacity: .3;
	transition: opacity .16s ease, transform .16s ease;
}

.sns-list a:hover::after { opacity: .85; transform: translateX(3px); }

@media (max-width: 600px) {
	.sns-card { padding: 18px; }
	.sns-list a { padding: 14px 38px 14px 14px; gap: 12px; }
}
.sns-i-calendar { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2216%22%20rx=%222%22/><path%20d=%22M3%2010h18M8%203v4M16%203v4%22/></svg>"); }
.sns-i-pin { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M12%2021s7-6.4%207-11a7%207%200%201%200-14%200c0%204.6%207%2011%207%2011z%22/><circle%20cx=%2212%22%20cy=%2210%22%20r=%222.6%22/></svg>"); }
.sns-i-money { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%222.5%22%20y=%226%22%20width=%2219%22%20height=%2212%22%20rx=%222%22/><circle%20cx=%2212%22%20cy=%2212%22%20r=%223%22/></svg>"); }
.sns-i-trophy { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M7%204h10v5a5%205%200%200%201-10%200V4z%22/><path%20d=%22M7%206H4v1a3%203%200%200%200%203%203M17%206h3v1a3%203%200%200%201-3%203%22/><path%20d=%22M12%2014v3M9%2021h6%22/></svg>"); }
.sns-i-roster { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M16%2020v-1.5a4%204%200%200%200-4-4H7a4%204%200%200%200-4%204V20%22/><circle%20cx=%229.5%22%20cy=%227.5%22%20r=%223.5%22/><path%20d=%22M20%2020v-1.5a4%204%200%200%200-3-3.87%22/></svg>"); }
.sns-i-whistle { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M3.5%2012.5a5.5%205.5%200%201%200%2011%200h7l-2-3h-5%22/><circle%20cx=%229%22%20cy=%2212.5%22%20r=%221.6%22/></svg>"); }
.sns-i-rules { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%225%22%20y=%223%22%20width=%2214%22%20height=%2218%22%20rx=%222%22/><path%20d=%22M9%208h6M9%2012h6M9%2016h4%22/></svg>"); }
.sns-i-skate { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M5%204h4v9h7a4%204%200%200%201%204%204v2H5z%22/><path%20d=%22M4%2021h17%22/></svg>"); }
.sns-i-puck { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><ellipse%20cx=%2212%22%20cy=%229%22%20rx=%228%22%20ry=%223.2%22/><path%20d=%22M4%209v5c0%201.8%203.6%203.2%208%203.2s8-1.4%208-3.2V9%22/></svg>"); }
.sns-i-mail { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><rect%20x=%222.5%22%20y=%225%22%20width=%2219%22%20height=%2214%22%20rx=%222%22/><path%20d=%22M3%207l9%206%209-6%22/></svg>"); }
.sns-i-arrow { background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M5%2012h13M13%206l6%206-6%206%22/></svg>"); }
.sns-list a::after { background: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23002038'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d=%22M5%2012h13M13%206l6%206-6%206%22/></svg>") center / contain no-repeat; }

/* ---------- Standings on a narrow screen ----------
 * Ten columns at the default cell padding push PTS off the right edge on a
 * tablet, so the number people actually came for is the one they have to
 * scroll to find. The numeric columns tighten first; the team name keeps
 * enough room to stay readable and stays pinned by the sticky column rule.
 */
@media (max-width: 1100px) {
	.hc-wrap table.hc-table { min-width: 0; font-size: .875rem; }

	.hc-wrap table.hc-table th,
	.hc-wrap table.hc-table td { padding: 9px 7px; }

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

	/* Points is the headline number, so it holds its weight as the rest
	   compress. */
	.hc-wrap table.hc-table .hc-pts { font-size: .9375rem; }
}

@media (max-width: 720px) {
	.hc-wrap table.hc-table { font-size: .8125rem; }
	.hc-wrap table.hc-table th,
	.hc-wrap table.hc-table td { padding: 8px 5px; }
	.hc-wrap table.hc-table th:first-child,
	.hc-wrap table.hc-table td:first-child { min-width: 112px; }
}

/* The recent results list on the homepage was as tall as the standings beside
   it; tightening the rows keeps the two columns level. */
.elementor-element-hpmain .hc-game {
	padding-top: 10px;
	padding-bottom: 10px;
}

.elementor-element-hpmain .hc-game-meta { margin-top: 2px; font-size: .75rem; }

/* The month sits after each tournament name as a quiet qualifier. */
.sns-ftours span {
	color: rgba(255, 255, 255, .42);
	font-size: .8125rem;
	letter-spacing: .04em;
}

/* ---------- Notices ----------
 * Two surfaces. The bar is one line across the very top of every page, above
 * the masthead, and is a link rather than the announcement itself: the whole
 * point is that it reads as a stripe, not as content. The notices page then
 * carries the full text with a date stamp.
 */
/* The kit sets `.elementor-kit-4 a` at 0,1,1 from a stylesheet that loads
   after this one, so a bar coloured on one class loses the tie and the text
   comes out kit blue on red. Stated with !important, as the footer links are. */
a.hc-noticebar,
a.hc-noticebar:hover,
a.hc-noticebar:focus,
a.hc-noticebar span {
	color: #fff !important;
	text-decoration: none !important;
}

.hc-noticebar {
	display: block;
	padding: 9px 20px;
	background: var(--scbl-red);
	color: #fff;
	text-decoration: none;
	font-family: var(--scbl-body);
	font-size: .9375rem;
	line-height: 1.3;
	transition: background .14s ease;
}

/* Same rail as the Elementor containers above it. */
.hc-noticebar-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--container-max-width, 1140px);
	margin-inline: auto;
}

.hc-noticebar--normal { background: var(--scbl-royal); }
.hc-noticebar:hover { background: var(--scbl-red-dark); color: #fff; text-decoration: none; }
.hc-noticebar--normal:hover { background: #0a3e7a; }

.hc-noticebar-tag {
	flex: none;
	padding: 3px 8px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .2);
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* One line, whatever the length of the announcement. */
.hc-noticebar-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.hc-noticebar-more {
	flex: none;
	padding-right: 14px;
	position: relative;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
}

.hc-noticebar-more::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -3px;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-left: 5px solid currentColor;
}

@media (max-width: 700px) {
	.hc-noticebar { gap: 9px; padding: 8px 14px; font-size: .875rem; }
	.hc-noticebar-more { display: none; }
}

/* ---- the notices page ---- */
.hc-notices { display: grid; gap: 14px; margin: 0 0 34px; }

.hc-notice {
	display: flex;
	gap: 18px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--scbl-line);
	border-left: 5px solid var(--scbl-royal);
	border-radius: var(--scbl-radius);
	box-shadow: 0 1px 2px rgba(0, 32, 56, .05);
}

.hc-notice--urgent { border-left-color: var(--scbl-red); }

.hc-notice-rail { flex: none; }

.hc-notice-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 58px;
	padding: 8px 0 9px;
	border-radius: var(--scbl-radius);
	background: var(--scbl-surface);
	font-family: var(--scbl-display);
	line-height: 1;
	color: var(--scbl-ink-deep);
}

.hc-notice-mon { font-weight: 800; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--scbl-royal); }
.hc-notice--urgent .hc-notice-mon { color: var(--scbl-red); }
.hc-notice-num { margin: 3px 0 2px; font-weight: 800; font-size: 1.5rem; }
.hc-notice-yr { font-weight: 600; font-size: .625rem; letter-spacing: .1em; color: var(--scbl-muted); }

.hc-notice-body { min-width: 0; }

.hc-notice-tag {
	display: inline-block;
	margin-bottom: 7px;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--scbl-royal);
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.hc-notice--urgent .hc-notice-tag { background: var(--scbl-red); }

.hc-notice-body h3 {
	margin: 0 0 6px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: .02em;
	color: var(--scbl-ink-deep);
}

.hc-notice-body p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--scbl-ink); }

.hc-notice-until {
	display: inline-block;
	margin-top: 9px;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--scbl-muted);
}

@media (max-width: 600px) {
	.hc-notice { flex-direction: column; gap: 12px; padding: 16px; }
	.hc-notice-day { flex-direction: row; gap: 6px; width: auto; padding: 6px 10px; align-self: flex-start; }
	.hc-notice-num { margin: 0; font-size: 1rem; }
}

/* The homepage strip sits between the header and the hero, so it needs air
   above and below without collapsing into either. */
.elementor-element-snsnotice { padding: 16px 20px 4px; }

@media (max-width: 600px) {
	.hc-notice { flex-direction: column; gap: 8px; padding: 13px 15px; }
}

/* The compact standings lives in a sidebar, so every column has to earn its
   width. The team name takes what is left after the numbers, and truncates
   rather than forcing the table wider than its container. */
.hc-standings-compact table.hc-table { width: 100%; table-layout: fixed; }

.hc-standings-compact table.hc-table th,
.hc-standings-compact table.hc-table td { padding: 8px 4px; font-size: .8125rem; }

.hc-standings-compact table.hc-table th:nth-child(2),
.hc-standings-compact table.hc-table td:nth-child(2) {
	width: auto;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hc-standings-compact table.hc-table th:nth-child(n+3),
.hc-standings-compact table.hc-table td:nth-child(n+3) { width: 34px; text-align: center; }

.hc-standings-compact table.hc-table th:last-child,
.hc-standings-compact table.hc-table td:last-child { width: 42px; }

.hc-standings-compact .hc-team-logo { width: 18px; height: 18px; }

/* ---------- Champion cards ----------
 * The results page is really a picture board: the photograph of the winning
 * side is the content, the division and team name label it.
 */
.sns-champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin: 0 0 34px;
}

.sns-champ {
	display: block;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--scbl-line);
	border-radius: var(--scbl-radius);
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sns-champ:hover {
	border-color: var(--scbl-royal);
	box-shadow: 0 12px 26px rgba(0, 32, 56, .12);
	transform: translateY(-2px);
	text-decoration: none;
}

.sns-champ img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.sns-champ-body {
	display: block;
	padding: 16px 18px 18px;
	border-top: 3px solid var(--scbl-red);
}

.sns-champ-div {
	display: block;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--scbl-royal);
}

.sns-champ-team {
	display: block;
	margin: 5px 0 2px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: .02em;
	color: var(--scbl-ink-deep);
}

.sns-champ-meta {
	display: block;
	font-size: .8125rem;
	color: var(--scbl-muted);
}

/* wpautop turns the newlines between block children into <br> and empty <p>
   elements, and inside a grid container each of those takes a cell of its own.
   That is what was scattering the cards. The page content keeps its markup on
   one line; this is the guard for when someone edits a page in the WordPress
   editor and the newlines come back. */
.sns-cards > br, .sns-list > br, .sns-champs > br,
.sns-cards > p:empty, .sns-list > p:empty, .sns-champs > p:empty { display: none; }

/* ---------- Sidebar panel head ----------
 * "Full table" sat on the dark panel head in the kit's link blue, which is
 * close enough to the panel itself to disappear. It becomes a small outlined
 * pill instead, which also makes it read as the control it is.
 */
.elementor-element-hpwstandhd { align-items: center; }

.elementor-element-hpwstandhl a,
.elementor-element-hpwmorehd a {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 3px;
	color: #fff !important;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .14s ease, border-color .14s ease;
}

.elementor-element-hpwstandhl a:hover,
.elementor-element-hpwmorehd a:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .7);
	color: #fff !important;
}

/* ---------- Page banner ----------
 * Mirrors the band a team page opens with, so an interior page arrives the
 * same way rather than starting cold on body copy.
 */
.sns-pagehead {
	position: relative;
	overflow: hidden;
	/* Same escape the hero uses to break out of the constrained content
	   column and run edge to edge. */
	margin: 0 calc(50% - 50vw) 30px;
	width: 100vw;
	border-bottom: 4px solid var(--scbl-red);
	background: linear-gradient(120deg, var(--scbl-ink-deep) 0%, #0a3e7a 100%);
	color: #fff;
}

.sns-pagehead-inner {
	max-width: var(--container-max-width, 1140px);
	margin-inline: auto;
	padding: 34px 20px 36px;
}

.sns-pagehead-eyebrow {
	display: block;
	margin-bottom: 8px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #9dc0ea;
}

.sns-pagehead h1 {
	margin: 0;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	line-height: 1.02;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
}

@media (max-width: 600px) {
	.sns-pagehead-inner { padding: 24px 20px 26px; }
}

/* ---------- Skill levels ----------
 * Long prose, so one column and a comfortable measure. Four narrow columns of
 * this text was unreadable, and the descriptor lines were being set in the
 * label face at paragraph length.
 */
.sns-lede {
	max-width: 68ch;
	margin: 0 0 26px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--scbl-ink-deep);
}

.sns-levels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0 0 34px;
	border-top: 1px solid var(--scbl-line);
}

.sns-level {
	display: block;
	padding: 24px 0;
	border-bottom: 1px solid var(--scbl-line);
}

.sns-level-body { min-width: 0; max-width: 74ch; }

.sns-level-body h3 {
	margin: 0 0 6px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

/* The skill descriptor is a label, so it is short by definition. If it ever
   runs long it still reads as body copy rather than shouting. */
.sns-level-meta {
	margin: 0 0 10px !important;
	font-family: var(--scbl-body);
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--scbl-royal);
}

.sns-level-body p:last-child {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--scbl-ink);
}

@media (max-width: 600px) {
	.sns-level { padding: 20px 0; }
	.sns-level-body h3 { font-size: 1.125rem; }
}

/* A tournament record is the payoff of each skills event, so it is set apart
   from the description rather than trailing it as another sentence. */
.sns-record {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin: 12px 0 0 !important;
	padding: 8px 14px;
	border-radius: var(--scbl-radius);
	background: var(--scbl-surface);
	border-left: 3px solid var(--scbl-red);
}

.sns-record-val {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--scbl-ink-deep);
}

.sns-record-who { font-size: .875rem; color: var(--scbl-muted); }

/* ---------- Venues ---------- */
.sns-venues {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 18px;
	margin: 0 0 34px;
}

.sns-venues > br, .sns-venues > p:empty { display: none; }

.sns-venue {
	padding: 22px;
	background: #fff;
	border: 1px solid var(--scbl-line);
	border-radius: var(--scbl-radius);
	box-shadow: 0 1px 2px rgba(0, 32, 56, .05);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.sns-venue:hover { border-color: var(--scbl-royal); box-shadow: 0 10px 24px rgba(0, 32, 56, .1); }

.sns-venue h3 {
	margin: 0 0 10px;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--scbl-red);
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: 1.1875rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.sns-venue-sheets { margin: 0 0 10px !important; display: flex; flex-wrap: wrap; gap: 6px; }

/* A building with more than one surface names them, so "Tranquility" is never
   ambiguous on a schedule row. */
.sns-sheet {
	padding: 3px 9px;
	border-radius: 3px;
	background: var(--scbl-surface);
	border: 1px solid var(--scbl-line);
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--scbl-royal);
}

.sns-venue-addr { margin: 0 0 6px !important; font-size: .9375rem; }
.sns-venue-meta { margin: 0 0 12px !important; font-size: .875rem; color: var(--scbl-muted); }

.sns-venue-go { margin: 0 !important; }

.sns-venue-go a {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--scbl-royal);
	border-radius: 3px;
	font-family: var(--scbl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.sns-venue-go a:hover { background: var(--scbl-royal); color: #fff !important; }

/* ---------- Game page ----------
 * The team names sit on the navy scoreboard, so they need to be white. The
 * kit sets `.elementor-kit-4 a` at 0,1,1 from a stylesheet loaded after this
 * one, which was painting them kit blue on navy.
 */
.hc-wrap a.hc-score-team,
.hc-wrap a.hc-score-team:hover,
.hc-wrap a.hc-score-team:focus {
	color: #fff !important;
	text-decoration: none !important;
}

.hc-wrap a.hc-score-team:hover { text-decoration: underline !important; }

/* When and where: a row of chips rather than a run-on sentence, with the rink
   as the one thing you can act on. */
.hc-game-when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0 26px;
}

.hc-gw-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: var(--scbl-radius);
	background: var(--scbl-surface);
	border: 1px solid var(--scbl-line);
	font-family: var(--scbl-body);
	font-size: .875rem;
	color: var(--scbl-ink);
}

.hc-gw-date { font-weight: 600; }

.hc-gw-time {
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: .9375rem;
	letter-spacing: .04em;
	color: var(--scbl-ink-deep);
}

.hc-wrap a.hc-gw-venue {
	border-color: var(--scbl-royal);
	color: var(--scbl-royal) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.hc-wrap a.hc-gw-venue::before {
	content: '';
	width: 14px;
	height: 14px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4c92' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hc-wrap a.hc-gw-venue:hover {
	background: var(--scbl-royal);
	color: #fff !important;
}

.hc-wrap a.hc-gw-venue:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

/* ---------- Venue page ---------- */
.sns-venue-head { margin: 0 0 8px; }

.sns-venue-head h1 {
	margin: 0 0 10px;
	font-family: var(--scbl-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--scbl-ink-deep);
}

.sns-venue-head .sns-venue-sheets { margin: 0 0 14px !important; }
.sns-venue-notes { max-width: 70ch; margin: 0 0 24px; }

/* Game rows on a rink page: the time leads, because the question is usually
   "what is on this sheet and when". */
.hc-vg-when strong { display: block; font-family: var(--scbl-display); font-weight: 800; letter-spacing: .03em; }
.hc-vg-when span { font-size: .8125rem; color: var(--scbl-muted); }
.hc-vg-teams { min-width: 220px; }
.hc-vg-at { color: var(--scbl-muted); font-size: .8125rem; padding: 0 2px; }

.hc-wrap a.hc-vg-score {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--scbl-ink-deep);
	color: #fff !important;
	font-family: var(--scbl-display);
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none !important;
	white-space: nowrap;
}

.hc-wrap a.hc-vg-score.is-scheduled {
	background: transparent;
	border: 1px solid var(--scbl-royal);
	color: var(--scbl-royal) !important;
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hc-wrap a.hc-vg-score:hover { background: var(--scbl-royal); color: #fff !important; }