/*
 * GraLax4WP – CSS-Variante: VisiCard
 *
 * Metallisch wie Blue Steel, aber der Akzent liegt auf GOLD statt Blau —
 * edel/premium (Metall-Visitenkarten). Poliertes Gold auf den Buttons,
 * schwarze Metallflächen mit Goldtext in den Fancy-Sections.
 *
 * Setzt auf style.css auf und überschreibt NUR semantische Variablen
 * (+ wenige VisiCard-spezifische Augmentierungen). Nur --gralax-*-Werte.
 *
 * Kontrast (Ziel 5:1):
 *  - Gold-Buttons tragen SCHWARZEN Text (black auf gold ≈ 9.8:1). ✔
 *  - Section-Überschriften im Light-Mode bleiben dunkel (schwarz), da Gold
 *    auf Weiß < 5:1 reißt. Gold wird als Fläche/Akzent/Fancy genutzt, nicht
 *    als kleiner Text auf hellem Grund.  (Bei Bedarf später anpassen.)
 *  - fancy-text = Gold auf schwarzem Metall ≈ 9.8:1. ✔
 */

:root {
	--background-image-goldsteel: url(/wp-content/themes/Gralax4WP/assets/darksteelgold.png);
	--background-image-light: url(/wp-content/themes/Gralax4WP/assets/lightsteel.png);
	--background-image-dark: url(/wp-content/themes/Gralax4WP/assets/darksteel.png);
}

/* ── Light Mode (Standard) ──────────────────────────────────────────────── */
:root:not([data-theme]),
[data-theme="light"] {

	--gralax-skew-maxi: none;
	--gralax-skew-mini: none;
	--gralax-radius-mini: .3rem;
	--gralax-radius-maxi: .5rem;

	/* Legacy-Button-Aliase */
	--button-bg-primary: var(--gralax-gold-hex);
	--button-bg-secondary: var(--gralax-gray-dark-hex);
	--button-text-primary: var(--gralax-black-hex);
	--button-text-secondary: var(--gralax-white-hex);
	--menu-bg: var(--gralax-gray-light-hex);
	--menu-text: var(--gralax-black-hex);
	--box-shadow-primary: var(--box-shadow-dark);
	--box-shadow-secondary: var(--box-shadow-dark);

	/* Body: heller Grund mit dezentem Champagner-Metall-Schimmer */
	--body-background-image:
		linear-gradient(to bottom, rgb(var(--gralax-white-rgb) / 0.86) 0%, rgb(var(--gralax-white-rgb) / 0.93) 100%),
		var(--background-image-goldsteel);
	--body-background-color: var(--gralax-white-hex);
	--body-background-rgb: var(--gralax-white-rgb);
	--body-text-color: var(--gralax-gray-dark-hex);

	/* Main-Section */
	--main-background-image: none;
	--main-background-color: rgb(var(--gralax-white-rgb) / 0.95);
	--main-background-rgb: var(--gralax-white-rgb);
	--main-text-color: var(--gralax-gray-dark-hex);
	--main-button-background-color: var(--gralax-gold-hex);
	--main-button-text-color: var(--gralax-black-hex);
	--main-shadow-box: 0 .35em .9em rgb(var(--gralax-gray-dark-rgb) / 0.22), 0 0 0 1px rgb(var(--gralax-gold-rgb) / 0.14);
	--main-shadow-button: 0 .2em .4em rgb(var(--gralax-copper-rgb) / 0.4);
	--main-shadow-text: none;

	/* ── Poliertes Gold: main = Gold, schwarzer Text ── */
	--main-btn-bg:
		linear-gradient(to bottom,
			rgb(var(--gralax-white-rgb) / 0.85) 0%,
			var(--gralax-gold-hex) 14%,
			var(--gralax-copper-hex) 50%,
			var(--gralax-gold-hex) 51%,
			var(--gralax-copper-hex) 100%);
	--main-btn-border: 1px solid rgb(var(--gralax-copper-rgb) / 0.55);
	--main-btn-shadow:
		inset 0 1px 0 rgb(var(--gralax-white-rgb) / 0.7),
		inset 0 -2px 3px rgb(var(--gralax-brown-dark-rgb) / 0.4),
		0 .3em .5em rgb(var(--gralax-copper-rgb) / 0.4);
	--main-btn-color: var(--gralax-black-hex);
	--main-btn-hover-bg:
		linear-gradient(to bottom,
			rgb(var(--gralax-white-rgb) / 1) 0%,
			var(--gralax-gold-hex) 12%,
			var(--gralax-copper-hex) 50%,
			var(--gralax-gold-hex) 51%,
			var(--gralax-copper-hex) 100%);
	--main-btn-hover-shadow:
		inset 0 1px 0 rgb(var(--gralax-white-rgb) / 0.9),
		inset 0 -2px 4px rgb(var(--gralax-brown-dark-rgb) / 0.45),
		0 .45em .7em rgb(var(--gralax-copper-rgb) / 0.5),
		0 0 1em rgb(var(--gralax-gold-rgb) / 0.5);

	/* Alt = Champagner/Silber, dunkler Text */
	--alt-btn-bg:
		linear-gradient(to bottom,
			rgb(var(--gralax-white-rgb) / 0.98) 0%,
			var(--gralax-beige-dark-hex) 16%,
			var(--gralax-gray-mid-hex) 55%,
			var(--gralax-gray-dark-hex) 100%);
	--alt-btn-border: 1px solid rgb(var(--gralax-brown-light-rgb) / 0.5);
	--alt-btn-shadow:
		inset 0 1px 0 rgb(var(--gralax-white-rgb) / 0.85),
		0 .26em .45em rgb(var(--gralax-gray-dark-rgb) / 0.38);
	--alt-btn-color: var(--gralax-gray-dark-hex);
	--alt-btn-hover-bg:
		linear-gradient(to bottom,
			rgb(var(--gralax-white-rgb) / 1) 0%,
			var(--gralax-beige-dark-hex) 14%,
			var(--gralax-gray-mid-hex) 55%,
			var(--gralax-gray-dark-hex) 100%);
	--alt-btn-hover-shadow:
		inset 0 1px 0 rgb(var(--gralax-white-rgb) / 0.95),
		0 .4em .6em rgb(var(--gralax-gray-dark-rgb) / 0.46);

	/* Fancy = der Hingucker: sattes Gold mit Reflexionskante (+ Sheen, s.u.) */
	--fancy-btn-bg:
		linear-gradient(to bottom,
			rgb(var(--gralax-white-rgb) / 0.92) 0%,
			var(--gralax-gold-hex) 12%,
			var(--gralax-copper-hex) 49%,
			var(--gralax-brown-dark-hex) 50%,
			var(--gralax-copper-hex) 51%,
			var(--gralax-gold-hex) 100%);
	--fancy-btn-border: 1px solid rgb(var(--gralax-gold-rgb) / 0.7);
	--fancy-btn-shadow:
		inset 0 1px 0 rgb(var(--gralax-white-rgb) / 0.8),
		inset 0 -2px 4px rgb(var(--gralax-brown-dark-rgb) / 0.5),
		0 .35em .6em rgb(var(--gralax-copper-rgb) / 0.45),
		0 0 1em rgb(var(--gralax-gold-rgb) / 0.45);
	--fancy-btn-color: var(--gralax-black-hex);
	--fancy-btn-hover-bg:
		linear-gradient(to bottom,
			rgb(var(--gralax-white-rgb) / 1) 0%,
			var(--gralax-gold-hex) 12%,
			var(--gralax-copper-hex) 49%,
			var(--gralax-brown-dark-hex) 50%,
			var(--gralax-copper-hex) 51%,
			var(--gralax-gold-hex) 100%);
	--fancy-btn-hover-shadow:
		inset 0 1px 0 rgb(var(--gralax-white-rgb) / 1),
		inset 0 -2px 5px rgb(var(--gralax-brown-dark-rgb) / 0.55),
		0 .5em .8em rgb(var(--gralax-copper-rgb) / 0.5),
		0 0 1.4em rgb(var(--gralax-gold-rgb) / 0.65);

	/* Kompatibilitäts-Aliase */
	--btn-plastic-bg: var(--main-btn-bg);
	--btn-plastic-border: var(--main-btn-border);
	--btn-plastic-shadow: var(--main-btn-shadow);
	--btn-plastic-color: var(--main-btn-color);
	--btn-plastic-hover-bg: var(--main-btn-hover-bg);
	--btn-plastic-hover-shadow: var(--main-btn-hover-shadow);

	/* Alt-Section */
	--alt-background-image: none;
	--alt-background-color: rgb(var(--gralax-beige-light-rgb) / 0.9);
	--alt-background-rgb: var(--gralax-beige-light-rgb);
	--alt-text-color: var(--gralax-gray-dark-hex);
	--alt-shadow-box: 0 .35em .85em rgb(var(--gralax-gray-dark-rgb) / 0.2);
	--alt-shadow-button: 0 .2em .4em rgb(var(--gralax-copper-rgb) / 0.32);
	--alt-shadow-text: none;
	--alt-button-background-color: var(--gralax-gold-hex);
	--alt-button-text-color: var(--gralax-black-hex);
	--alt-shadow1: 0 .35em .85em rgb(var(--gralax-gray-dark-rgb) / 0.2);

	/* Fancy-Section = schwarze Metallplatte mit Gold-Textur */
	--fancy-background-image:
		linear-gradient(to bottom, rgb(var(--gralax-black-rgb) / 0.5) 0%, rgb(var(--gralax-black-rgb) / 0.7) 100%),
		var(--background-image-goldsteel);
	--fancy-background-color: var(--gralax-black-hex);
	--fancy-background-rgb: var(--gralax-black-rgb);
	--fancy-text-color: var(--gralax-gold-hex);
	--fancy-shadow-box: 0 .4em .9em rgb(var(--gralax-black-rgb) / 0.5);
	--fancy-shadow-button: 0 .2em .4em rgb(var(--gralax-copper-rgb) / 0.4);
	--fancy-shadow-text: 0 .02em .12em rgb(var(--gralax-black-rgb) / 0.6);
	--fancy-button-background-color: var(--gralax-gold-hex);
	--fancy-button-text-color: var(--gralax-black-hex);

	/* Menü */
	--menu-main-background-color: rgb(var(--gralax-black-rgb) / 0.55);
	--menu-main-text-color: var(--gralax-white-hex);
	--menu-main-shadow: 0 .2em .5em rgb(var(--gralax-black-rgb) / 0.4);
	--menu-sub-background-color: rgb(var(--gralax-black-rgb) / 0.88);
	--menu-sub-text-color: var(--gralax-white-hex);
	--menu-sub-shadow: .1em .2em .4em rgb(var(--gralax-black-rgb) / 0.5);
	--menu-mainitem-background-color: rgb(var(--gralax-brown-dark-rgb) / 0.8);
	--menu-mainitem-text-color: var(--gralax-gold-hex);
	--menu-mainitem-shadow: 0 .1em .22em rgb(var(--gralax-black-rgb) / 0.35);
	--menu-subitem-background-color: rgb(var(--gralax-black-rgb) / 0.55);
	--menu-subitem-text-color: var(--gralax-gold-hex);
	--menu-subitem-shadow: .1em .1em .3em rgb(var(--gralax-gold-rgb) / 0.3);

	/* Headings: dunkel im Light (Kontrast), Gold auf dunklem Grund */
	--main-heading-color: var(--gralax-black-hex);
	--alt-heading-color: var(--gralax-black-hex);
	--fancy-heading-color: var(--gralax-gold-hex);

	--hero-bg: rgb(var(--body-background-rgb) / 0.62);
	--hero-text: var(--body-text-color);
	--hero-title: var(--hero-text);
	--hero-section-min-height: var(--hero-min-height);
	--hero-overlay-padding: clamp(var(--space-sm), 3vw, var(--space-xl)) clamp(var(--space-sm), 4vw, var(--space-xl));
}

/* ── Dark Mode: manuell gewählt ─────────────────────────────────────────── */
[data-theme="dark"] {
	--body-background-image:
		linear-gradient(to bottom, rgb(var(--gralax-black-rgb) / 0.62) 0%, rgb(var(--gralax-black-rgb) / 0.74) 100%),
		var(--background-image-goldsteel);
	--body-background-color: var(--gralax-black-hex);
	--body-background-rgb: var(--gralax-black-rgb);
	--body-text-color: var(--gralax-beige-light-hex);

	--main-background-image: none;
	--main-background-color: rgb(var(--gralax-black-rgb) / 0.9);
	--main-background-rgb: var(--gralax-black-rgb);
	--main-text-color: var(--gralax-beige-light-hex);
	--main-shadow-box: 0 .4em .95em rgb(var(--gralax-black-rgb) / 0.6), 0 0 0 1px rgb(var(--gralax-gold-rgb) / 0.14);

	--alt-background-color: rgb(var(--gralax-brown-dark-rgb) / 0.92);
	--alt-background-rgb: var(--gralax-brown-dark-rgb);
	--alt-text-color: var(--gralax-beige-light-hex);
	--alt-shadow-box: 0 .4em .95em rgb(var(--gralax-black-rgb) / 0.55);
	--alt-shadow1: 0 .4em .95em rgb(var(--gralax-black-rgb) / 0.55);

	--fancy-background-color: var(--gralax-black-hex);
	--fancy-background-rgb: var(--gralax-black-rgb);
	--fancy-text-color: var(--gralax-gold-hex);

	--menu-main-background-color: rgb(var(--gralax-black-rgb) / 0.66);
	--menu-main-text-color: var(--gralax-beige-light-hex);
	--menu-sub-background-color: rgb(var(--gralax-black-rgb) / 0.92);

	--main-heading-color: var(--gralax-gold-hex);
	--alt-heading-color: var(--gralax-gold-hex);
	--fancy-heading-color: var(--gralax-gold-hex);

	--hero-bg: rgb(var(--gralax-black-rgb) / 0.55);
}

/* ── Dark Mode: Systempräferenz ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--body-background-image:
			linear-gradient(to bottom, rgb(var(--gralax-black-rgb) / 0.62) 0%, rgb(var(--gralax-black-rgb) / 0.74) 100%),
			var(--background-image-goldsteel);
		--body-background-color: var(--gralax-black-hex);
		--body-background-rgb: var(--gralax-black-rgb);
		--body-text-color: var(--gralax-beige-light-hex);

		--main-background-image: none;
		--main-background-color: rgb(var(--gralax-black-rgb) / 0.9);
		--main-background-rgb: var(--gralax-black-rgb);
		--main-text-color: var(--gralax-beige-light-hex);
		--main-shadow-box: 0 .4em .95em rgb(var(--gralax-black-rgb) / 0.6), 0 0 0 1px rgb(var(--gralax-gold-rgb) / 0.14);

		--alt-background-color: rgb(var(--gralax-brown-dark-rgb) / 0.92);
		--alt-background-rgb: var(--gralax-brown-dark-rgb);
		--alt-text-color: var(--gralax-beige-light-hex);
		--alt-shadow-box: 0 .4em .95em rgb(var(--gralax-black-rgb) / 0.55);
		--alt-shadow1: 0 .4em .95em rgb(var(--gralax-black-rgb) / 0.55);

		--fancy-background-color: var(--gralax-black-hex);
		--fancy-background-rgb: var(--gralax-black-rgb);
		--fancy-text-color: var(--gralax-gold-hex);

		--menu-main-background-color: rgb(var(--gralax-black-rgb) / 0.66);
		--menu-main-text-color: var(--gralax-beige-light-hex);
		--menu-sub-background-color: rgb(var(--gralax-black-rgb) / 0.92);

		--main-heading-color: var(--gralax-gold-hex);
		--alt-heading-color: var(--gralax-gold-hex);
		--fancy-heading-color: var(--gralax-gold-hex);

		--hero-bg: rgb(var(--gralax-black-rgb) / 0.55);
	}
}

/* ================================================================
   VisiCard – Varianten-Augmentierungen
   ================================================================ */

body {
	transition: background-image 1.4s ease-in-out, background-color 1.4s ease-in-out, color 1s ease-in-out;
}

/* Fancy-Button-Hingucker: laufender Goldreflex ("Sheen") */
@keyframes gralax-sheen {
	0%   { transform: translateX(-160%) skewX(-18deg); }
	60%,
	100% { transform: translateX(320%) skewX(-18deg); }
}

.btn-fancy {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.btn-fancy::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgb(var(--gralax-white-rgb) / 0.6) 50%, transparent 100%);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 3;
	animation: gralax-sheen 3.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.btn-fancy::after { animation: none; }
}

/* Feiner Gold-Trennstreifen über Sections */
section {
	position: relative;
	isolation: isolate;
}

/* Content-Seiten: dezente Gold-Kante */
.category-intro,
.category-posts,
.related-posts {
	border: 1px solid rgb(var(--gralax-gold-rgb) / 0.22);
	box-shadow: var(--main-shadow-box);
}

.category-intro h1,
.category-posts h2,
.related-posts h2 {
	color: var(--main-heading-color);
}

/* Footer = schwarze Goldplatte */
.site-footer {
	background-color: var(--fancy-background-color);
	background-image: var(--fancy-background-image);
	background-size: cover;
	color: var(--fancy-text-color);
}

.footer-logo-area img { filter: brightness(0) invert(1); opacity: 0.9; }

.footer-logo-area a,
.footer-legal a,
.footer-nav-menu a { color: var(--gralax-gold-hex); }

.footer-logo-area a:hover,
.footer-legal a:hover,
.footer-nav-menu a:hover { color: var(--gralax-white-hex); text-decoration: none; }