/*
 * Kasiinokompass — per-pattern CSS.
 * Small, hand-written rules for things theme.json can't express: the
 * eyebrow label, the hero/CTA radial glow, FAQ accordion markers, the
 * horizontal-scroll comparison table, rating bars, pros/cons columns.
 * Kept deliberately tiny — see SPEC §4 performance budgets.
 */

/* ---------- Header logo lockup ---------- */
.kasiinokompass-logo {
	display: inline-flex;
	align-items: center;
}

.kasiinokompass-logo img {
	display: block;
	height: 30px;
	width: auto;
}

/* ---------- Mono eyebrow label ---------- */
.kasiinokompass-eyebrow {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
	margin-bottom: var( --wp--preset--spacing--12 );
}

.has-ink-background-color .kasiinokompass-eyebrow,
.has-ink-2-background-color .kasiinokompass-eyebrow {
	color: var( --wp--preset--color--accent-bright );
}

/* ---------- Hero enrichment: layered glows + compass-rose line art + grain
   (pure CSS/SVG background-images, no canvas, no JS, no extra requests) ---------- */
:root {
	/* Two soft radial glows (accent-bright) at different sizes/positions —
	   reads as "layered" without any extra markup. */
	--kasiinokompass-glow-dark: radial-gradient( circle at 82% -10%, rgba( 112, 110, 255, .16 ) 0%, rgba( 112, 110, 255, 0 ) 55% ), radial-gradient( circle at 6% 115%, rgba( 112, 110, 255, .10 ) 0%, rgba( 112, 110, 255, 0 ) 50% );
	--kasiinokompass-glow-light: radial-gradient( circle at 85% -20%, rgba( 112, 110, 255, .10 ) 0%, rgba( 112, 110, 255, 0 ) 55% );
	/* Faint compass-rose / topographic line art — two rings, cross bearings,
	   diagonals, centre mark. Baked-in stroke-opacity keeps it very low
	   contrast; the light variant is a second, fainter copy. */
	--kasiinokompass-motif-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%23706EFF' stroke-opacity='0.35' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='90' fill='none' stroke='%23706EFF' stroke-opacity='0.25' stroke-width='1'/%3E%3Cline x1='200' y1='20' x2='200' y2='380' stroke='%23706EFF' stroke-opacity='0.25' stroke-width='1'/%3E%3Cline x1='20' y1='200' x2='380' y2='200' stroke='%23706EFF' stroke-opacity='0.25' stroke-width='1'/%3E%3Cline x1='73' y1='73' x2='327' y2='327' stroke='%23706EFF' stroke-opacity='0.15' stroke-width='1'/%3E%3Cline x1='327' y1='73' x2='73' y2='327' stroke='%23706EFF' stroke-opacity='0.15' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='4' fill='%23706EFF' fill-opacity='0.4'/%3E%3C/svg%3E");
	--kasiinokompass-motif-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%233D3AAD' stroke-opacity='0.12' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='90' fill='none' stroke='%233D3AAD' stroke-opacity='0.09' stroke-width='1'/%3E%3Cline x1='200' y1='20' x2='200' y2='380' stroke='%233D3AAD' stroke-opacity='0.09' stroke-width='1'/%3E%3Cline x1='20' y1='200' x2='380' y2='200' stroke='%233D3AAD' stroke-opacity='0.09' stroke-width='1'/%3E%3Cline x1='73' y1='73' x2='327' y2='327' stroke='%233D3AAD' stroke-opacity='0.06' stroke-width='1'/%3E%3Cline x1='327' y1='73' x2='73' y2='327' stroke='%233D3AAD' stroke-opacity='0.06' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='4' fill='%233D3AAD' fill-opacity='0.16'/%3E%3C/svg%3E");
	/* ~3% opacity grain via feTurbulence — flat CSS opacity, no animation. */
	--kasiinokompass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kasiinokompass-hero,
.kasiinokompass-hero-page,
.kasiinokompass-cta-band {
	position: relative;
	overflow: hidden;
}

.kasiinokompass-hero::before,
.kasiinokompass-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --wp--custom--glow );
	pointer-events: none;
}

.kasiinokompass-hero::before {
	background-image: var( --kasiinokompass-glow-dark ), var( --kasiinokompass-motif-dark );
	background-repeat: no-repeat, no-repeat;
	background-position: center, 78% 15%;
	background-size: auto, min( 640px, 70vw );
}

.kasiinokompass-hero-page::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var( --kasiinokompass-glow-light ), var( --kasiinokompass-motif-light );
	background-repeat: no-repeat, no-repeat;
	background-position: center, 88% 20%;
	background-size: auto, min( 520px, 60vw );
}

.kasiinokompass-hero::after,
.kasiinokompass-hero-page::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var( --kasiinokompass-grain );
	opacity: 0.03;
}

.kasiinokompass-hero > *,
.kasiinokompass-hero-page > *,
.kasiinokompass-cta-band > * {
	position: relative;
}

/* ---------- Template-part slots: hide cleanly when the dynamic block
   behind them has nothing to render (e.g. plugin not installed yet) ---------- */
.kasiinokompass-byline-part:empty,
.kasiinokompass-review-facts-part:empty,
.kasiinokompass-post-meta-part:empty,
.kasiinokompass-author-extra:empty {
	display: none;
}

/* ---------- Byline (E-E-A-T) ---------- */
.kasiinokompass-byline {
	display: flex;
	gap: var( --wp--preset--spacing--12 );
	align-items: flex-start;
}

.kasiinokompass-byline__avatar {
	border-radius: var( --wp--custom--radius--lg );
	flex-shrink: 0;
}

.kasiinokompass-byline__info p {
	margin: 0 0 var( --wp--preset--spacing--4 );
	font-size: var( --wp--preset--font-size--sm );
}

.kasiinokompass-byline__credentials {
	color: var( --wp--preset--color--body );
	opacity: 0.75;
}

.kasiinokompass-byline__credentials::before {
	content: "\2014";
	margin: 0 0.4em;
}

.kasiinokompass-byline__dates {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--xs );
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --wp--preset--spacing--12 );
}

/* ---------- Compact post-meta line (query-loop cards) ---------- */
.kasiinokompass-post-meta-line {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--body );
	opacity: 0.75;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --wp--preset--spacing--8 );
	margin: 0 0 var( --wp--preset--spacing--8 );
}

.kasiinokompass-post-meta-line a {
	text-decoration: none;
}

/* ---------- Author archive extras ---------- */
.kasiinokompass-author-extra p {
	font-size: var( --wp--preset--font-size--sm );
}

.kasiinokompass-author-extra__sameas a {
	margin-right: var( --wp--preset--spacing--12 );
}

/* ---------- FAQ accordion (core/details, zero JS) ---------- */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: var( --wp--preset--spacing--24 );
}

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

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-family: var( --wp--preset--font-family--dm-mono );
	color: var( --wp--preset--color--accent );
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details summary > * {
	display: inline;
}

/* ---------- Pros / cons two-column lists ---------- */
.kasiinokompass-pros-cons ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kasiinokompass-pros-cons li {
	position: relative;
	padding-left: var( --wp--preset--spacing--24 );
	margin-bottom: var( --wp--preset--spacing--8 );
}

.kasiinokompass-pros-cons li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}

.kasiinokompass-pros ul li::before {
	content: "+";
	color: var( --wp--preset--color--good );
}

.kasiinokompass-cons ul li::before {
	content: "\2212";
	color: var( --wp--preset--color--bad );
}

/* ---------- Comparison table: horizontal scroll on narrow viewports ---------- */
.kasiinokompass-comparison-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kasiinokompass-comparison-table-scroll table {
	min-width: 640px;
}

/* ---------- Rating panel: overall score + per-criterion bars ---------- */
.kasiinokompass-rating-panel__overall {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--xl );
	color: var( --wp--preset--color--rating );
	font-weight: 500;
}

.kasiinokompass-rating-bar {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--12 );
	margin-bottom: var( --wp--preset--spacing--12 );
}

.kasiinokompass-rating-bar__label {
	flex: 0 0 40%;
	font-size: var( --wp--preset--font-size--sm );
}

.kasiinokompass-rating-bar__label a {
	text-decoration: none;
}

.kasiinokompass-rating-bar__track {
	flex: 1 1 auto;
	height: 8px;
	background: var( --wp--preset--color--mist-2 );
	border-radius: var( --wp--custom--radius--sm );
	overflow: hidden;
}

.kasiinokompass-rating-bar__fill {
	height: 100%;
	background: var( --wp--preset--color--rating );
	border-radius: var( --wp--custom--radius--sm );
}

.kasiinokompass-rating-bar__value {
	flex: 0 0 auto;
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--sm );
}

/* ---------- Sources / citations list ---------- */
.kasiinokompass-sources ol {
	font-size: var( --wp--preset--font-size--sm );
	padding-left: var( --wp--preset--spacing--24 );
}

.kasiinokompass-sources li {
	margin-bottom: var( --wp--preset--spacing--8 );
}

/* ---------- Cluster nav chips ---------- */
.kasiinokompass-cluster-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--8 );
	margin: 0;
	padding: 0;
}

.kasiinokompass-cluster-nav li a {
	display: inline-block;
	padding: var( --wp--preset--spacing--8 ) var( --wp--preset--spacing--16 );
	background: var( --wp--preset--color--mist-2 );
	border-radius: var( --wp--custom--radius--sm );
	text-decoration: none;
	font-size: var( --wp--preset--font-size--sm );
}

/* ---------- Step list (HowTo) ---------- */
.kasiinokompass-step-list ol {
	counter-reset: kasiinokompass-step;
	list-style: none;
	padding: 0;
	margin: 0;
}

.kasiinokompass-step-list li {
	counter-increment: kasiinokompass-step;
	position: relative;
	padding-left: var( --wp--preset--spacing--48 );
	margin-bottom: var( --wp--preset--spacing--24 );
}

.kasiinokompass-step-list li::before {
	content: counter( kasiinokompass-step );
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-dark );
	border-radius: var( --wp--custom--radius--sm );
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--sm );
}

/* ---------- Hub intro jump-links ---------- */
.kasiinokompass-hub-intro__jumplinks {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--8 ) var( --wp--preset--spacing--16 );
	font-size: var( --wp--preset--font-size--sm );
}

/* ---------- Breadcrumb ---------- */
.kasiinokompass-breadcrumb {
	font-size: var( --wp--preset--font-size--xs );
	opacity: 0.7;
}

.kasiinokompass-breadcrumb a {
	text-decoration: none;
}

/* ---------- TOP-10 toplist ---------- */
.kasiinokompass-toplist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--12 );
}

.kasiinokompass-toplist__item {
	display: flex;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--16 );
	background: var( --wp--preset--color--paper );
	border-radius: var( --wp--custom--radius--lg );
	padding: var( --wp--preset--spacing--16 );
}

.kasiinokompass-toplist__rank {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--mist-2 );
	color: var( --wp--preset--color--body );
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 500;
}

.kasiinokompass-toplist__rank--top {
	background: var( --wp--preset--color--rating );
	color: var( --wp--preset--color--ink );
}

.kasiinokompass-toplist__tile {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--mist );
	color: var( --wp--preset--color--accent );
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
}

.kasiinokompass-toplist__body {
	flex: 1 1 auto;
	min-width: 0;
}

.kasiinokompass-toplist__name {
	font-weight: 600;
	text-decoration: none;
}

.kasiinokompass-toplist__score {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--sm );
	color: var( --wp--preset--color--rating );
}

.kasiinokompass-toplist__score-max {
	color: var( --wp--preset--color--body );
	opacity: 0.6;
}

.kasiinokompass-toplist__summary {
	margin: var( --wp--preset--spacing--4 ) 0 0;
	font-size: var( --wp--preset--font-size--sm );
	color: var( --wp--preset--color--body );
}

.kasiinokompass-toplist__criteria {
	flex: 0 0 auto;
	display: none;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--12 );
	max-width: 260px;
}

.kasiinokompass-toplist__criterion {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var( --wp--preset--font-size--xs );
}

.kasiinokompass-toplist__criterion-label {
	color: var( --wp--preset--color--body );
	opacity: 0.75;
	text-decoration: none;
}

.kasiinokompass-toplist__criterion-value {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-weight: 600;
}

@media ( min-width: 782px ) {
	.kasiinokompass-toplist__criteria {
		display: flex;
	}
}

/* ---------- Hub-topic icon (inc/icons.php) ---------- */
.kasiinokompass-hub-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var( --wp--custom--radius--sm );
	background: var( --wp--preset--color--paper );
	margin-bottom: var( --wp--preset--spacing--12 );
}

.kasiinokompass-hub-icon svg {
	width: 24px;
	height: 24px;
}

/* On the light hub-page hero the icon sits directly on mist, so give it a
   raised paper tile with a soft shadow instead — same tile used on hub-card
   grids, just larger. */
.kasiinokompass-hero-page .kasiinokompass-hub-icon {
	width: 56px;
	height: 56px;
	box-shadow: var( --wp--custom--shadow--soft );
}

.kasiinokompass-hero-page .kasiinokompass-hub-icon svg {
	width: 30px;
	height: 30px;
}

/* ---------- Methodology criteria chips (front page "Kuidas me hindame") ---------- */
.kasiinokompass-criteria-chips {
	margin-top: var( --wp--preset--spacing--24 );
	gap: var( --wp--preset--spacing--12 ) !important;
}

.kasiinokompass-criteria-chip {
	align-items: center !important;
	gap: var( --wp--preset--spacing--8 ) !important;
	background: var( --wp--preset--color--paper );
	border: 1px solid var( --wp--custom--border-color--light );
	border-radius: 999px;
	padding: var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--16 ) var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--4 );
}

.kasiinokompass-criteria-chip .kasiinokompass-hub-icon {
	width: 28px;
	height: 28px;
	margin-bottom: 0;
	background: var( --wp--preset--color--mist-2 );
}

.kasiinokompass-criteria-chip .kasiinokompass-hub-icon svg {
	width: 16px;
	height: 16px;
}

.kasiinokompass-criteria-chip p {
	margin: 0;
	font-weight: 500;
}

/* ---------- Review tile (query-loop card visual): real photo when set,
   otherwise a two-letter brand-initials tile on an accent gradient — never
   a fetched/recreated casino logo (SPEC: those are trademarks). ---------- */
.kasiinokompass-review-tile {
	border-radius: var( --wp--custom--radius--sm );
	margin-bottom: var( --wp--preset--spacing--12 );
	position: relative;
	overflow: hidden;
}

.kasiinokompass-review-tile--photo img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: var( --wp--custom--radius--sm );
}

.kasiinokompass-review-tile--initials {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --wp--preset--color--ink-2 ), var( --wp--preset--color--accent ) );
}

.kasiinokompass-review-tile__initials {
	font-family: var( --wp--preset--font-family--inter-display );
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--on-dark );
}

.kasiinokompass-review-tile__score {
	position: absolute;
	bottom: var( --wp--preset--spacing--8 );
	right: var( --wp--preset--spacing--8 );
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 500;
	color: var( --wp--preset--color--night );
	background: rgba( 245, 184, 46, .85 );
	border-radius: var( --wp--custom--radius--sm );
	padding: 2px 7px;
}

.kasiinokompass-review-tile__score::before {
	content: "\2605 ";
}

/* ---------- Colour rhythm: coloured left-border accents on callout boxes ---------- */
.kasiinokompass-tldr {
	border-left: 3px solid var( --wp--preset--color--accent-bright );
}

.kasiinokompass-definition {
	border-left: 3px solid var( --wp--preset--color--accent );
}

/* ---------- Pros / cons: tinted background per column, not just heading colour ---------- */
.kasiinokompass-pros {
	background: rgba( 30, 158, 106, .08 );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--24 );
}

.kasiinokompass-cons {
	background: rgba( 196, 69, 90, .08 );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--24 );
}

/* ---------- Rating panel: amber badge around the overall score ---------- */
.kasiinokompass-rating-panel__overall {
	display: inline-block;
	background: rgba( 245, 184, 46, .14 );
	border: 1px solid rgba( 245, 184, 46, .4 );
	border-radius: var( --wp--custom--radius--sm );
	padding: var( --wp--preset--spacing--4 ) var( --wp--preset--spacing--12 );
}

/* ---------- "Featured in" chips (plugin: inc/internal-links.php) ---------- */
.kasiinokompass-featured-in {
	background: var( --wp--preset--color--mist );
	border-radius: var( --wp--custom--radius--md );
	padding: var( --wp--preset--spacing--24 );
	margin-bottom: var( --wp--preset--spacing--32 );
}

.kasiinokompass-featured-in p {
	font-family: var( --wp--preset--font-family--dm-mono );
	font-size: var( --wp--preset--font-size--xs );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--body );
	opacity: 0.75;
	margin: 0 0 var( --wp--preset--spacing--12 );
}

.kasiinokompass-featured-in ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--8 );
}

.kasiinokompass-featured-in li a {
	display: inline-block;
	background: var( --wp--preset--color--paper );
	border: 1px solid var( --wp--custom--border-color--light );
	border-radius: var( --wp--custom--radius--sm );
	padding: var( --wp--preset--spacing--8 ) var( --wp--preset--spacing--12 );
	font-size: var( --wp--preset--font-size--sm );
	text-decoration: none;
}

.kasiinokompass-featured-in li a:hover {
	border-color: var( --wp--preset--color--accent );
}