/*
Theme Name: DYE (Uncode Child)
Description: Child-Theme für den Relaunch von GLDDGGRS als DYE – Dry Your Eyes. Stilbasis (Grotesk, Weißraum, Neon) plus dreisprachige SEO-Basis (DE/EN/ES).
Author: DYE
Template: uncode
Version: 0.2.0
Text Domain: uncode
*/

/* ==========================================================================
   DYE Stilbasis
   Alles hier ist opt-in: Die Klassen beginnen mit "dye-" und greifen nur,
   wo sie gesetzt werden (WPBakery: Feld "Extra class name"). Das Aktivieren
   des Child-Themes verändert die bestehende Seite optisch nicht.

   Regeln: kein Grün, keine Verläufe, kein Leuchten. Neon steht immer als
   harte, flache Fläche gegen Weiß oder Schwarz.
   ========================================================================== */

/* --- Schriften (selbst gehostet, kein Google-Fonts-Aufruf) ---------------- */

@font-face {
	font-family: "Inter Display";
	src: url("assets/fonts/inter-display-400.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Display";
	src: url("assets/fonts/inter-display-500.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-400.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-500.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
	/* Grundfläche: Papier und Tinte */
	--dye-paper: #ffffff;
	--dye-ink: #0b0b0c;
	--dye-mute: #a6a6a6;
	--dye-line: #e4e4e4;

	/* Neon. Bewusst ohne Grün und ohne Gelbgrün. */
	--dye-pink: #ff2fd0;
	--dye-orange: #ff5a1f;
	--dye-blue: #2b4dff;

	/* Schrift */
	--dye-font-display: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--dye-font-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* Crossover-Schrift: vorerst System-Serif, wird in der Designphase ersetzt */
	--dye-font-accent: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	--dye-size-display: clamp(2.75rem, 7.4vw, 9rem);
	--dye-size-title: clamp(2rem, 4.4vw, 4.5rem);
	--dye-size-lead: clamp(1.25rem, 1.9vw, 1.75rem);
	--dye-size-label: clamp(1rem, 1.25vw, 1.375rem);

	--dye-gutter: clamp(1rem, 1.8vw, 2.25rem);
	--dye-space: clamp(3rem, 8vw, 9rem);
}

/* --- Typografie ----------------------------------------------------------- */

.dye-display,
.dye-title,
.dye-lead,
.dye-label {
	color: inherit;
	margin: 0;
	text-wrap: balance;
}

.dye-display {
	font-family: var(--dye-font-display);
	font-size: var(--dye-size-display);
	font-weight: 500;
	line-height: 0.96;
	letter-spacing: -0.04em;
}

.dye-title {
	font-family: var(--dye-font-display);
	font-size: var(--dye-size-title);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.dye-lead {
	font-family: var(--dye-font-text);
	font-size: var(--dye-size-lead);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.dye-label {
	font-family: var(--dye-font-text);
	font-size: var(--dye-size-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: lowercase;
}

/* WPBakery setzt die Klasse auf den Wrapper, nicht auf die Überschrift selbst */
.dye-display :is(h1, h2, h3, h4, h5, h6, p),
.dye-title :is(h1, h2, h3, h4, h5, h6, p),
.dye-lead :is(h1, h2, h3, h4, h5, h6, p),
.dye-label :is(h1, h2, h3, h4, h5, h6, p) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	margin: 0;
}

/* --- Crossovers und Kontraste --------------------------------------------- */

/* Serif-Kursive mitten in der Grotesk: <span class="dye-accent">Wort</span> */
.dye-accent {
	font-family: var(--dye-font-accent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Konturschrift */
.dye-outline {
	color: transparent;
	-webkit-text-stroke: 0.018em var(--dye-ink);
}

/* Neon-Marker hinter schwarzem Text. Oben bleibt Luft, damit der Marker bei
   engem Zeilenabstand keine Unterlängen der Zeile darüber verdeckt. */
.dye-mark {
	--dye-mark-color: var(--dye-pink);
	color: var(--dye-ink);
	background: linear-gradient(transparent 17%, var(--dye-mark-color) 17% 93%, transparent 93%);
	padding: 0 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.dye-mark--orange {
	--dye-mark-color: var(--dye-orange);
}

.dye-mark--blue {
	--dye-mark-color: var(--dye-blue);
	color: var(--dye-paper);
}

/* Einzelne Wörter flach in Neon */
.dye-pop {
	color: var(--dye-pink);
}

.dye-pop--orange {
	color: var(--dye-orange);
}

.dye-pop--blue {
	color: var(--dye-blue);
}

/* Signatur "Dip-Dye": Schrift, unten hart in Farbe getaucht */
.dye-dip {
	--dye-dip-color: var(--dye-pink);
	--dye-dip-line: 56%;
	color: var(--dye-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.dye-dip {
		background: linear-gradient(currentColor var(--dye-dip-line), var(--dye-dip-color) var(--dye-dip-line));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.dye-dip--orange {
	--dye-dip-color: var(--dye-orange);
}

.dye-dip--blue {
	--dye-dip-color: var(--dye-blue);
}

/* --- Flächen -------------------------------------------------------------- */

.dye-section {
	background: var(--dye-paper);
	color: var(--dye-ink);
	padding: var(--dye-space) var(--dye-gutter);
}

/* Schwarz-Umkehr */
.dye-invert {
	--dye-mute: #6f6f6f;
	--dye-line: #2a2a2a;
	background: var(--dye-ink);
	color: var(--dye-paper);
}

.dye-invert .dye-outline {
	-webkit-text-stroke-color: var(--dye-paper);
}

.dye-invert .dye-dip {
	color: var(--dye-paper);
}

/* Vollflächig Neon */
.dye-neon {
	background: var(--dye-pink);
	color: var(--dye-ink);
}

.dye-neon--orange {
	background: var(--dye-orange);
}

.dye-neon--blue {
	background: var(--dye-blue);
	color: var(--dye-paper);
}

.dye-rule {
	border: 0;
	border-top: 1px solid var(--dye-line);
	margin: 0;
}

/* --- Bedienelemente ------------------------------------------------------- */

/* Umschalter wie "vienna / munich / graz": aktiv schwarz, Rest grau */
.dye-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.75em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--dye-font-text);
	font-size: var(--dye-size-label);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: lowercase;
}

.dye-tabs a {
	color: var(--dye-mute);
	text-decoration: none;
	transition: color 0.2s ease;
}

.dye-tabs a:hover,
.dye-tabs a[aria-current],
.dye-tabs .is-active > a {
	color: inherit;
}

.dye-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dye-link:hover {
	background: var(--dye-ink);
	color: var(--dye-paper);
}

.dye-invert .dye-link:hover {
	background: var(--dye-paper);
	color: var(--dye-ink);
}

.dye-btn,
.dye-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.5em;
	border: 0;
	border-radius: 999px;
	background: var(--dye-ink);
	color: var(--dye-paper);
	font-family: var(--dye-font-text);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dye-btn:hover {
	background: var(--dye-pink);
	color: var(--dye-ink);
}

.dye-invert .dye-btn {
	background: var(--dye-pink);
	color: var(--dye-ink);
}

.dye-invert .dye-btn:hover,
.dye-neon .dye-btn:hover {
	background: var(--dye-paper);
	color: var(--dye-ink);
}

.dye-tabs a:focus-visible,
.dye-link:focus-visible,
.dye-btn:focus-visible {
	outline: 3px solid var(--dye-blue);
	outline-offset: 3px;
}

.dye-neon--blue :is(.dye-tabs a, .dye-link, .dye-btn):focus-visible {
	outline-color: var(--dye-paper);
}

@media (prefers-reduced-motion: reduce) {
	.dye-tabs a,
	.dye-link,
	.dye-btn {
		transition: none;
	}
}