/*
 * G4I Assessment — pagina di accesso.
 *
 * Riveste `wp-login.php` senza sostituirlo: il modulo, i controlli, il recupero
 * password e la compatibilità con i plugin di sicurezza restano quelli nativi di
 * WordPress. Qui si interviene solo su colori, spaziature e tipografia, usando i
 * token della piattaforma perché accesso e applicazione si somiglino.
 *
 * Il logo è testuale finché non arriva il brand kit: basta sostituire il blocco
 * `#login h1 a` con un'immagine quando ci sarà.
 */

body.login {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.30), transparent 46%),
		radial-gradient(circle at 84% 82%, rgba(255, 255, 255, 0.16), transparent 42%),
		linear-gradient(148deg, var(--g4i-navy-dark, #163f70) 0%, var(--g4i-navy, #1b4e8a) 52%, var(--g4i-blue, #1e6eb8) 100%);
	color: var(--g4i-ink, #16324f);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.login #login {
	width: 400px;
	max-width: calc(100vw - 32px);
	padding: 48px 0 32px;
}

/* --- Testata ------------------------------------------------------------- */

body.login #login h1 {
	margin-bottom: 4px;
}

body.login #login h1 a {
	width: auto;
	height: auto;
	margin: 0 0 18px;
	padding: 0;
	background: none;
	text-indent: 0;
	overflow: visible;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

body.login #login h1 a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	box-shadow: none;
}

/* --- Introduzione, resa come parte della scheda -------------------------- */

.g4i-login__intro {
	padding: 22px 24px 4px;
	margin: 0;
	border: none;
	border-radius: 8px 8px 0 0;
	background: var(--g4i-surface, #fff);
	box-shadow: none;
}

.g4i-login__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--g4i-navy, #1b4e8a);
}

.g4i-login__subtitle {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--g4i-ink-soft, #48627d);
}

/* --- Scheda del modulo --------------------------------------------------- */

body.login form {
	margin-top: 0;
	padding: 20px 24px 24px;
	border: none;
	border-radius: 0 0 8px 8px;
	background: var(--g4i-surface, #fff);
	box-shadow: 0 18px 44px rgba(11, 38, 68, 0.28);
}

/* Senza il messaggio introduttivo la scheda arrotonda anche in alto. */
body.login form:first-of-type {
	border-radius: 8px;
}

/*
 * Con l'introduzione sopra, i due blocchi formano una scheda sola e gli angoli
 * alti tornano vivi. Il selettore ripete `body.login` perché altrimenti perde di
 * specificità contro la regola qui sopra e non avrebbe alcun effetto.
 */
body.login .g4i-login__intro + form {
	border-radius: 0 0 8px 8px;
}

body.login form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--g4i-ink-soft, #48627d);
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	padding: 10px 12px;
	border: 1px solid var(--g4i-border, #c3d6ea);
	border-radius: 6px;
	background: var(--g4i-surface, #fff);
	font-size: 15px;
	line-height: 1.4;
	color: var(--g4i-ink, #16324f);
	box-shadow: none;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--g4i-blue, #1e6eb8);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 110, 184, 0.18);
}

body.login .wp-pwd .button.wp-hide-pw {
	color: var(--g4i-ink-muted, #6b8199);
}

body.login .wp-pwd .button.wp-hide-pw:hover {
	color: var(--g4i-navy, #1b4e8a);
}

/* --- Pulsante ------------------------------------------------------------ */

body.login .button-primary {
	/* WordPress lo fa flottare a destra: a piena larghezza il float non serve più
	   e lascerebbe collassare il paragrafo che lo contiene. */
	float: none;
	width: 100%;
	min-height: 42px;
	padding: 0 18px;
	border: none;
	border-radius: 6px;
	background: var(--g4i-navy, #1b4e8a);
	font-size: 15px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--g4i-navy-dark, #163f70);
}

body.login .button-primary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- Collegamenti sotto la scheda ---------------------------------------- */

body.login #nav,
body.login #backtoblog {
	padding: 12px 0 0;
	text-align: center;
	text-shadow: none;
}

body.login #nav a,
body.login #backtoblog a {
	color: rgba(255, 255, 255, 0.86);
	font-size: 13px;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus {
	color: #fff;
	text-decoration: underline;
}

/* --- Messaggi ------------------------------------------------------------ */

body.login .notice,
body.login #login_error,
body.login .message {
	border-radius: 6px;
	border-left-width: 4px;
	box-shadow: 0 6px 18px rgba(11, 38, 68, 0.18);
	font-size: 13px;
}

body.login #login_error {
	border-left-color: #b32d2e;
}

body.login .message {
	border-left-color: var(--g4i-blue, #1e6eb8);
}

/* --- Rispetto delle preferenze di sistema -------------------------------- */

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

@media (prefers-contrast: more) {
	body.login form {
		border: 2px solid var(--g4i-navy-dark, #163f70);
	}

	body.login #nav a,
	body.login #backtoblog a {
		color: #fff;
	}
}