/*
 * Splash Felt
 *
 * The Splash! blue water header, a wave edge flowing into green card-room felt, and the tournament results
 * dealt out on playing cards. The results markup comes from our Poker_Tournament_Results plugin (.ptr-*);
 * everything here only restyles it. This file loads after the plugin's inline CSS, so equal specificity wins.
 */

:root {
	--sp-felt: var(--wp--preset--color--felt, #12602f);
	--sp-felt-dark: var(--wp--preset--color--felt-dark, #0a3f1e);
	--sp-navy: var(--wp--preset--color--splash-navy, #0b3d91);
	--sp-blue: var(--wp--preset--color--splash-blue, #1570c9);
	--sp-sky: var(--wp--preset--color--splash-sky, #2bb3f0);
	--sp-red: var(--wp--preset--color--chip-red, #b3261e);
	--sp-card: var(--wp--preset--color--card, #fffdf7);
	--sp-cream: var(--wp--preset--color--cream, #f3e3b3);
	--sp-display: var(--wp--preset--font-family--display, Georgia, serif);
	--sp-brand: var(--wp--preset--font-family--brand, sans-serif);
	--sp-text: var(--wp--preset--font-family--text, system-ui, sans-serif);
}

/* ------------------------------------------------------------------ felt */

body {
	min-height: 100vh;
	background-color: var(--sp-felt);
	background-image: radial-gradient(ellipse at 50% 22%, #23864a 0%, var(--sp-felt) 45%, var(--sp-felt-dark) 100%);
	background-attachment: fixed;
}

/* A faint woven-cloth grain over the felt. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.16;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
	padding: 0;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ------------------------------------------------------ Splash header */

.sp-header {
	position: relative;
	gap: 20px 32px;
	padding: 18px max(24px, calc((100vw - 1200px) / 2)) 54px;
	color: #fff;
	background: linear-gradient(135deg, var(--sp-navy) 0%, var(--sp-blue) 55%, var(--sp-sky) 100%);
}

/* The wave where the water meets the felt. */
.sp-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 42px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C150 45 300 0 450 18 S750 40 900 16 S1100 5 1200 22 V40 H0Z' fill='%23176a37'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

.sp-brand {
	gap: 16px;
	align-items: center;
}

.sp-logo img {
	display: block;
	width: 96px;
	height: auto;
	padding: 4px 8px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sp-brand-text > * + * {
	margin-block-start: 2px;
}

.sp-site-title {
	margin: 0;
	font-family: var(--sp-brand);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
}

.sp-site-title a {
	color: #fff;
	text-decoration: none;
}

.sp-tagline {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.04em;
	opacity: 0.92;
}

/* Menu: white pills on the water; the current page is solid white. */
.sp-nav {
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
}

.sp-nav .wp-block-navigation__container {
	gap: 10px;
}

.sp-nav .wp-block-navigation-item__content {
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	text-decoration: none;
}

.sp-nav .wp-block-navigation-item__content:hover,
.sp-nav .current-menu-item > .wp-block-navigation-item__content {
	background: #fff;
	color: var(--sp-navy);
}

/* Drop-down (e.g. under F.A.Q.s) */
.sp-nav .wp-block-navigation__submenu-container {
	min-width: 220px !important;
	padding: 6px !important;
	border: 0 !important;
	border-radius: 12px;
	background: var(--sp-navy) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border: 0;
	border-radius: 8px;
	background: transparent;
}

.sp-nav .wp-block-navigation__submenu-icon {
	color: #fff;
}

/* Phone menu button and the opened menu. Core hides the button at 600px+; only set display below that. */
@media (max-width: 599px) {
	.sp-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

.sp-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sp-nav .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}

.sp-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background: linear-gradient(160deg, var(--sp-navy), var(--sp-blue));
	color: #fff;
}

.sp-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	margin: 0;
	padding-top: 72px;
}

.sp-nav .wp-block-navigation__responsive-container-close {
	top: 18px;
	right: 18px;
	color: #fff;
}

.sp-nav .wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

.sp-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding: 0 20px !important;
}

.sp-nav .is-menu-open .wp-block-navigation__container,
.sp-nav .is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	gap: 10px !important;
	align-items: stretch !important;
}

.sp-nav .is-menu-open .wp-block-navigation__submenu-container {
	padding: 10px 0 0 18px !important;
	background: transparent !important;
	box-shadow: none;
}

.sp-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.sp-nav .is-menu-open .wp-block-navigation-item__content,
.sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff !important;
}

.sp-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background: #fff;
	color: var(--sp-navy) !important;
}

.sp-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 22px !important;
	font-size: 18px;
	text-align: left;
}

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

.sp-main {
	padding: 26px 20px 40px;
}

.sp-main > * + * {
	margin-block-start: 22px;
}

.sp-page-title {
	margin: 0;
	color: var(--sp-cream);
	font-family: var(--sp-display);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 900;
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

/* Ordinary pages (F.A.Q.s and so on): the text sits on a card-stock panel on the felt. */
.sp-panel {
	padding: 2rem 2.4rem;
	border-radius: 16px;
	background: var(--sp-card);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

/* Pages that show results already deal them out as cards; no panel around them. */
.sp-panel:has(.ptr-archive, .ptr-recent-results) {
	padding: 0;
	background: none;
	box-shadow: none;
}

.sp-panel h2,
.sp-panel h3,
.sp-panel h4 {
	color: var(--sp-navy);
}

.sp-panel h2 {
	font-size: 1.6em;
}

.sp-panel h3 {
	font-size: 1.25em;
}

.sp-panel img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.sp-date {
	color: var(--sp-felt);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sp-posts .sp-panel + .sp-panel {
	margin-top: 22px;
}

/* ------------------------------------------------------------ footer */

.sp-footer {
	padding: 24px 16px 40px;
	color: #d9c28a;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-align: center;
}

.sp-footer p {
	margin: 0;
}

.sp-suits {
	margin-right: 8px;
	color: var(--sp-cream);
	letter-spacing: 0.3em;
}

/* ============================================================ tournament results (plugin) */

.sp-main .ptr-archive,
.sp-main .ptr-recent-results {
	font-family: var(--sp-text);
}

/* Month bar: the header's blue, with red poker-chip buttons. Stays styled when the plugin pins it. */
.sp-main .ptr-archive-nav {
	gap: 12px;
	margin-bottom: 26px;
	padding: 12px 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--sp-navy), var(--sp-blue));
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.sp-main .ptr-archive-label {
	color: #fff;
	font-family: var(--sp-brand);
	font-size: 2.6em;
	line-height: 1.1;
}

.sp-main .ptr-archive-nav button {
	padding: 0.7em 1.5em;
	border: 3px dashed #fff;
	border-radius: 999px;
	background: var(--sp-red);
	box-shadow: 0 0 0 2px var(--sp-red), 0 3px 0 2px #6e1712;
	color: #fff;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sp-main .ptr-archive-nav button:hover {
	background: #c8322a;
}

/* Each tournament is a playing card, with corner indices (A♥ / K♠ alternating). */
.sp-main .ptr-card {
	position: relative;
	margin-bottom: 28px;
	padding: 1.6em 1.9em;
	border: 0;
	border-radius: 16px;
	background: var(--sp-card);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.sp-main .ptr-card::before,
.sp-main .ptr-card::after {
	position: absolute;
	color: var(--sp-red);
	font-family: var(--sp-display);
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	white-space: pre;
	content: "A\A\2665";
}

.sp-main .ptr-card::before {
	top: 14px;
	left: 16px;
}

.sp-main .ptr-card::after {
	right: 16px;
	bottom: 14px;
	transform: rotate(180deg);
}

.sp-main .ptr-card:nth-child(even)::before,
.sp-main .ptr-card:nth-child(even)::after {
	color: #111;
	content: "K\A\2660";
}

.sp-main .ptr-card-header h3 {
	color: #1b1b1b;
	font-family: var(--sp-display);
	font-size: 2.3em;
	font-weight: 900;
}

/* Tournament number as a red poker chip (sized to fit a 4-digit number). */
.sp-main .ptr-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 4.6em;
	height: 4.6em;
	padding: 0;
	border: 0.4em dashed #fff;
	border-radius: 50%;
	background: var(--sp-red);
	box-shadow: 0 0 0 0.16em var(--sp-red);
	font-family: var(--sp-text);
	font-size: 0.3em;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	vertical-align: 0.5em;
}

.sp-main .ptr-date {
	color: var(--sp-felt);
	font-size: 0.95em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sp-main .ptr-table {
	overflow: hidden;
	border-radius: 10px;
}

.sp-main .ptr-table th {
	border-bottom: 0;
	background: var(--sp-felt);
	color: var(--sp-cream);
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sp-main .ptr-table tbody tr:nth-child(even) {
	background: #f3efe2;
}

.sp-main .ptr-table tbody tr:first-child td {
	font-weight: 700;
}

.sp-main .ptr-payout {
	color: var(--sp-felt);
	font-weight: 700;
}

.sp-main .ptr-card-footer {
	border-top: 2px dotted #d8cfb5;
	color: #555;
}

.sp-main .ptr-card-footer .ptr-chop,
.sp-main .ptr-jackpot-row td {
	color: var(--sp-red);
}

.sp-main .ptr-loading,
.sp-main .ptr-empty {
	border-radius: 16px;
	background: var(--sp-card);
	color: #777;
}

/* ============================================================ phones */

@media (max-width: 640px) {
	body {
		background-attachment: scroll;
	}

	.sp-header {
		justify-content: center;
		padding: 14px 16px 46px;
	}

	.sp-logo img {
		width: 64px;
	}

	.sp-site-title {
		font-size: 26px;
	}

	.sp-tagline {
		display: none;
	}

	.sp-main {
		padding: 18px 12px 30px;
	}

	.sp-panel {
		padding: 1.3rem 1.1rem;
	}

	/* Month bar on one line: < PREV  September 2026  NEXT > */
	.sp-main .ptr-archive-nav {
		flex-wrap: nowrap;
		gap: 8px;
		padding: 8px 10px;
	}

	.sp-main .ptr-archive-label {
		font-size: 1.45em;
		white-space: nowrap;
	}

	.sp-main .ptr-archive-nav button {
		padding: 0.5em 0.8em;
		border-width: 2px;
		font-size: 0.72em;
	}

	.sp-main .ptr-card {
		padding: 1.2em 0.8em;
	}

	/* Corner indices crowd the title on a phone. */
	.sp-main .ptr-card::before,
	.sp-main .ptr-card::after {
		display: none;
	}
}