/*
Theme Name: Casino Fuchs
Description: Child theme für Casino Fuchs – iGaming-Affiliate. Wald-in-der-Daemmerung: tiefes Pine, Honig-Orange als Identitaet, Ember-Rot nur als Action-Farbe.
Author: Tobias Liauw
Template: generatepress
Version: 1.7.3
License: GPL-2.0
Text Domain: casino-fuchs
*/

/* ============ Design tokens (OKLCH, see DESIGN.md) ============ */
:root {
	--cf-measure: min(1180px, calc(100% - 2rem));
	--cf-bg:         oklch(0.185 0.022 165);
	--cf-surface:    oklch(0.225 0.024 165);
	--cf-surface-2:  oklch(0.265 0.026 165);
	--cf-ink:        oklch(0.94 0.012 95);
	--cf-ink-dim:    oklch(0.76 0.018 95);
	--cf-honey:      oklch(0.74 0.14 62);
	--cf-honey-deep: oklch(0.60 0.12 62);
	--cf-action:     oklch(0.62 0.11 172); /* pine, not terracotta: bone + clay was reading as the generic warm palette */
	--cf-action-hi:  oklch(0.70 0.11 172);
	--cf-action-ink: oklch(0.985 0.006 95);
	--cf-line:       oklch(0.31 0.022 165);
	--cf-warn:       oklch(0.68 0.15 40);

	/* legacy aliases – igaming-wp plugin CSS keeps working on the fox palette */
	--gp-dark: var(--cf-bg);
	--gp-surface: var(--cf-surface);
	--gp-gold: var(--cf-honey);
	--gp-green: var(--cf-action);
	--gp-text: var(--cf-ink);

	/* plugin's own var names, in case shortcodes reference them */
	--sa-bg: var(--cf-bg);
	--sa-surface: var(--cf-surface);
	--sa-surface-2: var(--cf-surface-2);
	--sa-ink: var(--cf-ink);
	--sa-ink-dim: var(--cf-ink-dim);
	--sa-gold: var(--cf-honey);
	--sa-gold-deep: var(--cf-honey-deep);
	--sa-action: var(--cf-action);
	--sa-action-hi: var(--cf-action-hi);
	--sa-action-ink: var(--cf-action-ink);
	--sa-line: var(--cf-line);
	--sa-warn: var(--cf-warn);

	/* igaming-wp card system hooks */
	--ig-gold: var(--cf-honey);
	--ig-gold-bright: oklch(0.84 0.13 62);
	--ig-accent: var(--cf-action);
	--ig-surface: var(--cf-surface);
	--ig-ink: oklch(0.985 0.006 95);
	--ig-card-grad: var(--cf-surface-2); /* tone step, not a gradient */
	--ig-text: var(--cf-ink);
	--ig-text-dim: var(--cf-ink-dim);

	/* ledger page tokens (igaming-wp/assets/front.css) — green ground, fox brand */
	--ig-display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', sans-serif;
	--ig-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ig-page-bg: oklch(0.165 0.022 165);
	--ig-page-2:  oklch(0.215 0.024 165);
	--ig-page-3:  oklch(0.265 0.026 165);
	--ig-brand: var(--cf-action);
	--ig-brand-ink: oklch(0.20 0.05 30);
	--ig-paper: oklch(0.90 0.010 90);
	--ig-paper-ink: oklch(0.22 0.015 85);
	--ig-measure: 1168px;

	--cf-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);
	font-variation-settings: "opsz" 96;
}
html { background: var(--cf-bg); }
body { background: var(--cf-bg); color: var(--cf-ink); }
.site-header, .site-footer, .site-footer a { background: transparent; }
.site-footer { color: var(--cf-ink-dim); }
.entry-content, .entry-content p, .entry-content li { color: var(--cf-ink); }
a { color: var(--cf-honey); }
a:hover { color: var(--cf-ink); }

::selection { background: oklch(0.74 0.14 62 / 0.25); }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
	outline: 2px solid var(--cf-honey);
	outline-offset: 2px;
	border-radius: 4px;
}

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

























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





















@keyframes cf-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(--cf-honey);
	color: oklch(0.25 0.05 45);
	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.25 0.05 45); transform: translateY(-1px);
}
/* The bar CTA carries a label, so its ground has to hold one: pine (the link colour) under bone text
   measured 3,3:1. Every primary button here is honey on dark ink — 6,9:1 — so the bar follows suit
   and pine stays reserved for what you read rather than what you press. */
.ig-bar-cta { background: var(--cf-honey); color: oklch(0.25 0.05 45); }
.ig-bar-cta:hover { background: var(--cf-honey-deep); color: oklch(0.25 0.05 45); filter: none; }
.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(--cf-ink); text-decoration: none; }
.ig-card-title a:hover { color: var(--cf-honey); }
.ig-card-excerpt { color: var(--cf-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.74 0.14 62 / 0.12); color: var(--cf-honey);
	border: 0; border-radius: 6px; padding: 0.15em 0.55em;
}
.bonus-amount { font-weight: 800; }
.ig-wager-note { font-size: .875rem; color: var(--cf-ink-dim); }

/* fact chips + stars in fox palette */
.ig-chip { background: oklch(0.225 0.024 165 / 0.8); border-color: var(--cf-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.74 0.14 62 / 0.14); color: var(--cf-honey);
	background: var(--cf-surface); border-radius: 6px; padding: .35em .8em;
	transition: background 0.15s ease-out;
}
.ig-code-chip:hover { background: oklch(0.74 0.14 62 / 0.24); }
.ig-code-chip.is-copied { border-style: solid; color: var(--cf-action-hi); }
.ig-copy-hint {
	font-family: var(--ig-body); font-size: .875rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.05em; color: var(--cf-ink-dim);
}
.ig-code-chip.is-copied .ig-copy-hint { color: var(--cf-action-hi); }
.ig-review-link { font-size: 0.85rem; color: var(--cf-ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.ig-review-link:hover { color: var(--cf-honey); }
@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(--cf-surface); border-radius: var(--cf-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.74 0.14 62 / 0.45); }
.ig-card-art { display: block; margin: -1.3rem -1.3rem 0.9rem; border-radius: var(--cf-radius) var(--cf-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(--cf-honey); }
.ig-bonus small { display: block; font-size: .875rem; color: var(--cf-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(--cf-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(--cf-surface-2); color: var(--cf-ink-dim); }
.volatility-high { background: oklch(0.64 0.19 30 / 0.15); color: var(--cf-action-hi); }
.volatility-medium, .volatility-med { background: oklch(0.74 0.14 62 / 0.15); color: var(--cf-honey); }
.volatility-low { background: oklch(0.55 0.11 160 / 0.18); color: oklch(0.72 0.11 160); }

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






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











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








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




.cf-footer-age { background: var(--cf-warn); color: var(--cf-bg); margin-left: auto; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; padding: .3em .8em; border-radius: 999px; }
@media (max-width: 560px) { .cf-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(--cf-line); padding: 0.6em 0.9em; }
.wp-block-table thead th { background: var(--cf-surface-2); }

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



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


.cf-wrap { width: var(--cf-measure); margin-inline: auto; }
.site-main > .cf-wrap + .cf-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; }


/* ============ Hero motion: ear twitch + fireflies, reduced-motion aware ============ */
@media (prefers-reduced-motion: no-preference) {
	
	
	
	
	
	
	
	
	
	
	
	@keyframes cf-drift {
		0%, 100% { transform: translate(0, 0); opacity: 0.35; }
		50% { transform: translate(6px, -18px); opacity: 0.75; }
	}
	@keyframes cf-sparkle {
		0%, 100% { opacity: 0.15; transform: scale(0.6); }
		50% { opacity: 0.9; transform: scale(1.15); }
	}
	@keyframes cf-ear-l {
		0%, 78%, 100% { transform: rotate(0deg); }
		84% { transform: rotate(-6deg); }
		90% { transform: rotate(0deg); }
	}
	@keyframes cf-twinkle {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.35; }
	}
}

/* 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 */
.cf-footer-wordmark { display: block; margin: clamp(2rem, 6vw, 4rem) 0 1.25rem; color: var(--cf-ink); }
.cf-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. */
.cf-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(--cf-ink);
}
#site-navigation a:hover, #site-navigation a:focus-visible,
#site-navigation .current-menu-item > a, #site-navigation .current_page_item > a { color: var(--cf-honey); }
.site-header a, .site-title a, .header-logo a { color: var(--cf-ink); }
.site-header a:hover, .site-title a:hover { color: var(--cf-honey); }

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(--cf-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(--cf-measure) / 2));
	background: var(--cf-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; }

/* ============ the masthead fold: honey is the fur, pine is the action ============ */
/* gb10 scored the old fold "struktureller Klon von SlotAffe, nur Farbe/Logo getauscht" (2/5) — and
   part of the reason was that the fox's own identity colour was nowhere in it: --ig-brand is pine
   because pine is the action colour, so every accent rendered green and the fold was the sister
   page in another hue. On the masthead the numbers, the ranks and the proof mark are honey (the
   fur); pine stays reserved for what you click. */
.ig-mast-kicker,
.ig-mast-rank,
.ig-mast-star,
.ig-mast-name:hover,
.ig-mast-name:focus-visible { color: var(--cf-honey); }
.ig-mast-score {
	background: var(--cf-honey); color: oklch(0.24 0.06 80);
}
.ig-board-ticks > span { background: var(--cf-honey); }
.ig-board-ticks > span.is-missing { background: transparent; box-shadow: inset 0 0 0 1px var(--cf-line); }
.ig-board-stamp { border-color: var(--cf-honey); color: var(--cf-honey); }
.ig-board-row.is-open .ig-board-stamp { background: var(--cf-honey); color: oklch(0.24 0.06 80); }
.ig-board--ledger .ig-board-line:hover .ig-board-ticks > span,
.ig-board--ledger .ig-board-line:focus-visible .ig-board-ticks > span { background: var(--cf-ink); }

/* ============ round 16: the measured figure and the ruled ending ============ */
/* the proof line under a name is the test speaking, so its figure wears the reading colour (pine),
   not the fur; honey stays on what you press. Same rule as the kicker and the links. */
.ig-mast-proof-n { color: var(--cf-action); }
/* the fox's ending is a clause between two rules: pine for the link, honey only when it is taken. */
.ig-cta--rule .ig-cta-link { color: var(--cf-action); }
.ig-cta--rule .ig-cta-band:hover .ig-cta-link,
.ig-cta--rule .ig-cta-band:focus-visible .ig-cta-link { color: var(--cf-honey); }