/*
Theme Name: Casino General
Theme URI: https://casino-general.com/
Author: Casino General
Description: Lightweight classic theme for casino-general.com: independent casino reviews, licence research and tools. No block editor, no feeds, no XML-RPC. Creates its pages and imports the reviews on the first admin visit.
Version: 1.0.0
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.5
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casino-general
*/

@layer reset, tokens, base, layout, components, utilities;

@view-transition { navigation: auto; }

/* ---------- reset ---------- */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		interpolate-size: allow-keywords;
		scrollbar-gutter: stable;
	}
	body { min-block-size: 100dvh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
	img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
	input, button, select, textarea { font: inherit; color: inherit; }
	:where(h1, h2, h3, h4) { line-height: 1.1; text-wrap: balance; }
	:where(p, li, dd) { text-wrap: pretty; }
	:where(ul, ol)[class] { list-style: none; padding: 0; }
}

/* ---------- tokens ---------- */
@layer tokens {
	:root {
		/* The site is always dark, as in the approved mock-up. Change to "dark light" to follow the visitor's system setting. */
		color-scheme: dark;
		--bg:        light-dark(oklch(98% 0.004 260), oklch(18% 0.03 262));
		--bg-raised: light-dark(oklch(100% 0 0),     oklch(22.5% 0.032 262));
		--bg-sunk:   light-dark(oklch(95.5% 0.008 260), oklch(15% 0.028 262));
		--line:      light-dark(oklch(88% 0.012 260), oklch(32% 0.035 262));
		--text:      light-dark(oklch(22% 0.03 262),  oklch(95% 0.008 262));
		--muted:     light-dark(oklch(44% 0.025 262), oklch(73% 0.025 262));
		--accent:    oklch(79% 0.13 80);
		--accent-text: light-dark(oklch(47% 0.11 68), oklch(81% 0.13 80));
		--on-accent: oklch(19% 0.03 80);
		--good:    light-dark(oklch(42% 0.09 165), oklch(84% 0.1 165));
		--good-bg: light-dark(oklch(94% 0.035 165), oklch(28% 0.05 170));
		--bad:     light-dark(oklch(46% 0.15 20),  oklch(82% 0.08 15));
		--bad-bg:  light-dark(oklch(95% 0.025 20), oklch(26% 0.05 15));
		--warn:    light-dark(oklch(45% 0.1 85),   oklch(88% 0.08 90));
		--warn-bg: light-dark(oklch(95% 0.04 90),  oklch(27% 0.045 85));

		--radius: 14px;
		--gutter: clamp(16px, 4vw, 32px);
		--wrap: 1200px;
		--prose: 72ch;

		--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
		--font-display: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
	}
}

/* ---------- base ---------- */
@layer base {
	body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; }
	a { color: var(--accent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px;
		&:hover { text-decoration-thickness: 2px; } }
	:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
	h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-stretch: condensed; letter-spacing: 0.005em; }
	h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem); }
	h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
	h3 { font-size: 1.2rem; }
	hr { border: 0; border-block-start: 1px solid var(--line); }
	small { font-size: 0.8125rem; }
	time { font-variant-numeric: tabular-nums; }
	::selection { background: var(--accent); color: var(--on-accent); }
}

/* ---------- layout ---------- */
@layer layout {
	.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
	.section { padding-block: clamp(36px, 6vw, 64px); }
	.section + .section { padding-block-start: 0; }
	.stack { display: flex; flex-direction: column; gap: var(--gap, 1rem); }
	.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); }
	.split { display: grid; gap: clamp(24px, 4vw, 40px); grid-template-columns: minmax(0, 1fr);
		@media (width >= 960px) { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
	.split > aside { @media (width >= 960px) { position: sticky; inset-block-start: 24px; } }
	main { display: block; }
}

/* ---------- components ---------- */
@layer components {
	.skip { position: absolute; inset-inline-start: 8px; inset-block-start: -60px; padding: 10px 14px; border-radius: 8px;
		background: var(--accent); color: var(--on-accent); font-weight: 700; z-index: 10;
		&:focus { inset-block-start: 8px; } }

	/* top bar + header */
	.topbar { background: var(--bg-sunk); border-block-end: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted);
		& .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-block: 7px; align-items: center; }
		& a { color: var(--muted); } }
	.age { display: inline-grid; place-items: center; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; font-weight: 700; color: var(--text); }

	.site-header { border-block-end: 1px solid var(--line);
		& > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 14px; } }
	.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
		font-family: var(--font-display); font-weight: 800; font-stretch: condensed; font-size: 1.45rem; letter-spacing: 0.06em; text-transform: uppercase;
		& svg { inline-size: 34px; color: var(--accent); } }
	.menu-toggle { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 10px;
		border: 1px solid var(--line); background: var(--bg-raised); cursor: pointer; }
	.site-nav {
		& .menu { display: flex; flex-direction: column; gap: 4px; }
		& a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; font-weight: 500; }
		& .current-menu-item > a, & .current-menu-ancestor > a, & a:hover { color: var(--accent-text); }
	}
	.site-nav:popover-open { position: fixed; inset: 0 0 0 auto; margin: 0; inline-size: min(320px, 86vw); block-size: 100dvh;
		padding: 24px; border: 0; border-inline-start: 1px solid var(--line); background: var(--bg-raised); color: var(--text); }
	.site-nav::backdrop { background: oklch(0% 0 0 / 0.45); }
	@media (width >= 900px) {
		.menu-toggle { display: none; }
		.site-nav, .site-nav:not(:popover-open) { display: block; position: static; inset: auto; inline-size: auto; block-size: auto;
			padding: 0; border: 0; background: none; overflow: visible; color: inherit; }
		.site-nav .menu { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; }
	}

	/* breadcrumbs, eyebrow, disclosure */
	.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none;
		font-size: 0.8125rem; color: var(--muted);
		& li { display: inline-flex; align-items: center; gap: 6px; }
		& li:not(:last-child)::after { content: "›"; color: var(--muted); opacity: 0.7; }
		& a { color: var(--muted); text-decoration: none; &:hover { color: var(--text); text-decoration: underline; } }
		& [aria-current] { color: var(--text); } }

	/* pagination: the_posts_pagination() and paginate_links() */
	.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
	.pagination .page-numbers { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: 14px;
		border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); color: var(--text);
		font-weight: 600; text-decoration: none;
		&:is(a):hover { border-color: var(--accent); color: var(--accent-text); }
		&.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
		&.dots { border-color: transparent; background: none; min-inline-size: auto; padding-inline: 4px; } }
	.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
	.lead { font-size: 1.125rem; color: var(--muted); max-inline-size: 62ch; }
	.byline { font-size: 0.875rem; color: var(--muted); }
	.disclosure { font-size: 0.8125rem; color: var(--muted); border-inline-start: 3px solid var(--line); padding-inline-start: 12px; max-inline-size: 80ch; }

	/* badges and buttons */
	.badges { display: flex; flex-wrap: wrap; gap: 8px; }
	.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
		background: var(--bg-sunk); color: var(--text); border: 1px solid var(--line);
		&[data-tone="good"] { background: var(--good-bg); color: var(--good); border-color: transparent; }
		&[data-tone="bad"] { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
		&[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); border-color: transparent; } }
	.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 0 20px;
		border-radius: 10px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent);
		font-weight: 700; text-decoration: none; cursor: pointer;
		&:hover { filter: brightness(1.06); }
		&.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); } }

	/* hero */
	.hero { border-block-end: 1px solid var(--line);
		& .wrap { display: grid; gap: 32px; padding-block: clamp(40px, 7vw, 72px);
			@media (width >= 960px) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; } }
		& h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); line-height: 0.98; } }
	.stats { display: flex; flex-wrap: wrap; gap: 28px;
		& b { display: block; font-family: var(--font-display); font-size: 2.2rem; font-stretch: condensed; line-height: 1; }
		& span { font-size: 0.8125rem; color: var(--muted); } }

	/* cards */
	.card { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; padding: 22px;
		border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); color: var(--text);
		& h3 { font-size: 1.25rem; }
		& h3 a { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; } }
		& p { color: var(--muted); font-size: 0.9375rem; }
		&:has(h3 a) { position: relative; &:hover { border-color: var(--accent); } } }
	.card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
		@container (inline-size > 420px) { justify-content: space-between; } }
	.panel { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
	.panel--good { background: var(--good-bg); border-color: transparent; color: var(--text); }
	.panel--bad { background: var(--bad-bg); border-color: transparent; }
	.panel--warn { background: var(--warn-bg); border-color: transparent; }
	.empty { padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }

	/* fact box */
	.facts { display: grid; gap: 0; font-size: 0.9375rem;
		& div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding-block: 9px; border-block-start: 1px solid var(--line); }
		& dt { color: var(--muted); }
		& dd { font-weight: 600; overflow-wrap: anywhere; } }
	/* Cards share the rows of their grid line (subgrid), so bonus, facts, licence and button line up. */
	.offers > .grid { row-gap: 20px; }
	.offer { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 12px; align-content: start; padding: 20px;
		border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised);
		transition: border-color 0.2s, transform 0.2s;
		&:hover { border-color: oklch(from var(--accent) l c h / 0.6); }
		& .offer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
		& h3 { font-size: 1.25rem; margin: 0; }
		& .offer__bonus { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px;
			background: linear-gradient(135deg, oklch(from var(--accent) l c h / 0.16), oklch(from var(--accent) l c h / 0.04));
			border: 1px solid oklch(from var(--accent) l c h / 0.25); }
		& .offer__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
		& .offer__headline { font-size: 1.375rem; line-height: 1.2; color: var(--text); text-wrap: balance; }
		& .offer__extra { font-size: 1rem; font-weight: 700; color: var(--accent-text); }
		& .offer__note { color: var(--muted); }
		& .offer__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0;
			& div { padding: 8px 10px; border-radius: 10px; background: var(--bg-sunk); }
			& dt { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
			& dd { margin: 2px 0 0; font-weight: 700; font-size: 0.9375rem; overflow-wrap: anywhere; }
			& dd.is-empty { color: var(--muted); font-weight: 400; } }
		& .offer__methods { display: flex; flex-wrap: wrap; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none;
			& li { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; color: var(--muted); } }
		& .offer__licence { margin: 0; align-self: start; }
		& .offer__bonus { align-content: start; }
		& .btn { align-self: end; justify-content: center; text-align: center; min-block-size: 48px; font-size: 1rem; }
		& .offer__terms { color: var(--muted); font-size: 0.75rem; text-align: center; }
		& .offer__review { font-size: 0.875rem; text-align: center; } }
	.badge[data-tone="partner"] { background: transparent; color: var(--accent-text); border-color: oklch(from var(--accent) l c h / 0.5); }
	.cta-box { display: flex; flex-direction: column; gap: 14px; }	.no-link { padding: 14px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 0.9375rem; }

	/* article prose */
	.prose { max-inline-size: var(--prose); font-size: 1.0625rem;
		& > * + * { margin-block-start: 1em; }
		& h2 { margin-block-start: 1.8em; }
		& h3 { margin-block-start: 1.4em; }
		& ul, & ol { padding-inline-start: 1.3em; }
		& li + li { margin-block-start: 0.35em; }
		& table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
		& th, & td { padding: 10px 12px; border-block-start: 1px solid var(--line); text-align: start; vertical-align: top; }
		& .todo { padding: 16px; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent-text); font-weight: 600; } }

	/* FAQ */
	.faq { display: grid; gap: 10px; max-inline-size: var(--prose); }
	.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); padding: 16px 18px;
		&::details-content { block-size: 0; overflow: clip; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete; }
		&[open]::details-content { block-size: auto; }
		& summary { cursor: pointer; font-weight: 600; }
		& p { margin-block-start: 10px; color: var(--muted); } }

	/* author + play safe */
	.author-box { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
		& img { border-radius: 50%; inline-size: 72px; block-size: 72px; }
		& div { flex: 1 1 280px; } }
	.play-safe { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }

	/* tables */
	.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
	.data { inline-size: 100%; min-inline-size: 720px; border-collapse: collapse; font-size: 0.875rem; background: var(--bg-raised);
		& th { padding: 12px 14px; text-align: start; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
		& td { padding: 12px 14px; border-block-start: 1px solid var(--line); vertical-align: top; }
		& .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; } }

	/* CSS-only filter chips (research table) */
	.filters { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0;
		& legend { margin-block-end: 8px; font-weight: 600; }
		& label { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 16px; border-radius: 999px;
			border: 1px solid var(--line); background: var(--bg-raised); cursor: pointer; font-size: 0.875rem; }
		& label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
		& label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
		& input { position: absolute; opacity: 0; pointer-events: none; } }
	.audit:has(#f-confirmed:checked) .audit-list > li:not([data-cat="confirmed"]),
	.audit:has(#f-missing:checked) .audit-list > li:not([data-cat="missing"]),
	.audit:has(#f-none:checked) .audit-list > li:not([data-cat="none"]),
	.audit:has(#f-other:checked) .audit-list > li:not([data-cat="other"]) { display: none; }

	/* Research data: one compact row per casino (name · status · licence detail) */
	.audit-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden;
		& > li { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 270px) minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 14px 18px; }
		& > li + li { border-block-start: 1px solid var(--line); }
		& .audit-list__name { font-weight: 700; padding-block-start: 3px;
			& a { color: var(--text); text-decoration: none; &:hover { color: var(--accent-text); text-decoration: underline; } } }
		& .audit-list__detail { font-size: 0.875rem; color: var(--muted); padding-block-start: 3px;
			& code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8125rem; color: var(--text); }
			& details { margin-block-start: 4px; }
			& summary { cursor: pointer; font-size: 0.8125rem; color: var(--accent-text); inline-size: fit-content; }
			& details p { margin: 6px 0 0; } }
		@media (width < 760px) {
			& > li { grid-template-columns: 1fr auto; }
			& .audit-list__detail { grid-column: 1 / -1; } } }
	.bar { display: grid; grid-template-columns: minmax(0, 260px) 1fr 40px; gap: 6px 14px; align-items: center;
		& meter { inline-size: 100%; block-size: 18px; }
		& b { text-align: end; } }

	/* calculator */
	.calc { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
		& label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--muted); }
		& .full { grid-column: 1 / -1; } }
	.field { min-block-size: 46px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-sunk); font-size: 1rem; color: var(--text); }
	.results { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
		& div { padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-raised); }
		& span { display: block; font-size: 0.75rem; color: var(--muted); }
		& output { font-family: var(--font-display); font-stretch: condensed; font-size: 2rem; font-weight: 700; } }
	.verdict { padding: 16px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--line);
		&[data-tone="bad"] { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
		&[data-tone="good"] { background: var(--good-bg); color: var(--good); border-color: transparent; } }

	/* consent banner */
	.consent { position: fixed; inset: auto 12px 12px 12px; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
		max-inline-size: 980px; margin-inline: auto; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius);
		background: var(--bg-raised); box-shadow: 0 10px 40px oklch(0% 0 0 / 0.4); font-size: 0.9375rem;
		& p:first-child { flex: 1 1 420px; }
		& .consent__actions { display: flex; gap: 8px; }
		& .btn { min-block-size: 44px; } }

	/* search */
	.search-form { display: flex; gap: 8px; max-inline-size: 520px;
		& .field { flex: 1; } }

	/* footer */
	.site-footer { margin-block-start: 48px; border-block-start: 1px solid var(--line); background: var(--bg-sunk); font-size: 0.875rem; color: var(--muted);
		& .wrap { display: grid; gap: 24px; padding-block: 40px; }
		& .menu { display: flex; flex-wrap: wrap; gap: 6px 20px; }
		& a { color: var(--muted); }
		& p { max-inline-size: 90ch; } }
	.help { display: flex; flex-wrap: wrap; gap: 8px 18px; }
}

/* ---------- utilities ---------- */
@layer utilities {
	.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.muted { color: var(--muted); }
	.mt-0 { margin-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}