/*
 * marionanni_footer.css
 *
 * Footer comune del gruppo Mario Nanni (prototipo mn-prototipo, blocco <footer class="mn-footer">).
 *
 * IDENTICO tra i progetti (stessa regola di marionannischole_typography.css):
 *   - www.marionanni.com
 *   - www.marionannischole.com
 *   - www.fondazionemarionannischole.it
 *   - luogodellostudio.marionannischole.com
 * Modifiche: aggiornare in TUTTI E QUATTRO i progetti; l'hash SHA-256 dei quattro file deve
 * coincidere (controllato da luogodellostudio test/footer_gruppo.php).
 *
 * Regole:
 *   - tutto sotto .mn-footer: nessun reset globale, il resto della pagina non cambia;
 *   - tipografia del gruppo: FuturaBT dal foglio tipografico, peso con .fw-bold / b / h*, Book dentro
 *     un titolo con .fw-normal, corsivo con .fst-italic; qui nessun font-weight e nessun font-style;
 *   - griglia: Bootstrap 5 sui tre siti GONET (container, row, col-*, offset-*); luogodellostudio non
 *     carica Bootstrap e mette .mn-footer--nobs, che attiva la griglia minima in fondo al foglio, con
 *     gli stessi valori di Bootstrap 5.3 per le sole classi usate dal footer;
 *   - misure e interlinee del prototipo (mn.css §13): voci di elenco con 3px sopra e sotto, testo 13px.
 *
 * Le regole "footer {...}" per elemento degli style.css dei siti (sfondo, padding, corpo 14px,
 * colori dei link) hanno specificita' minore di quelle qui sotto e non arrivano al footer.
 */

.mn-footer {
    --mn-f-nero: #0a0a0a;
    --mn-f-bianco: #fff;
    --mn-f-g2: #dcdad5;
    --mn-f-g3: #6b6964;
    --mn-f-eco-filetto: #3a3a38;
    --mn-f-eco-meta: #a9a7a1;
    --mn-f-eco-testo: #c9c7c2;
    --mn-f-eco-link: #d6d4ce;
    --mn-f-errore: #a4161a;
    margin: 48px 0 0;
    padding: 0;
    background: var(--mn-f-bianco);
    color: var(--mn-f-nero);
    border-top: 1px solid var(--mn-f-g2);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

/* Corpo: le regole "footer p/div/a" dei siti (14px sulla fondazione) non devono arrivare qui. */
.mn-footer p,
.mn-footer div,
.mn-footer a,
.mn-footer li,
.mn-footer address {
    font-size: inherit;
}

/* Margini dei blocchi di testo (Bootstrap e browser); i div della griglia non si toccano. */
.mn-footer p,
.mn-footer ul,
.mn-footer li,
.mn-footer address,
.mn-footer h2,
.mn-footer h3 {
    line-height: inherit;
    margin: 0;
    padding: 0;
}

.mn-footer ul {
    list-style: none;
}

.mn-footer a,
.mn-footer a:visited,
.mn-footer a:focus {
    color: inherit;
    text-decoration: none;
}

.mn-footer a:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.mn-footer :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.mn-footer .mn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- parte alta */

.mn-footer .mn-footer__alto {
    padding: 56px 0 64px;
}

/* Righe Bootstrap con i margini negativi del gutter anche dove lo style.css del sito li azzera con
   una regola .row globale (marionannischole). Sulla griglia senza Bootstrap vale --nobs, piu' sotto. */
.mn-footer .row {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
}

.mn-footer .mn-footer__alto .row {
    row-gap: 40px;
}

.mn-footer .mn-footer__news h2 {
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 12px;
}

.mn-footer .mn-footer__news-testo {
    max-width: 46ch;
    color: var(--mn-f-g3);
    font-size: 13px;
}

.mn-footer .mn-footer__form {
    margin-top: 24px;
    max-width: 520px;
}

.mn-footer .mn-footer__riga-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Bordo e raggio con !important: lo style.css della fondazione li impone con !important a ogni input. */
.mn-footer .mn-footer__email {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    font: inherit;
    font-size: 15px;
    color: inherit;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--mn-f-nero) !important;
    border-radius: 0 !important;
    box-shadow: none;
    padding: 10px 0;
}

.mn-footer .mn-footer__email::placeholder {
    color: var(--mn-f-g3);
    opacity: 1;
}

.mn-footer .mn-footer__email:focus {
    outline: none;
    border-bottom-width: 2px !important;
}

.mn-footer .mn-footer__iscriviti {
    min-height: 44px;
    min-width: 44px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--mn-f-nero);
    border-radius: 0;
    padding: 0 0 0 20px;
    cursor: pointer;
}

.mn-footer .mn-footer__iscriviti::after {
    content: "\00a0\2192";
}

.mn-footer .mn-footer__consenso {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    margin-top: 18px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--mn-f-g3);
}

.mn-footer .mn-footer__consenso input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 2px 0 0;
    accent-color: var(--mn-f-nero);
}

.mn-footer .mn-footer__consenso > label:not(.error) {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

/* Il link all'informativa deve distinguersi dal testo del consenso: lo style.css di marionanni.com
   toglie la sottolineatura a tutti i link con !important. */
.mn-footer .mn-footer__consenso a {
    color: inherit;
    font-size: inherit;
    text-decoration: underline !important;
}

/* Messaggi di jQuery Validation: il plugin inserisce label.error subito dopo il campo; qui
   vanno su una riga intera sotto il campo e sotto la casella del consenso. */
.mn-footer label.error {
    order: 3;
    flex: 0 0 100%;
    display: block;
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--mn-f-errore);
}

.mn-footer .mn-footer__esito {
    margin-top: 16px;
    min-height: 1.5em;
    font-size: 13px;
}

.mn-footer .mn-footer__esito--ko {
    color: var(--mn-f-errore);
}

.mn-footer .mn-footer__h {
    font-size: 11px;
    line-height: 1.5;
    color: var(--mn-f-g3);
    letter-spacing: .04em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mn-f-g2);
    margin-bottom: 12px;
}

/* Colonne strette (2/12): un indirizzo email lungo va a capo invece di uscire dalla colonna. */
.mn-footer .mn-footer__studio {
    font-style: normal;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mn-footer .mn-footer__lista li {
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- foot-eco: i siti del gruppo */

.mn-footer .mn-footer__eco {
    background: var(--mn-f-nero);
    color: var(--mn-f-bianco);
    padding: 40px 0 28px;
}

.mn-footer .mn-footer__guida {
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--mn-f-eco-filetto);
    font-size: 11px;
    color: var(--mn-f-eco-meta);
    letter-spacing: .04em;
}

.mn-footer .mn-footer__sito {
    padding-bottom: 28px;
}

/* Wordmark: le due parti sulla stessa linea di base (inline-block, non flex) e alla stessa
   dimensione, come un titolo: la riduzione 0.90em del bold in linea del foglio tipografico qui
   non vale, come per i bold dentro h1-h6. */
.mn-footer .mn-footer__wm {
    display: inline-block;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.mn-footer .mn-footer__wm b {
    font-size: inherit;
}

.mn-footer .mn-footer__sito p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mn-f-eco-testo);
    max-width: 34ch;
    margin-top: 10px;
}

.mn-footer .mn-footer__qui {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 11px;
    color: var(--mn-f-bianco);
}

.mn-footer .mn-footer__qui::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mn-f-bianco);
}

.mn-footer .mn-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 32px;
    padding-top: 16px;
    border-top: 1px solid var(--mn-f-eco-filetto);
    font-size: 11px;
    line-height: 1.5;
    color: var(--mn-f-eco-meta);
}

.mn-footer .mn-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
}

.mn-footer .mn-footer__legal a,
.mn-footer .mn-footer__legal a:visited,
.mn-footer .mn-footer__legal a:focus,
.mn-footer .mn-footer__legal a:hover {
    color: var(--mn-f-eco-link);
}

.mn-footer .mn-footer__lingue {
    display: flex;
    column-gap: 12px;
}

.mn-footer .mn-footer__lingue a[aria-current="true"] {
    color: var(--mn-f-bianco);
}

/* ---------------------------------------------------------------- griglia senza Bootstrap
   Solo con .mn-footer--nobs (luogodellostudio): stessi valori di Bootstrap 5.3 per container,
   row, col-12, col-sm-6, col-lg-2, col-lg-4, col-lg-6. */

.mn-footer--nobs .container {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

.mn-footer--nobs .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.mn-footer--nobs .row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

.mn-footer--nobs .col-12 {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 576px) {
    .mn-footer--nobs .container {
        max-width: 540px;
    }

    .mn-footer--nobs .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 768px) {
    .mn-footer--nobs .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .mn-footer--nobs .container {
        max-width: 960px;
    }

    .mn-footer--nobs .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .mn-footer--nobs .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .mn-footer--nobs .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .mn-footer--nobs .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .mn-footer--nobs .container {
        max-width: 1320px;
    }
}