/**
 * Theme – Schwesterseiten-Tab (Cross-Promotion)
 *
 * Am rechten Bildschirmrand angehefteter, um 90° gegen den Uhrzeigersinn
 * gedrehter Tab zur jeweils anderen Kampagne (Waldschutz ↔ Gemeindeschutz).
 * Inhalte redaktionell über die Options-Page «Website-Einstellungen»,
 * Ausgabe via wp_footer (inc/schwesterseite.php).
 *
 * Farben: Grundzustand bewusst zurückhaltend – heller Grund (light) mit
 * dunkler Schrift (ink), damit der Tab im Inhalt nicht als dunkler Balken
 * stört (11.19:1). Beim Hover kippt er auf die Farbe der ZIELkampagne mit
 * weisser Schrift: Der Farbwechsel signalisiert, wohin der Link führt.
 *
 * Dafür gibt es den Palette-Slug «schwester-primary», der gegenläufig auf das
 * primary der anderen Kampagne zeigt – theme.json (Waldschutz → Orange
 * #C86F16) und styles/gemeindeschutz.json (Gemeindeschutz → Grün #2B5E33).
 *
 * Bewusste Abweichung von WCAG AA (Projektentscheid): Weiss auf #C86F16
 * erreicht 3.66:1 und liegt unter der Textschwelle von 4.5:1 – die
 * 3:1-Schwelle für UI-Komponenten ist erfüllt. Betroffen ist nur der
 * Hover-/Fokus-Zustand; der Grundzustand liegt bei 11.19:1, Grün bei 7.63:1.
 * Falls die Farbe doch AA-konform sein soll: #A05811 (5.39:1) in theme.json
 * eintragen – optisch kaum unterscheidbar.
 *
 * Positionierung: Gedreht wird um den Mittelpunkt – dadurch bleibt die
 * vertikale Position über translateY( -50% ) unabhängig von der Textlänge.
 *
 * Die Drehung tauscht Breite und Höhe, wodurch die sichtbare rechte Kante um
 * ( Breite − Höhe ) / 2 nach innen rutscht. Das gleicht translateX aus: Da
 * Prozente sich auf die ungedrehte Box beziehen, entspricht
 * calc( 50% - Dicke / 2 ) genau diesem Betrag. --spnkt-tab-dicke ist dabei die
 * per height fixierte ungedrehte Höhe (= sichtbare Breite des Tabs).
 *
 * Ergebnis: bündig am rechten Rand, exakt zentriert, kein Scrollbalken.
 */

.spnkt-schwesterseite {
	/* Sichtbare Breite des gedrehten Tabs (= ungedrehte Höhe). */
	--spnkt-tab-dicke: 1.5rem;

	position: fixed;
	/* Unteres Viertel statt Mitte – hält den Blick auf den Hauptinhalt frei. */
	top: 75%;
	right: 0;
	/* Unter Header (100) und mobilem Nav-Overlay (99) – siehe header.css. */
	z-index: 98;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var( --spnkt-tab-dicke );
	padding: 0 0.5rem;
	background-color: var( --wp--preset--color--light );
	color: var( --wp--preset--color--ink );
	text-decoration: none;
	white-space: nowrap;
	/* Nach der Drehung liegen diese beiden Ecken oben – nur sie werden gerundet. */
	border-radius: var( --wp--custom--border-radius--standard ) var( --wp--custom--border-radius--standard ) 0 0;
	transform-origin: center;
	transform: translateY( -50% ) translateX( calc( 50% - var( --spnkt-tab-dicke ) / 2 ) ) rotate( -90deg );
	transition: background-color 0.2s ease;
}

.spnkt-schwesterseite__text {
	display: block;
	font-family: var( --wp--preset--font-family--base );
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Hover/Fokus in der Farbe der Zielkampagne – siehe Kopfkommentar. */
.spnkt-schwesterseite:hover,
.spnkt-schwesterseite:focus-visible {
	background-color: var( --wp--preset--color--schwester-primary );
	color: var( --wp--preset--color--background );
}

/*
 * Sichtbarer Tastatur-Fokus (WCAG 2.2 – 2.4.7 Focus Visible).
 * Outline in currentColor: Im Fokus-Zustand ist der Grund die Kampagnenfarbe
 * und die Schrift weiss, das Outline also weiss. Greift eine Regel den
 * Farbwechsel einmal nicht, bleibt es durch currentColor trotzdem sichtbar –
 * ein fest gesetztes Weiss wäre auf dem hellen Grundzustand unsichtbar.
 */
.spnkt-schwesterseite:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

/*
 * Mobile: Grundmasse sind bereits kompakt und gelten unverändert weiter –
 * nur die Laufweite wird leicht reduziert, damit lange Domainnamen auf
 * kurzen Viewports nicht über die Bildschirmhöhe hinauslaufen.
 */
@media (max-width: 1023px) {
	.spnkt-schwesterseite__text {
		letter-spacing: 0.06em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spnkt-schwesterseite {
		transition: none;
	}
}