/* Chance Gaming — front-end overrides on top of Twenty Twenty-Five + theme.json.
   Keep this lean; prefer theme.json for tokens. Add component CSS as blocks are built. */

/* ---------------------------------------------------------------------------
   Design tokens (CI/CD v2) — canonical set. Brand hues each have 4 steps, plus
   grays and semantic aliases. Brand FULL hues are never body text on light
   (they fail 4.5:1); use them as fills / icons / borders / tint backgrounds.
   --------------------------------------------------------------------------- */
/* .editor-styles-wrapper is listed alongside :root because the block editor
   scopes editor stylesheets to the canvas — a bare :root can end up matching
   nothing there, which left every --cg-* token undefined in the backend. */
:root,
.editor-styles-wrapper {
	--cg-green: #91D12F; --cg-green-2: #A6DA58; --cg-green-3: #BCE381; --cg-green-4: #D2ECAB;
	--cg-orange: #EA792A; --cg-orange-2: #EE9354; --cg-orange-3: #F2AE7E; --cg-orange-4: #F6C9A9;
	--cg-blue: #2998D0; --cg-blue-2: #53ACD9; --cg-blue-3: #7EC1E2; --cg-blue-4: #A8D5EC;
	--cg-magenta: #E5548B; --cg-magenta-2: #EA76A2; --cg-magenta-3: #EF98B9; --cg-magenta-4: #F4BAD0;
	--cg-black: #0F181C; --cg-gray-2: #3E4649; --cg-gray-3: #6E7476; --cg-gray-4: #9EA2A3;
	--cg-white: #FFFFFF;

	--ink: #0F181C;        /* text / lines */
	--ink-muted: #3E4649;  /* secondary text */
	--ink-faint: #6E7476;  /* tertiary text (AA on white) */
	--line-soft: #D5DADB;  /* hairline borders */
	--accent: #2998D0;     /* focus ring (blue) */

	/* AA-safe darkened variants for the brand hues WHEN used as text on light.
	   The full hues (magenta 3.4:1, blue 3.0:1) fail 4.5:1; these pass (~5:1) and
	   keep the hue. Used for kickers, active nav and coloured links. Full hues
	   remain for fills / icons / borders. */
	--cg-blue-ink: #1A6A94;
	--cg-magenta-ink: #C42C6B;
	--cg-orange-ink: #A4471B;  /* 6.01:1 on white, 5.21:1 on .cg-tint-orange */

	/* Max width for the site "frame" (header bar + hero content) — keeps very wide
	   screens sensible while still fuller than the wide content track. */
	--cg-frame-max: 1400px;
}

/* Keyboard focus — TWO-TONE ring (CG-02; WCAG 1.4.11 Non-text Contrast).
   A single-hue ring cannot pass across this palette: the old 3px #2998D0 sat on
   the *page* background (outline-offset) and measured 2.74–3.00:1 on the footer
   and all four tints, and 1.75:1 on the green CTA band. Swapping the hex does
   not help either — #1A6A94 passes on flat surfaces but drops to 3.03:1 on the
   ink band and 1.03:1 over the hero photo.

   Two tones make it background-independent: the dark ring is always adjacent to
   the white halo, so the governing ratio is a constant 5.94:1 (#1A6A94 vs #fff)
   no matter what is behind the control. Inverted on dark surfaces: 17.98:1
   (#fff vs #0F181C). Both measured, sRGB relative luminance per WCAG.

   Do not collapse this to one colour. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cg-blue-ink, #1A6A94);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff; /* white halo behind the dark ring */
	border-radius: inherit;
}

/* Invert on dark surfaces, where a dark ring would vanish. */
.cg-cta--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cg-stoerer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cg-hero--photo :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 5px var(--cg-black, #0F181C);
}

/* Base type: line-height only.
   The 15px font-size that used to live here is gone (CG-08). An absolute px on
   body overrides the reader's own browser text-size setting — someone who has
   set their default to 20px still got 15px. For an audience defined by low
   vision and cognitive impairment that silently overrides an assistive
   preference downward. Base size now comes from theme.json as 1rem, which
   inherits whatever the reader has chosen.
   Do not reintroduce an absolute font-size here. */
body {
	line-height: 1.45;
}

/* Respect a reduced-motion preference (CG-20). Only two transitions exist and both
   are tiny, so this is precaution rather than remedy — but the audience includes
   vestibular sensitivity, and 2.3.3 is cheap to honour even though it is AAA. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Section tints — very light brand washes for alternating section backgrounds.
   Use max one tint per section; never two tinted sections back-to-back. Black
   text passes AA on all four. */
/* Hex fallbacks are deliberate: these must paint even if the custom properties
   fail to resolve in the editor canvas, which is exactly how these sections came
   out white in the backend while being tinted on the front end. */
.cg-tint-green { background: color-mix( in srgb, var(--cg-green-4, #D2ECAB) 38%, #fff ); }
.cg-tint-blue { background: color-mix( in srgb, var(--cg-blue-4, #A8D5EC) 38%, #fff ); }
.cg-tint-orange { background: color-mix( in srgb, var(--cg-orange-4, #F6C9A9) 36%, #fff ); }
.cg-tint-magenta { background: color-mix( in srgb, var(--cg-magenta-4, #F4BAD0) 32%, #fff ); }

/* Editor-facing "⚠ review before go-live" note on legal pages (drafts). */
.cg-legal-todo {
	border-left: 4px solid var(--wp--preset--color--cg-orange);
	background: color-mix( in srgb, var(--wp--preset--color--cg-orange) 12%, white );
	padding: 0.75rem 1rem;
}

/* ---------------------------------------------------------------------------
   Theme shell (Phase 2): skip link, header, nav, language switcher, footer,
   Störer banner. Colours use theme.json tokens; dark text on brand fills only.
   --------------------------------------------------------------------------- */

/* Skip link — first focusable element, visible only on keyboard focus. */
.cg-skip-link {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-120%);
	z-index: 1000;
	margin: 8px;
	padding: 12px 16px;
	background: var(--wp--preset--color--cg-ink);
	color: var(--wp--preset--color--cg-white);
	text-decoration: underline;
	border-radius: 4px;
}
.cg-skip-link:focus {
	transform: translateY(0);
}

/* Header — fixed-height top bar: logo left · nav · compact language switcher right. */
.cg-header {
	border-bottom: 2px solid var(--wp--preset--color--cg-ink);
	padding-block: 0;
}
.cg-header__bar {
	min-height: 72px;
	flex-wrap: nowrap;
	/* Use the shared frame width so the menu matches the hero and stays sensible
	   on very wide screens. Overrides the constrained content cap. */
	max-width: var(--cg-frame-max, 1400px);
	margin-inline: auto;
}

/* Nav: keep the six items on ONE row by scaling font, padding and gap down with
   the viewport (largest text that still fits, never wrapping). Only once it no
   longer fits — around 700px — collapse to the hamburger overlay. */
.cg-nav {
	min-width: 0; /* allow the nav to shrink within the header flex row */
}
.cg-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(0.05rem, -0.25rem + 1vw, 0.55rem);
}
@media (max-width: 699.98px) {
	.cg-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.cg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}
.cg-header .cg-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.cg-header .cg-logo__img {
	display: block;
	width: auto;
	height: 54px; /* logo lockup height (CI/CD v2) */
	max-width: 100%;
}

/* Primary nav — generous hit areas (≥44px), text-not-colour active state. */
.cg-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 clamp(0.25rem, 0rem + 0.5vw, 0.7rem);
	color: var(--cg-gray-2);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	/* Scale text with the viewport: full size on wide screens, smaller (but the
	   largest that still fits one row) as it narrows toward the 700px collapse. */
	font-size: clamp(0.875rem, 0.4rem + 0.8vw, 0.95rem); /* floor 14px (CG-08) */
}
/* Active item: magenta + bold. Bold + aria-current are the non-colour cues so
   the current page isn't signalled by colour alone. */
.cg-nav .current-menu-item > .wp-block-navigation-item__content,
.cg-nav [aria-current] {
	color: var(--cg-magenta-ink);
	font-weight: 700;
}

/* Kicker — magenta uppercase eyebrow above headings (AA-safe magenta-ink variant). */
.cg-hero__kicker,
.cg-card-grid__kicker,
.cg-text-image__kicker,
.cg-iframe__kicker,
.cg-quote__kicker,
.cg-wa__kicker {
	color: var(--cg-magenta-ink);
	font-weight: 600;
	font-size: 0.875rem; /* floor 14px (CG-08) */
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Language switcher (Polylang block) — small, far right. Real <a> per locale;
   active = underline + weight (not colour). Kept ≥44px tap target despite small text. */
.cg-lang {
	flex: none;
}
.cg-lang ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem; /* floor 14px (CG-08) */
}
.cg-lang li {
	display: inline-flex;
	align-items: center;
}
/* thin divider between the locales (decorative) */
.cg-lang li + li::before {
	content: "";
	width: 1px;
	height: 0.85em;
	margin-right: 0.4rem;
	background: currentColor;
	opacity: 0.35;
}
.cg-lang a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.25rem;
}
.cg-lang .current-lang a,
.cg-lang a[aria-current] {
	font-weight: 700;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* Footer */
.cg-footer {
	margin-top: 4rem;
	background: #f3f6f6; /* light footer panel (CI/CD v2) */
	border-top: 1px solid var(--line-soft);
	padding-block: 2.5rem;
}
.cg-footer__links {
	margin-block: 1rem;
}
.cg-footer__links .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-right: 1rem;
	color: var(--cg-blue-ink);
	text-decoration: underline;
}

/* Störer banner — sticky bottom announcement, NOT a modal; dismissible per session. */
/* Keep focus clear of the sticky Störer banner (CG-10; WCAG 2.4.11 Focus Not
   Obscured). Browsers scroll a newly focused element into view but do not know
   about sticky overlays, so a link landing in the bottom ~60px can end up behind
   the banner. scroll-padding-bottom reserves that strip for every scroll-into-view,
   including the one the browser performs on Tab. */
html {
	scroll-padding-bottom: 96px;
}

.cg-stoerer {
	position: sticky;
	bottom: 0;
	z-index: 900;
	background: var(--wp--preset--color--cg-ink);
	color: var(--wp--preset--color--cg-white);
}
.cg-stoerer[hidden] {
	display: none;
}
.cg-stoerer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0.75rem 1rem;
}
.cg-stoerer__label {
	flex: none;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	background: var(--wp--preset--color--cg-green);
	color: var(--wp--preset--color--cg-ink); /* dark text on brand fill */
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.875rem; /* floor 14px (CG-08) */
}
.cg-stoerer__text {
	margin: 0;
	flex: 1 1 auto;
}
.cg-stoerer__text a {
	color: var(--wp--preset--color--cg-white);
}
.cg-stoerer__close {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: 2px solid var(--wp--preset--color--cg-white);
	color: var(--wp--preset--color--cg-white);
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   Client feedback (test-site round 1)
   --------------------------------------------------------------------------- */

/* Button hover on OUTLINE / unfilled buttons (feedback #1).
   The parent theme (TT25) ships an "outline" button style whose only hover is a
   ~5% contrast tint scoped `:not(.has-background):hover` at high specificity, so
   it overrides our theme.json button hover — an outline button (e.g. the Home
   hero's second CTA) looks dead on mouse-over while filled buttons flip to ink.
   Give every outline button the SAME visible hover/focus as a filled one: ink
   fill + white text (dark-on-brand rule still holds — this is ink, not a brand
   hue). The link class is tripled so specificity (0,6,0) clears TT25's own
   `.wp-block-button__link.wp-block-button__link:not(.has-background):hover`
   (0,5,0) regardless of stylesheet load order — no !important needed. */
.wp-block-button.is-style-outline
	.wp-block-button__link.wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.is-style-outline
	.wp-block-button__link.wp-block-button__link.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--cg-ink);
	border-color: var(--wp--preset--color--cg-ink);
	color: var(--wp--preset--color--cg-white);
}

/* Image sizing per component (feedback #2). The contact card accepted a full-res
   upload and rendered it enormous. Cap it to a calm portrait crop; editors can
   still fine-tune with the core image block's own aspect-ratio control elsewhere. */
.cg-contact-card__photo img {
	max-height: 320px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* Core "Details" (Details/Zusammenfassung) block (feedback #7 / clarification).
   Valentin nested content inside a core <details>; its native disclosure marker
   is a tiny hard-to-hit triangle. Make the whole <summary> a full-width, ≥44px
   clickable row with a large, obvious arrow and a clear hover/focus, and give the
   summary a heading-like scale so it can read as an H2/H3-style title.
   The row is a real <summary> (native button semantics + keyboard toggle), so no
   ARIA is needed and this stays WCAG-safe. */
.wp-block-details {
	border: 1px solid var(--line-soft, #d5dadb);
	border-radius: 14px;
	overflow: hidden;
	background: var(--cg-white, #fff);
}
.wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 60px;
	padding: 1rem 1.25rem;
	list-style: none; /* drop the default tiny marker; we draw our own */
	cursor: pointer;
	font-weight: 700;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.375rem); /* H3–H2 scale */
	color: var(--cg-black, #0f181c);
}
.wp-block-details > summary::-webkit-details-marker {
	display: none; /* Safari's default marker */
}
/* Big, obvious disclosure arrow that we control the size of. */
.wp-block-details > summary::after {
	content: '';
	flex: none;
	margin-left: auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #f0f3f4
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%230F181C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
		center / 1rem no-repeat;
	transition: transform 0.15s ease;
}
.wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}
.wp-block-details > summary:hover {
	background: #f3f7f9;
}
/* Padding for the revealed body so it isn't flush to the edges. */
.wp-block-details > :not(summary) {
	padding: 0 1.25rem 1.25rem;
}

/* Automatic image sizing (feedback #2, "Riesenbild im Kontakt").
   A full-resolution upload used to render at its natural size and dominate the
   page. Cap the height instead of cropping: `contain` + auto width keeps the
   whole picture visible and undistorted, so no editor decision is required and
   no content is silently cut off. Deliberately NOT applied to align-wide/full
   images (those are intentional full-bleed art) nor to CG blocks that manage
   their own image sizing (hero background, sponsor logos, WhatsApp QR). */
.wp-block-image:not(.alignwide):not(.alignfull) img {
	max-height: 70vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}

/* Core File block on mobile (feedback: "gseht uf Mobile chli zemepresst us").
   Core lays the filename and the download button out in one row, which squeezes
   both to unreadable widths on a phone. Stack them and give the button a full
   44px target. */
@media (max-width: 599.98px) {
	.wp-block-file {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	.wp-block-file__button {
		margin-left: 0;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Navigation submenus.
   The menu itself is authored in the Site Editor (Appearance → Editor →
   Navigation), not hard-coded here — these are only the styles that make a
   submenu usable once one exists. Core supplies the button semantics and the
   aria-expanded handling; what was missing was any styling at all. */
.cg-nav .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
/* Desktop flyout: solid panel, clear border, never transparent over content. */
.cg-nav .wp-block-navigation__submenu-container {
	background: var(--cg-white, #fff);
	border: 1px solid var(--line-soft, #d5dadb);
	border-radius: 12px;
	padding: 0.35rem;
	min-width: 240px;
	box-shadow: 0 10px 28px rgb(15 24 28 / 12%);
}
.cg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	/* ≥44px target (2.5.8) — submenu rows are the easiest place to lose this. */
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border-radius: 8px;
	white-space: normal; /* long labels wrap instead of forcing a wide panel */
}
.cg-nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.cg-nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus-visible {
	background: #f3f7f9;
}

/* Burger overlay: the flyout must become a plain indented list, not a floating
   panel — a positioned submenu inside the overlay is the classic way keyboard
   and screen-reader users lose the sub-items entirely. */
.cg-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	position: static;
	border: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
	background: transparent;
	padding-left: 1rem;
	border-left: 2px solid var(--line-soft, #d5dadb);
}

/* ── Bildnachweis (CG-22) ──────────────────────────────────────────────────
   Credit badge injected by cg_credit_badge() in functions.php. Only appears
   when the media item actually carries credit meta.

   Always visible by design: a hover-only credit is invisible to touch and
   keyboard users, and WCAG 2.2 (1.4.13) makes hover-revealed content its own
   problem. A solid ink background is what guarantees the 4.5:1 contrast — the
   badge sits over arbitrary photography, so a translucent fill cannot. */
.cg-has-credit {
	position: relative;
}

/* The badge is positioned against the <figure>, so the two boxes have to
   coincide. A core/image figure is block-level and spans the whole column,
   while its <img> keeps its own width — either a small intrinsic size or an
   explicit one from "is-resized" in the editor. The figure is then wider than
   the picture and the badge lands on the background beside it rather than on
   it. Shrinking the figure to its content makes the boxes line up again.

   Scoped deliberately:
   - our own block figures (text-image, event-card, contact-card) stretch their
     img to width:100%, so they already coincide and must not be shrunk;
   - alignfull/alignwide images fill their container, so they never show the bug
     and shrinking them would break the alignment;
   - the --inline variant puts the credit in the figcaption with position:static,
     so it has nothing to anchor and a long caption could re-widen the figure. */
.wp-block-image.cg-has-credit:not(.cg-has-credit--inline):not(.alignfull):not(.alignwide) {
	width: fit-content;
	max-width: 100%;
}

.cg-credit {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	z-index: 3;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	max-width: calc(100% - 1rem);
	padding: 0.3em 0.55em;
	border-radius: 3px;
	background: var(--wp--preset--color--cg-ink, #0f181c);
	color: var(--wp--preset--color--cg-white, #fff);
	/* 0.75rem, not px — it has to scale with the user's text size (1.4.4). */
	font-size: 0.75rem;
	line-height: 1.35;
	text-align: left;
	text-wrap: balance;
}

/* The label names the fragment for screen readers; sighted users get the
   context from the badge sitting on the image. */
.cg-credit__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cg-credit__sep {
	opacity: 0.6;
}

.cg-credit__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cg-credit__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cg-green, #91d12f);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Hero: the background image is full-bleed, so the badge anchors to the hero
   box itself. z-index 3 clears the photo (0), the scrim (1) and the text (2). */
.cg-credit-anchor--hero {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.cg-credit-anchor--hero .cg-credit {
	pointer-events: auto;
}

/* Where the image already has a caption, the credit joins it instead of
   covering it — no overlay, no positioning, inherits caption colour. */
.cg-has-credit--inline .cg-credit {
	position: static;
	display: inline;
	max-width: none;
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	opacity: 0.8;
}

/* Narrow screens: a corner badge can eat most of a small image, so let it sit
   across the bottom edge instead of being squeezed into the corner. */
@media (max-width: 480px) {
	.cg-has-credit .cg-credit {
		right: 0;
		bottom: 0;
		left: 0;
		max-width: none;
		border-radius: 0;
	}
}

/* Credits must survive printing — that is the point of an attribution. */
@media print {
	.cg-credit {
		position: static;
		display: block;
		background: none;
		color: #000;
		padding: 0.25em 0;
	}
}