/*--------------------------------------------------------------
Manifattur@ 4.0 — pagina di registrazione (/register/)

Non e' wp-login.php: e' il template BuddyPress
(bp-templates/bp-nouveau/buddypress/members/register.php) servito dal
front-end, quindi ha markup e stili propri e va vestito a parte.

IMPORTANTE sui selettori: il tema padre stila questa pagina con catene
molto specifiche, per esempio

    .bs-bp-container-reg #buddypress #signup-form.standard-form legend { font-size: 16px; }
    body.buddypress.register .register-section-logo a { font-size: 20px; }

Selettori piu' corti perdono a prescindere dall'ordine di caricamento.
Le regole qui sotto ricalcano quindi le stesse catene con un `body.register`
in piu' davanti, per stare sopra al tema senza ricorrere a !important.

Font: Montserrat, dichiarato in montserrat.css (caricato come dipendenza).
Scala tipografica allineata a login.css: etichette 14px/500, campi 15px,
pulsante 15px/600, testo di servizio 13px.
--------------------------------------------------------------*/

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

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

html body.register,
html body.register #page,
html body.register .site-content,
html body.register #primary,
html body.register .bs-bp-container-reg,
html body.activate,
html body.activate #page,
html body.activate .site-content,
html body.activate #primary,
html body.activate .bs-bp-container-reg,
html body.activation,
html body.activation #page,
html body.activation .site-content,
html body.activation #primary,
html body.activation .bs-bp-container-reg {
	background: #fff;
}

body.register,
body.register input,
body.register select,
body.register textarea,
body.register button,
body.register label,
body.register legend,
body.register h1,
body.register h2,
body.activate,
body.activate input,
body.activate button,
body.activate label,
body.activate h1,
body.activation,
body.activation input,
body.activation button,
body.activation label,
body.activation h1 {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.register #register-page {
	color: var(--m40-testo);
	font-size: 14px;
	line-height: 1.5;
}

/* Spazio sopra il logo uguale a quello del login (login.css: #login ha
   padding 6vh). Il tema usa `padding-top: 5%`, che essendo percentuale si
   calcola sulla LARGHEZZA: su schermo largo diventa un vuoto enorme.
   Il prefisso `html` serve solo a superare la specificita' del tema. */
html body.register.buddypress .site-content,
html body.activation.buddypress .site-content,
html body.activate.buddypress .site-content {
	padding-top: 6vh;
}

html body.register.buddypress .site-content .content-area,
html body.activation.buddypress .site-content .content-area,
html body.activate.buddypress .site-content .content-area {
	padding-top: 0;
}

/*--------------------------------------------------------------
2. Logo del progetto

Il tema stampa `.register-section-logo` con l'immagine dell'opzione
`admin_logo_media`; se l'opzione e' vuota stampa il nome del sito come
testo. Si sostituisce quel testo con il logo via CSS, senza dipendere
dalle opzioni del tema.
--------------------------------------------------------------*/

body.register.buddypress .register-section-logo {
	margin: 0 auto 28px;
	max-width: 450px;
	text-align: center;
	width: 100%;
}

body.register.buddypress .register-section-logo a,
body.register.buddypress .register-section-logo.private-on-div {
	background-image: url('../img/logo-manifattura40.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	/* azzerano il nome del sito stampato come testo dentro il link */
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	height: 111px; /* proporzione del logo: 1400x518 */
	margin: 0 auto;
	max-width: 300px;
	width: 100%;
}

/* Se in futuro si imposta il logo nelle opzioni del tema, il tema stampa
   una vera <img>: in quel caso si toglie lo sfondo per non raddoppiarlo. */
body.register.buddypress .register-section-logo a:has(img) {
	background-image: none;
	font-size: inherit;
	height: auto;
	line-height: inherit;
	text-indent: 0;
}

body.register.buddypress .register-section-logo img {
	height: auto;
	max-width: 300px;
	width: 100%;
}

/* Pagine di attivazione (/activate/): stesso logo, stesso slot.
   Il tema le stampa in `.activate-section-logo` con la stessa logica. */
html body.buddypress .activate-section-logo {
	margin: 0 auto 28px;
	max-width: 450px;
	text-align: center;
	width: 100%;
}

html body.buddypress .activate-section-logo a,
html body.buddypress .activate-section-logo:not(:has(a)) {
	background-image: url('../img/logo-manifattura40.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	height: 111px;
	margin: 0 auto;
	max-width: 300px;
	width: 100%;
}

html body.buddypress .activate-section-logo a:has(img) {
	background-image: none;
	font-size: inherit;
	height: auto;
	line-height: inherit;
	text-indent: 0;
}

html body.buddypress .activate-section-logo img {
	height: auto;
	max-width: 300px;
	width: 100%;
}

/*--------------------------------------------------------------
3. Intestazione — "Registrati" e "« torna al login"
--------------------------------------------------------------*/

body.buddypress article.bp_activate .entry-header,
body.register.buddypress article.bp_register .entry-header {
	align-items: baseline;
	border: 0;
	display: flex;
	flex-flow: row wrap;
	gap: 4px 12px;
	justify-content: space-between;
	margin-bottom: 24px;
	padding: 0;
}

body.buddypress article.bp_activate .entry-header h1,
body.buddypress article.bp_activate .entry-header .entry-title {
	color: var(--m40-testo);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 auto 0 0;
}

/* Sulla registrazione il titolo "Registrati" non si mostra: il pulsante in
   fondo dice gia' la stessa cosa, come sul login che non ha intestazione.
   Non si usa `display: none` ma la tecnica di lettura assistita: il titolo
   sparisce alla vista e resta per lettori di schermo e motori di ricerca,
   che altrimenti troverebbero una pagina senza alcun titolo. */
body.register.buddypress article.bp_register .entry-header h1,
body.register.buddypress article.bp_register .entry-header .entry-title {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Senza il titolo, il "« torna al login" resta da solo: allineato a destra */
body.register.buddypress article.bp_register .entry-header {
	justify-content: flex-end;
}

body.register.buddypress article.bp_register .entry-header span {
	color: var(--m40-testo-tenue);
	font-size: 14px;
}

/*--------------------------------------------------------------
4. Campi

Le etichette hanno due markup diversi: <label> per i campi account
(Email, Password) e <legend> per i campi profilo (Nome, Cognome).
Vanno pareggiate, altrimenti la stessa pagina mostra due dimensioni.
--------------------------------------------------------------*/

/* Riquadro attorno ai campi, come sul login.

   Il template non ha un contenitore unico per campi + pulsante: sono due
   fratelli (`.layout-wrap` e `.submit`). Il riquadro si compone quindi di due
   meta' che si uniscono senza soluzione di continuita' — la prima senza bordo
   sotto, la seconda senza bordo sopra — cosi' la frase su Termini e Privacy,
   che nel markup sta in mezzo, puo' finire fuori dal riquadro con `order`. */
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: visible;
	padding: 0;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .layout-wrap {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	order: 1;
	padding: 28px 24px 0;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .submit {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-radius: 0 0 10px 10px;
	border-top: 0;
	order: 2;
	padding: 0 24px 24px;
}

/* Ordine dei campi come nella piattaforma originale: Nome, Cognome, Email,
   Password, Conferma password. Il template stampa prima i dati account e poi
   i campi profilo, qui si invertono le due sezioni. */
body.register .bs-bp-container-reg #buddypress #signup-form .layout-wrap {
	display: flex;
	flex-direction: column;
}

body.register .bs-bp-container-reg #buddypress #signup-form #profile-details-section {
	order: 1;
}

body.register .bs-bp-container-reg #buddypress #signup-form #basic-details-section {
	order: 2;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .editfield,
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .form-field {
	margin-bottom: 18px;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form label,
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form legend {
	color: var(--m40-testo);
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 6px;
}

/* "(facoltativo)" accanto al nome del campo */
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form legend span {
	color: var(--m40-testo-tenue);
	font-size: 14px;
	font-weight: 400;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form input[type="text"],
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form input[type="email"],
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form input[type="password"],
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form input[type="url"],
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form input[type="tel"],
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form textarea,
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form select {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-radius: 6px;
	box-shadow: none;
	color: var(--m40-testo);
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 12px;
	width: 100%;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form input:focus,
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form textarea:focus,
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form select:focus {
	border-color: var(--m40-ciano);
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
	outline: 0;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form p.description {
	color: var(--m40-testo-tenue);
	font-size: 13px;
}

/*--------------------------------------------------------------
5. Pulsante e note finali
--------------------------------------------------------------*/

body.register.buddypress #buddypress #signup-form input[type="submit"],
body.register.buddypress #buddypress #signup-form #signup_submit {
	background-color: var(--m40-blu);
	border: 1px solid var(--m40-blu);
	border-radius: 6px;
	box-shadow: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	/* il tema imposta un'altezza fissa che sbilanciava il testo nel pulsante */
	height: auto;
	line-height: 1.4;
	/* 18px di margine dell'ultimo campo + 4 = i 22px che separano il pulsante
	   "Accedi" dall'ultima riga nel login. */
	margin-top: 4px;
	padding: 12px 28px;
	text-align: center;
	width: 100%;
}

body.register.buddypress #buddypress #signup-form input[type="submit"]:hover,
body.register.buddypress #buddypress #signup-form input[type="submit"]:focus {
	background-color: var(--m40-blu-scuro);
	border-color: var(--m40-blu-scuro);
	color: #fff;
}

/* La frase su Termini e Privacy va sotto il pulsante e fuori dal riquadro,
   con la stessa resa della riga in fondo al login: centrata, 14px, link in blu.
   Nel markup sta prima del pulsante: la sposta `order`. */
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .register-privacy-info,
body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .bp-terms-privacy {
	color: var(--m40-testo-tenue);
	font-size: 14px;
	line-height: 1.5;
	margin: 22px 0 0;
	order: 3;
	text-align: center;
}

body.register .bs-bp-container-reg #buddypress #signup-form.standard-form .register-privacy-info a,
body.register .bs-bp-container-reg #buddypress .register-page .register-privacy-info a {
	color: var(--m40-blu);
	font-weight: 500;
}

body.register .bs-bp-container-reg a {
	color: var(--m40-blu);
	font-weight: 500;
	text-decoration: none;
}

body.register .bs-bp-container-reg a:hover,
body.register .bs-bp-container-reg a:focus {
	color: var(--m40-ciano);
}

/*--------------------------------------------------------------
6. Pagine di attivazione (/activate/)

Due schermate: richiesta della chiave e conferma di avvenuta attivazione.
Stessa scala tipografica e stesso pulsante delle altre pagine.
--------------------------------------------------------------*/

html body.buddypress #activate-page {
	color: var(--m40-testo);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 auto;
	max-width: 450px;
	width: 100%;
}

html body.buddypress #activate-page p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
}

html body.buddypress #activate-page label {
	color: var(--m40-testo);
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}

html body.buddypress #activate-page input[type="text"] {
	background: #fff;
	border: 1px solid var(--m40-bordo);
	border-radius: 6px;
	box-shadow: none;
	color: var(--m40-testo);
	font-size: 15px;
	line-height: 1.4;
	padding: 10px 12px;
	width: 100%;
}

html body.buddypress #activate-page input[type="text"]:focus {
	border-color: var(--m40-ciano);
	box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15);
	outline: 0;
}

html body.buddypress #activate-page .submit {
	padding: 0;
}

html body.buddypress #activate-page input[type="submit"],
html body.buddypress #activate-page a.button {
	background-color: var(--m40-blu);
	border: 1px solid var(--m40-blu);
	border-radius: 6px;
	box-shadow: none;
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: 600;
	height: auto;
	line-height: 1.4;
	margin-top: 22px;
	padding: 12px 28px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

html body.buddypress #activate-page input[type="submit"]:hover,
html body.buddypress #activate-page input[type="submit"]:focus,
html body.buddypress #activate-page a.button:hover,
html body.buddypress #activate-page a.button:focus {
	background-color: var(--m40-blu-scuro);
	border-color: var(--m40-blu-scuro);
	color: #fff;
}

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

Stessa scala tipografica dei modali del login (login.css, sezione 8):
testo 15px/1.7, titolo 20px, sottotitoli 17 e 15px. Qui si tocca solo la
tipografia: l'impaginazione del riquadro la da' gia' il tema padre.
Il prefisso `html` serve a superare la specificita' delle sue regole.
--------------------------------------------------------------*/

html body.register .registration-popup.bb-modal,
html body.register .mfp-content #terms-modal,
html body.register .mfp-content #privacy-modal {
	color: var(--m40-testo);
	font-size: 15px;
	line-height: 1.7;
}

html body.register .registration-popup.bb-modal > h1:first-of-type {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

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

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

html body.register .registration-popup.bb-modal p,
html body.register .registration-popup.bb-modal li {
	font-size: 15px;
	line-height: 1.7;
}

html body.register .registration-popup.bb-modal p {
	margin: 0 0 1.2rem;
}

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

html body.register .registration-popup.bb-modal li {
	margin-bottom: 6px;
}

/*--------------------------------------------------------------
8. Schermi piccoli
--------------------------------------------------------------*/

@media screen and (max-width: 480px) {
	body.register.buddypress .register-section-logo a,
	body.register.buddypress .register-section-logo.private-on-div {
		height: 89px;
		max-width: 240px;
	}

	body.register.buddypress article.bp_register .entry-header h1,
	body.register.buddypress article.bp_register .entry-header .entry-title {
		font-size: 20px;
	}
}