/*
Theme Name: SlotAffe
Description: Child theme für SlotAffe – iGaming-Affiliate. Dunkles Pflaumen-Espresso, warme Gold-Akzente, Grün nur als Action-Farbe.
Author: Tobias Liauw
Template: generatepress
Version: 1.5.2
License: GPL-2.0
Text Domain: slotaffe
*/

/* ============ Design tokens (OKLCH, see DESIGN.md) ============ */
:root {
	--sa-measure: min(1180px, calc(100% - 2rem));
	--sa-bg:        oklch(0.17 0.017 305);
	--sa-surface:   oklch(0.21 0.02 305);
	--sa-surface-2: oklch(0.25 0.022 305);
	--sa-ink:       oklch(0.94 0.008 90);
	--sa-ink-dim:   oklch(0.75 0.015 90);
	--sa-gold:      oklch(0.76 0.13 85);
	--sa-gold-deep: oklch(0.62 0.12 85);
	--sa-action:    oklch(0.72 0.19 152);
	--sa-action-hi: oklch(0.78 0.19 152);
	--sa-line:      oklch(0.30 0.02 305);
	--sa-warn:      oklch(0.68 0.15 40);
	--sa-action-ink: oklch(0.19 0.03 152);

	/* legacy aliases – existing markup keeps working */
	--gp-dark: var(--sa-bg);
	--gp-surface: var(--sa-surface);
	--gp-gold: var(--sa-gold);
	--gp-green: var(--sa-action);
	--gp-text: var(--sa-ink);

	/* igaming-wp card system hooks */
	--ig-gold: var(--sa-gold);
	--ig-gold-bright: oklch(0.84 0.13 85);
	--ig-accent: var(--sa-action);
	--ig-surface: var(--sa-surface);
	--ig-ink: oklch(0.19 0.03 152);
	--ig-card-grad: var(--sa-surface-2); /* tone step, not a gradient */
	--ig-text: var(--sa-ink);
	--ig-text-dim: var(--sa-ink-dim);

	/* ledger page tokens (igaming-wp/assets/front.css) — dark violet ground, gold brand */
	--ig-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
	--ig-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ig-page-bg: oklch(0.155 0.017 305);
	--ig-page-2:  oklch(0.205 0.020 305);
	--ig-page-3:  oklch(0.255 0.022 305);
	--ig-brand: var(--sa-gold);
	--ig-brand-ink: oklch(0.20 0.05 85);
	--ig-paper: oklch(0.90 0.010 90);
	--ig-paper-ink: oklch(0.22 0.015 85);
	--ig-measure: 1168px;

	--sa-radius: 10px;
}

/* ============ Base ============ */
body, button, input, textarea, select {
	font-family: var(--ig-body);
}
h1, h2, h3, .site-title, .ig-bonus-pct, .ig-rank-badge, .bonus-amount{
	font-family: var(--ig-display);
}
html { background: var(--sa-bg); }
body { background: var(--sa-bg); color: var(--sa-ink); }
.site-header, .site-footer, .site-footer a { background: transparent; }
.site-footer { color: var(--sa-ink-dim); }
.entry-content p, .entry-content li { color: var(--sa-ink); }
.entry-content { color: var(--sa-ink); }
a { color: var(--sa-gold); }
a:hover { color: var(--sa-ink); }

/* Tinted selection + focus ring in brand colour */
::selection { background: oklch(0.76 0.13 85 / 0.25); }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
	outline: 2px solid var(--sa-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============ Hero ============ */

























/* hero side: featured pick + live log */





















@keyframes sa-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }













/* ============ Trust bar ============ */




/* ============ CTA ============ */
.btn-cta, .wp-block-button__link, .btn.btn-cta {
	display: inline-block; width: 100%; box-sizing: border-box; text-align: center;
	background: var(--sa-gold);
	color: oklch(0.22 0.03 85);
	font-weight: 800; text-decoration: none; border-radius: 12px;
	padding: 0.75em 1.4em;
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-cta:hover, .wp-block-button__link:hover, .btn.btn-cta:hover {
	filter: brightness(1.06); color: oklch(0.22 0.03 85); transform: translateY(-1px);
}
.ig-rank-offer .btn-cta{ width: 100%; }

/* ============ Ranked cards (shell layout ships in igaming-wp CSS) ============ */
ol.ig-ranked { margin: 0 0 2.5rem; }
.ig-rank-art { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.ig-rank-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-card-title { font-size: 1.35rem; margin: 0 0 0.35em; letter-spacing: -0.01em; }
.ig-card-title a { color: var(--sa-ink); text-decoration: none; }
.ig-card-title a:hover { color: var(--sa-gold); }
.ig-card-excerpt { color: var(--sa-ink-dim); margin: 0 0 0.6em; line-height: 1.6; max-width: 62ch; }
.ig-score {
	display: inline-block; font-weight: 700; font-size: 0.85rem;
	background: oklch(0.76 0.13 85 / 0.12); color: var(--sa-gold);
	border: 0; border-radius: 6px; padding: 0.15em 0.55em;
}
.bonus-amount { font-weight: 800; }
.ig-wager-note { font-size: .875rem; color: var(--sa-ink-dim); }

/* fact chips + stars in brand palette */
.ig-chip { background: oklch(0.21 0.02 305 / 0.8); border-color: var(--sa-line); }
.ig-code-chip {
	position: relative; display: inline-flex; align-items: center; gap: 0.5em;
	cursor: pointer; user-select: none;
	font-family: var(--ig-body); font-size: 0.85rem; font-weight: 600;
	background: oklch(0.76 0.13 85 / 0.14); color: var(--sa-gold);
	background: var(--sa-surface); border-radius: 6px; padding: .35em .8em;
	transition: background 0.15s ease-out;
}
.ig-code-chip:hover { background: oklch(0.76 0.13 85 / 0.24); }
.ig-code-chip.is-copied { border-style: solid; color: var(--sa-action); }
.ig-copy-hint {
	font-family: "Manrope", sans-serif; font-size: .875rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.05em; color: var(--sa-ink-dim);
}
.ig-code-chip.is-copied .ig-copy-hint { color: var(--sa-action); }
.ig-review-link { font-size: 0.85rem; color: var(--sa-ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.ig-review-link:hover { color: var(--sa-gold); }
@media (max-width: 560px) {
	.ig-rank-art { display: none; }
}

/* ============ Cards (casino grid) ============ */
.ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 3vw, 1.6rem); margin: 0 0 2.5rem; }
.casino-card, .ig-slot-card {
	background: var(--sa-surface); border-radius: var(--sa-radius);
	padding: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem;
	transition: border-color 0.15s ease-out;
}
.casino-card:hover, .ig-slot-card:hover { border-color: oklch(0.76 0.13 85 / 0.45); }
.ig-card-art { display: block; margin: -1.3rem -1.3rem 0.9rem; border-radius: var(--sa-radius) var(--sa-radius) 0 0; overflow: hidden; aspect-ratio: 16 / 9; }
.ig-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-bonus { margin: 0; }
.ig-bonus .bonus-amount { font-size: 1.3rem; color: var(--sa-gold); }
.ig-bonus small { display: block; font-size: .875rem; color: var(--sa-ink-dim); }
.ig-code { margin: 0; }

/* ============ Slot grid ============ */
.ig-slot-card img.ig-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.ig-provider { margin: 0; font-size: .875rem; text-transform: none; letter-spacing: 0; color: var(--sa-ink-dim); }
.rtp-badge, .volatility { display: inline-block; font-size: .875rem; font-weight: 600; border-radius: 6px; padding: 0.2em 0.6em; margin-right: 0.3rem; }
.rtp-badge { background: var(--sa-surface-2); color: var(--sa-ink-dim); }
.volatility-high { background: oklch(0.68 0.15 40 / 0.15); color: var(--sa-warn); }
.volatility-medium, .volatility-med { background: oklch(0.76 0.13 85 / 0.15); color: var(--sa-gold); }
.volatility-low { background: oklch(0.72 0.19 152 / 0.15); color: var(--sa-action); }

/* ============ How-it-works steps ============ */






/* ============ Offer box (single casino/slot) ============ */









/* Single artwork banner */


/* ============ FAQ ============ */







/* ============ Footer legal ============ */
.sa-footer-legal { padding: 1.4rem 0; margin-top: 2.5rem; font-size: 0.875rem; color: var(--sa-ink-dim); line-height: 1.7; }
.sa-footer-legal a { color: var(--sa-ink-dim); text-decoration: underline; text-underline-offset: 2px; }
.sa-footer-legal a:hover { color: var(--sa-warn); }




.sa-footer-age { background: var(--sa-warn); color: var(--sa-bg); margin-left: auto; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; padding: .3em .8em; border-radius: 999px; }
@media (max-width: 560px) { .sa-footer-age { margin-left: 0; } }


/* ============ Tables (reviews) ============ */
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--sa-line); padding: 0.6em 0.9em; }
.wp-block-table thead th { background: var(--sa-surface-2); }

/* ============ Content width ============ */
.entry-content { max-width: 72ch; }

/* ============ Hero extras (front-page.php v1.2) ============ */



.btn-ghost {
	display: inline-block; padding: 0.75em 1.6em; border-radius: 999px;
	background: var(--sa-surface); border: 0; color: var(--sa-ink); text-decoration: none; font-weight: 600;
	transition: border-color 0.15s ease-out;
}
.btn-ghost:hover { border-color: var(--sa-gold); color: var(--sa-gold); }


/* layout rhythm */
.sa-wrap { width: var(--sa-measure); margin-inline: auto; }
.site-main > .sa-wrap + .sa-wrap { margin-top: clamp(2rem, 5vw, 3.5rem); }

#top-casinos h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.015em; margin: 0 0 1.1rem; }


/* steps: markup uses <strong> headings */


/* FAQ as details/summary */


/* subtle hero motion: reel strip drift + star twinkle, respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
	
	
	
	
	
	
	
	
	
	@keyframes sa-reel-drift {
		0%, 100% { transform: translateY(0); }
		8%  { transform: translateY(-7px); }
		16% { transform: translateY(0); }
	}
	@keyframes sa-twinkle {
		0%, 100% { opacity: 1; transform: scale(1); }
		50% { opacity: 0.45; transform: scale(0.8); }
	}
	@keyframes sa-float {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(-16px) rotate(8deg); }
	}
	@keyframes sa-sparkle {
		0%, 100% { opacity: 0.15; transform: scale(0.6); }
		50% { opacity: 0.9; transform: scale(1.15); }
	}
}

/* WP caps entry prose at 72ch as soon as there is no sidebar. Put the title on the same edge so
   the text column has one clean right line, and let the comparison grids keep full width. */
.entry-header, .page-header { max-width: 72ch; }
.entry-content:has(.ig-grid), .entry-content:has(.ig-rank-list) { max-width: none; }
.no-sidebar .inside-article, .no-sidebar .site-main { max-width: none; }

/* Grid items take min-width:auto, so the featured artwork (intrinsic ~900px) pushed the hero's
   right column out of its track and off the viewport. Clamp the items, then let the artwork fill. */





/* Detail pages: the artwork banner was 1120px wide next to 747px of prose, and cropped a fifth of
   the 16:9 artwork. Put banner and offer box on the same measure as the text: one clean
   column, no crop. */



/* Mobile hero: the live-log ticker is decoration, the featured pick is the reason to click.
   Dropping the ticker plus tighter padding takes ~150 px off the first screen. */


/* the closing wordmark: the name stretched edge to edge, the footer's signature */
.sa-footer-wordmark { display: block; margin: clamp(2rem, 6vw, 4rem) 0 1.25rem; color: var(--sa-ink); }
.sa-footer-wordmark svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: block; fill: currentColor; }
/* the old rule gave the mark width:100% — designed for the stretched SVG word. As a lockup
   that made a 356px icon in a 356px box, and the footer scrolled 56px sideways on a phone. */
.sa-footer-wordmark .ig-logo { font-size: clamp(1.6rem, 7vw, 3.4rem); align-items: center; }

/* One ground on the ledger page. The hero, the board and the bands are fields of the same colour,
   so the front page reads the page token instead of the theme body colour — otherwise the sections
   meet at a seam. */
body.front-page { background: var(--ig-page-bg); color: var(--ig-fg); }
.ig-page-content { padding-block: clamp(2.5rem, 7vh, 5rem); }

/* ============ Header navigation ============
   GeneratePress 3.6 renders the menu through header elements (#site-navigation .menu-item a), not
   .main-navigation. The rule the children carried matched nothing, so the menu fell back to the
   theme's dark default and disappeared into a dark page — 1.2:1, measured on every page but the
   front one, and invisible to every screenshot check that only looks for white space. */
#site-navigation, #site-navigation .menu-item a, #site-navigation a, #site-navigation a:visited {
	color: var(--sa-ink);
}
#site-navigation a:hover, #site-navigation a:focus-visible,
#site-navigation .current-menu-item > a, #site-navigation .current_page_item > a { color: var(--sa-gold); }
.site-header a, .site-title a, .header-logo a { color: var(--sa-ink); }
.site-header a:hover, .site-title a:hover { color: var(--sa-gold); }

body { font-size: var(--ig-step-body); }

/* Header brand: mark + name, one line, links home. */
.inside-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ig-header-logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.ig-header-logo .ig-mark { width: 34px; height: 34px; }
.ig-header-logo .ig-logo-word { font-size: 1.35rem; }
.ig-footer-wordmark .ig-logo { gap: .35em; }
.ig-footer-wordmark .ig-mark { width: 1.2em; height: 1.2em; }
.ig-footer-wordmark { --ig-mark-punch: var(--sa-surface); }

@media (max-width: 640px) {
	/* GP lays .inside-header out as a wrapping flex row on phones; the lockup then shared the line
	   with the menu toggle, got squeezed to its minimum and ran 38px past the screen. */
	.site-header .inside-header { display: block; }
	.ig-header-logo .ig-logo-word { white-space: nowrap; }
}

/* GeneratePress 3.6 prints our lockup as the first child of <body> — outside the header element,
   so it had no gutter and floated in the corner. Give it the page measure and its own surface:
   it becomes the branded bar every page was missing. */
.ig-header-logo {
	display: flex; align-items: center; gap: .6rem; width: 100%; box-sizing: border-box;
	padding: .85rem max(1rem, calc(50% - var(--sa-measure) / 2));
	background: var(--sa-surface); text-decoration: none;
}
.ig-header-logo .ig-mark { width: 30px; height: 30px; }
.ig-header-logo .ig-logo-word { font-size: 1.3rem; }

/* Primary nav at 12.8px is a footnote, not a wayfinding control, not a wayfinding control. */
#site-navigation .menu-item a, #site-navigation .menu-toggle { font-size: .95rem; }