/* ==========================================================================
   States With Poker — design CSS
   --------------------------------------------------------------------------
   The site's look lives in the child theme's style.css and is unchanged. This
   file carries only what the GenerateBlocks structure needs after the pages
   moved off Beaver Builder: the section/container/module rhythm BB used to
   provide, the hero band, the CTA button, and the table skin (a core/table
   block puts its class on the <figure>, so `table.resp` can no longer match).

   01 tokens · 02 layout · 03 hero · 04 button · 05 tables · 06 responsive
   ========================================================================== */

/* 01 — tokens ------------------------------------------------------------ */

:root {
	/* brand — bridged to the fleet's provisioning tokens where they map */
	--swp-accent: var(--brand-accent, #ee3536);
	--swp-accent-ink: var(--brand-on-accent, #333333);
	--swp-accent-border: #e2292a;

	/* surfaces */
	--swp-surface: #ffffff;
	--swp-surface-muted: #f1f1f1;
	--swp-surface-tint: #f7f8f9;
	--swp-border: #dddddd;
	--swp-scrim-top: rgba(0, 0, 0, 0.8);
	--swp-scrim-bottom: rgba(0, 0, 0, 0.58);

	/* measure + rhythm (the widths Beaver Builder used, kept to the pixel) */
	--swp-container: 1300px;
	--swp-space-1: 5px;
	--swp-space-2: 15px;
	--swp-space-3: 20px;
	--swp-space-4: 25px;
	--swp-space-5: 40px;
	--swp-radius: 4px;

	/* operator review cards — the market colours: blue offshore, green state-licensed */
	--swp-offshore: #0b4f9c;
	--swp-offshore-bright: #1c7ae0;
	--swp-offshore-tint: #eef5fd;
	--swp-offshore-line: #c9ddf6;
	--swp-regulated: #0f6a3f;
	--swp-regulated-bright: #1d9d5a;
	--swp-regulated-tint: #edf8f2;
	--swp-regulated-line: #c3e6d2;
	--swp-ink: #222222;
	--swp-glance-bg: #f8f9fb;
	--swp-glance-line: #e1e5ea;
	--swp-review-head-from: #4777bf;
	--swp-review-head-to: #2b2b2b;
	--swp-on-color: #ffffff;
	--swp-on-color-soft: rgba(255, 255, 255, 0.18);
	--swp-cta-hover: #d42a2b;
	--swp-radius-lg: 10px;
	--swp-shadow-card: 0 6px 18px rgba(14, 40, 70, 0.1);
	--swp-shadow-logo: 0 2px 6px rgba(0, 0, 0, 0.18);

	/* hero art */
	--swp-hero-image: url(/wp-content/uploads/2025/05/states-poker-bg.jpg);
}

/* 02 — layout ------------------------------------------------------------ */

.swp-section {
	padding: var(--swp-space-3);
}

/* rows the builder held to the content measure rather than bleeding full width */
.swp-section--fixed {
	max-width: var(--swp-container);
	margin-left: auto;
	margin-right: auto;
}

.swp-container {
	max-width: var(--swp-container);
	margin-left: auto;
	margin-right: auto;
}

.swp-block {
	margin: var(--swp-space-3);
}

/* the banded sections inset their content a little further */
.page-section-grey .swp-block,
.page-section-white .swp-block {
	padding-left: var(--swp-space-4);
	padding-right: var(--swp-space-4);
}

/* the operator blurb cards keep their own tighter rhythm */
.swp-block.bubble-review {
	margin: var(--swp-space-1) var(--swp-space-2);
}

/* the band that carries the operator blurb cards on the front page */
.swp-section--reviews {
	background-color: var(--swp-surface-tint);
	border-top: 1px solid var(--swp-border);
}

.swp-section--reviews .swp-container {
	padding-top: var(--swp-space-5);
	padding-bottom: var(--swp-space-5);
}

.swp-cols {
	display: grid;
	grid-template-columns: repeat(var(--swp-cols, 1), minmax(0, 1fr));
}

.swp-cols--2 { --swp-cols: 2; }
.swp-cols--3 { --swp-cols: 3; }
.swp-cols--4 { --swp-cols: 4; }

.swp-col {
	min-width: 0;
}

/* 03 — hero -------------------------------------------------------------- */

.swp-hero {
	position: relative;
	background-image: var(--swp-hero-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.swp-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(180deg, var(--swp-scrim-top) 0%, var(--swp-scrim-bottom) 100%);
}

.swp-hero > * {
	position: relative;
	z-index: 1;
}

.swp-hero--home {
	--swp-hero-image: url(/wp-content/uploads/2025/05/states-with-poker-bg.jpg);
}

.swp-hero--bonuses {
	--swp-hero-image: url(/wp-content/uploads/2025/05/poker-bonuses-bg.jpg);
}

.swp-hero--deposits {
	--swp-hero-image: url(/wp-content/uploads/2025/05/deposit-methods-1.jpg);
}

/* 04 — CTA button -------------------------------------------------------- */

.swp-btn-wrap {
	margin: 0;
	text-align: center;
}

.swp-btn {
	display: block;
	width: 100%;
	padding: 12px 24px;
	border: 1px solid var(--swp-accent-border);
	border-radius: var(--swp-radius);
	background-color: var(--swp-accent);
	color: var(--swp-accent-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
}

.swp-btn:visited,
.swp-btn:hover,
.swp-btn:focus {
	background-color: var(--swp-accent);
	color: var(--swp-accent-ink);
}

/* 03b — "at a glance" fact boxes --------------------------------------- */
/* The facts list under the hero: the section sits in a subtle box, and each
   line is a box of its own with its label as the header. */

.swp-block.swp-glance {
	padding: 24px 26px 26px;
	border: 1px solid var(--swp-glance-line);
	border-radius: var(--swp-radius-lg);
	background-color: var(--swp-glance-bg);
}

.swp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swp-facts .swp-fact {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--swp-glance-line);
	border-radius: 8px;
	background-color: var(--swp-surface);
}

.swp-fact__label {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--swp-accent);
	color: var(--swp-ink);
	font-size: 15px;
	line-height: 1.3;
}

.swp-fact__value {
	display: block;
	font-size: 16px;
	line-height: 1.45;
}

/* the lines read "Label: value", so the value starts lower case */
.swp-fact__value::first-letter {
	text-transform: uppercase;
}

/* 04a — FAQ questions -------------------------------------------------- */
/* A FAQ question reads the same on every band: dark text, red icon. The theme's
   grey-band rules would otherwise swap them (red text, black icon). */

.swp-faq h2.question,
.swp-faq h3 {
	color: var(--swp-ink);
}

.swp-section.swp-faq h2.question::before {
	color: var(--swp-accent);
}

/* 04b — operator review cards ----------------------------------------- */
/* One card per reviewed room on the state pages: the room's icon in a header
   band in its market colour, the live welcome offer, the review copy, and the
   affiliate button. */

.swp-review {
	--swp-review-dark: var(--swp-offshore);
	--swp-review-bright: var(--swp-offshore-bright);
	--swp-review-tint: var(--swp-offshore-tint);
	--swp-review-line: var(--swp-offshore-line);
	margin: 28px 0;
	overflow: hidden;
	border: 1px solid var(--swp-review-line);
	border-radius: var(--swp-radius-lg);
	background-color: var(--swp-review-tint);
	box-shadow: var(--swp-shadow-card);
}

.swp-review--regulated {
	--swp-review-dark: var(--swp-regulated);
	--swp-review-bright: var(--swp-regulated-bright);
	--swp-review-tint: var(--swp-regulated-tint);
	--swp-review-line: var(--swp-regulated-line);
}

.swp-review__head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	/* near-black to black on every review, offshore and state-licensed alike */
	background-image: linear-gradient(120deg, var(--swp-review-head-from) 0%, var(--swp-review-head-to) 100%);
	color: var(--swp-on-color);
}

.swp-review__logo {
	flex: 0 0 auto;
	width: auto;
	max-width: 160px;
	height: 64px;
	padding: 6px;
	border-radius: 12px;
	background-color: var(--swp-on-color);
	box-shadow: var(--swp-shadow-logo);
	object-fit: contain;
}

.swp-review__heading {
	min-width: 0;
}

/* two classes deep, so it also beats the grey band's h2 colour when a whole
   section is the card and its h2 is the title */
.swp-review .swp-review__title {
	margin: 0;
	color: var(--swp-on-color);
	font-size: 1.45rem;
	line-height: 1.2;
}

/* the theme puts an arrow before every h3; the icon does that job here */
.swp-review__title::before {
	content: none;
}

.swp-review__tag {
	display: inline-block;
	margin: 6px 0 0;
	padding: 3px 12px;
	border-radius: 999px;
	background-color: var(--swp-on-color-soft);
	color: var(--swp-on-color);
	font-size: 13px;
	font-weight: 600;
}

.swp-review__body {
	padding: 20px 22px 22px;
}

.swp-review__offer {
	display: inline-block;
	margin: 0 0 16px;
	padding: 8px 14px;
	border: 1px solid var(--swp-review-line);
	border-radius: 6px;
	background-color: var(--swp-on-color);
	color: var(--swp-review-dark);
	font-weight: 600;
}

.swp-review__cta {
	margin: 18px 0 0;
}

.swp-review__btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 6px;
	background-color: var(--swp-accent);
	box-shadow: 0 3px 0 var(--swp-accent-border);
	color: var(--swp-on-color);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.swp-review__btn:visited {
	color: var(--swp-on-color);
}

.swp-review__btn:hover,
.swp-review__btn:focus {
	background-color: var(--swp-cta-hover);
	color: var(--swp-on-color);
}

/* every image now carries its intrinsic width/height, so the one image the
   theme pads has to keep measuring that size as its content box */
.bubble-review .review-heading img.review-logo {
	box-sizing: content-box;
}

/* 04c — affiliate call-out bands ---------------------------------------- */
/* A short, loud CTA dropped between sections on an operator's own review page:
   one line — room icon, a line of copy, one button — in the brand red over
   near-black, with a sheen across it. The offer inside is the live catalog
   field, not a typed number. */

.swp-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	overflow: hidden;
	padding: 14px 20px;
	border: 1px solid var(--swp-accent-border);
	border-radius: var(--swp-radius-lg);
	background-image: linear-gradient(135deg, var(--swp-accent) 0%, #a81b1c 55%, #2b2b2b 100%);
	box-shadow: var(--swp-shadow-card);
	color: var(--swp-on-color);
}

.swp-cta::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -20%;
	width: 55%;
	height: 220%;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
	transform: rotate(12deg);
	pointer-events: none;
}

.swp-cta .swp-cta__logo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background-color: var(--swp-on-color);
	box-shadow: var(--swp-shadow-logo);
}

.swp-cta__line {
	flex: 1 1 260px;
	margin: 0;
	color: var(--swp-on-color);
	font-size: 18px;
	line-height: 1.35;
}

.swp-cta__actions {
	flex: 0 0 auto;
	margin: 0;
}

.swp-cta__btn {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 6px;
	background-color: var(--swp-on-color);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
	color: var(--swp-accent);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.swp-cta__btn:visited {
	color: var(--swp-accent);
}

.swp-cta__btn:hover,
.swp-cta__btn:focus {
	background-color: #ffe9e9;
	color: var(--swp-cta-hover);
}

/* 05 — tables ------------------------------------------------------------ */
/* core/table writes the block's class onto the <figure>, so the site's
   `table.resp` rules are restated here against the block wrapper. */

.swp-table {
	margin: 0;
	overflow-x: auto;
}

.swp-table table {
	width: 100%;
	border-collapse: collapse;
}

.swp-table td,
.swp-table th {
	padding: 12px 15px;
	border: 1px solid var(--swp-border);
	font-size: 16px;
	text-align: center;
}

.swp-table th {
	background-color: var(--swp-accent);
	color: var(--swp-surface);
}

.swp-table tbody tr:nth-child(even) {
	background-color: var(--swp-surface-muted);
}

.swp-table tbody tr:nth-child(odd) {
	background-color: var(--swp-surface);
}

.swp-table--left td,
.swp-table--left th {
	text-align: left;
}

.swp-table .has-text-align-center {
	text-align: center;
}

.swp-table .has-text-align-left {
	text-align: left;
}

.swp-table .has-text-align-right {
	text-align: right;
}

/* 06 — responsive -------------------------------------------------------- */

@media (max-width: 767px) {
	.swp-section {
		padding-left: 0;
		padding-right: 0;
	}

	.swp-cols {
		--swp-cols: 1;
	}

	.swp-review__head {
		padding: 16px;
		gap: 14px;
	}

	.swp-review__logo {
		height: 52px;
	}

	.swp-review__title {
		font-size: 1.25rem;
	}

	.swp-review__body {
		padding: 16px;
	}

	.swp-review__btn {
		display: block;
		text-align: center;
	}
}

@media (max-width: 500px) {
	.swp-table thead {
		display: none;
	}

	.swp-table table,
	.swp-table tbody,
	.swp-table tr,
	.swp-table td {
		display: block;
		width: 100%;
	}

	.swp-table tr {
		margin-bottom: var(--swp-space-2);
	}

	.swp-table td {
		position: relative;
		padding-left: 50%;
		text-align: left;
	}

	/* the label comes from the header row when the page renders */
	.swp-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: 50%;
		padding-left: var(--swp-space-2);
		font-size: 15px;
		font-weight: bold;
		text-align: left;
	}

	/* no header row means no data-label, so these stay a plain grid */
	.swp-table--grid table,
	.swp-table--grid tbody,
	.swp-table--grid tr,
	.swp-table--grid td {
		display: revert;
		width: auto;
	}

	.swp-table--grid td {
		padding-left: var(--swp-space-2);
	}

	.swp-table--grid td::before {
		content: none;
	}

	/* the CTA line stacks on a phone, and the button runs full width */
	.swp-cta {
		gap: 12px;
		text-align: center;
	}

	.swp-cta__line {
		flex-basis: 100%;
		font-size: 17px;
	}

	.swp-cta__actions {
		flex-basis: 100%;
	}

	.swp-cta__btn {
		display: block;
	}
}