/* ==========================================================================
   AppE20 · tema scuro e accorgimenti di accessibilità (WCAG 2.2 AA)

   - Il tema si sceglie col pulsante in intestazione; senza una scelta segue il
     sistema (prefers-color-scheme). L'attributo data-theme su <html> lo mette lo
     script in testa (functions.php) prima del disegno: niente lampo bianco.
   - Il rosso del marchio (#BE2D29) resta per fondi e bottoni (bianco su rosso
     5,84:1); come COLORE DI TESTO su fondo scuro non basta (≈3:1), quindi i testi
     in rosso passano a --accent-text (#FF8F8B, 8,1:1 su --bg). Contrasti misurati.
   - Le illustrazioni di prodotto (browser, telefoni, cruscotti) restano chiare:
     rappresentano schermi, e uno schermo chiaro su fondo scuro si legge come tale.
   ========================================================================== */

:root{ --accent-text:var(--red); color-scheme:light; }

:root[data-theme="dark"]{
  color-scheme:dark;
  --white:#10121A;          /* fondo pagina */
  --surface:#1C2030;        /* card, pannelli in rilievo */
  --panel:#161927;          /* sezioni alternate */
  --ink:#E7EAF0;            /* su --bg 15,6:1 */
  --ink-strong:#FFFFFF;
  --muted:#AAB4C0;          /* su --bg 8,9:1 · su --surface 7,5:1 */
  --navy:#0A0C13;           /* sezioni blu: più profonde del fondo, restano distinte */
  --navy-2:#1A1D2B;
  --on-navy:#C9CFDA;
  --line:#2D3244;
  --red-tint:#3A1D21;
  --accent-text:#FF8F8B;    /* testi «rossi» su fondo scuro */
  --shadow:0 6px 22px rgba(0,0,0,.45);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);
}

/* --- fondi --------------------------------------------------------------- */
[data-theme="dark"] body{background:var(--white);color:var(--ink)}
[data-theme="dark"] .site-header::before{background:rgba(16,18,26,.94)}
[data-theme="dark"] .site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
[data-theme="dark"] .nav__drop{background:var(--surface)}
/* bottoni store come i badge ufficiali: neri con bordo grigio (con --ink-strong bianco sparivano testo e logo Apple) */
[data-theme="dark"] .store{background:#000;border:1px solid #A6A6A6}
[data-theme="dark"] .store:hover{background:#1B1D22}
@media (max-width:1240px){[data-theme="dark"] .nav__panel{background:var(--surface)}}
[data-theme="dark"] .card,
[data-theme="dark"] .faq details,
[data-theme="dark"] .path--solo,
[data-theme="dark"] .launch-path,
[data-theme="dark"] .integr-strip,
[data-theme="dark"] .ct-form,
[data-theme="dark"] .fx-subs,
[data-theme="dark"] .fx-map a,
[data-theme="dark"] .wz,
[data-theme="dark"] .wz__opt-body,
[data-theme="dark"] .ar-map,
[data-theme="dark"] .ar-map--hero,
[data-theme="dark"] .seatmap,
[data-theme="dark"] .compose,
[data-theme="dark"] .ct-card,
[data-theme="dark"] .wz__lead,
[data-theme="dark"] .wz__summary,
[data-theme="dark"] .wz__mod,
[data-theme="dark"] .fx-card,
[data-theme="dark"] .dash{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .card--flat{border-color:var(--line)}
[data-theme="dark"] .fx-hero .btn--ghost{background:transparent}
@media (max-width:760px){[data-theme="dark"] .lg-table tr{background:var(--surface)}}
/* in stampa sempre il tema chiaro: testo chiaro su carta bianca non si legge */
@media print{:root[data-theme="dark"]{color-scheme:light;--white:#fff;--surface:#fff;--panel:#EFF2F6;--ink:#3C3E3F;--ink-strong:#232526;
  --muted:#5B6873;--navy:#171A29;--line:#DFE5EA;--accent-text:#BE2D29}
  [data-theme="dark"] body,[data-theme="dark"] .card,[data-theme="dark"] .faq details{background:#fff;color:#3C3E3F}}
[data-theme="dark"] .arena-hero{background:linear-gradient(115deg,#10121A 55%,#1A1E2C)}
[data-theme="dark"] .layout-card__plan{background:#262B3D}
[data-theme="dark"] .ly .ly-table{fill:#3A4055;stroke:#7D879A}
[data-theme="dark"] .ly .ly-stage{fill:#E7EAF0}
[data-theme="dark"] .ar-seatmap .s-free,
[data-theme="dark"] .ar-legend .s-free{fill:#3A4055;background:#3A4055}
[data-theme="dark"] .ar-seatmap .s-taken,
[data-theme="dark"] .ar-legend .s-taken{fill:#E7EAF0;background:#E7EAF0}
[data-theme="dark"] .ar-seatmap .s-hold{fill:transparent;stroke:#E7EAF0}
[data-theme="dark"] .ar-legend .s-hold{background:transparent;border-color:#E7EAF0}
[data-theme="dark"] .ar-seatmap text{fill:#AAB4C0}
[data-theme="dark"] .ar-seatmap rect[fill="#171A29"]{fill:#E7EAF0}
[data-theme="dark"] .ar-seatmap rect[fill="#171A29"] + text{fill:#10121A}
[data-theme="dark"] .marquee img{box-shadow:none}            /* i loghi restano su fondo bianco: sono marchi */

/* --- illustrazioni: restano «schermi» chiari --------------------------------
   Dentro le illustrazioni si rimettono i token del tema chiaro: senza, il testo
   scuro dei finti schermi diventerebbe chiaro su fondo bianco. */
[data-theme="dark"] :is(.browser,.phone,.pc-app,.ar-builder,.ar-cap,.ar-mail,.fake-form,.qr,.hub,.hero-chip){
  --white:#fff;--surface:#fff;--panel:#EFF2F6;--ink:#3C3E3F;--ink-strong:#232526;--muted:#5B6873;--line:#DFE5EA;
  --red-tint:#FBEAE9;--accent-text:#BE2D29;color:var(--ink)}
[data-theme="dark"] .hero-film__play{color:#232526}
[data-theme="dark"] .skip{background:#fff;color:#10121A}

/* --- testi «rossi» -------------------------------------------------------- */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .section-head .eyebrow,
[data-theme="dark"] .link-arrow,
[data-theme="dark"] .stat__num,
[data-theme="dark"] .path__tag,
[data-theme="dark"] .faq summary::after,
[data-theme="dark"] .nav__drop a:hover,
[data-theme="dark"] .nav__link:hover,
[data-theme="dark"] .nav__link[aria-current="page"],
[data-theme="dark"] .arena-flow span,
[data-theme="dark"] .wz__count,
[data-theme="dark"] .wz__suggestions summary,
[data-theme="dark"] .lg-toc a:hover{color:var(--accent-text)}
[data-theme="dark"] .section--red .eyebrow,
[data-theme="dark"] .section--red .section-head .eyebrow,
[data-theme="dark"] .section--red .link-arrow{color:#fff}
[data-theme="dark"] .nav__link[aria-current="page"],
[data-theme="dark"] .lang a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--accent-text)}

/* --- bottoni e campi ------------------------------------------------------ */
[data-theme="dark"] .btn--ghost{border-color:var(--ink);color:var(--ink)}
[data-theme="dark"] .btn--ghost:hover{background:var(--ink);color:var(--white)}
[data-theme="dark"] .form input,
[data-theme="dark"] .form textarea,
[data-theme="dark"] .form select{background:#0C0E15;color:var(--ink);border-color:#4A5165}
[data-theme="dark"] .form input::placeholder,
[data-theme="dark"] .form textarea::placeholder{color:#8B95A3}
[data-theme="dark"] .pill--grey{background:#262B3D;color:var(--ink)}
[data-theme="dark"] .pill--green{background:#143323;color:#7FE0A6}

/* --- logo e icone --------------------------------------------------------- */
[data-theme="dark"] .nav__logo .cls-2,
[data-theme="dark"] .nav__logo .cls-3{fill:#E7EAF0}
[data-theme="dark"] .nav__logo .cls-1{fill:#F0544C}
/* le icone line-art sono grigio scuro su trasparente: su fondo scuro sparirebbero */
[data-theme="dark"] .card__icon img,
[data-theme="dark"] .feature__icon img,
[data-theme="dark"] .fx-sub__icon img,
[data-theme="dark"] .ocr-band__icon img,
[data-theme="dark"] .integr-strip .card__icon img{background:#F3F5F8;border-radius:10px;padding:5px}

/* --- focus visibile, anche sul fondo scuro (WCAG 2.4.7 / 2.4.11) ---------- */
[data-theme="dark"] :focus-visible{outline-color:var(--accent-text)}
.section--red :focus-visible,
.section--navy :focus-visible,
.site-footer :focus-visible{outline-color:#fff}

/* --- selettore chiaro/scuro ----------------------------------------------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle__sun{display:none}
[data-theme="dark"] .theme-toggle__sun{display:block}
[data-theme="dark"] .theme-toggle__moon{display:none}
@media (max-width:1240px){
  .theme-toggle{align-self:flex-start}
}

/* --- invito allo scroll (hero a tutta altezza, solo desktop) ---------------- */
.scroll-cue{display:none}
@media (min-width:1001px) and (min-height:620px){
  .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:6px;align-self:center;position:relative;z-index:2;
    margin:8px 0 26px;padding:6px 10px;color:var(--muted);text-decoration:none;border-radius:999px}
  .launch-hero .scroll-cue{color:#C9CFDA}
  .scroll-cue:hover{color:var(--accent-text)}
  .launch-hero .scroll-cue:hover{color:#fff}
}
.scroll-cue__mouse{width:26px;height:40px;border:2px solid currentColor;border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue__mouse span{width:4px;height:8px;border-radius:2px;background:currentColor;animation:scroll-cue 1.8s ease-in-out infinite}
.scroll-cue__arrow{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
  animation:scroll-cue-arrow 1.8s ease-in-out infinite}
@keyframes scroll-cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes scroll-cue-arrow{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(4px) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue__mouse span,.scroll-cue__arrow{animation:none}}

/* --- barra di navigazione mobile (sostituisce il pulsante flottante «Richiedi una demo») --- */
.mobile-cta{display:none!important}
.mobile-bar{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .mobile-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--white);
    border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(23,26,41,.10);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar ul{list-style:none;margin:0;padding:0 4px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
  .mobile-bar a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:62px;padding:8px 2px 9px;
    text-decoration:none;color:var(--muted);font:600 .6875rem/1.15 var(--font-d);text-align:center}
  .mobile-bar a[aria-current="page"]{color:var(--accent-text)}
  .mobile-bar__icon{display:grid;place-items:center}
  .mobile-bar__icon svg{width:23px;height:23px}
  .mobile-bar .is-main a{color:var(--ink)}
  .mobile-bar__label{white-space:nowrap;letter-spacing:-.01em}
  .mobile-bar .is-main .mobile-bar__icon{width:56px;height:56px;margin-top:-28px;border-radius:50%;background:var(--red);color:#fff;
    border:4px solid var(--white);box-shadow:0 8px 18px rgba(190,45,41,.35)}
  .mobile-bar .is-main .mobile-bar__icon svg{width:25px;height:25px}
  .mobile-bar .is-main a:hover .mobile-bar__icon{background:var(--red-dark)}
  .mobile-bar a:focus-visible{outline-offset:-3px}
}
@media (max-width:374px){
  .mobile-bar a{font-size:.625rem}
  .mobile-bar ul{padding:0}
}

/* --- WhatsApp flottante ---------------------------------------------------------
   Verde scurito rispetto a #25D366: con l'icona bianca il contrasto passa 3:1 (WCAG 1.4.11). */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:41;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#1F9D55;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:transform .2s}
.wa-float:hover{transform:scale(1.06);background:#178446}
.wa-float svg{width:30px;height:30px}
@media (max-width:760px){
  .wa-float{right:12px;bottom:calc(76px + env(safe-area-inset-bottom));width:48px;height:48px;transition:transform .25s,opacity .25s}
  .wa-float svg{width:27px;height:27px}
  /* mentre si legge (scroll verso il basso) WhatsApp si fa da parte; torna risalendo o a fine pagina */
  html.is-reading .wa-float{opacity:0;transform:translateY(14px);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* --- Widget di terze parti: dove sta ciascuno ------------------------------------
   Desktop: a destra WhatsApp (56px a 20/20); a sinistra la colonna di servizio,
   Preferenze cookie (CookieYes, 48px a 24/24) e sopra Accessibilità (AccessiYes, 48px a 24/84:
   posizione e margini sono nelle impostazioni di AccessiYes, il suo pulsante sta in uno shadow DOM
   e il CSS del tema non lo raggiunge). Centri allineati a 48px dai bordi.
   Il chatbot, quando arriverà, è una bandiera sul bordo destro a metà altezza: non tocca gli angoli.
   Mobile (sotto i 768, la soglia di AccessiYes): niente pulsanti flottanti di servizio; i due comandi
   stanno nel menu e nel piede (.site-tools), resta solo WhatsApp sopra la barra di navigazione. */
.cky-btn-revisit-wrapper{left:24px!important;bottom:24px!important;width:48px!important;height:48px!important;
  background-color:var(--red)!important;border:3px solid #fff;box-shadow:0 5px 15px rgba(37,44,97,.15),0 2px 4px rgba(93,100,148,.2)}
.cky-btn-revisit-wrapper:hover{background-color:var(--red-dark)!important}
.cky-btn-revisit-wrapper .cky-btn-revisit img{width:26px;height:26px}
.site-tools{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px}
.site-tools__btn{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:4px 0;background:none;border:0;color:inherit;
  font:600 .8125rem/1.2 var(--font-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.site-tools__btn[hidden]{display:none}
.site-tools__btn svg{width:18px;height:18px;flex:none}
.site-tools--menu{display:none}
@media (max-width:1240px){
  .site-tools--menu{display:flex;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
  .site-tools--menu .site-tools__btn{min-height:44px;font-size:.9375rem;color:var(--ink);text-decoration:none}
}
@media (max-width:767px){
  .cky-btn-revisit-wrapper{display:none!important}
  /* il pulsante di AccessiYes compare solo mentre il suo pannello è aperto (lo apre .site-tools) */
  html:not(.a11y-open) #cya11y-container{display:none!important}
}
/* reCAPTCHA v3: badge nascosto, la dicitura di Google è nel modulo (forms.js) */
.grecaptcha-badge{visibility:hidden!important}
.form-recaptcha{margin:10px 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}
.form-recaptcha a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media print{.mobile-bar,.wa-float,.scroll-cue,.site-tools,.cky-btn-revisit-wrapper,#cya11y-container{display:none!important}}

/* --- testo lungo nelle pagine libere (editor classico) --------------------- */
.prose{max-width:760px}
.prose a{color:var(--accent-text)}
.prose img{max-width:100%;height:auto}

/* --- messaggi dei moduli (contrasto AA in entrambi i temi) ----------------- */
.form-alert{color:var(--accent-text);font-weight:600}
.form-err{display:block;color:var(--accent-text);font-size:.875rem;font-family:var(--font-t)}

/* --- utilità --------------------------------------------------------------- */
.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}