/*
Theme Name: Singing for Suppers — The Matchup
Theme URI: https://flomannahouse.com/singing-for-suppers/
Description: Event mini-site child theme for the 3rd Annual Singing for Suppers karaoke competition. Implements "The Matchup" design language: scoreboard devices on Manna House green. Child of Twenty Twenty-Five.
Author: SVG Digital / RevIgnite
Template: twentytwentyfive
Version: 1.5.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sfs-matchup
*/

/* ============ Layout: bands stack flush ============ */

.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-block-post-content > * { margin-block-start: 0 !important; }

/* ============ The Matchup signature devices ============ */

/* 1. Tri-color stripe — the identity element, under the header on every page */
.sfs-stripe {
	height: 2px;
	background: linear-gradient(90deg, rgba(240,201,63,0) 0%, rgba(240,201,63,0.55) 22%, rgba(240,201,63,0.55) 78%, rgba(240,201,63,0) 100%);
}

/* Sticky header wrapper */
.sfs-header-wrap {
	position: sticky;
	top: 0;
	z-index: 90;
}

/* ============ Text wordmark ============ */
/* Replaces the graphic logo in the header. The PNG is a 2560px-wide asset that
   never sat well at header scale; type is crisp at every size and lets the
   two halves of the name carry different weight. */
.sfs-wordmark {
	display: block;
	text-decoration: none;
	line-height: 1;
}
.sfs-wordmark__top {
	display: block;
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 5px;
}
.sfs-wordmark__main {
	display: block;
	font-family: var(--wp--preset--font-family--vollkorn);
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--cream);
}
.sfs-wordmark:hover .sfs-wordmark__main { color: var(--wp--preset--color--gold); }
.sfs-wordmark__main,
.sfs-wordmark__top { transition: color 0.2s ease; }
@media (max-width: 600px) {
	.sfs-wordmark__main { font-size: 22px; }
}

/* Nav: PT Sans 700 13px uppercase. Active page and hover are gold text —
   no pill background — on every device; a real mouse-hover also draws in
   a small underline. `position:relative` + `transition` live on the base
   rule since both the active state and the hover state need them. */
/* The doubled `.wp-block-navigation-item__content` class matches core's own
   `color:inherit` rule specificity — without it, items inherit the muted body
   color instead of cream. */
.sfs-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	position: relative;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cream);
	padding: 10px 14px;
	border-radius: 2px;
	transition: color 0.2s ease;
}
.sfs-nav .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
.sfs-nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	background: none;
	color: var(--wp--preset--color--gold);
}
/* Real pointer devices only, so a tap on mobile never gets a stuck hover. */
@media (hover: hover) and (pointer: fine) {
	/* Core's global styles print a `:hover { text-decoration: underline }` rule
	   for every link inside a nav block — it's what was doubling up with our
	   own ::after bar into two underlines at once. */
	.sfs-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--gold);
		text-decoration: none !important;
	}
	.sfs-nav .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 6px;
		height: 2px;
		background: var(--wp--preset--color--gold);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.25s ease;
	}
	.sfs-nav .wp-block-navigation-item__content:hover::after {
		transform: scaleX(1);
	}
}

/* Mobile menu overlay: WP's own overlay styles zero out the item padding
   here (confirmed 0px live), which is why the active pill looked cramped —
   and there's no text node to add a "Menu" label to since this whole
   dialog is core-rendered markup. Bigger text + real padding, and the
   label is drawn in via ::before, aligned with the close button and with
   the menu items' own left edge below it. */
/* This container exists in the DOM at every width (it's only hidden by CSS
   on desktop), so unscoped rules here leak into the real desktop nav — that's
   what blew the desktop menu text up to 22px. Every overlay-only rule below
   must live inside this same mobile query. */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		font-size: 22px !important;
		padding: 8px 20px !important;
	}
	/* Halve the gap between the three items — core spaces them with a blockGap
	   that reads as dead air once the type is this large. */
	.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		gap: 6px !important;
	}
}
/* The overlay auto-focuses its first item on open, and the theme's focus
   ring rendered as a gold box around it — reads as an unwanted border on
   a menu that's supposed to be text-only. Drop it for mouse/touch opens;
   keyboard users still get a ring via :focus-visible below. */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus {
	outline: none;
	box-shadow: none;
}
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
/* The dialog element is in the DOM at every width — it only *renders* as an
   overlay on mobile — so the label has to be scoped to the overlay breakpoint
   or it prints above the desktop nav too. */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-dialog { position: relative; }
	.wp-block-navigation__responsive-dialog::before {
		content: "Menu";
		position: absolute;
		left: 20px;
		top: 0;
		height: 24px;
		line-height: 24px;
		font-family: var(--wp--preset--font-family--vollkorn);
		font-size: 22px;
		font-weight: 900;
		letter-spacing: 0.01em;
		text-transform: none;
		color: var(--wp--preset--color--cream);
	}
	/* The overlay had a screenful of dead space below three short links, and the
	   graphic mark lost its home when the header went to a text wordmark. This
	   solves both. Anchored to the VIEWPORT (position:fixed), not the dialog —
	   the dialog is only as tall as its three links, so a bottom offset there
	   put the logo straight through the menu items. */
	.wp-block-navigation__responsive-container.is-menu-open::after {
		content: "";
		position: fixed;
		left: 20px;
		right: 20px;
		bottom: 7vh;
		height: 24vh;
		background-image: url("https://singingforsuppers.org/wp-content/uploads/2026/08/singing-for-suppers-logo-3rd-annual-scaled-1.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: contain;
		opacity: 0.42;
		pointer-events: none;
		z-index: 0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: relative; z-index: 1; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 34px;
	}
}

/* Mobile header: two rows — logo alone, centered, on top; ticket button
   (left) and menu icon (right) forced to opposite edges below it.
   !important beats the block-support layout classes WP generates for these
   same elements' flex display, which load after theme.css and otherwise win. */
@media (max-width: 600px) {
	.sfs-header-row {
		display: flex !important;
		flex-direction: column !important;
		row-gap: 18px;
		padding-bottom: 8px !important;
	}
	.sfs-header-row .sfs-wordmark {
		order: 1;
		align-self: center;
		text-align: center;
		margin: 0;
	}
	.sfs-header-actions {
		order: 2;
		display: flex !important;
		width: 100%;
		justify-content: space-between !important;
		align-items: center !important;
	}
	.sfs-header-actions .wp-block-buttons { order: 1; }
	.sfs-header-actions .wp-block-buttons .wp-block-button,
	.sfs-header-actions .wp-block-buttons .wp-block-button__link {
		width: auto !important; /* undo the 480px full-width CTA rule for the header specifically */
	}
	.sfs-header-actions .sfs-nav { order: 2; }
}

/* ============ Hero (split: type panel + real photograph) ============ */
/* Two panels edge to edge — brand green carrying the type, and the photo at
   full opacity beside it. Deliberately NOT a photo behind a dark scrim: the
   faces stay unobscured, which is the whole point of using them. On mobile it
   stacks photo-first so people are the first thing you see. */
.sfs-hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
	overflow: hidden;
}
.sfs-hero > * { margin: 0 !important; }
.sfs-hero-copy {
	position: relative;
	padding: 92px 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sfs-hero-copy::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 16px 16px;
}
.sfs-hero-copy > * { position: relative; z-index: 1; }
.sfs-hero-media { height: 100%; }
.sfs-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	object-position: center 42%;
}
.sfs-hero h1 {
	line-height: 1.0;
	text-wrap: balance;
	color: var(--wp--preset--color--cream);
	margin: 0;
}
.sfs-hero .sfs-eyebrow { margin-bottom: 14px; }
.sfs-hero-kicker {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	margin: 10px 0 0;
}
.sfs-hero-when {
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	margin: 26px 0 0;
	opacity: 0.92;
}
.sfs-hero .sfs-hero-sub { margin-top: 18px; }
.sfs-hero .sfs-vs { margin: 16px 0 0; }
.sfs-hero--sub h1 { font-size: clamp(32px, 3.6vw, 46px); }

@media (max-width: 900px) {
	.sfs-hero { grid-template-columns: 1fr; }
	.sfs-hero-media { order: -1; }
	.sfs-hero-media img { min-height: 0; height: 300px; }
	.sfs-hero-copy { padding: 56px 6vw 64px; }
}
@media (max-width: 600px) {
	.sfs-hero-media img { height: 240px; }
}

/* Eyebrow labels */
.sfs-eyebrow {
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* 3. Bordered meta cells — scoreboard readout */
.sfs-meta { gap: 0 !important; }
.sfs-meta > p {
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(14, 42, 30, 0.55);
	padding: 11px 20px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--cream);
}
.sfs-meta > p + p { border-left: 0; }
@media (max-width: 720px) {
	.sfs-meta { flex-direction: column; align-items: stretch !important; text-align: center; }
	.sfs-meta > p + p { border-left: 1px solid rgba(255, 255, 255, 0.28); border-top: 0; }
}

/* 4. Bracket corners on the hero's primary gold CTA */
.sfs-btn-bracket { position: relative; }
.sfs-btn-bracket::before,
.sfs-btn-bracket::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	pointer-events: none;
}
.sfs-btn-bracket::before {
	top: -7px; left: -7px;
	border-top: 2px solid var(--wp--preset--color--gold);
	border-left: 2px solid var(--wp--preset--color--gold);
}
.sfs-btn-bracket::after {
	bottom: -7px; right: -7px;
	border-bottom: 2px solid var(--wp--preset--color--gold);
	border-right: 2px solid var(--wp--preset--color--gold);
}

/* Ghost / outlined button on dark grounds */
.sfs-ghost .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(247, 244, 236, 0.45);
	color: var(--wp--preset--color--cream);
}

/* 5. Versus line */
.sfs-vs {
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Buttons hover behavior */
.wp-block-button__link:hover { opacity: 0.9; }
.sfs-ghost .wp-block-button__link:hover { opacity: 0.75; }

/* CTA pairs must wrap on narrow screens instead of forcing overflow */
.wp-block-buttons { flex-wrap: wrap !important; }
@media (max-width: 480px) {
	.wp-block-buttons .wp-block-button { width: 100%; }
	.wp-block-buttons .wp-block-button__link { width: 100%; }
}

/* ============ Cards ============ */

.sfs-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	padding: 25px;
	position: relative;
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
}
.sfs-card h3 {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.sfs-card p { font-size: 14px; line-height: 1.6; }

/* Action cards carry a big ghosted index numeral instead of a coloured rail —
   a rail on a rounded card is the house anti-pattern, and the numerals tie the
   four cards to the "four ways to join in" heading above them. */
.sfs-card--tri { counter-increment: sfsway; padding-top: 30px; transition: border-color 0.2s ease, transform 0.2s ease; }
.sfs-grid--4 { counter-reset: sfsway; }
.sfs-card--tri::before {
	content: "0" counter(sfsway);
	position: absolute;
	top: 12px;
	right: 16px;
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	color: rgba(30, 81, 56, 0.09);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.sfs-card--tri:hover { border-color: rgba(30, 81, 56, 0.42); transform: translateY(-2px); }
}

/* 2b. School-color card top (vote cards) */
.sfs-card--bruins::before,
.sfs-card--knights::before,
.sfs-card--tigers::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
}
.sfs-card--bruins::before { background: var(--wp--preset--color--bruins); }
.sfs-card--knights::before { background: var(--wp--preset--color--knights); }
.sfs-card--tigers::before { background: var(--wp--preset--color--tigers); }

/* Card tag */
.sfs-card .sfs-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7D621C;
}

/* Card text link */
.sfs-card-link a { font-weight: 700; font-size: 14px; }
.sfs-card-link a:hover { text-decoration: underline; }

/* ============ Stat band ============ */

.sfs-stat { text-align: center; padding: 6px 10px; }
.sfs-stat .sfs-stat-num {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 900;
	font-size: 38px;
	line-height: 1.1;
	color: var(--wp--preset--color--gold);
	margin: 0;
}
.sfs-stat .sfs-stat-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stat-label);
	margin: 4px 0 0;
}
@media (min-width: 782px) {
	.sfs-statband .wp-block-column + .wp-block-column { border-left: 1px solid rgba(247, 244, 236, 0.2); }
}

/* ============ Vote cards ============ */

.sfs-crest-plate {
	background: #fff;
	border: 1px solid #E6E2D6;
	border-radius: var(--wp--custom--radius);
	width: 64px;
	height: 64px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sfs-crest-plate img {
	max-width: 74%;
	max-height: 74%;
	object-fit: contain;
}
.sfs-card .sfs-school-name { font-family: var(--wp--preset--font-family--vollkorn); font-weight: 700; font-size: 21px; color: var(--wp--preset--color--contrast); margin: 0; }
.sfs-card .sfs-team {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 2px 0 0;
}
.sfs-card .sfs-tally {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 900;
	font-size: 26px;
	line-height: 1.05;
	margin: 0;
}
.sfs-leading {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 2px;
	display: none;
}
.is-leading .sfs-leading { display: inline-block; }
.sfs-progress {
	height: 8px;
	background: #EDEAE0;
	border-radius: 4px;
	overflow: hidden;
	margin-top: 14px;
}
.sfs-progress i {
	display: block;
	height: 100%;
	transition: width 0.35s ease;
}
.sfs-card--bruins .sfs-progress i, .sfs-card--bruins .sfs-tally { background-color: var(--wp--preset--color--bruins); }
.sfs-card--knights .sfs-progress i, .sfs-card--knights .sfs-tally { background-color: var(--wp--preset--color--knights); }
.sfs-card--tigers .sfs-progress i, .sfs-card--tigers .sfs-tally { background-color: var(--wp--preset--color--tigers); }
.sfs-card .sfs-tally { background: none; }
.sfs-card--bruins .sfs-tally { color: var(--wp--preset--color--bruins); }
.sfs-card--knights .sfs-tally { color: var(--wp--preset--color--knights); }
.sfs-card--tigers .sfs-tally { color: var(--wp--preset--color--tigers); }
.sfs-vote-btn { width: 100%; }
.sfs-vote-btn .wp-block-button__link {
	width: 100%;
	color: #fff;
	font-size: 13px;
}
.sfs-card--bruins .sfs-vote-btn .wp-block-button__link { background: var(--wp--preset--color--bruins); }
.sfs-card--knights .sfs-vote-btn .wp-block-button__link { background: var(--wp--preset--color--knights); }
.sfs-card--tigers .sfs-vote-btn .wp-block-button__link { background: var(--wp--preset--color--tigers); }

/* ============ Sponsor tiers ============ */

.sfs-tier-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}
.sfs-span3 { grid-column: span 3; }
.sfs-span2 { grid-column: span 2; }
@media (max-width: 720px) {
	.sfs-tier-grid { grid-template-columns: 1fr; }
	.sfs-span3, .sfs-span2 { grid-column: span 1; }
}
.sfs-tier--featured {
	background: #F4F8F1;
	border-color: rgba(30, 81, 56, 0.32);
}
.sfs-card .sfs-amt {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 900;
	font-size: 32px;
	line-height: 1.05;
	color: var(--wp--preset--color--green);
	margin: 0 0 6px;
}
.sfs-card.sfs-tier--featured .sfs-amt { font-size: 42px; }

/* ============ Section furniture ============ */

.sfs-section { padding: 81px 5vw; }
@media (max-width: 720px) { .sfs-section { padding: 56px 5vw; } }

.sfs-rule {
	border: 0 !important;
	border-top: 1px solid rgba(30, 81, 56, 0.18) !important;
	width: 100% !important;
	max-width: none;
	margin-top: 18px;
	margin-bottom: 26px;
	background: none !important;
}
.sfs-lead { color: var(--wp--preset--color--lead); font-size: 17px; max-width: 660px; margin-left: auto; margin-right: auto; }
.sfs-note { max-width: 620px; margin-left: auto; margin-right: auto; }
.sfs-hero-sub { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Card grids: 4→2→1 and 3→1 via auto-fit */
.sfs-grid { display: grid; gap: 18px; }
.sfs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sfs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Grid items must not inherit flow-layout block margins — they stagger the cards */
.sfs-grid > *,
.sfs-tier-grid > * { margin: 0 !important; }

/* ============ Footer ============ */

.sfs-footer a { color: var(--wp--preset--color--footer-body); font-size: 14px; }
.sfs-footer a:hover { color: var(--wp--preset--color--gold); }
.sfs-footer-head {
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.sfs-footer p { font-size: 14px; }
.sfs-footer-bottom {
	border-top: 1px solid rgba(247, 244, 236, 0.14);
	font-size: 13px;
	color: var(--wp--preset--color--footer-muted);
}

/* ============ Misc ============ */

/* Gallery: uniform 3:2 tiles regardless of source aspect */
.sfs-gallery .wp-block-image { aspect-ratio: 3 / 2; overflow: hidden; }
.sfs-gallery .wp-block-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
}

/* Gallery-as-carousel: same tiles, but a horizontal scroll-snap strip
   instead of a fixed grid — no JS, swipes natively on touch. */
.sfs-gallery.is-cropped {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}
.sfs-gallery.is-cropped .wp-block-image {
	flex: 0 0 240px;
	scroll-snap-align: start;
}
.sfs-gallery.is-cropped::-webkit-scrollbar { height: 6px; }
.sfs-gallery.is-cropped::-webkit-scrollbar-thumb {
	background: rgba(30, 81, 56, 0.25);
	border-radius: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sfs-progress i { transition: none; }
	.wp-block-button__link { transition: none; }
}

/* ============ Header CTA variants ============ */

.sfs-btn-donate .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--green-deep);
}
.sfs-btn-green .wp-block-button__link {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
}

/* ============ Event info columns ============ */
/* Plain columns with a gold rule over each heading — no card chrome, so the
   four read as one band of reference text rather than four things to click. */

.sfs-infocol { padding-top: 16px; border-top: 2px solid var(--wp--preset--color--gold); }
.sfs-infocol h3 {
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
.sfs-infocol p { font-size: 14px; line-height: 1.7; }

/* ============ Stat strip layout ============ */
/* Typography for .sfs-stat/.sfs-stat-num/.sfs-stat-label already exists above
   under "Stat band" — this just gives it a flex-row home outside the
   wp:columns layout it was originally scoped for, with a hairline between
   items instead of a card. */

.sfs-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}
.sfs-stats .sfs-stat {
	flex: 1 1 160px;
	max-width: 220px;
	border-left: 1px solid rgba(30, 81, 56, 0.16);
}
.sfs-stats .sfs-stat:first-child { border-left: 0; }
/* .sfs-stat-label's default tint (--stat-label) is built for a dark
   green-deep background; this strip sits on the light section background,
   so it needs the darker eyebrow color to stay legible. */
.sfs-stats .sfs-stat-label { color: var(--wp--preset--color--eyebrow); }
@media (max-width: 600px) {
	.sfs-stats .sfs-stat { border-left: 0; border-top: 1px solid rgba(30, 81, 56, 0.16); padding-top: 18px; flex: 1 1 45%; }
	.sfs-stats .sfs-stat:first-child { border-top: 0; }
}

/* ============ Motif divider ============ */
/* A repeating small mark used as a scene-break between sections instead of
   another plain rule — gives the page a recurring visual signature without
   any imagery or JS. */

.sfs-motif {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0 0 8px;
	line-height: 1;
}
.sfs-motif span {
	font-size: 15px;
	color: var(--wp--preset--color--gold);
	opacity: 0.65;
}

/* ============ Flyer band ============ */

.sfs-flyer-img img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 18px 40px rgba(14, 42, 30, 0.18);
}

/* ============ Prize cards ============ */
/* Five across on desktop, collapsing to a readable grid rather than a
   single squeezed row. */

.sfs-prizes {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
@media (max-width: 1100px) { .sfs-prizes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .sfs-prizes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .sfs-prizes { grid-template-columns: 1fr; } }
.sfs-prizes > * { margin: 0 !important; }
.sfs-prize { text-align: center; }
.sfs-prize h3 {
	font-size: 15px;
	line-height: 1.3;
	color: var(--wp--preset--color--green);
}
.sfs-prize p { font-size: 13px; }
.sfs-prize .sfs-amt {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-weight: 900;
	font-size: 34px;
	line-height: 1.05;
	color: var(--wp--preset--color--gold);
	margin: 0;
	-webkit-text-stroke: 0.5px rgba(30, 81, 56, 0.25);
}

/* ============ Competition rules ============ */

.sfs-rules { counter-reset: sfsrule; list-style: none; padding: 0; margin-left: 0; }
.sfs-rules li {
	counter-increment: sfsrule;
	position: relative;
	padding: 14px 0 14px 46px;
	border-bottom: 1px solid rgba(30, 81, 56, 0.14);
	font-size: 15px;
	line-height: 1.6;
}
.sfs-rules li:last-child { border-bottom: 0; }
.sfs-rules li::before {
	content: counter(sfsrule);
	position: absolute;
	left: 0;
	top: 13px;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--green-deep);
	background: var(--wp--preset--color--gold);
	border-radius: 50%;
}

/* ============ Sponsor roll ============ */

.sfs-roll { display: grid; gap: 0; }
.sfs-rollrow {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 20px;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid rgba(30, 81, 56, 0.14);
}
.sfs-rollrow:last-child { border-bottom: 0; }
.sfs-rolltier {
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--eyebrow);
	margin: 0;
}
.sfs-rollnames {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
@media (max-width: 640px) {
	.sfs-rollrow { grid-template-columns: 1fr; gap: 6px; }
	.sfs-rollnames { font-size: 16px; }
}

/* ============ Sponsor tier meals line ============ */

.sfs-meals {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--green-mid);
	margin: 0;
}

/* ============ Vote cards ============ */

.sfs-votecard { text-align: center; padding-top: 30px; }
.sfs-votecard .sfs-crest {
	margin: 0 auto;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sfs-votecard .sfs-crest img { display: block; margin: 0 auto; height: auto; }
.sfs-votecard.sfs-card--bruins  .sfs-crest { background: rgba(30, 76, 134, 0.10); }
.sfs-votecard.sfs-card--knights .sfs-crest { background: rgba(0, 105, 62, 0.10); }
.sfs-votecard.sfs-card--tigers  .sfs-crest { background: rgba(88, 44, 131, 0.10); }
.sfs-votecard .sfs-school-name { margin: 0; }
.sfs-votecard .sfs-team { margin: 0; }
.sfs-card--bruins .sfs-team { color: var(--wp--preset--color--bruins); }
.sfs-card--knights .sfs-team { color: var(--wp--preset--color--knights); }
.sfs-card--tigers .sfs-team { color: var(--wp--preset--color--tigers); }
.sfs-performer {
	font-size: 13px;
	font-style: italic;
	color: var(--wp--preset--color--eyebrow);
	margin: 0;
}
.sfs-votecard .wp-block-buttons { justify-content: center; margin-top: 4px; }
.sfs-votecard .wp-block-button__link { width: 100%; color: #fff; font-size: 13px; }
.sfs-card--bruins .sfs-votecard .wp-block-button__link,
.sfs-votecard.sfs-card--bruins .wp-block-button__link { background: var(--wp--preset--color--bruins); }
.sfs-votecard.sfs-card--knights .wp-block-button__link { background: var(--wp--preset--color--knights); }
.sfs-votecard.sfs-card--tigers .wp-block-button__link { background: var(--wp--preset--color--tigers); }

/* ============ Footer columns ============ */

.sfs-footer-cols strong { color: var(--wp--preset--color--cream); font-weight: 700; }
@media (max-width: 780px) {
	.sfs-footer-cols { gap: 32px; }
	.sfs-footer-cols .wp-block-column { flex-basis: 100% !important; }
}

/* ============ Footer logo ============ */
/* The graphic mark's home now that the header runs a text wordmark. */
.sfs-footer-logo { margin: 0 auto !important; }
.sfs-footer-logo img { display: block; height: auto; opacity: 0.92; }
.sfs-footer-bottom { align-items: center; }

/* ============ Hero graphic mark ============ */
/* The graphic logo's other home — above the fold, sitting quietly above the
   eyebrow in every hero's copy panel. Header keeps the text wordmark. */
/* Image block defaults to left-aligned inside the block markup — every other
   element in this panel is centered text, so an unset logo reads as
   noticeably off to one side. */
.sfs-hero-logo { margin: 0 auto 22px !important; }
.sfs-hero-logo img { display: block; margin: 0 auto; height: auto; opacity: 0.94; }
@media (max-width: 900px) {
	.sfs-hero-logo { margin-bottom: 18px !important; }
	/* Was shrunk to 104px, which made a wordmark-style graphic (fine
	   text + music notes) illegible on a phone. Sized up instead of down. */
	.sfs-hero-logo img { width: 170px !important; }
}