/*
Theme Name: Sister Sites UK
Theme URI: https://sistersitesuk.co.uk
Description: 1:1 pixel-perfect Lovable→WordPress port of Sister Sites UK — a UK casino sister-sites directory. Dark forest-green editorial design (Rubik), fully admin-editable via the ssuk-core plugin (CPTs + ACF). Ships the verbatim compiled Lovable Tailwind v4 CSS.
Version: 0.1.0
Author: Fleet
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: ssuk
*/

/* The design comes entirely from assets/css/lovable.css (the compiled Lovable Tailwind v4
   bundle). Only WordPress-specific adjustments live here. */

/* Keep the sticky header clear of the WP admin bar. */
.admin-bar header.sticky.top-0 { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar header.sticky.top-0 { top: 46px; }
}

/* WP core alignment/caption niceties inside prose blocks. */
.ssuk-prose img { height: auto; max-width: 100%; }

/* Casino cards: compact ranked layout inspired by the provided reference. */
.ssuk-casino-card {
	position: relative;
	gap: 0;
	padding: 2rem .75rem .9rem;
	background:
		linear-gradient(180deg, oklch(100% 0 0 / .035), transparent 36%),
		var(--card);
	border-color: color-mix(in oklab, var(--primary) 42%, var(--border));
	box-shadow: 0 20px 40px -28px rgb(0 0 0 / .9);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ssuk-casino-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in oklab, var(--primary) 72%, white 8%);
	box-shadow: 0 26px 54px -30px rgb(0 0 0 / .95);
}

.ssuk-card-rank {
	position: absolute;
	top: .45rem;
	left: .8rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 1.65rem;
	height: 1.65rem;
	border: 1px solid var(--primary);
	border-radius: 999px;
	background: var(--background);
	color: var(--cream);
	font-size: .82rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 0 0 3px var(--card);
}

.ssuk-card-badge {
	position: absolute;
	top: .58rem;
	left: 3.75rem;
	z-index: 2;
	max-width: calc(100% - 4.5rem);
	padding: .18rem .55rem;
	border: 1px solid var(--primary);
	border-radius: 999px;
	background: var(--background);
	color: var(--cream);
	font-size: .48rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 0 0 3px var(--card);
}

.ssuk-card-logo-panel {
	display: block;
	height: 5.85rem;
	margin: .75rem 0 0;
	overflow: hidden;
	border: 0;
	background: transparent;
}

.ssuk-card-logo-panel > div {
	min-height: 100%;
	background: transparent !important;
}

.ssuk-card-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: stretch;
	padding-top: .85rem;
	text-align: center;
}

.ssuk-card-title {
	margin: 0;
	color: var(--cream);
	font-size: .78rem;
	line-height: 1.15;
}

.ssuk-card-rating {
	display: flex;
	justify-content: center;
	margin-top: .15rem;
	transform: scale(.82);
	transform-origin: center;
}

.ssuk-card-bonus {
	display: -webkit-box;
	min-height: 2.15rem;
	margin-top: .45rem;
	color: var(--cream);
	font-size: .66rem;
	font-weight: 800;
	line-height: 1.15;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ssuk-card-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem;
	margin-top: .95rem;
}

.ssuk-card-stat {
	display: flex;
	min-width: 0;
	min-height: 2.25rem;
	align-items: center;
	justify-content: space-between;
	gap: .35rem;
	padding: .45rem .5rem;
	border: 1px solid color-mix(in oklab, var(--primary) 38%, var(--border));
	border-radius: .28rem;
	background: oklch(0% 0 0 / .18);
	color: var(--cream);
}

.ssuk-card-stat dt {
	color: var(--muted-foreground);
	font-size: .48rem;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
}

.ssuk-card-stat dd {
	min-width: 0;
	color: var(--cream);
	font-size: .56rem;
	line-height: 1;
	text-align: right;
	overflow-wrap: anywhere;
}

.ssuk-card-payments {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .28rem;
	margin-top: .65rem;
}

.ssuk-card-payments .payment-square {
	min-width: 1.65rem;
	min-height: 1.1rem;
	padding: .18rem .32rem;
	font-size: .46rem;
}

.ssuk-card-operator,
.ssuk-card-terms {
	margin-top: .55rem;
	color: var(--muted-foreground);
	font-size: .54rem;
	line-height: 1.2;
}

.ssuk-card-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	margin-top: .85rem;
	padding: .58rem .75rem;
	border-radius: .3rem;
	background: var(--color-yellow-400);
	color: var(--color-black);
	font-size: .68rem;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
}

.ssuk-card-cta:hover {
	background: var(--color-yellow-300);
}

.ssuk-card-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	margin-top: .75rem;
	color: var(--muted-foreground);
	font-size: .62rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ssuk-card-review:hover {
	color: var(--primary);
}

@media (max-width: 520px) {
	.ssuk-casino-card {
		padding-inline: .62rem;
	}

	.ssuk-card-logo-panel {
		height: 5.2rem;
	}

	.ssuk-card-stats {
		grid-template-columns: 1fr;
	}
}