/*
 * Stile comune delle pagine NSC fuori da WordPress.
 * Colori e caratteri del sito (kit Elementor): blu NSC #47537E, rosso #CF2E36,
 * blu grigio #312F40, carattere Lato. Si cambiano qui, valgono per tutte le pagine.
 */
:root {
    --nsc-blu: #47537E;
    --nsc-blu-scuro: #312F40;
    --nsc-rosso: #CF2E36;
    --nsc-sfondo: #F4F5F8;
    --bs-primary: var(--nsc-blu);
    --bs-primary-rgb: 71, 83, 126;
    --bs-link-color: var(--nsc-blu);
    --bs-link-color-rgb: 71, 83, 126;
    --bs-body-font-family: Lato, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--nsc-sfondo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nsc-contenuto { flex: 1; }

/* Intestazione: logo grande, nome e motto */
.nsc-intestazione { background: var(--nsc-blu); }
.nsc-intestazione .navbar { padding-top: .75rem; padding-bottom: .75rem; }
.nsc-marchio {
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: normal;
}
.nsc-logo { height: 56px; width: auto; }
.nsc-marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.nsc-nome { font-weight: 700; letter-spacing: .02em; font-size: 1.05rem; }
.nsc-motto { font-size: .9rem; font-weight: 400; opacity: .85; }
@media (min-width: 768px) {
    .nsc-intestazione .navbar { padding-top: 1rem; padding-bottom: 1rem; }
    .nsc-logo { height: 76px; }
    .nsc-nome { font-size: 1.35rem; }
    .nsc-motto { font-size: 1rem; }
}

/* Piè di pagina: social a colori su cerchi bianchi, poi dati del sindacato */
.nsc-piede { background: var(--nsc-blu-scuro); color: rgba(255, 255, 255, .85); }
.nsc-piede a { color: #fff; }
.nsc-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    font-size: 1.25rem;
    text-decoration: none;
    transition: transform .15s;
}
.nsc-social a:hover,
.nsc-social a:focus-visible { transform: scale(1.12); }

.btn-primary {
    --bs-btn-bg: var(--nsc-blu);
    --bs-btn-border-color: var(--nsc-blu);
    --bs-btn-hover-bg: var(--nsc-blu-scuro);
    --bs-btn-hover-border-color: var(--nsc-blu-scuro);
    --bs-btn-active-bg: var(--nsc-blu-scuro);
    --bs-btn-disabled-bg: var(--nsc-blu);
    --bs-btn-disabled-border-color: var(--nsc-blu);
}

/* Riquadro bianco che contiene il form o il messaggio */
.nsc-riquadro {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .nsc-riquadro { padding: 2rem 2.5rem; }
}

.nsc-riquadro h2 {
    font-size: 1.1rem;
    color: var(--nsc-blu);
    border-bottom: 2px solid var(--nsc-blu);
    padding-bottom: .35rem;
    margin: 2rem 0 1rem;
}
.nsc-riquadro h2:first-of-type { margin-top: .5rem; }

/* Form: ogni sezione è un riquadro numerato, così le sezioni non si confondono (Carlo, 2026-10-13) */
.nsc-sezione {
    background: #F8F9FC;
    border: 1px solid #DDE1EC;
    border-left: 4px solid var(--nsc-blu);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .nsc-sezione { padding: 1.25rem 1.5rem; }
}
.nsc-riquadro .nsc-sezione h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-weight: 700;
    border-bottom: 1px solid #DDE1EC;
    padding-bottom: .6rem;
    margin: 0 0 1rem;
}
.nsc-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--nsc-blu);
    color: #fff;
    font-size: .95rem;
}
.nsc-sezione .form-label { font-weight: 600; color: var(--nsc-blu-scuro); margin-bottom: .3rem; }
/* Bordi più scuri sul fondo grigio; non sui campi in errore (rossi) né su quelli letti dal documento */
.nsc-sezione .form-control:not(.is-invalid):not(.nsc-dal-documento),
.nsc-sezione .form-select:not(.is-invalid):not(.nsc-dal-documento) { border-color: #B9C0D4; }
.nsc-sezione .form-control:not(.is-invalid):focus,
.nsc-sezione .form-select:not(.is-invalid):focus {
    border-color: var(--nsc-blu);
    box-shadow: 0 0 0 .2rem rgba(71, 83, 126, .2);
}
@media (max-width: 575.98px) {
    .nsc-riquadro { padding: 1rem .75rem; }
}

/* Tavoletta della firma: niente scroll della pagina mentre si disegna col dito */
.nsc-firma {
    width: 100%;
    height: 160px;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: #fff;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}
.nsc-firma.is-invalid { border-color: var(--bs-form-invalid-border-color); }

.nsc-icona-esito { font-size: 3rem; }

/* Pagina di ringraziamento */
.nsc-passi li { margin-bottom: .5rem; }
.nsc-canale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    height: 100%;
    padding: .75rem .5rem;
    font-size: .85rem;
    color: var(--bs-body-color);
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.nsc-canale:hover,
.nsc-canale:focus-visible {
    color: var(--bs-body-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.nsc-canale .bi { font-size: 1.75rem; line-height: 1; }

/* Colori ufficiali dei marchi, sulle sole icone */
.nsc-canale .bi-globe2, .nsc-social .bi-globe2       { color: var(--nsc-blu); }
.nsc-canale .bi-whatsapp, .nsc-social .bi-whatsapp   { color: #25D366; }
.nsc-canale .bi-telegram, .nsc-social .bi-telegram   { color: #26A5E4; }
.nsc-canale .bi-facebook, .nsc-social .bi-facebook   { color: #1877F2; }
.nsc-canale .bi-tiktok, .nsc-social .bi-tiktok       { color: #000; }
.nsc-canale .bi-youtube, .nsc-social .bi-youtube     { color: #FF0000; }
.nsc-canale .bi-spotify, .nsc-social .bi-spotify     { color: #1DB954; }
/* Campi che la lettura del documento può riempire, mentre il server legge (documento.js) */
.nsc-in-lettura { animation: nsc-in-lettura 1.1s ease-in-out infinite alternate; }
/* text-transform: il codice fiscale è in maiuscolo (text-uppercase), il segnaposto no */
.nsc-in-lettura::placeholder { color: var(--nsc-blu); font-style: italic; opacity: .7; text-transform: none; }
@keyframes nsc-in-lettura {
    from { background-color: #fff; }
    to   { background-color: #e3ecf7; }
}
@media (prefers-reduced-motion: reduce) {
    .nsc-in-lettura { animation: none; background-color: #e9f0f9; }
}

.nsc-canale .bi-instagram,
.nsc-social .bi-instagram {
    color: #E4405F; /* se il browser non supporta la sfumatura sul testo */
    background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 75%, #515BD4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-outline-primary {
    --bs-btn-color: var(--nsc-blu);
    --bs-btn-border-color: var(--nsc-blu);
    --bs-btn-hover-bg: var(--nsc-blu);
    --bs-btn-hover-border-color: var(--nsc-blu);
    --bs-btn-active-bg: var(--nsc-blu-scuro);
}

/* Campi riempiti dalla lettura del documento (ADR 0003): da controllare, finché l'iscritto non li tocca */
.nsc-dal-documento {
    background-color: #f0f7ff;
    border-color: #9ec5fe;
}
.nsc-nota-documento { color: var(--nsc-blu); }

/* Pulsante "Scatta con la fotocamera" e il suo aiuto: solo sui dispositivi touch (telefono, tablet) */
@media (hover: hover) and (pointer: fine) {
    .nsc-scatta, .nsc-solo-touch { display: none; }
}

/* Moduli da stampare: un altro colore, perché non sembri una sezione del form (Carlo, 2026-10-15) */
.nsc-sezione.nsc-alternativa {
    background: #FFF8E5;
    border-color: #F0DDA8;
    border-left-color: #C98A00;
}
.nsc-riquadro .nsc-alternativa h2 {
    color: #7A5300;
    border-bottom-color: #F0DDA8;
}
.btn-alternativa {
    --bs-btn-color: #7A5300;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #C98A00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #C98A00;
    --bs-btn-hover-border-color: #C98A00;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #A87300;
    --bs-btn-active-border-color: #A87300;
}