/* =========================================================
   NEXPERIA - stile delle pagine interne (2026)
   Si carica DOPO bootstrap.min.css e style.css.
   La home (index.html) ha i propri stili incorporati,
   con gli stessi colori e caratteri.
   ========================================================= */

:root {
    --nx-ink: #0B151F;
    --nx-ink-2: #13212E;
    --nx-paper: #F4F5F1;
    --nx-line: #D9DDD3;
    --nx-muted: #56626C;
    --nx-acc: #A6C62A;        /* verde del logo: riempimenti e testo su scuro */
    --nx-acc-ink: #3F5208;    /* verde leggibile su chiaro */
    --nx-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nx-display: 'Archivo', 'IBM Plex Sans', sans-serif;
    --nx-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* variabili del vecchio template riallineate */
    --primary: var(--nx-acc-ink);
    --secondary: var(--nx-acc);
    --light: var(--nx-paper);
    --dark: var(--nx-ink);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--nx-font); color: var(--nx-ink); background: var(--nx-paper);
    font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4 {
    font-family: var(--nx-display); font-stretch: 88%; color: var(--nx-ink); letter-spacing: -0.015em; line-height: 1.1;
}
a { color: var(--nx-acc-ink); }
a:hover { color: var(--nx-ink); }
::selection { background: var(--nx-acc); color: var(--nx-ink); }

.nx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.nx-mono { font-family: var(--nx-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px) { .nx-wrap { padding: 0 20px; } }

/* Il template cambiava la dimensione del testo nelle classi di margine: lo annulliamo */
:is(p, div, span, li, a, small).mb-0, :is(p, div, span, li, a, small).mb-1, :is(p, div, span, li, a, small).mb-2,
:is(p, div, span, li, a, small).mb-4, :is(p, div, span, li, a, small).mb-5 { font-size: inherit; }
h1.mb-0, h2.mb-0 { font-size: clamp(30px, 3.4vw, 46px); }
h4.mb-0 { font-size: 1.25rem; }

/* Animazioni WOW e spinner del vecchio template disattivati */
.wow { visibility: visible !important; animation: none !important; }
#spinner { display: none !important; }

/* ---------- Colori del template riallineati ---------- */
.text-primary { color: var(--nx-acc-ink) !important; }
.bg-primary { background-color: var(--nx-ink) !important; }
.bg-light { background-color: var(--nx-paper) !important; }
.bg-dark { background-color: var(--nx-ink) !important; }
.border-primary { border-color: var(--nx-acc) !important; }

.btn { font-family: var(--nx-font); font-weight: 600; border-radius: 4px; }
.btn-primary, .btn-primary:focus { background: var(--nx-acc); border-color: var(--nx-acc); color: var(--nx-ink) !important; box-shadow: none; }
.btn-primary:hover, .btn-primary:active { background: #B5D23A; border-color: #B5D23A; color: var(--nx-ink) !important; }

.section-title::before { background: var(--nx-acc); height: 3px; width: 56px; }
.section-title.text-center::before { margin-left: -28px; }
.section-title::after { display: none; }
.section-title h5, .section-title .h5 { font-family: var(--nx-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--nx-acc-ink) !important; }

main > .container-fluid:first-of-type { padding-top: 3rem !important; }
main p, main li, main td { overflow-wrap: anywhere; }
main .nav-link { color: var(--nx-acc-ink) !important; font-weight: 600; padding: 4px 0; }
main .nav-link:hover { color: var(--nx-ink) !important; }

/* Card dei servizi e del supporto */
.service-item {
    height: auto !important; min-height: 300px; padding: 36px 28px !important;
    background: #fff !important; border: 1px solid var(--nx-line); border-radius: 6px !important;
    transition: transform .2s, box-shadow .2s;
}
.service-item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(11, 21, 31, .08); }
.service-item .service-icon { width: 88px; height: 88px; border-radius: 6px; background: var(--nx-paper); }
.service-item .service-icon img { object-fit: contain; padding: 10px; }
.service-item h4 { font-size: 1.3rem; text-transform: none; }
.support-icon-img { max-height: 88px; }

/* ---------- Barra assistenza e menu ---------- */
.nx-util { background: var(--nx-ink); color: #C2CBD2; font-size: 14px; }
.nx-util .nx-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.nx-util .nx-mono { color: #8F9BA5; }
.nx-util-r { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.nx-util a { color: #fff; text-decoration: none; }
.nx-util a.nx-acc { color: var(--nx-acc); font-weight: 600; }
.nx-dim { color: #8F9BA5; }
@media (max-width: 900px) { .nx-util .nx-mono { display: none; } }

.nx-nav { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--nx-line); transition: box-shadow .2s; }
.nx-nav.is-scrolled { box-shadow: 0 6px 20px rgba(11, 21, 31, .06); }
.nx-nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 104px; }
.nx-logo { height: 70px; width: auto; display: block; }
@media (max-width: 600px) { .nx-logo { height: 52px; } }
.mainnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.navlink { color: var(--nx-ink); text-decoration: none; font-weight: 500; font-size: 15.5px; padding: 10px 0; border-bottom: 2px solid transparent; }
.navlink:hover, .navlink.active { color: var(--nx-ink); border-color: var(--nx-acc); }
.nx-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 4px; font-weight: 600; font-size: 15.5px; text-decoration: none; transition: transform .15s, background .15s; }
.nx-btn:hover { transform: translateY(-1px); }
.nx-btn-ink { background: var(--nx-ink); color: #fff; }
.nx-btn-ink:hover { background: #1C2E3E; color: #fff; }
.nav-toggle { display: none; background: none; border: 1px solid var(--nx-line); border-radius: 4px; width: 48px; height: 48px; align-items: center; justify-content: center; color: var(--nx-ink); cursor: pointer; }
@media (max-width: 980px) {
    .nav-toggle { display: inline-flex; }
    .mainnav { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0 20px; }
    .mainnav.open { display: flex; }
}

/* ---------- Footer ---------- */
.nx-foot { background: #07101A; color: #8F9BA5; padding: 64px 0 32px; font-size: 15px; }
.nx-foot a { color: #C2CBD2; text-decoration: none; }
.nx-foot a:hover { color: #fff; }
.nx-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.nx-foot-grid p { margin: 0; max-width: 280px; }
.nx-f-logo { height: 64px; width: auto; display: block; margin-bottom: 18px; }
.nx-foot-col { display: flex; flex-direction: column; gap: 10px; }
.nx-foot-col .nx-mono { color: #fff; margin-bottom: 6px; }
.nx-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 13.5px; }
.nx-foot-legal { display: flex; gap: 20px; }

.back-to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 48px; height: 48px; border-radius: 4px;
    background: var(--nx-ink); color: #fff; display: none; align-items: center; justify-content: center;
}
.back-to-top:hover { color: var(--nx-acc); }

/* ---------- Avviso cookie ---------- */
.cookie-banner {
    position: fixed; left: 16px !important; right: 16px; bottom: 16px !important; width: auto !important; max-width: 720px;
    background: var(--nx-ink) !important; border-radius: 6px; padding: 18px 8px !important; z-index: 9999; display: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3) !important; border: 1px solid rgba(255, 255, 255, .08) !important;
}
.cookie-banner p { font-size: .93rem !important; color: #C2CBD2 !important; margin: 0 !important; }
.cookie-banner a { color: var(--nx-acc); }

/* Accessibilità: salto al contenuto */
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }

/* ---------- Pulsante tema chiaro / scuro ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:4px;border:1px solid var(--tline,#D9DDD3);background:transparent;color:inherit;cursor:pointer}
.theme-toggle:hover{border-color:#A6C62A}
.theme-toggle .ico-sun{display:none}
[data-theme=dark] .theme-toggle .ico-sun{display:block}[data-theme=dark] .theme-toggle .ico-moon{display:none}
.logo-dark{display:none !important}[data-theme=dark] .logo-light{display:none !important}[data-theme=dark] .logo-dark{display:block !important}
.nx-nav-row > a { order: 1; } .mainnav { order: 2; } .hdr-actions { order: 3; display: flex; gap: 10px; align-items: center; }
@media (max-width: 980px) { .hdr-actions { order: 2; } .mainnav { order: 3; } }

/* ---------- Tema scuro ---------- */
[data-theme=dark] { color-scheme: dark; --nx-paper: #0E1821; --nx-line: #24323F; --nx-muted: #9AA7B1; --tline: #2E3D4A; }
[data-theme=dark] body { background: #0E1821; color: #DCE2DA; }
[data-theme=dark] h1, [data-theme=dark] h2, [data-theme=dark] h3, [data-theme=dark] h4, [data-theme=dark] h5, [data-theme=dark] h6,
[data-theme=dark] .h1, [data-theme=dark] .h2, [data-theme=dark] .h3, [data-theme=dark] .h4, [data-theme=dark] .h5 { color: #F1F4EE; }
[data-theme=dark] a { color: #B9D84A; } [data-theme=dark] a:hover { color: #fff; }
[data-theme=dark] .text-primary, [data-theme=dark] main .nav-link { color: #B9D84A !important; }
[data-theme=dark] .text-dark, [data-theme=dark] .text-body { color: #DCE2DA !important; }
[data-theme=dark] .text-muted { color: #9AA7B1 !important; }
[data-theme=dark] .section-title h5 { color: #B9D84A !important; }
[data-theme=dark] .bg-light, [data-theme=dark] .bg-white { background-color: #15222E !important; }
[data-theme=dark] .service-item { background: #15222E !important; border-color: #24323F; }
[data-theme=dark] .service-item .service-icon { background: #F1F3EE; }
[data-theme=dark] .nx-nav { background: #0B151F; border-color: #24323F; }
[data-theme=dark] .navlink, [data-theme=dark] .navlink:hover, [data-theme=dark] .navlink.active { color: #E8ECE4; }
[data-theme=dark] .nx-btn-ink { background: #E8ECE4; color: #0B151F; } [data-theme=dark] .nx-btn-ink:hover { background: #fff; color: #0B151F; }
[data-theme=dark] .nav-toggle { color: #E8ECE4; border-color: #2E3D4A; }
[data-theme=dark] .form-control, [data-theme=dark] .form-select { background: #15222E; border-color: #2E3D4A; color: #E8ECE4; }
[data-theme=dark] .shadow { box-shadow: none !important; }
[data-theme=dark] .back-to-top { background: #E8ECE4; color: #0B151F; }
[data-theme=dark] .nx-foot a, [data-theme=dark] .nx-util a { color: #C2CBD2; }
[data-theme=dark] .nx-foot a:hover, [data-theme=dark] .nx-util a:hover { color: #fff; }
[data-theme=dark] .nx-util a.nx-acc { color: var(--nx-acc); }
[data-theme=dark] .nx-btn-ink, [data-theme=dark] .nx-btn-ink:hover { color: #0B151F; }
[data-theme=dark] .btn-primary, [data-theme=dark] .btn-primary:hover { color: #0B151F !important; }

/* Testi legali giustificati (es. condizioni di utilizzo in Supporto) */
.nx-terms p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin-bottom: 1.1em; line-height: 1.7; }
.nx-terms strong { color: var(--nx-ink); }
[data-theme=dark] .nx-terms strong { color: #F1F4EE; }