/*
Theme Name: Casino Skeleton
Theme URI: https://example.com/casino-skeleton
Author: Placeholder
Author URI: https://example.com
Description: A structural block theme scaffold for casino / iGaming brand sites. Ships one rich front page template and one long-form content template, plus header and footer parts. All copy, links and imagery are placeholders. Rebrand via theme.json.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 4.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casino-skeleton
Tags: full-site-editing, block-patterns, one-column, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, block-styles
*/

/* Block themes get almost everything from theme.json.
   Only genuinely structural CSS lives here. */

/* Structural CSS only. Colour, type and spacing come from theme.json.

   Design measured from the reference stylesheet:
     page      #F8F9FA   light
     text      #333333
     header    #037E21   green bar, white content
     CTA       #EFBF01   gold, black text, #FFB300 on hover
     footer    #272728   the only dark region
     cards     #FFFFFF
     radius    8px · base font 14px Roboto · 1200/800 layout          */

/* --- Header ------------------------------------------------------------------
   One green block containing two rows: logo and auth on the first, navigation
   on the second. Measured from the reference: #037E21 fills the whole band with
   no divider between the rows. ---------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--accent);
}

.site-header,
.site-header a,
.site-header .wp-block-site-title a { color: #FFFFFF; }

.header-top { padding-block: 14px 6px; }

.site-header .wp-block-site-logo img {
	height: 34px;
	max-height: 34px;
	width: auto;
	display: block;
	object-fit: contain;
}

.header-auth { gap: 10px; }

.header-auth .wp-block-button__link {
	padding: 8px 20px;
	font-size: 14px;
	border-radius: 6px;
}

/* Sign-in is outlined white; register is the gold CTA. */
.site-header .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
}

.site-header .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Second row: navigation, no divider — the band is continuous. */
.header-nav { padding-bottom: 10px; }

.main-nav .wp-block-navigation__container {
	gap: 0;
	flex-wrap: wrap;
}

.main-nav .wp-block-navigation-item__content {
	padding: 8px 18px 8px 0;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: #FFFFFF;
}

.main-nav .wp-block-navigation-item__content:hover { opacity: 0.8; }

/* --- Hero: banner-led ------------------------------------------------------
   No headline overlay: the banner already carries one. A second headline on
   top of it competes and reads as a mistake. --------------------------------- */

/* No gap between the header and the banner. Block themes add a blockGap margin
   between top-level blocks, which shows as a strip of page background. */
.wp-site-blocks > header + main { margin-block-start: 0; }
.hero-banner { margin-block-start: 0; }
.hero-banner .wp-block-image { margin: 0; }

.hero-banner img {
	width: 100%;
	height: auto;
	display: block;
	/* Cap the height on very wide screens so a 3.5:1 banner does not push the
	   rest of the page below the fold. */
	max-height: 460px;
	object-fit: cover;
	object-position: center;
}

.hero-under { gap: var(--wp--preset--spacing--30); }

/* No invert: it turns the placeholder payment cards into solid white blocks.
   Real payment marks are supplied as light-on-transparent already. */
.hero-payments img {
	max-height: 26px;
	width: auto;
	opacity: 0.9;
}

@media (max-width: 900px) {
	.header-top { padding-block: 10px 4px; }
	.main-nav .wp-block-navigation-item__content { font-size: 13px; padding-right: 12px; }
	.site-hero .hero-copy { text-align: center; margin-inline: auto; }
	.hero-payments { justify-content: center; }
}

/* --- Shared utilities --- */
.lede {
	max-width: 800px;
	margin-inline: auto;
	font-size: 16px;
}

.is-style-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
}

/* Alternating bands are light grey, not dark. */
.tint-band {
	background: var(--wp--preset--color--feature);
}

/* --- Cards: white on a light page, flat, hairline border --- */
.usp-card > .wp-block-group,
.bonus-card > .wp-block-group,
.stat-card > .wp-block-group,
.jackpot-tier > .wp-block-group,
.offer-card > .wp-block-group,
.tile,
.product-tile {
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	box-shadow: none;
}

.usp-row, .bonus-pair, .stat-row, .jackpot-tiers, .offer-pair, .product-grid {
	align-items: stretch;
}

/* --- Product tiles: 5 across, per the source --- */
.product-grid { grid-template-columns: repeat(5, 1fr) !important; }

.product-tile { overflow: hidden; }
.product-tile .wp-block-image { margin: 0; }

.product-tile img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.product-tile:hover { border-color: var(--wp--preset--color--accent); }
.product-tile__body { padding: 14px; }
.product-tile__body h3 { margin: 0 0 2px; font-size: 15px; }
.product-tile__body h3 a { text-decoration: none; }
.product-tile__body p { margin: 0; }

/* --- Payment strip: 7 across, per the source --- */
.logo-strip {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

.logo-strip img {
	max-height: 24px;
	width: auto;
	margin-inline: auto;
	opacity: 0.9;
}

/* --- Deposit steps --- */
.step-n {
	width: 44px;
	height: 44px;
	margin: 0 auto var(--wp--preset--spacing--20);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--accent);
	color: #FFFFFF;
	font-weight: 700;
}

/* --- Jackpot tiers --- */
.jackpot-tier.is-featured > .wp-block-group {
	border: 2px solid var(--wp--preset--color--accent);
}

.jackpot-amount {
	margin: 0;
	font-weight: 700;
	font-size: clamp(20px, 3vw, 28px);
	line-height: 1.2;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.jackpot-amount.is-ticking { animation: csk-tick 0.35s ease; }
@keyframes csk-tick { 50% { opacity: 0.72; } }

.stat-value {
	font-weight: 700;
	font-size: 24px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.3rem;
	font-variant-numeric: tabular-nums;
}

/* --- Game tiles --- */
.tile { overflow: hidden; }
.tile .wp-block-image { margin: 0; }
.tile img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.tile p { margin: 0; padding-inline: 10px; }
.tile p:nth-of-type(1) { padding-top: 10px; }
.tile p:nth-of-type(2) { padding-bottom: 12px; }

/* --- USP icons --- */
.usp-icon img {
	background: #F0F0F0;
	border-radius: 8px;
	padding: 10px;
	box-sizing: content-box;
}

/* --- Hero / feature imagery --- */
.hero-art img, .feature-art img { width: 100%; border-radius: 8px; }
.hero-art img { aspect-ratio: 16 / 9; object-fit: cover; }
.feature-art img { aspect-ratio: 3 / 2; object-fit: cover; }

/* --- FAQ --- */
.wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	margin-bottom: 8px;
	padding: 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 14px var(--wp--preset--spacing--30);
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: "+";
	font-size: 1.4em;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	transition: transform 0.2s ease;
	flex: none;
}

.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > *:not(summary) { padding-inline: var(--wp--preset--spacing--30); }
.wp-block-details > *:last-child { padding-bottom: var(--wp--preset--spacing--30); }

/* --- Tables --- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 10px 12px;
	text-align: left;
}

.wp-block-table thead th { background: #F0F0F0; }

/* --- Footer: green, matching the header ------------------------------------
   The reference uses a dark footer, but a green one reads as a deliberate
   bookend to the green header rather than an afterthought. Slightly deeper than
   the header so the two are distinguishable when both are on screen. ------- */

.wp-site-blocks > footer,
.site-footer {
	background: #026B1C;
	color: #FFFFFF;
	position: relative;
}

/* Gold hairline where the promo band meets the footer. */
.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--action);
}

.site-footer .wp-block-heading,
.site-footer p,
.site-footer li {
	color: #FFFFFF;
}

.site-footer .wp-block-site-logo img {
	max-height: 34px;
	width: auto;
	margin-bottom: 14px;
}

.footer-about {
	color: rgba(255, 255, 255, 0.78) !important;
	max-width: 34ch;
	line-height: 1.65;
}

/* Column headings: gold, uppercase, tracked out. */
.footer-heading {
	color: var(--wp--preset--color--action) !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 14px;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }

.footer-links a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer-links a:hover {
	color: var(--wp--preset--color--action);
	text-decoration: none;
}

/* Divider between the link columns and the compliance row. */
.footer-rule {
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.footer-bottom { gap: var(--wp--preset--spacing--30); }

.badge-strip { align-items: center; }
.badge-strip .wp-block-image { margin: 0; }
.badge-strip img { opacity: 0.92; }

.footer-verify,
.footer-verify a {
	color: rgba(255, 255, 255, 0.72) !important;
}

.footer-verify { max-width: 46ch; margin: 0; }
.footer-verify a { text-decoration: underline; }

.footer-legal {
	color: rgba(255, 255, 255, 0.62) !important;
	margin-top: var(--wp--preset--spacing--30);
	line-height: 1.7;
	max-width: 90ch;
	margin-inline: auto;
}

/* Promo band above the footer: gold, with a dark button for contrast. */
.footer-promo .wp-block-heading { margin: 0; }

.footer-promo .is-style-dark .wp-block-button__link {
	background: #16261A;
	color: #FFFFFF;
	border: 0;
}

.footer-promo .is-style-dark .wp-block-button__link:hover {
	background: #0B1A0E;
	color: #FFFFFF;
}

@media (max-width: 780px) {
	.footer-bottom { justify-content: flex-start; }
	.footer-legal { text-align: left; }
}

/* --- Sticky CTA bar ---------------------------------------------------------
   Pinned to the bottom of the viewport. Three behaviours that matter:

   1. It reserves its own height as body padding, so it can never cover the
      legal line — which on a licensed site must stay visible.
   2. It hides while the footer offer band is on screen, so two competing
      calls to action never stack.
   3. It is dismissible for the session. Several regulators take a dim view of
      promotional content a player cannot remove.                            */

.cta-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	/* Green, matching the header and footer, with a subtle vertical shift so it
	   reads as its own surface rather than a floating strip of the header. */
	background: linear-gradient(180deg, #037E21 0%, #026B1C 100%);
	border-top: 3px solid var(--wp--preset--color--action);
	box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
	padding-block: 12px;
	transition: transform 0.28s ease, opacity 0.28s ease;
}

.cta-bar.is-parked,
.cta-bar.is-dismissed {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

.cta-bar__inner { gap: 16px; }

.cta-bar__copy { flex: 1 1 auto; min-width: 0; }

.cta-bar__kicker {
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.82) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.cta-bar__value {
	margin: 0;
	font-size: clamp(15px, 2vw, 20px);
	font-weight: 800;
	line-height: 1.2;
	color: #FFFFFF !important;
}

.cta-bar__buttons { flex: none; }

/* Large by design — this is the site's persistent conversion action. */
.cta-bar__buttons .wp-block-button__link {
	font-size: clamp(15px, 2vw, 18px) !important;
	font-weight: 800;
	padding: 14px clamp(28px, 6vw, 52px) !important;
	border-radius: 8px;
	/* Gold on green: a raised edge plus a warm halo so the button separates
	   from the band rather than sitting flat on it. */
	box-shadow: 0 4px 0 rgba(140, 100, 0, 0.65), 0 8px 22px rgba(0, 0, 0, 0.3);
	white-space: nowrap;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.cta-bar__buttons .wp-block-button__link:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
}

.cta-bar__dismiss {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.cta-bar__dismiss:hover {
	background: rgba(255, 255, 255, 0.26);
	color: #FFFFFF;
}

/* Must not float over the canvas while being edited. */
.editor-styles-wrapper .cta-bar {
	position: relative;
	box-shadow: none;
	transform: none;
	opacity: 1;
}

@media (max-width: 600px) {
	.cta-bar { padding-block: 8px 10px; }
	.cta-bar__inner { flex-wrap: nowrap; gap: 12px; }
	.cta-bar__kicker { font-size: 11px; }
	.cta-bar__buttons .wp-block-button__link { padding: 13px 22px !important; }
	.cta-bar__dismiss { top: 2px; right: 4px; width: 22px; height: 22px; font-size: 15px; }
}

/* --- Mobile hardening -------------------------------------------------------
   Components whose desktop grids would otherwise force horizontal scroll. --- */

@media (max-width: 600px) {
	.hero-banner img { max-height: 220px; }

	/* Taller on mobile, not shorter: the overlay stacks vertically here and a
	   300px image clipped the headline against the header. */
	.page-hero__img img { max-height: 380px; min-height: 340px; }

	.page-hero__title { font-size: clamp(22px, 7vw, 30px) !important; }
	.page-hero__kicker { font-size: 13px; }
	.page-hero__sub { font-size: 14px; margin-bottom: 16px; }
	.page-hero__inner { padding-block: 20px 26px; }

	/* Payment marks: three across is still too tight under ~420px. */
	.logo-strip { grid-template-columns: repeat(3, 1fr) !important; }
	.logo-strip img { max-height: 20px; }

	.product-grid { grid-template-columns: repeat(2, 1fr) !important; }

	/* Footer compliance row stacks and left-aligns. */
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.badge-strip { gap: 14px; }
	.badge-strip img { max-width: 46vw; height: auto; }
	.footer-legal, .footer-verify { text-align: left; max-width: none; }

	.wp-block-table table { min-width: 0; }
}

/* Nothing may exceed the viewport width. A single overflowing element creates
   horizontal scroll for the whole page, which is the most common mobile defect
   and the hardest to spot on a desktop browser. */
img, video, iframe, table { max-width: 100%; }
.wp-site-blocks { overflow-x: hidden; }

/* --- Quality floor --- */
:where(a:focus-visible),
:where(button:focus-visible),
:where(summary:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (max-width: 820px) {
	.product-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.logo-strip { grid-template-columns: repeat(3, 1fr); }
	.header-bar { flex-wrap: wrap; }
	.header-tools .wp-block-search { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Featured-image hero: each page supplies its own banner, so the three pages
   are visually distinct rather than three copies of one template. Falls back to
   a plain green band when a page has no featured image. */
.page-hero--dynamic { background: var(--wp--preset--color--accent); }
.page-hero--dynamic .wp-block-post-featured-image { margin: 0; }

.page-hero--dynamic .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 460px;
	object-fit: cover;
	object-position: right center;
}

/* No featured image: give the overlay something to sit on. */
.page-hero--dynamic:not(:has(img)) .page-hero__overlay {
	position: relative;
	min-height: 260px;
	background: linear-gradient(90deg, rgba(2, 24, 8, 0.5) 0%, rgba(2, 24, 8, 0) 70%);
}

/* --- Page hero: banner with overlaid CTA ------------------------------------
   The scrim is CSS, not baked into the image. Measured on the supplied banner,
   white text scored 2.19:1 at best anywhere on the frame — it is bright green
   edge to edge. A baked scrim would also have to be redone for every new
   banner; this way any image can be dropped in and stay readable. ---------- */

.page-hero {
	position: relative;
	overflow: hidden;
	background: #062E10;
}

.page-hero__img { margin: 0; }

.page-hero__img img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 520px;
	object-fit: cover;
	object-position: right center;
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(
		90deg,
		rgba(2, 24, 8, 0.92) 0%,
		rgba(2, 24, 8, 0.74) 30%,
		rgba(2, 24, 8, 0.28) 50%,
		rgba(2, 24, 8, 0) 66%
	);
}

/* The overlay is a flex container, so its child shrinks to its content width
   and drifts toward the centre. Forcing full width lets the inner block sit
   hard left against the page gutter instead. */
.page-hero__overlay > * {
	width: 100%;
	max-width: none;
}

.page-hero__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

/* Copy is capped and left-aligned within the container, not centred. */
.page-hero__inner > * {
	max-width: 520px;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.page-hero__inner .wp-block-buttons {
	justify-content: flex-start;
}

.page-hero__kicker {
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: clamp(14px, 1.5vw, 18px);
	font-weight: 600;
	margin: 0 0 8px;
}

.page-hero__title {
	color: #FFFFFF !important;
	font-size: clamp(28px, 4.4vw, 54px) !important;
	font-weight: 800;
	line-height: 1.08;
	margin: 0 0 10px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.page-hero__sub {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: clamp(14px, 1.6vw, 18px);
	margin: 0 0 22px;
}

/* Deliberately oversized: this is the page's single conversion action. */
.page-hero__cta .wp-block-button__link {
	font-size: clamp(16px, 2vw, 22px) !important;
	font-weight: 800;
	padding: clamp(14px, 1.8vw, 22px) clamp(34px, 5vw, 68px) !important;
	border-radius: 8px;
	box-shadow: 0 4px 0 rgba(150, 110, 0, 0.55), 0 12px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, filter 0.15s ease;
}

.page-hero__cta .wp-block-button__link:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.page-hero__terms {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 12px;
	margin: 16px 0 0;
	max-width: 46ch;
}

.page-hero__terms a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }

@media (max-width: 820px) {
	.page-hero__img img { max-height: 340px; }
	.page-hero__overlay {
		background: linear-gradient(180deg, rgba(2, 24, 8, 0.3) 0%, rgba(2, 24, 8, 0.88) 62%);
		align-items: flex-end;
	}
	.page-hero__inner { padding-block: 24px; }
	.page-hero__inner > * { max-width: 100%; }
}