/**
 * HubSpot form styles.
 *
 * Foglio di stile base per i form HubSpot incorporati nel network.
 * La struttura segue la gerarchia DOM del markup HubSpot
 * (vedi docs/hs-form-structure-base.html).
 *
 * Scope: tutte le regole e i token sono ancorati a `form.hs-form`, la classe
 * che HubSpot applica sempre. Questo garantisce che gli stili valgano per
 * OGNI form HubSpot (non solo quelli col wrapper .nam-hubspot-form-wrapper)
 * e che le custom properties, essendo dichiarate sul form, vivano solo nel
 * suo sottoalbero: niente inquinamento del sito ospitante, niente collisioni.
 *
 * Organizzazione:
 *   1. Token primitivi     — palette, scala tipografica, scala spaziature
 *   2. Token semantici     — variabili di componente che referenziano i primitivi
 *   3. Layout form         — form, fieldset, griglia colonne
 *   4. Campo (field)       — wrapper, label, helper text
 *   5. Input               — text/email/tel, select, textarea, telefono intl
 *   6. Checkbox / privacy  — inputs-list, booleancheckbox
 *   7. Stati               — required, focus, errore, disabled, placeholder
 *   8. Submit              — actions, button
 *
 * I valori dei token sotto sono default neutri: regolali liberamente. Le
 * dichiarazioni di layout (display/grid, allineamenti) vanno completate dentro
 * ai selettori già predisposti.
 *
 * Nota cascata: per sovrascrivere un token da fuori (es. pagina Settings) serve
 * specificità >= `form.hs-form` (targettare `form.hs-form`, non basta `:root`).
 *
 * @since 1.0.0
 */

/* Hook opzionale di layout esterno: presente solo sui form renderizzati dal
   nostro shortcode. NON usarlo come fonte dei token (vedi nota di scope). */
.nam-hubspot-form-wrapper {
    /* margini / max-width del blocco nella pagina */
}

form.hs-form {

    /* =====================================================================
     * 1. TOKEN PRIMITIVI
     * Valori grezzi di base. Non usare direttamente nei componenti: passare
     * sempre dai token semantici (sezione 2) così il punto di verità è uno.
     * ===================================================================== */

    /* --- Colori --- */
    --nam-hubspot-color-text: #111820; /* testo label / input */
    --nam-hubspot-color-text-muted: #6b7280; /* helper text, placeholder */
    --nam-hubspot-color-primary: #33b8b1; /* brand: bottoni, focus, accent */
    --nam-hubspot-color-primary-hover: #80d3ce;
    --nam-hubspot-color-primary-light: #ccedeb; /* sfondo input focus */
    --nam-hubspot-color-error: #b50600; /* validazione */
    --nam-hubspot-color-border: #cdcfd2; /* bordo input a riposo */
    --nam-hubspot-color-border-focus: var(--nam-hubspot-color-primary);
    --nam-hubspot-color-surface: #ffffff; /* sfondo input */
    --nam-hubspot-color-surface-disabled: #efefef; /* sfondo input disabilitato */
    --nam-hubspot-color-on-primary: #111820; /* testo sopra il primario */

    /* --- Tipografia --- */
    --nam-hubspot-font-family: inherit; /* eredita dal tema */
    --nam-hubspot-font-size-xs: 0.750rem; /* error msg */
    --nam-hubspot-font-size-sm: 0.875rem; /* helper text, note */
    --nam-hubspot-font-size-base: 1rem; /* label, input */
    --nam-hubspot-font-size-lg: 1.125rem; /* bottone large */
    --nam-hubspot-font-weight-normal: 400;
    --nam-hubspot-font-weight-semibold: 600; /* label, bottone */
    --nam-hubspot-font-weight-bold: 700;
    --nam-hubspot-line-height: 1.5;

    /* --- Spaziature (scala) --- */
    --nam-hubspot-space-xs: 0.375rem; /* gap label/input */
    --nam-hubspot-space-sm: 0.625rem; /* padding interno input */
    --nam-hubspot-space-md: 1rem; /* gap tra colonne / campi */
    --nam-hubspot-space-lg: 1.5rem; /* gap tra fieldset */

    /* --- Bordi / raggi --- */
    --nam-hubspot-border-width: 1px;
    --nam-hubspot-radius: 4px; /* input e select */
    --nam-hubspot-radius-button: 4px;

    /* =====================================================================
     * 2. TOKEN SEMANTICI
     * Variabili di componente: referenziano i primitivi sopra. Sono questi
     * che i selettori delle sezioni 3-8 consumano.
     * ===================================================================== */

    /* Layout */
    --nam-hubspot-form-gap: var(--nam-hubspot-space-lg); /* tra fieldset */
    --nam-hubspot-columns-gap: var(--nam-hubspot-space-md); /* tra colonne */
    --nam-hubspot-field-gap: var(--nam-hubspot-space-xs); /* label <-> input */

    /* Label */
    --nam-hubspot-label-color: var(--nam-hubspot-color-text);
    --nam-hubspot-label-font-size: var(--nam-hubspot-font-size-base);
    --nam-hubspot-label-font-weight: var(--nam-hubspot-font-weight-semibold);

    /* Helper text (legend.hs-field-desc) */
    --nam-hubspot-helper-color: var(--nam-hubspot-color-text-muted);
    --nam-hubspot-helper-font-size: var(--nam-hubspot-font-size-sm);

    /* Messaggi di errore (ul.hs-error-msgs > li > label) */
    --nam-hubspot-error-font-size: var(--nam-hubspot-font-size-xs);

    /* Asterisco campo obbligatorio */
    --nam-hubspot-required-color: var(--nam-hubspot-color-error);

    /* Input / select / textarea */
    --nam-hubspot-input-color: var(--nam-hubspot-color-text);
    --nam-hubspot-input-background: var(--nam-hubspot-color-surface);
    --nam-hubspot-input-border-width: var(--nam-hubspot-border-width);
    --nam-hubspot-input-border-color: var(--nam-hubspot-color-border);
    /* bordo in hover: leggera tinta verso il primario */
    --nam-hubspot-input-border-color-hover: color-mix(in srgb, var(--nam-hubspot-color-primary) 40%, var(--nam-hubspot-color-border));
    /* bordo di focus: tonalità solida più chiara del primario, in armonia con
       l'anello (non il primario pieno, che farebbe troppo contrasto col ring) */
    --nam-hubspot-input-border-color-focus: color-mix(in srgb, var(--nam-hubspot-color-border-focus) 45%, #ffffff);
    /* anello di focus accessibile, derivato dal colore primario */
    --nam-hubspot-focus-ring-width: 2px;
    --nam-hubspot-focus-ring-color: color-mix(in srgb, var(--nam-hubspot-color-primary) 50%, transparent);
    --nam-hubspot-input-radius: var(--nam-hubspot-radius);
    --nam-hubspot-input-padding: var(--nam-hubspot-space-xs);
    --nam-hubspot-input-font-size: var(--nam-hubspot-font-size-base);
    /* spazio a destra nelle select per non sovrapporre il testo alla freccia
       nativa disegnata dal browser */
    --nam-hubspot-select-arrow-space: 2rem;
    --nam-hubspot-placeholder-color: var(--nam-hubspot-color-text-muted);
    --nam-hubspot-textarea-min-height: 6rem; /* ~4 righe di testo */
    --nam-hubspot-checkbox-size: 1.125rem; /* lato della casella checkbox/radio */

    /* Stato disabilitato */
    --nam-hubspot-disabled-background: var(--nam-hubspot-color-surface-disabled);
    --nam-hubspot-disabled-color: var(--nam-hubspot-color-text-muted);
    --nam-hubspot-disabled-opacity: 0.7;

    /* Stato errore */
    --nam-hubspot-error-color: var(--nam-hubspot-color-error);
    --nam-hubspot-error-border-color: var(--nam-hubspot-color-error);
    /* Spazio riservato sotto ogni campo per il messaggio di validazione:
       evita il layout shift quando HubSpot inietta .hs-error-msgs.
       ~1 riga di testo small + line-height. */
    --nam-hubspot-error-reserved-space: 1.5rem;

    /* Bottone submit */
    --nam-hubspot-form-button-background-color: var(--nam-hubspot-color-primary);
    --nam-hubspot-form-button-background-hover: var(--nam-hubspot-color-primary-hover);
    --nam-hubspot-form-button-text-color: var(--nam-hubspot-color-on-primary);
    --nam-hubspot-form-button-border-radius: var(--nam-hubspot-radius-button);
    --nam-hubspot-form-button-padding: var(--nam-hubspot-space-sm) var(--nam-hubspot-space-md);
    --nam-hubspot-form-button-font-size: var(--nam-hubspot-font-size-lg);
    --nam-hubspot-form-button-font-weight: var(--nam-hubspot-font-weight-semibold);
    --nam-hubspot-form-button-text-transform: none;

    /* =====================================================================
     * 3. LAYOUT FORM
     * form.hs-form.stacked > fieldset.form-columns-{1,2}
     * ===================================================================== */

    /* Stacking verticale dei fieldset; spaziatura: --nam-hubspot-form-gap. */

    /* Fieldset = una "riga" del form, gestita come griglia di colonne.
       HubSpot applica width/max-width inline al fieldset: le annulliamo per
       lasciare che la griglia occupi tutta la larghezza disponibile. */
    fieldset.form-columns-1,
    fieldset.form-columns-2 {
        display: grid;
        gap: var(--nam-hubspot-columns-gap);
        /* reset stile fieldset di default del browser */
        margin: 0;
        padding: 0;
        border: 0;
        /* annulla la max-width inline di HubSpot per occupare tutta la riga */
        max-width: none !important;
        width: 100%;

        /* HubSpot dà ai campi width/float inline per il layout a colonne:
           li annulliamo, è la griglia a definire le colonne. */
        > .hs-form-field {
            /* annulla la width inline di HubSpot */
            width: auto !important;
            /* annulla il float inline di HubSpot */
            float: none !important;
        }

        > .hs-fieldtype-checkbox {
            > div.input {
                margin-top: var(--nam-hubspot-space-sm);
            }
        }
    }

    /* Una sola colonna: campo a tutta larghezza. */
    fieldset.form-columns-1 {
        grid-template-columns: 1fr;
    }

    /* Due colonne uguali: ogni campo occupa esattamente metà riga,
       così gli input affiancati hanno la stessa larghezza. */
    fieldset.form-columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Su schermo stretto le due colonne collassano in una.
       Breakpoint hardcoded: le custom properties non sono utilizzabili nelle
       condizioni @media in CSS puro. */
    @media (max-width: 600px) {
        fieldset.form-columns-2 {
            grid-template-columns: 1fr;
        }
    }

    /* =====================================================================
     * 4. CAMPO (field)
     * div.hs-form-field > label (> span + span.hs-form-required) +
     * legend.hs-field-desc + div.input
     * ===================================================================== */

    .hs-form-field {
        /* wrapper del singolo campo; gap label/input: --nam-hubspot-field-gap */

        /* Riserva sotto al campo lo spazio per il messaggio di errore: il
           messaggio (posizionato in absolute, vedi sezione 7) compare in
           quest'area senza spingere le righe successive -> niente scatto. */
        position: relative;
        padding-block-end: var(--nam-hubspot-error-reserved-space);

        /* Label del campo. */
        > label {
            color: var(--nam-hubspot-label-color);
            font-size: var(--nam-hubspot-label-font-size);
            font-weight: var(--nam-hubspot-label-font-weight);

            /* testo della label */
            > span:not(.hs-form-required) {
            }

            /* asterisco obbligatorio */
            .hs-form-required {
                color: var(--nam-hubspot-required-color);
            }
        }

        /* Helper / descrizione campo. */
        .hs-field-desc {
            color: var(--nam-hubspot-helper-color);
            font-size: var(--nam-hubspot-helper-font-size);
        }

        /* =================================================================
         * 5. INPUT
         * div.input > input.hs-input | textarea | select |
         * div.hs-fieldtype-intl-phone
         *
         * Nota: si targetta per ELEMENTO (input/select/textarea) e non il
         * generico .hs-input, perché anche il wrapper del telefono intl e il
         * checkbox portano la classe .hs-input e non devono ricevere lo stile
         * da campo di testo.
         * ================================================================= */

        .input {

            /* Base condivisa: campi di testo, select, textarea.
               Escluso il checkbox (gestito in sezione 6). */
            input.hs-input:not([type="checkbox"]),
            select.hs-input,
            textarea.hs-input {
                /* riempie la cella: stessa larghezza in 1 colonna, esatta metà
                   in form-columns-2. border-box: il padding non sfora il 100% */
                width: 100%;
                box-sizing: border-box;
                color: var(--nam-hubspot-input-color);
                background-color: var(--nam-hubspot-input-background);
                border: var(--nam-hubspot-input-border-width) solid var(--nam-hubspot-input-border-color);
                border-radius: var(--nam-hubspot-input-radius);
                padding: var(--nam-hubspot-input-padding);
                font-size: var(--nam-hubspot-input-font-size);
                font-family: var(--nam-hubspot-font-family);

                &::placeholder {
                    color: var(--nam-hubspot-placeholder-color);
                }

                &:hover:not(:disabled) {
                    border-color: var(--nam-hubspot-input-border-color-hover);
                    background-color: var(--nam-hubspot-color-primary-light);
                }

                &:focus {
                    border-color: var(--nam-hubspot-input-border-color-focus);
                    /* anello di focus che segue gli angoli arrotondati */
                    box-shadow: 0 0 0 var(--nam-hubspot-focus-ring-width) var(--nam-hubspot-focus-ring-color);
                    /* sostituiamo l'outline nativo con l'anello; outline
                       trasparente per restare visibili in alto contrasto */
                    outline: 2px solid transparent;
                    outline-offset: 0;
                }

                &:disabled {
                    background-color: var(--nam-hubspot-disabled-background);
                    color: var(--nam-hubspot-disabled-color);
                    opacity: var(--nam-hubspot-disabled-opacity);
                    cursor: not-allowed;
                }
            }

            /* Textarea: altezza minima e resize solo verticale (l'orizzontale
               sfonderebbe la colonna). */
            textarea.hs-input {
                min-height: var(--nam-hubspot-textarea-min-height);
                resize: vertical;
                line-height: var(--nam-hubspot-line-height);
            }

            /* Select: spazio extra a destra per la freccia nativa, così il
               valore non ci finisce sotto (evidente sulle select corte). */
            select.hs-input {
                padding-inline-end: var(--nam-hubspot-select-arrow-space);
            }

            /* Select in stato "Please Select" (placeholder). */
            select.hs-input.is-placeholder {
                color: var(--nam-hubspot-placeholder-color);
            }

            /* Telefono internazionale: il div .hs-fieldtype-intl-phone è il
               WRAPPER (ha anche .hs-input), dentro select prefisso + input. */
            .hs-fieldtype-intl-phone {
                /* select prefisso + input numero affiancati; il wrapper
                   occupa tutta la cella come gli altri controlli */
                display: flex;
                gap: var(--nam-hubspot-space-xs);
                width: 100%;

                select.hs-input {
                    /* prefisso: larghezza fissa, non si allarga */
                    flex: 0 0 auto;
                    width: auto;
                    /* larghezza minima: lascia respiro a valore + freccia.
                       Nessun token adatto per le larghezze di componente. */
                    min-width: 5.5rem;
                }

                input.hs-input {
                    /* numero: occupa lo spazio restante */
                    flex: 1 1 auto;
                }
            }
        }

        /* =================================================================
         * 6. CHECKBOX / RADIO (consenso singolo + gruppi multi-opzione)
         * Consenso:  ul.inputs-list > li.hs-form-booleancheckbox >
         *            label.hs-form-booleancheckbox-display > input[checkbox] + span
         * Checkbox:  ul.inputs-list.multi-container > li.hs-form-checkbox >
         *            label.hs-form-checkbox-display > input[checkbox] + span
         * Radio:     ul.inputs-list > li.hs-form-radio >
         *            label.hs-form-radio-display > input[radio] + span
         * ================================================================= */

        /* Liste di scelta: consenso singolo (.hs-form-booleancheckbox), gruppi
           checkbox (.hs-form-checkbox) e gruppi radio (.hs-form-radio). */
        .inputs-list {
            /* reset lista + impilamento verticale delle opzioni con spaziatura */
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: var(--nam-hubspot-space-xs);

            .hs-form-booleancheckbox,
            .hs-form-checkbox,
            .hs-form-radio {
                margin: 0;
            }

            /* Label-riga: casella + testo affiancati, allineati in alto cosi'
               il testo su piu' righe resta indentato e non va sotto la casella. */
            .hs-form-booleancheckbox-display,
            .hs-form-checkbox-display,
            .hs-form-radio-display {
                display: flex;
                align-items: flex-start;
                gap: var(--nam-hubspot-space-sm);
                /* le opzioni non sono in bold come le label di campo */
                font-weight: var(--nam-hubspot-font-weight-normal);
                cursor: pointer;
                margin: 0;

                /* Controlli disegnati da noi (appearance:none): dimensione
                   esplicita e quadrata (annulla width/height/padding che il
                   tema applica a tutti gli input, causa del controllo stirato a
                   "riga verticale"), e soprattutto border-radius coerente anche
                   in stato :checked, che il rendering nativo non garantisce. */
                input[type="checkbox"].hs-input,
                input[type="radio"].hs-input {
                    flex: 0 0 auto;
                    box-sizing: border-box;
                    width: var(--nam-hubspot-checkbox-size);
                    height: var(--nam-hubspot-checkbox-size);
                    min-height: 0;
                    margin: 0;
                    /* allinea otticamente la casella alla prima riga di testo */
                    margin-block-start: 0.15em;
                    padding: 0;
                    cursor: pointer;
                    appearance: none;
                    -webkit-appearance: none;
                    background-color: var(--nam-hubspot-input-background);
                    background-repeat: no-repeat;
                    background-position: center;
                    border: var(--nam-hubspot-input-border-width) solid var(--nam-hubspot-input-border-color);
                    border-radius: var(--nam-hubspot-radius);

                    /* selezionato: riempimento col primario; il segno specifico
                       (spunta o pallino) e' definito nelle regole sotto */
                    &:checked {
                        background-color: var(--nam-hubspot-color-primary);
                        border-color: var(--nam-hubspot-color-primary);
                    }

                    /* Focus coerente col resto del form: anello morbido,
                       niente blu di sistema. */
                    &:focus {
                        outline: none;
                        box-shadow: 0 0 0 var(--nam-hubspot-focus-ring-width) var(--nam-hubspot-focus-ring-color);
                        border-color: var(--nam-hubspot-input-border-color-hover);
                    }
                }

                /* Checkbox selezionata: segno di spunta bianco. Il colore vive
                   dentro l'SVG (data-URI), dove i token CSS non sono
                   referenziabili: percio' il bianco e' letterale. */
                input[type="checkbox"].hs-input:checked {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
                    background-size: 68%;
                }

                /* Radio: tondo; da selezionato un pallino bianco centrato.
                   Bianco letterale: nessun token dentro le funzioni immagine. */
                input[type="radio"].hs-input {
                    border-radius: 50%;
                }

                input[type="radio"].hs-input:checked {
                    background-image: radial-gradient(circle, #ffffff 0 36%, transparent 42%);
                }

                /* Alto contrasto (Windows): torniamo al controllo nativo, gli
                   stili custom sparirebbero rendendolo invisibile. */
                @media (forced-colors: active) {
                    input[type="checkbox"].hs-input,
                    input[type="radio"].hs-input {
                        appearance: auto;
                    }
                }

                > span {
                    /* testo dell'opzione: occupa lo spazio accanto alla casella */
                    flex: 1 1 auto;
                    color: var(--nam-hubspot-color-text);
                    font-size: var(--nam-hubspot-font-size-base);
                    line-height: var(--nam-hubspot-line-height);

                    .hs-form-required {
                        color: var(--nam-hubspot-required-color);
                    }
                }
            }
        }
    }

    /* =====================================================================
     * 7. STATI
     * HubSpot aggiunge classi/markup di validazione a runtime via JS:
     * predisposti qui per quando il form è "live".
     * ===================================================================== */

    /* Campo in errore (HubSpot aggiunge .invalid / .error all'input). */
    .hs-input.invalid,
    .hs-input.error {
        border-color: var(--nam-hubspot-error-border-color);
    }

    /* Messaggi di errore (ul.hs-error-msgs > li > label).
       Ancorati appena sotto l'input (top dello spazio riservato in fondo al
       campo, vedi .hs-form-field in sezione 4) e in crescita verso il BASSO:
       - caso tipico a una riga: sta nello spazio riservato -> niente scatto;
       - messaggio su piu' righe: si espande nello spazio sottostante senza mai
         sovrapporsi all'input (a differenza dell'ancoraggio in basso). */
    .hs-error-msgs {
        position: absolute;
        inset-block-start: calc(100% - var(--nam-hubspot-error-reserved-space));
        inset-block-end: auto;
        inset-inline: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--nam-hubspot-error-color);
        font-size: var(--nam-hubspot-error-font-size);
        line-height: 1.2;
    }

    /* =====================================================================
     * 8. SUBMIT
     * div.hs-submit > div.actions > input.hs-button.primary.large
     * ===================================================================== */

    .hs-submit {

        /* Helper text del submit. HubSpot lo emette con display:none inline:
           quando presente, lo allineiamo agli altri helper text del form. */
        .hs-field-desc {
            margin-block-end: var(--nam-hubspot-space-xs);
            color: var(--nam-hubspot-helper-color);
            font-size: var(--nam-hubspot-helper-font-size);
            line-height: 1.2;
        }

        .actions {
            /* allineamento del bottone */

            .hs-button {
                background-color: var(--nam-hubspot-form-button-background-color);
                color: var(--nam-hubspot-form-button-text-color);
                border-radius: var(--nam-hubspot-form-button-border-radius);
                padding: var(--nam-hubspot-form-button-padding);
                font-size: var(--nam-hubspot-form-button-font-size);
                font-weight: var(--nam-hubspot-form-button-font-weight);
                text-transform: var(--nam-hubspot-form-button-text-transform);
                cursor: pointer;

                &:hover,
                &:focus {
                    background-color: var(--nam-hubspot-form-button-background-hover);
                }

                /* anello di focus solo da tastiera, per non mostrarlo al click */
                &:focus-visible {
                    outline: var(--nam-hubspot-focus-ring-width) solid var(--nam-hubspot-focus-ring-color);
                    outline-offset: 2px;
                }
            }
        }
    }
}