/* The Spazi Styles */
#newsletter {
    background    : var(--accent);
    color         : var(--light);
}
.newsletter-title {
    font : var(--serif-l);
    text-wrap: balance;
}
.newsletter-text {
    font          : var(--sans-m);
    margin-top    : 1rem;
    margin-bottom : 3rem;
}
.newsletter-form {
    grid-area : unset;
    grid-template-areas : "email email email email email email email email email . . ."
                          "nome nome nome nome nome cognome cognome cognome cognome cognome data data"
                          "citta citta citta citta provincia provincia cap cap paese paese paese paese"
                          "privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy"
                          "button button button button button button button button button . . .";
}
.newsletter-label {
    font          : var(--sans-sl);
    display       : block;
    margin-bottom : 0.25rem;
}
.newsletter-label sup {
    vertical-align: baseline;
}
.newsletter-label a {
    text-decoration: underline;
}
.newsletter-input,
.newsletter-button {
    border        : 1px solid var(--light);
    border-radius : none;
    font          : var(--sans);
    padding       : 0.125rem 0.25rem;
    width         : 100%;
    cursor        : pointer;
}
.newsletter-input:focus {
    background : var(--light);
    color      : var(--dark);
}
.newsletter-input-container {
    grid-column: 1 / -1;
}
.newsletter-input-container-email { grid-area : email; }
.newsletter-input-container-nome { grid-area : nome; }
.newsletter-input-container-cognome { grid-area : cognome; }
.newsletter-input-container-citta { grid-area : citta; }
.newsletter-input-container-provincia { grid-area : provincia; }
.newsletter-input-container-cap { grid-area : cap; }
.newsletter-input-container-paese { grid-area : paese; }
.newsletter-input-container-data { grid-area : data; }
.newsletter-input-container-privacy { grid-area : privacy; }
.newsletter-input-container-button { grid-area : button; }
.newsletter-input-container-privacy {
    margin-top : 2rem;
}
.newsletter-input-container-privacy .newsletter-label {
    display     : inline-grid;
    grid-template-columns: 0.75rem 1fr;
    gap         : 0.25rem;
    align-items : center;
}
.newsletter-checkbox {
    appearance : none;
    border     : 1px solid var(--light);
    width      : 0.75rem;
    height     : 0.75rem;
    display    : block;
    cursor     : pointer;
}
.newsletter-checkbox:checked {
    background : var(--light);
}
@media (width > 1100px) {
    .newsletter-form {
        grid-template-areas : "email email email email email email email email . . . . . . . . ."
                              "nome nome nome nome nome nome cognome cognome cognome cognome cognome cognome data data data data ."
                              "citta citta citta citta citta citta provincia provincia cap cap paese paese paese paese paese paese ."
                              "privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy ."
                              "button button button button button button . . . . . . . . . . .";
    }
}
/* Mobile Adjustments */
@media (width < 600px) {
    .newsletter-form {
        grid-template-areas : "email email email email email email email email email email email email"
                              "nome nome nome nome nome nome cognome cognome cognome cognome cognome cognome"
                              "data data data data data data data data data data data data"
                              "citta citta citta citta citta citta citta citta citta provincia provincia provincia"
                              "cap cap cap paese paese paese paese paese paese paese paese paese"
                              "privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy privacy"
                              "button button button button button button button button button button button button";
    }
}