/*
Theme Name: ST Revival
Description: Lean, hand-built theme for strevival.com. No page builder, no framework dependency.
Author: kuroppi
Version: 0.2.0
*/

/* Design tokens (fonts/colors/typography/spacing/base resets) are enqueued
   separately from functions.php, ahead of this file — see assets/css/tokens/.
   Everything below only overrides/extends what those tokens + base.css set. */

a {
	transition: color var(--dur-fast) var(--ease-out);
}

/* ---- Header ---- */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	border-bottom: var(--border-w-1) solid var(--str-ink);
	background: var(--bg-surface);
}

.header-inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-6);
}

.site-branding a {
	border-bottom: none;
	display: block;
}

.site-logo {
	height: 40px;
	width: auto;
	display: block;
}

.main-nav-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
}

.main-nav-list > li {
	position: relative;
}

.main-nav-list a {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--str-ink);
	border-bottom: none;
}

.main-nav-list a:hover {
	color: var(--str-red);
}

.has-dropdown > a::after {
	content: "";
	display: inline-block;
	margin-left: var(--sp-1);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
}

.sub-nav-list {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 220px;
	margin: 0;
	padding: var(--sp-2) 0;
	background: var(--bg-surface);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	box-shadow: var(--shadow-hard);
	display: none;
	flex-direction: column;
	gap: 0;
}

.main-nav-list > li:last-child .sub-nav-list {
	left: auto;
	right: 0;
}

.has-dropdown:hover .sub-nav-list,
.has-dropdown:focus-within .sub-nav-list {
	display: flex;
}

.sub-nav-list li {
	width: 100%;
}

.sub-nav-list a {
	display: block;
	padding: var(--sp-2) var(--sp-4);
	white-space: nowrap;
}

.sub-nav-list a:hover {
	background: var(--str-red-tint);
}

.mobile-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-2);
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.mobile-nav-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--str-ink);
}

.sub-nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--str-ink);
	cursor: pointer;
}

.nav-cta {
	padding: 5px 20px !important;
}

/* The "Contact" nav item is a plain link inside the mobile menu list, but
   duplicated as the standalone red CTA button on desktop — only one of the
   two should ever be visible at a time. */
.nav-item-contact {
	display: none;
}

@media (max-width: 991px) {
	.header-inner {
		position: relative;
	}

	.mobile-nav-toggle {
		display: flex;
	}

	.nav-cta {
		display: none !important;
	}

	.nav-item-contact {
		display: block;
	}

	.main-nav {
		display: none;
		width: 100%;
		order: 3;
	}

	.main-nav.is-open {
		display: block;
	}

	.main-nav-list {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.main-nav-list > li {
		width: 100%;
		border-top: var(--border-w-hair) solid var(--border-default);
	}

	.main-nav-list a {
		display: block;
		padding: var(--sp-3) 0;
	}

	.has-dropdown {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.has-dropdown > a {
		flex: 1;
	}

	.has-dropdown > a::after {
		display: none;
	}

	.sub-nav-toggle {
		display: block;
	}

	.has-dropdown.sub-nav-open .sub-nav-toggle {
		transform: rotate(180deg);
	}

	.sub-nav-list,
	.has-dropdown:hover .sub-nav-list,
	.has-dropdown:focus-within .sub-nav-list {
		display: none;
		position: static;
		width: 100%;
		border: none;
		box-shadow: none;
		padding: 0 0 var(--sp-2) var(--sp-4);
	}

	.has-dropdown.sub-nav-open .sub-nav-list {
		display: flex;
	}

	.sub-nav-list a {
		padding: var(--sp-2) 0;
	}
}

/* ---- Footer ---- */

.site-footer {
	background: var(--str-blue-deep);
	border-top: var(--border-w-thick) solid var(--str-red);
	margin-top: var(--sp-8);
}

.footer-inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: var(--sp-10) var(--sp-6) var(--sp-6);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: var(--sp-8);
	margin-bottom: var(--sp-8);
}

@media (max-width: 768px) {
	.footer-top {
		grid-template-columns: 1fr;
	}
}

.footer-about .footer-logo {
	height: 32px;
	width: auto;
	margin-bottom: var(--sp-3);
}

.footer-about p {
	font-size: var(--fs-sm);
	color: rgba(244, 240, 230, 0.65);
	margin: 0 0 var(--sp-3);
}

.social-links,
.footer-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links {
	display: flex;
	gap: var(--sp-4);
}

.social-links a {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--str-offwhite);
	border-bottom: none;
}

.social-links svg {
	width: 100%;
	height: 100%;
}

.footer-column ul a {
	font-size: var(--fs-sm);
	color: var(--str-offwhite);
	border-bottom: none;
}

.social-links a:hover,
.footer-column ul a:hover,
.footer-legal-links a:hover {
	color: var(--str-red);
}

.footer-column ul li {
	margin-bottom: var(--sp-2);
}

.footer-column-title {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: rgba(244, 240, 230, 0.65);
	margin: 0 0 var(--sp-3);
}

.footer-bottom {
	border-top: var(--border-w-hair) solid var(--str-line-dark);
	padding-top: var(--sp-4);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.footer-copyright {
	font-size: var(--fs-xs);
	color: rgba(244, 240, 230, 0.65);
	margin: 0;
}

.footer-legal-links {
	list-style: none;
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
}

.footer-legal-links a {
	font-size: var(--fs-xs);
	color: rgba(244, 240, 230, 0.65);
	border-bottom: none;
}

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

.site-content {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: var(--sp-10) var(--sp-6) var(--sp-8);
}

@media (max-width: 768px) {
	.site-content {
		padding: var(--sp-6) var(--sp-4) var(--sp-6);
	}
}

/* ---- Homepage wordmark hero ---- */

.hero-wordmark {
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-8);
}

.wordmark {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	margin: 0;
}

.wordmark-line1,
.wordmark-line2 {
	font-size: var(--fs-5xl);
}

.wordmark-line1 {
	color: var(--str-blue-deep);
}

.wordmark-line2 {
	color: var(--str-red);
}

.wordmark-tagline {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	margin: var(--sp-2) 0 0;
}

/* ---- Homepage: balanced multi-section layout ---- */

.home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--sp-6);
	margin-bottom: var(--sp-6);
}

@media (min-width: 769px) and (max-width: 1100px) {
	.home-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.news-list .news-title {
		font-size: 17px !important;
	}

	.wordmark-tagline {
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.home-grid {
		grid-template-columns: 1fr;
	}

	.news-list .news-title {
		font-size: 16px !important;
	}

	.wordmark-tagline {
		font-size: 15px;
	}
}

.home-section {
	background: var(--bg-surface);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
}

.home-section h2 {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--text-muted);
	margin: 0 0 var(--sp-4);
}

.news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-list li {
	padding: var(--sp-3) 0;
	border-top: var(--border-w-hair) solid var(--border-default);
}

.news-list li:first-child {
	border-top: none;
	padding-top: 0;
}

.news-list .news-title {
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	margin: 0 0 var(--sp-1);
	display: block;
	border-bottom: none;
}

.news-list .news-title:hover {
	color: var(--str-red);
}

.news-list .news-meta {
	font-size: var(--fs-xs);
	color: var(--text-faint);
}

.section-view-all {
	display: inline-block;
	margin-top: auto; /* sticks to the bottom of the (now flex-column) home-section card */
	padding-top: var(--sp-4); /* keeps a minimum gap above it even when content already fills the card */
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--str-red);
	border-bottom: none;
}

.section-view-all:hover {
	color: var(--str-red-deep);
}

.side-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.side-stack .home-section:last-child {
	flex: 1;
}

.placeholder-note {
	font-size: var(--fs-sm);
	color: var(--text-faint);
	font-style: italic;
}

/* ---- Single content cards (post / tournament / player) ---- */

.post-card,
.single-tournament,
.single-player {
	background: var(--bg-surface);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	box-shadow: var(--shadow-hard);
	padding: var(--sp-8);
	margin: var(--sp-8) 0;
}

.post-card {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.post-card-header {
	margin-bottom: var(--sp-5);
}

.post-card-title {
	margin: 0 0 var(--sp-2);
}

.post-card-content {
	font-size: var(--fs-md);
}

.post-card-content img {
	max-width: 100%;
	height: auto;
}

.post-card-content iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.post-card .wp-block-list {
	padding-left: 19px;
}

@media (max-width: 768px) {
	/* Long unbroken strings (bare URLs pasted as link text, etc.) in blog
	   post content would otherwise overflow the card width on narrow screens. */
	.post-card-content a,
	.post-card-content p,
	.post-card-content li {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

.archive-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--fs-5xl);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	text-transform: uppercase;
	color: var(--str-blue-deep);
	margin: var(--sp-8) 0 0;
}

/* All page H1s (archive-title, post-card-title, single-post-title, the
   homepage wordmark) share one size at every breakpoint — matching the
   homepage wordmark, which was settled on as the reference size. */
h1,
.archive-title,
.post-card-title,
.single-post-title,
.wordmark-line1,
.wordmark-line2 {
	font-size: var(--fs-5xl);
}

@media (max-width: 768px) {
	h1,
	.archive-title,
	.post-card-title,
	.single-post-title,
	.wordmark-line1,
	.wordmark-line2 {
		font-size: var(--fs-3xl);
	}

	.event-subtitle {
		font-size: var(--fs-lg);
	}
}

/* Tournament + player page H1s are sized separately from the shared H1 rule
   above — smaller than the site-wide default since tournament names run long. */
.tournament-title {
	font-size: var(--fs-3xl); /* 36px */
}

@media (max-width: 1100px) {
	.tournament-title {
		font-size: 30px;
	}
}

@media (max-width: 768px) {
	.tournament-title {
		font-size: 26px;
	}
}

.archive-tagline {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	margin: var(--sp-2) 0 var(--sp-6);
}

.section-label {
	margin: var(--sp-8) 0 var(--sp-3);
}

/* ---- Tables ---- */

.results-index,
.results-table,
.tournament-meta {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-4);
}

@media (max-width: 768px) {
	/* Wide multi-column tables scroll horizontally rather than squeezing
	   every column unreadably narrow or forcing the whole page to scroll. */
	.results-index,
	.results-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
}

.results-index th,
.results-table th {
	text-align: left;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	border-bottom: var(--border-w-1) solid var(--str-ink);
	padding: var(--sp-2) var(--sp-3);
}

.sortable-table th.is-sortable,
.sortable-remote-table th.is-sortable {
	cursor: pointer;
	user-select: none;
}

.sortable-table th.is-sortable:hover,
.sortable-remote-table th.is-sortable:hover {
	color: var(--str-red);
}

.sortable-table th.is-sortable::after,
.sortable-remote-table th.is-sortable::after {
	content: "\2195";
	display: inline-block;
	margin-left: var(--sp-1);
	opacity: 0.4;
}

.sortable-table th.is-sorted-asc::after,
.sortable-remote-table th.is-sorted-asc::after {
	content: "\2191";
	opacity: 1;
}

.sortable-table th.is-sorted-desc::after,
.sortable-remote-table th.is-sorted-desc::after {
	content: "\2193";
	opacity: 1;
}

.results-index td,
.results-table td {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	padding: var(--sp-2) var(--sp-3);
	border-bottom: var(--border-w-hair) solid var(--border-default);
	transition: background var(--dur-fast) var(--ease-out);
}

.results-index tbody tr:nth-child(even) td,
.results-table tbody tr:nth-child(even) td {
	background: var(--str-blue-tint);
}

.results-index tbody tr:hover td,
.results-table tbody tr:hover td {
	background: var(--str-red-tint);
}

.results-index td a,
.results-table td a {
	border-bottom: none;
}

.results-index td a:hover,
.results-table td a:hover {
	color: var(--str-red-deep);
}

.tournament-meta td {
	padding: var(--sp-1) var(--sp-3) var(--sp-1) 0;
	vertical-align: middle;
}

/* Team formats: place cell spans the whole team via rowspan, but rows
   otherwise keep the plain per-row alternating look used on the archive table. */

.results-table-grouped td.place-cell {
	vertical-align: middle;
	text-align: left;
}

/* ---- Flag / character icons ---- */

.flag-icon {
	display: inline-block; /* only matters for the <span class="fi"> case — <img> is already replaced content */
	width: 20px;
	height: 14px;
	object-fit: cover;
	background-size: cover;
	border: 1px solid var(--str-ink);
	vertical-align: middle;
	position: relative;
	top: -1px;
	margin-right: 5px;
}

.character-icon {
	width: 20px;
	height: 20px;
	object-fit: cover;
	border-radius: var(--radius-pill);
	margin-right: 4px;
	vertical-align: middle;
}

.tournament-meta td:first-child {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	width: 140px;
}

.interview-facts td:last-child {
	font-size: var(--fs-sm);
}

/* Legacy content embeds YouTube iframes with fixed width="300" height="150"
   attributes — override with a responsive 16:9 box instead. */
.interview-qa iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	margin: var(--sp-4) 0;
}

/* ---- Homepage CTA banner ---- */

.footer-strip {
	background: var(--str-blue);
	color: var(--str-white);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-4) var(--sp-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.footer-strip a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: var(--str-red);
	color: var(--str-white);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-2) var(--sp-4);
	box-shadow: var(--shadow-hard-red);
	font-weight: var(--fw-bold);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.footer-strip a:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--str-red);
	color: var(--str-white);
}

/* ---- Badge ---- */

.badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--radius-xs);
	line-height: 1.2;
}

.badge-ink     { background: var(--str-ink);   color: var(--str-white); }
.badge-red     { background: var(--str-red);   color: var(--str-white); }
.badge-blue    { background: var(--str-blue);  color: var(--str-white); }
.badge-gold    { background: var(--str-gold);  color: var(--str-ink); }
.badge-success { background: var(--str-green); color: var(--str-white); }

.badge-white {
	background: var(--str-white);
	color: var(--str-ink);
	border: 1.5px solid var(--str-ink);
}

/* ---- Tag ---- */

.tag {
	display: inline-flex;
	align-items: center;
	min-width: 110px;
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	padding: 2px 0;
	margin: 0 4px 4px 0;
	color: var(--str-ink);
}

/* ---- CTA button (standalone link, e.g. external resource) ---- */

.cta-button-wrap {
	text-align: center;
	margin: 0 0 var(--sp-6);
}

.cta-button {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: var(--str-red);
	color: var(--str-white);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-3) var(--sp-5);
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	box-shadow: var(--shadow-hard-red);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.cta-button:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--str-red);
	color: var(--str-white);
}

/* ---- Calendar embed ---- */

.calendar-embed {
	width: 100%;
	height: 600px;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	overflow: hidden;
	margin: var(--sp-4) 0 var(--sp-8);
}

.calendar-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.calendar-embed-compact {
	height: 320px;
	margin: 0 0 var(--sp-4);
}

.calendar-embed-label {
	font-size: var(--fs-xs);
	color: var(--text-muted);
	margin: 0 0 var(--sp-2);
}

/* ---- Map embed ---- */

.map-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 1140 / 550;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	overflow: hidden;
	margin: var(--sp-6) 0;
}

.map-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Ordered list inside a full-bleed band ---- */

.band-list {
	color: var(--str-white);
	font-size: var(--fs-md);
	margin: 0;
	padding-left: var(--sp-6);
}

.band-list li {
	margin-bottom: var(--sp-3);
}

.band-list li:last-child {
	margin-bottom: 0;
}

/* ---- Single content image ---- */

.content-image {
	margin: var(--sp-6) 0;
}

.content-image img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
}

/* ---- Ranking chart images ---- */

.ranking-chart-images {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-6);
	margin: var(--sp-6) 0;
}

.ranking-chart-images img {
	max-width: 100%;
	height: auto;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
}

/* ---- Lightbox ---- */

body.lightbox-locked {
	overflow: hidden;
}

.lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	background: rgba(19, 31, 63, 0.92);
	padding: var(--sp-8);
}

.lightbox-overlay.is-open {
	display: flex;
}

.lightbox-image {
	max-width: 100%;
	max-height: 90vh;
	border: var(--border-w-1) solid var(--str-white);
	border-radius: var(--radius-xs);
}

.lightbox-close {
	position: absolute;
	top: var(--sp-5);
	right: var(--sp-6);
	background: transparent;
	border: none;
	color: var(--str-white);
	font-size: var(--fs-3xl);
	line-height: 1;
	cursor: pointer;
}

/* ---- Quote inside a full-bleed band ---- */

.quote-band p {
	font-style: italic;
	font-size: var(--fs-md);
	color: var(--str-white);
}

.quote-band cite {
	display: block;
	text-align: left;
	font-style: normal;
	font-size: var(--fs-sm);
	color: #84d2f6;
}

/* ---- Two-column article + photo layout ---- */

.two-col-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-8);
	align-items: start;
	margin-bottom: var(--sp-8);
}

.two-col-photo img {
	width: 100%;
	height: auto;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
}

@media (max-width: 768px) {
	.two-col-layout {
		grid-template-columns: 1fr;
	}
}

/* ---- Photo gallery grid ---- */

.photo-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
}

.photo-gallery-grid img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	display: block;
	transition: transform var(--dur-fast) var(--ease-out);
}

.photo-gallery-grid a:hover img {
	transform: scale(1.03);
}

/* ---- Video embed ---- */

.video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	overflow: hidden;
}

.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Event subtitle inside a full-bleed band ---- */

.event-subtitle {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-3xl);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--str-white);
	margin: 0;
	text-align: center;
}

/* ---- FAQ accordion (native <details>) ---- */

.faq-list {
	margin-bottom: var(--sp-6);
}

.faq-item {
	border-bottom: var(--border-w-hair) solid var(--border-default);
	padding: var(--sp-3) 0;
}

.faq-item summary {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

.faq-item p {
	margin: var(--sp-2) 0 0;
	color: var(--text-body);
}

/* ---- Captioned photo gallery ---- */

.photo-gallery-grid-captioned {
	align-items: start;
}

.gallery-caption-item .table-footnote {
	margin-top: var(--sp-2);
}

/* ---- Wider content variant (ToL pages: qualifier tables and photo grids
   need more room than the 900px text-page width) ---- */

.wide-content {
	max-width: var(--container-wide);
}

/* ---- Table footnote ---- */

.table-footnote {
	font-size: var(--fs-xs);
	color: var(--text-faint);
	font-style: italic;
}

/* ---- News archive ---- */

.news-archive-wrap {
	max-width: 900px;
	margin: 0 auto;
}

.news-list li.news-year-heading,
.news-list li.news-month-heading {
	border-top: none;
	padding-bottom: 0;
}

.news-list li.news-year-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--str-green);
	padding-top: var(--sp-5);
}

.news-list li:first-child.news-year-heading {
	padding-top: 0;
}

.news-list li.news-month-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	padding-top: var(--sp-2);
}

.news-archive-wrap .archive-title {
	margin-bottom: var(--sp-3);
}

/* ---- Strategy resource grid ---- */

.resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sp-5);
	margin-bottom: var(--sp-8);
}

.resource-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-surface);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	overflow: hidden;
	color: var(--text-primary);
	border-bottom: var(--border-w-1) solid var(--str-ink);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.resource-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--shadow-hard);
	color: var(--text-primary);
}

.resource-card-img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	display: block;
	border-bottom: var(--border-w-1) solid var(--str-ink);
}

.resource-card-title {
	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--str-blue-deep);
	margin: var(--sp-3) var(--sp-3) var(--sp-1);
}

.resource-card-desc {
	font-size: var(--fs-xs);
	color: var(--text-muted);
	margin: 0 var(--sp-3) var(--sp-3);
}

/* ---- Full-width intro band (breaks out of the constrained .site-content) ---- */

.site-content-top {
	max-width: 900px;
	padding-bottom: var(--sp-8);
}

.site-content-bottom {
	max-width: 900px;
	padding-top: var(--sp-10);
}

.full-bleed-band {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--str-blue-deep);
}

.full-bleed-band-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--sp-10) var(--sp-6);
}

.full-bleed-band-inner p {
	font-style: italic;
	font-size: 14px;
	color: #bebebe;
	line-height: var(--lh-normal);
	margin: 0 0 var(--sp-3);
}

.full-bleed-band-inner p:last-child {
	margin-bottom: 0;
}

/* ---- Contact page (Fluent Forms) ---- */

.contact-form-wrap {
	max-width: 600px;
}

.contact-form-wrap .ff-el-form-control,
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea {
	width: 100%;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--text-body);
	background: var(--bg-surface);
}

.contact-form-wrap textarea {
	min-height: 160px;
	resize: vertical;
}

.contact-form-wrap .ff-el-input--label label,
.contact-form-wrap label {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
}

.contact-form-wrap .ff-btn-submit,
.contact-form-wrap button[type="submit"],
.contact-form-wrap input[type="submit"] {
	display: block;
	width: 100%;
	background: var(--str-red) !important;
	color: var(--str-white);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-3) var(--sp-4);
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	cursor: pointer;
}

.contact-form-wrap .ff-btn-submit:hover,
.contact-form-wrap button[type="submit"]:hover,
.contact-form-wrap input[type="submit"]:hover {
	background: var(--str-red-deep) !important;
}

/* ---- About page ---- */

.pull-quote {
	background: var(--str-blue-deep);
	color: var(--str-white);
	border-left: 6px solid var(--str-red);
	border-radius: var(--radius-xs);
	padding: var(--sp-6);
	margin: var(--sp-6) 0;
}

.pull-quote p {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	margin: 0 0 var(--sp-3);
}

.pull-quote cite {
	display: block;
	font-size: var(--fs-sm);
	font-style: normal;
	color: var(--str-blue-tint);
}

.about-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
	margin: var(--sp-6) 0;
}

@media (max-width: 768px) {
	.about-photo-grid {
		grid-template-columns: 1fr;
	}
}

.about-photo-grid img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--sp-6);
	margin-top: var(--sp-4);
}

.team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	text-align: center;
	border-bottom: none;
}

.team-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: var(--border-w-1) solid var(--str-ink);
}

.team-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--str-white);
	font-family: var(--font-display);
	font-size: var(--fs-4xl);
	text-transform: uppercase;
}

.team-avatar-blue { background: var(--str-blue); }
.team-avatar-red  { background: var(--str-red); }

.team-name {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: var(--text-primary);
}

.team-title {
	font-size: var(--fs-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.staff-bio-header {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

@media (max-width: 500px) {
	.staff-bio-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

.staff-bio-avatar {
	flex-shrink: 0;
}

.staff-bio-socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

/* ---- Callout ---- */

.callout {
	background: var(--bg-surface);
	border: var(--border-w-1) solid var(--str-ink);
	border-left: 6px solid var(--str-red);
	border-radius: var(--radius-xs);
	padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-3);
}

.callout-blue { border-left-color: var(--str-blue); }
.callout-gold { border-left-color: var(--str-gold); }
.callout-ink  { border-left-color: var(--str-ink); }

.callout-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--str-ink);
	margin-bottom: var(--sp-1);
}

.callout p {
	font-size: var(--fs-sm);
	color: var(--text-body);
	margin: 0;
}

/* ---- Tournament filter bar ---- */

.filter-bar {
	background: var(--bg-surface);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	padding: var(--sp-4);
	margin-bottom: var(--sp-3);
}

.filter-bar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-4);
}

.filter-bar-row-secondary {
	align-items: center;
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: var(--border-w-hair) solid var(--border-default);
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.filter-field-search {
	flex: 1 1 200px;
}

@media (max-width: 768px) {
	.filter-field,
	.filter-field-search {
		flex: 1 1 100%;
		width: 100%;
	}

	.filter-field select,
	.filter-field input[type="text"],
	.filter-field input[type="date"] {
		width: 100%;
	}

	.filter-date-range {
		flex-wrap: wrap;
	}
}

.filter-field label,
.filter-date-range label {
	font-family: var(--font-heading);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--str-ink);
}

/* Every control in the bar shares one fixed height so rows line up exactly,
   regardless of each element's own font-size/padding defaults. */
.filter-field input[type="text"],
.filter-field input[type="date"],
.filter-field select,
.filter-date-range input[type="date"],
.filter-submit,
.filter-link-button,
.filter-clear-icon {
	height: 40px;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	background: var(--str-white);
	color: var(--str-ink);
	border: var(--border-w-1) solid var(--str-ink);
	border-radius: var(--radius-xs);
	outline: none;
	transition: box-shadow var(--dur-fast) var(--ease-out);
}

.filter-field input[type="text"],
.filter-field input[type="date"],
.filter-field select,
.filter-date-range input[type="date"] {
	padding: 0 var(--sp-3);
}

.filter-field input[type="text"]:focus,
.filter-field input[type="date"]:focus,
.filter-field select:focus,
.filter-date-range input[type="date"]:focus {
	box-shadow: 2px 2px 0 var(--str-red);
}

.filter-date-range {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-2);
}

.filter-date-range[hidden] {
	display: none;
}

.filter-label-spacer {
	visibility: hidden;
}

.filter-actions-row {
	display: flex;
	flex-direction: row;
	gap: var(--sp-2);
}

.filter-submit,
.filter-link-button {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding: 0 var(--sp-4);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.filter-submit {
	background: var(--str-red);
	color: var(--str-white);
	box-shadow: var(--shadow-hard-red);
}

.filter-submit:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--str-red);
}

.filter-submit[hidden] {
	display: none;
}

.filter-link-button {
	background: transparent;
	text-decoration: none;
}

.filter-link-button:hover {
	background: var(--str-blue-tint);
}

.filter-clear-icon {
	width: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-xl);
	line-height: 1;
	background: transparent;
	text-decoration: none;
	flex-shrink: 0;
}

.filter-clear-icon:hover {
	background: var(--str-red);
	color: var(--str-white);
}

.filter-status {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	margin: 0 0 var(--sp-3);
	min-height: 1em;
}

/* ---- Pagination ---- */

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-4) 0;
}

/* Same fix as .filter-submit[hidden] elsewhere — an author-stylesheet
   display rule always beats the browser's default [hidden]{display:none},
   so JS setting the hidden attribute (e.g. news infinite-scroll hiding its
   no-JS pagination fallback) needs this explicit override to actually work. */
.pagination[hidden] {
	display: none;
}

.pagination .page-link,
.page-link {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	padding: var(--sp-1) var(--sp-3);
	background: var(--bg-surface);
	color: var(--str-ink);
	border: var(--border-w-hair) solid var(--str-ink);
	border-radius: var(--radius-xs);
	cursor: pointer;
	text-decoration: none;
}

.page-link:hover {
	background: var(--str-blue-tint);
}

.page-link.is-current,
.page-link.current {
	background: var(--str-red);
	color: var(--str-white);
	border-color: var(--str-ink);
}

.page-ellipsis {
	color: var(--text-faint);
	padding: var(--sp-1) 0;
}

/* Fallback styling for WP's native pagination markup (no-JS) */
.pagination .page-numbers {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	padding: var(--sp-1) var(--sp-3);
	background: var(--bg-surface);
	color: var(--str-ink);
	border: var(--border-w-hair) solid var(--str-ink);
	border-radius: var(--radius-xs);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--str-red);
	color: var(--str-white);
}

.pagination .page-numbers.dots {
	border: none;
	background: none;
}