/*
 * TWI Kadence Child — gebrandeter wp-login (Handoff §4 „Login-Wall")
 *
 * Split-Layout: links Petrol-Fläche (Logo-Platzhalter + Begrüßung),
 * rechts surface mit Formular. Mobil gestapelt. Tap-Ziele ≥48px.
 *
 * LOGO PENDING: das weiße Logo (assets/img/twi-logo-white.svg) existiert noch
 * NICHT. Es wird per CSS-Variable --twi-login-logo referenziert; solange die
 * Datei fehlt, bleibt die Logo-Fläche leer — das Layout bricht NICHT. Sobald
 * das Logo vorliegt (aus design/branding/logos/ nach assets/img/), greift es
 * automatisch. Optional zusätzlich die Puls-Grafik (Handoff §6) einsetzen.
 *
 * Farben hier hartkodiert (CI-Werte), da theme.json-Presets auf wp-login
 * nicht zuverlässig verfügbar sind. Quelle der Wahrheit: Handoff §2.
 */

:root {
	--twi-login-primary: #2C5E7A;
	--twi-login-accent: #B5611B;
	--twi-login-surface: #FFFFFF;
	--twi-login-bg: #FAF7F1;
	--twi-login-text: #2B2A28;
	--twi-login-muted: #5C574F;
	--twi-login-border: #E0D9CC;
	--twi-login-tap: 48px;

	/* Logo: PENDING — Datei noch nicht vorhanden (siehe Kommentar oben). */
	--twi-login-logo: url("../img/twi-logo-white.svg");
}

/* Gesamte Login-Seite als zweispaltiges Grid (Marke | Formular). */
body.login {
	background-color: var(--twi-login-bg);
	color: var(--twi-login-text);
	font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
	min-height: 100vh;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Linke Markenfläche: per ::before an den body gehängt. */
body.login::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 999;
	background-color: var(--twi-login-primary);
	/*
	 * Logo + dezente Puls-Grafik (PENDING). background-image fällt sauber
	 * aus, wenn die Datei fehlt — die Petrol-Fläche bleibt erhalten.
	 */
	background-image: var(--twi-login-logo);
	background-repeat: no-repeat;
	background-position: center 18%;
	background-size: min(260px, 60%) auto;
}

/* Begrüßungstext links unter dem Logo. */
body.login::after {
	content: "Willkommen in der TWI-Community";
	grid-column: 1;
	align-self: center;
	justify-self: center;
	max-width: 22rem;
	padding: 0 2rem;
	margin-top: 8rem;
	color: #fff;
	font-family: "Spectral", Georgia, serif;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	pointer-events: none;
}

/* Rechte Formularspalte. */
#login {
	grid-column: 2;
	align-self: center;
	width: 100%;
	max-width: 26rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	box-sizing: border-box;
}

/* Standard-wp-Logo oberhalb des Formulars ausblenden (Marke steht links). */
#login h1 a {
	background-image: none !important;
	width: auto;
	height: auto;
	text-indent: 0;
	overflow: visible;
	font-family: "Spectral", Georgia, serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--twi-login-primary);
}

/* Formular-Karte. */
#loginform,
#registerform,
#lostpasswordform {
	background-color: var(--twi-login-surface);
	border: 1px solid var(--twi-login-border);
	border-radius: 12px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Eingabefelder: großzügig, Tap-Ziel ≥48px. */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height: var(--twi-login-tap);
	font-size: 1.0625rem;
	border-radius: 8px;
	border: 1px solid var(--twi-login-border);
	padding: 0.5rem 0.75rem;
}

/* Submit = primary-Button, Tap-Ziel ≥48px. */
.login .button-primary,
.wp-core-ui .login .button-primary {
	min-height: var(--twi-login-tap);
	width: 100%;
	background-color: var(--twi-login-primary);
	border-color: var(--twi-login-primary);
	border-radius: 8px;
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.15s ease;
}
.login .button-primary:hover,
.login .button-primary:focus {
	background-color: #244c63;
	border-color: #244c63;
}

/* Links („Passwort vergessen", „Zurück") in Markenfarbe. */
.login #nav a,
.login #backtoblog a {
	color: var(--twi-login-muted);
}
.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--twi-login-primary);
}

/* Sichtbarer Fokus-Ring (Handoff §3) — auch auf wp-login. */
.login input:focus-visible,
.login .button:focus-visible,
.login a:focus-visible {
	outline: 2px solid var(--twi-login-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(44, 94, 122, 0.35);
}

/* ----------------------------- Mobil ----------------------------- */
/* Unter 782px: einspaltig stapeln — Marken-Header oben, Formular darunter. */
@media (max-width: 782px) {
	body.login {
		grid-template-columns: 1fr;
	}
	body.login::before {
		grid-column: 1;
		grid-row: 1;
		min-height: 200px;
		background-position: center center;
		background-size: min(200px, 60%) auto;
	}
	body.login::after {
		grid-column: 1;
		grid-row: 2;
		margin-top: 0;
		margin-bottom: 1rem;
		color: var(--twi-login-primary);
	}
	#login {
		grid-column: 1;
		grid-row: 3;
	}
}

/* prefers-reduced-motion respektieren. */
@media (prefers-reduced-motion: reduce) {
	.login .button-primary {
		transition: none;
	}
}