/*--------------------------------------------------------------
Manifattur@ 4.0 — pagine di accesso (wp-login.php)

Veste il login core di WordPress: sfondo bianco, logo del progetto e
tipografia Montserrat, la stessa usata nelle pagine della piattaforma.

Vale per tutte le azioni di wp-login.php (accesso, registrazione,
password dimenticata, reimposta password): sono la stessa pagina.

Nota: lo styling login del tema padre BuddyBoss (opzione `boss_custom_login`)
e' disattivato, quindi /buddyboss-theme/assets/css/login.css non viene
caricato e qui si lavora sul markup core, piu' stabile fra le versioni.
--------------------------------------------------------------*/

/* Il font Montserrat e' dichiarato in montserrat.css, caricato come dipendenza. */

/*--------------------------------------------------------------
1. Colori del progetto — presi dal logo Manifattur@ 4.0
--------------------------------------------------------------*/

body.login {
	--m40-blu: #1a1a5e;
	--m40-blu-scuro: #12123f;
	--m40-ciano: #00aeef;
	--m40-testo: #1d2129;
	--m40-testo-tenue: #5a6472;
	--m40-bordo: #dfe3ea;
}

/*--------------------------------------------------------------
2. Pagina — sfondo bianco e tipografia
--------------------------------------------------------------*/

body.login {
	background: #fff;
	color: var(--m40-testo);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.login input,
body.login select,
body.login textarea,
body.login button,
body.login .button,
body.login label,
body.login p,
body.login a {
	font-family: inherit;
}

body.login #login {
	width: 400px;
	max-width: 92vw;
	padding: 6vh 0 40px;
}

/*--------------------------------------------------------------
3. Logo del progetto al posto del logo WordPress
--------------------------------------------------------------*/

body.login h1 a,
body.login .wp-login-logo a {
	background-image: url('../img/logo-manifattura40.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 300px;
	height: 111px; /* proporzione del logo: 1400x518 */
	margin: 0 auto 28px;
}

/*--------------------------------------------------------------
4. Il modulo
--------------------------------------------------------------*/

body.login form {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(26, 26, 94, 0.06);
	padding: 28px 24px 24px;
	margin-top: 20px;
	overflow: visible;
}

body.login form label,
body.login form .forgetmenot label {
	color: var(--m40-testo);
	font-size: 14px;
	font-weight: 500;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-radius: 6px;
	box-shadow: none;
	color: var(--m40-testo);
	font-size: 15px;
	font-weight: 400;
	padding: 10px 12px;
	margin: 6px 0 0;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
	border-color: var(--m40-ciano);
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
	outline: 0;
}

/* Occhio "mostra password" del core */
body.login .wp-pwd .button.wp-hide-pw {
	color: var(--m40-testo-tenue);
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
	color: var(--m40-blu);
}

body.login .forgetmenot input[type="checkbox"]:checked::before {
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%2300aeef%27%2F%3E%3C%2Fsvg%3E");
}

body.login input[type="checkbox"]:focus {
	border-color: var(--m40-ciano);
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
}

/*--------------------------------------------------------------
5. Pulsante primario
--------------------------------------------------------------*/

body.login .button-primary {
	background: var(--m40-blu);
	border: 1px solid var(--m40-blu);
	border-radius: 6px;
	box-shadow: none;
	color: #fff;
	float: none;
	font-size: 15px;
	font-weight: 600;
	height: auto;
	line-height: 1.4;
	padding: 11px 20px;
	text-shadow: none;
	width: 100%;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: var(--m40-blu-scuro);
	border-color: var(--m40-blu-scuro);
	color: #fff;
}

body.login .button-primary:focus {
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.25);
	outline: 0;
}

body.login form .submit {
	margin-top: 22px;
}

/*--------------------------------------------------------------
6. Link secondari e messaggi
--------------------------------------------------------------*/

body.login a {
	color: var(--m40-blu);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}

body.login a:hover,
body.login a:focus {
	color: var(--m40-ciano);
	box-shadow: none;
	outline: 0;
}

body.login #nav,
body.login #backtoblog {
	font-size: 14px;
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
}

/* Il rimando "← Torna a …" e' rimosso via PHP (filtro login_site_html_link
   in functions.php), non nascosto qui. */

body.login .message,
body.login .notice,
body.login #login_error {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-left: 4px solid var(--m40-ciano);
	border-radius: 6px;
	box-shadow: none;
	color: var(--m40-testo);
	font-size: 14px;
	line-height: 1.5;
	padding: 14px 16px;
}

body.login #login_error,
body.login .notice-error {
	border-left-color: #d63638;
}

body.login .notice-success,
body.login .message.success {
	border-left-color: #00a32a;
}

/* Indicatore di robustezza password (registrazione / reimposta password) */
body.login #pass-strength-result {
	border-radius: 6px;
	font-weight: 500;
	margin: 12px 0 0;
	width: 100%;
}

/*--------------------------------------------------------------
7. Recupero password e reimposta password

Nel modulo "Password dimenticata" il campo e' seguito subito dal pulsante:
serve lo stesso respiro che c'e' nel modulo di accesso.
--------------------------------------------------------------*/

body.login #lostpasswordform p:not(.submit),
body.login #resetpassform p:not(.submit) {
	margin-bottom: 4px;
}

body.login #loginform .submit,
body.login #lostpasswordform .submit,
body.login #resetpassform .submit {
	margin-top: 22px;
}

/*--------------------------------------------------------------
8. Riquadri Termini di servizio e Privacy

Sono i modali aperti dai link in fondo alla pagina. Il markup lo genera
BuddyBoss Platform (bp-core-catchuri.php):
<div id="terms-modal" class="mfp-hide login-popup bb-modal"><h1>…</h1>…</div>

Il tema padre li stila nel proprio login.css, che qui non viene caricato
(`boss_custom_login` disattivo): per questo si presentavano senza
formattazione. Si riprende la stessa resa della pagina di registrazione:
riquadro centrato con intestazione e contenuto scorrevole.
--------------------------------------------------------------*/

body.login .login-popup.bb-modal {
	/* wp-login.php non ha il box-sizing globale del front-end: senza questo il
	   padding si somma a max-width e il riquadro viene 60px piu' largo di
	   quello della registrazione, a parita' di font. */
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid var(--m40-bordo);
	border-radius: 10px;
	box-shadow: 0 3px 24px 0 rgba(18, 43, 70, 0.28);
	color: var(--m40-testo);
	font-size: 15px;
	line-height: 1.7;
	margin: 40px auto;
	max-height: calc(100vh - 80px);
	max-width: 800px;
	overflow-y: auto;
	padding: 30px;
	position: relative;
	width: 100%;
}

body.login .login-popup.bb-modal *,
body.login .login-popup.bb-modal *::before,
body.login .login-popup.bb-modal *::after {
	box-sizing: border-box;
}

/* Intestazione del riquadro, col titolo della pagina */
body.login .login-popup.bb-modal > h1:first-of-type {
	background-color: #f7f8fa;
	border-bottom: 1px solid var(--m40-bordo);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: var(--m40-testo);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: -30px -30px 30px;
	padding: 17px 30px;
	text-align: left;
}

body.login .login-popup.bb-modal h2 {
	font-size: 17px;
	margin: 28px 0 8px;
}

body.login .login-popup.bb-modal h3 {
	font-size: 15px;
	margin: 22px 0 6px;
}

body.login .login-popup.bb-modal p {
	margin: 0 0 1.2rem;
}

body.login .login-popup.bb-modal ul,
body.login .login-popup.bb-modal ol {
	margin: 0 0 1.2rem 1.4rem;
	padding: 0;
}

body.login .login-popup.bb-modal li {
	margin-bottom: 6px;
}

body.login .login-popup.bb-modal .mfp-close,
body.login .login-popup.bb-modal .mfp-close:hover {
	background-color: transparent;
	box-shadow: none;
	color: var(--m40-testo-tenue);
	font-size: 26px;
	opacity: 1;
	right: 10px;
	top: 8px;
}

body.login .mfp-bg {
	opacity: 0.4;
}

/*--------------------------------------------------------------
9. Schermi piccoli
--------------------------------------------------------------*/

@media screen and (max-width: 480px) {
	body.login #login {
		padding-top: 4vh;
	}

	body.login h1 a,
	body.login .wp-login-logo a {
		max-width: 240px;
		height: 89px;
	}

	body.login form {
		padding: 22px 18px 20px;
	}

	body.login .login-popup.bb-modal {
		margin: 20px auto;
		max-height: calc(100vh - 40px);
		padding: 20px;
	}

	body.login .login-popup.bb-modal > h1:first-of-type {
		font-size: 18px;
		margin: -20px -20px 20px;
		padding: 14px 20px;
	}
}