/* =====================================================================
   ONE Tech — strumenti di accessibilita'
   Pulsante fisso in basso a destra + pannello (dialog nativo).

   REGOLA D'ORO: finche' l'utente non accende niente, questo foglio non
   cambia una virgola dell'aspetto del sito. Ogni effetto e' agganciato a
   un attributo data-a11y-* su <html>, che di partenza non c'e'.

   Le variabili del sito (--paper, --purple, --ink...) sono definite pagina
   per pagina e su Prodotti arrivano perfino inline sullo .stage: qui NON ci
   si appoggia a quelle, si usano valori propri, cosi' il pannello e' identico
   su tutte e sette le pagine.
   ===================================================================== */

:root {
  --a11y-ink: #1c1926;
  --a11y-paper: #ffffff;
  --a11y-purple: #5E17EB;
  --a11y-line: rgba(28, 25, 38, .16);
  --a11y-muted: #575162;
  --a11y-radius: 14px;
  --a11y-shadow: 0 18px 44px rgba(28, 25, 38, .18), 0 2px 8px rgba(28, 25, 38, .08);
}

/* =====================================================================
   1. PULSANTE FISSO
   ===================================================================== */

.a11y-fab {
  position: fixed;
  right: clamp(16px, 2.2vw, 32px);
  bottom: clamp(16px, 3vh, 30px);
  z-index: 320;                       /* sopra i contenuti, sotto il menu (400) */
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--a11y-line);
  border-radius: 50%;
  background: var(--a11y-paper);
  color: var(--a11y-purple);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(28, 25, 38, .14), 0 2px 6px rgba(28, 25, 38, .07);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, background-color .2s ease;
}
.a11y-fab svg { width: 26px; height: 26px; display: block; }
.a11y-fab:hover {
  transform: translateY(-2px);
  background: #faf8ff;
  box-shadow: 0 14px 32px rgba(28, 25, 38, .18), 0 2px 6px rgba(28, 25, 38, .08);
}
.a11y-fab:focus-visible { outline: 2px solid var(--a11y-purple); outline-offset: 4px; }

/* col menu di telefono aperto sparisce, come fa il pulsante WhatsApp */
html.nav-open .a11y-fab { opacity: 0; visibility: hidden; }
/* Home: aspetta la fine dell'intro col logo */
body:has(.landing-stage:not(.is-revealed)) .a11y-fab { opacity: 0; visibility: hidden; }

/* Careers ha gia' un pulsante fisso in basso a destra (pausa animazione):
   il nostro sale sopra, cosi' non si sovrappongono. */
body:has(.pause) .a11y-fab { bottom: calc(clamp(16px, 3vh, 30px) + 44px); }

/* Prodotti su telefono: sopra la striscia dei prodotti */
@media (max-width: 860px) {
  body:has(.product-nav) .a11y-fab { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .a11y-fab { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   2. PANNELLO (dialog nativo: sta nel top layer, niente guerre di z-index)
   ===================================================================== */

.a11y-panel {
  width: min(92vw, 380px);
  max-height: min(86vh, 660px);
  /* staccato dal bordo: appoggiato a destra e centrato in verticale,
     non incollato all'angolo come i pannelli aggiunti da fuori */
  margin: auto clamp(16px, 2.2vw, 32px) auto auto;
  padding: 0;
  border: 1px solid var(--a11y-line);
  border-radius: var(--a11y-radius);
  background: var(--a11y-paper);
  color: var(--a11y-ink);
  box-shadow: var(--a11y-shadow);
  font-family: "DM Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;                   /* il contenuto resta dentro gli angoli tondi */
}
.a11y-panel::backdrop { background: rgba(21, 19, 42, .38); }

.a11y-panel-inner { max-height: min(86vh, 660px); overflow-y: auto; padding: 20px; }

.a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--a11y-line);
}
.a11y-head h2 {
  margin: 0;
  font: 500 1rem/1.2 inherit;
  letter-spacing: -.01em;
  color: var(--a11y-ink);
}
.a11y-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;                        /* area di tocco comoda */
  height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--a11y-muted);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.a11y-close:hover { background: rgba(28, 25, 38, .06); color: var(--a11y-ink); }
.a11y-close:focus-visible { outline: 2px solid var(--a11y-purple); outline-offset: 2px; }

/* ---------- dimensione del testo ---------- */
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(28, 25, 38, .08);
}
.a11y-row:last-of-type { border-bottom: 0; }
.a11y-row-label { font-size: .82rem; line-height: 1.35; color: var(--a11y-ink); }

.a11y-size { display: flex; align-items: center; gap: 6px; flex: none; }
.a11y-size button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--a11y-line);
  border-radius: 9px;
  background: var(--a11y-paper);
  color: var(--a11y-ink);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.a11y-size button:hover:not(:disabled) { background: rgba(94, 23, 235, .08); border-color: var(--a11y-purple); }
.a11y-size button:disabled { opacity: .4; cursor: default; }
.a11y-size button:focus-visible { outline: 2px solid var(--a11y-purple); outline-offset: 2px; }
.a11y-size output {
  min-width: 52px;
  text-align: center;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--a11y-muted);
}

/* ---------- interruttori ----------
   Sono <input type="checkbox"> veri, solo vestiti: cosi' lo screen reader
   li annuncia come caselle e la tastiera li aziona con Spazio. */
.a11y-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.a11y-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.a11y-track {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 78px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--a11y-line);
  border-radius: 999px;
  background: rgba(28, 25, 38, .04);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a11y-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* il pallino */
.a11y-track::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
/* Non ci si affida al solo colore: cambia anche il segno (o -> V) e la parola. */
.a11y-track::after { content: "Off"; }

.a11y-switch input:checked + .a11y-track {
  background: rgba(94, 23, 235, .12);
  border-color: var(--a11y-purple);
  color: var(--a11y-purple);
}
.a11y-switch input:checked + .a11y-track::before { background: var(--a11y-purple); border-color: var(--a11y-purple); }
.a11y-switch input:checked + .a11y-track::after { content: "On"; }
.a11y-switch input:focus-visible + .a11y-track { outline: 2px solid var(--a11y-purple); outline-offset: 3px; }
.a11y-switch input:disabled + .a11y-track { opacity: .45; }
.a11y-switch input:disabled ~ * { cursor: default; }

/* la nota va sotto all'etichetta, non di seguito sulla stessa riga */
/* la nota va sotto all'etichetta, non di seguito sulla stessa riga */
.a11y-note { display: block; margin: 3px 0 0; font-size: .66rem; line-height: 1.4; color: var(--a11y-muted); }

/* titoletti che separano i gruppi di opzioni */
.a11y-group {
  margin: 18px 0 2px;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--a11y-muted);
}
.a11y-group:first-of-type { margin-top: 12px; }

/* ---------- piede ---------- */
.a11y-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--a11y-line); }
.a11y-reset {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--a11y-line);
  border-radius: 10px;
  background: var(--a11y-paper);
  color: var(--a11y-ink);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.a11y-reset:hover { background: rgba(94, 23, 235, .08); border-color: var(--a11y-purple); }
.a11y-reset:focus-visible { outline: 2px solid var(--a11y-purple); outline-offset: 2px; }
.a11y-disclaimer { margin: 10px 0 0; font-size: .62rem; line-height: 1.5; color: var(--a11y-muted); }

/* ---------- telefono: foglio che sale dal basso ---------- */
@media (max-width: 600px) {
  .a11y-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 88vh;
    margin: auto 0 0 0;               /* foglio appoggiato in basso */
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .a11y-panel-inner { max-height: 88vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .a11y-row { padding: 15px 0; }
}

/* =====================================================================
   3. GLI EFFETTI SUL SITO
   Ognuno appeso a un attributo che di partenza non esiste.
   ===================================================================== */

/* ---------- dimensione del testo ----------
   Il sito e' scritto quasi tutto in px e clamp(px): ingrandire il font di
   root non toccherebbe quei valori. Si usa zoom, che e' il modo piu' vicino
   allo zoom del browser e non scompagina le proporzioni. */
html[data-a11y-text="90"]  { zoom: .9; }
html[data-a11y-text="110"] { zoom: 1.1; }
html[data-a11y-text="120"] { zoom: 1.2; }
html[data-a11y-text="130"] { zoom: 1.3; }

/* ---------- contrasto alto ----------
   Non si inverte niente: si scuriscono i grigi deboli e si rinforzano i bordi,
   lasciando intatta la gerarchia (viola = accento, nero = testo). */
html[data-a11y-contrast="high"] {
  --muted: #2f2a3d;
  --eyebrow: #2f2a3d;
  --line: #4a4360;
  --gray: #55506a;
  --grey: #55506a;
  --brand-grey: #55506a;
  --purple: #4c11c9;
  --accent: #4c11c9;
  --purple-deep: #35089b;
}
/* Prodotti scrive le variabili inline sullo .stage: qui serve forzare. */
html[data-a11y-contrast="high"] .stage { --ink: #100c1c !important; }
/* niente testo smorzato dall'opacita' */
html[data-a11y-contrast="high"] .site-nav-link,
html[data-a11y-contrast="high"] .nav-drop a,
html[data-a11y-contrast="high"] .nav-drawer-link .idx,
html[data-a11y-contrast="high"] .site-center-meta { opacity: 1; }
/* bordi piu' decisi su cio' che si puo' toccare */
html[data-a11y-contrast="high"] input,
html[data-a11y-contrast="high"] select,
html[data-a11y-contrast="high"] textarea { border-color: #4a4360 !important; }
html[data-a11y-contrast="high"] .chip,
html[data-a11y-contrast="high"] .slot { border-color: #4a4360 !important; }
html[data-a11y-contrast="high"] :focus-visible { outline-width: 3px !important; }

/* ---------- scala di grigi ---------- */
html[data-a11y-grayscale="on"] { filter: grayscale(1); }

/* ---------- movimento ridotto ----------
   Stessa ricetta gia' usata nei @media (prefers-reduced-motion) del sito:
   le transizioni non spariscono, diventano istantanee, cosi' il ritorno
   visivo di un clic resta. */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* le tele decorative si fermano: nascoste, i loro osservatori le mettono in pausa */
html[data-a11y-motion="reduced"] canvas.dot-wave,
html[data-a11y-motion="reduced"] canvas.world-dots,
html[data-a11y-motion="reduced"] canvas.dotted-earth,
html[data-a11y-motion="reduced"] .landing-grid { display: none !important; }
/* l'intro della Home non deve trattenere la pagina */
html[data-a11y-motion="reduced"] .opening { display: none !important; }

/* ---------- sottolinea i collegamenti ---------- */
html[data-a11y-underline="on"] a { text-decoration: underline !important; text-underline-offset: .18em; }
/* le voci di menu hanno gia' la loro riga disegnata: non se ne aggiunge una seconda */
html[data-a11y-underline="on"] .site-nav-link,
html[data-a11y-underline="on"] .site-logo-link,
html[data-a11y-underline="on"] .media-link { text-decoration: none !important; }

/* ---------- spaziatura del testo ----------
   Valori prudenti: il sito e' in monospace, con .12em di WCAG 1.4.12 i titoli
   andrebbero a capo male. Titoli e menu restano fuori dalla spaziatura fra lettere. */
html[data-a11y-spacing="on"] p,
html[data-a11y-spacing="on"] li,
html[data-a11y-spacing="on"] label,
html[data-a11y-spacing="on"] .lead,
html[data-a11y-spacing="on"] .contact-summary,
html[data-a11y-spacing="on"] .apply-lead,
html[data-a11y-spacing="on"] .body p {
  line-height: 1.75 !important;
  letter-spacing: .045em !important;
  word-spacing: .1em !important;
}
html[data-a11y-spacing="on"] p { margin-bottom: 1.35em; }

/* ---------- lettura facilitata ----------
   Niente font "per dislessia" scaricati da terzi: si passa a un sans-serif
   di sistema, molto leggibile, e si respira un po' di piu'. */
html[data-a11y-readable="on"] body,
html[data-a11y-readable="on"] body * {
  font-family: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
/* il codice resta a spaziatura fissa: e' codice, va letto come tale */
html[data-a11y-readable="on"] pre,
html[data-a11y-readable="on"] code,
html[data-a11y-readable="on"] .soon-code,
html[data-a11y-readable="on"] .soon-code * {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace !important;
}
html[data-a11y-readable="on"] p,
html[data-a11y-readable="on"] li,
html[data-a11y-readable="on"] label {
  line-height: 1.7 !important;
  letter-spacing: .02em !important;
  word-spacing: .06em !important;
}

/* ---------- puntatore grande ----------
   Solo dove c'e' un vero puntatore: sui touch non serve e non si attiva. */
@media (hover: hover) and (pointer: fine) {
  html[data-a11y-cursor="large"],
  html[data-a11y-cursor="large"] * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1.2 3.2 6.3-2.6 1.3L10.4 13 5 17z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
  }
  html[data-a11y-cursor="large"] a,
  html[data-a11y-cursor="large"] button,
  html[data-a11y-cursor="large"] label,
  html[data-a11y-cursor="large"] summary,
  html[data-a11y-cursor="large"] [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.8a1.8 1.8 0 013.6 0V11m0-1.2a1.7 1.7 0 013.4 0V12m0-1a1.7 1.7 0 013.4 0v4.6c0 3.2-2.2 5.4-5.4 5.4h-1.6c-2.4 0-3.6-1-5-3L8 15.4c-.6-.9-.3-2 .6-2.5.7-.4 1.6-.2 2.1.4l.9 1.1' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2, pointer !important;
  }
}

/* =====================================================================
   4. CORREZIONI DI ACCESSIBILITA' SEMPRE ATTIVE
   Piccole, mirate, verificate col calcolo del contrasto.
   ===================================================================== */

/* Le voci di menu non attive stavano a opacity .58 -> 4.06:1 sulla carta
   chiara, sotto il minimo di 4.5:1 per il testo normale. Alzando l'opacita'
   si supera la soglia e la gerarchia (attiva piu' scura) resta.
   Le regole :hover/:focus-visible/.active di navigation.css hanno specificita'
   piu' alta, quindi continuano a portare l'opacita' a 1. */
.site-nav-link { opacity: .72; }

/* L'occhiello e le diciture piccole (--eyebrow #726b84) stavano a 4.31:1,
   sotto 4.5:1. Questo foglio si carica per ultimo, quindi basta ridefinire
   la variabile qui: le pagine non si toccano. */
:root { --eyebrow: #5f5972; }

/* Il dialog nativo non deve scrollare la pagina dietro di se'. */
html:has(dialog[open].a11y-panel) { overflow: hidden; }

/* =====================================================================
   5. COMANDO A TRE STATI (Contrasto: Spento / Alto / Basso)
   Radio veri dentro un fieldset: lo screen reader annuncia gruppo e scelta,
   le frecce li scorrono, e lo stato non dipende dal solo colore (c'e' il
   riquadro pieno + il testo in grassetto).
   ===================================================================== */
.a11y-seg { display: flex; gap: 4px; flex: none; border: 0; margin: 0; padding: 0; }
.a11y-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.a11y-seg label { position: relative; }
.a11y-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.a11y-seg span {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--a11y-line);
  border-radius: 9px;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--a11y-muted);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.a11y-seg label:hover span { border-color: var(--a11y-purple); color: var(--a11y-ink); }
.a11y-seg input:checked + span {
  background: var(--a11y-purple);
  border-color: var(--a11y-purple);
  color: #fff;
  font-weight: 500;
}
.a11y-seg input:focus-visible + span { outline: 2px solid var(--a11y-purple); outline-offset: 3px; }

/* =====================================================================
   6. NUOVI EFFETTI
   ===================================================================== */

/* ---------- contrasto BASSO ----------
   Serve a chi fa fatica col bianco acceso (fotofobia, emicrania, Irlen).
   ATTENZIONE: per definizione abbassa il rapporto di contrasto e puo'
   scendere sotto la soglia AA: e' una scelta di comodita' dell'utente,
   non una correzione di accessibilita'. */
html[data-a11y-contrast="low"] {
  --ink: #45405a;
  --muted: #6b6480;
  --eyebrow: #6b6480;
  --line: rgba(28, 25, 38, .12);
}
html[data-a11y-contrast="low"] body { background-color: #e7e4f2; }
html[data-a11y-contrast="low"] .stage { --ink: #45405a !important; }

/* ---------- interlinea ampia (separata dalla spaziatura) ---------- */
html[data-a11y-line="tall"] p,
html[data-a11y-line="tall"] li,
html[data-a11y-line="tall"] label,
html[data-a11y-line="tall"] .lead,
html[data-a11y-line="tall"] .contact-summary,
html[data-a11y-line="tall"] .apply-lead,
html[data-a11y-line="tall"] .body p { line-height: 2 !important; }

/* ---------- righello di lettura ----------
   Una fascia chiara che segue il puntatore: aiuta a non perdere la riga. */
.a11y-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 42px;
  z-index: 330;
  pointer-events: none;
  display: none;
  border-top: 2px solid var(--a11y-purple);
  border-bottom: 2px solid var(--a11y-purple);
  background: rgba(94, 23, 235, .07);
}
html[data-a11y-guide="on"] .a11y-guide { display: block; }

/* ---------- lettura a fuoco ----------
   Tutto si abbassa, il blocco sotto il puntatore resta pieno. */
html[data-a11y-focus="on"] main,
html[data-a11y-focus="on"] section,
html[data-a11y-focus="on"] article,
html[data-a11y-focus="on"] footer { transition: opacity .18s ease; }
html[data-a11y-focus="on"] p,
html[data-a11y-focus="on"] li,
html[data-a11y-focus="on"] h1,
html[data-a11y-focus="on"] h2,
html[data-a11y-focus="on"] h3 { opacity: .32; transition: opacity .18s ease; }
html[data-a11y-focus="on"] .a11y-read-here {
  opacity: 1;
  background: rgba(94, 23, 235, .08);
  box-shadow: 0 0 0 6px rgba(94, 23, 235, .08);
  border-radius: 4px;
}

/* ---------- lettura a parole (RSVP) ----------
   Una parola per volta al centro: si legge senza spostare gli occhi. */
.a11y-rsvp {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 340;
  display: none;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--a11y-paper);
  border-top: 1px solid var(--a11y-line);
  box-shadow: 0 -14px 40px rgba(28, 25, 38, .16);
  font-family: "DM Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
}
html[data-a11y-rsvp="on"] .a11y-rsvp { display: block; }
.a11y-rsvp-word {
  display: block;
  text-align: center;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--a11y-ink);
  min-height: 1.3em;
  word-break: break-word;
}
.a11y-rsvp-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.a11y-rsvp-bar button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--a11y-line);
  border-radius: 10px;
  background: var(--a11y-paper);
  color: var(--a11y-ink);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.a11y-rsvp-bar button:hover { background: rgba(94, 23, 235, .08); border-color: var(--a11y-purple); }
.a11y-rsvp-bar button:focus-visible { outline: 2px solid var(--a11y-purple); outline-offset: 2px; }
.a11y-rsvp-bar output { font-size: .72rem; color: var(--a11y-muted); font-variant-numeric: tabular-nums; min-width: 86px; text-align: center; }
.a11y-rsvp-hint { margin: 10px 0 0; text-align: center; font-size: .66rem; color: var(--a11y-muted); }

/* con il movimento ridotto niente lampeggio di parole */
html[data-a11y-motion="reduced"] .a11y-rsvp-word { transition: none !important; }