/* ==========================================================================
   NEWSLETTER BAND
   Fascia scura con titolo + claim + form inline (email + bottone).
   ========================================================================== */

.newsletter {
    background-color: var(--color-bg-dark);
    padding-block: var(--space-16);
    text-align: center;
}

.newsletter__inner {
    max-width: 48rem;
    margin-inline: auto;
}

.newsletter__title {
    font-family: var(--font-display);
    font-weight: var(--fw-light);
    font-size: var(--fs-2xl);
    color: var(--color-on-dark);
    margin-bottom: var(--space-4);
}

.newsletter__title em {
    font-style: italic;
    font-weight: var(--fw-regular);
}

.newsletter__lead {
    color: var(--color-on-dark-muted);
    font-weight: var(--fw-light);
    margin-bottom: var(--space-8);
}

.newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 32rem;
    margin-inline: auto;
    text-align: left;
}

/* Riga input + submit: flex row da 640px per affiancare i due elementi.
   Prima del M7' questa regola stava su .newsletter__form stesso, ma ora
   il form contiene anche checkbox e banner di feedback che devono restare
   in stack verticale. */
.newsletter__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.newsletter__input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-bg-default);
    color: var(--color-ink-800);
    font-size: var(--fs-base);
    border: 0;
    outline: none;
}

.newsletter__input:focus-visible {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.newsletter__submit {
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-brand);
    color: var(--color-on-dark);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--transition-base);
}

.newsletter__submit:hover,
.newsletter__submit:focus-visible {
    background-color: var(--color-brand-hover);
}

/* Checkbox privacy sulla fascia scura: override colori per leggibilita'.
   La regola base .form-field--checkbox vive in contact.css con
   specificita' .form-field--checkbox label a (scura) — per batterla sul
   fondo scuro usiamo doppia classe .newsletter .newsletter__privacy per
   alzare la specificita'. */
.newsletter__privacy {
    color: var(--color-on-dark-muted);
}

.newsletter .newsletter__privacy label a,
.newsletter .newsletter__privacy label a:link,
.newsletter .newsletter__privacy label a:visited {
    color: var(--color-on-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.newsletter .newsletter__privacy label a:hover,
.newsletter .newsletter__privacy label a:focus-visible {
    color: var(--color-brand);
}

/* Feedback banner sulla fascia scura: stile compatto, allineato left. */
.newsletter__feedback {
    text-align: left;
}

@media (min-width: 640px) {
    .newsletter__row {
        flex-direction: row;
    }
}