/* ==========================================================================
   Si.Ca. Alimentari — Lettura facile

   Una seconda veste, facoltativa, della STESSA pagina. Non è un altro sito
   e non è un altro disegno: stessi contenuti, stesse sezioni, stesso ordine,
   stessa griglia. Cambia solo quanto è facile leggerla.

   Si accende con il pulsante in basso a destra e resta accesa da una pagina
   all'altra (js/lettura.js la ricorda). Il disegno originale resta quello
   di partenza: senza l'attributo data-lettura="chiaro" questo foglio non
   tocca una riga.

   Cosa fa, in ordine di peso:
   1. ferma il movimento decorativo — onde, bolle, nastri, zoom, parallasse
   2. alza il contrasto del testo scritto in grigio
   3. scurisce le fotografie sotto al testo, così le scritte si staccano
   4. ingrandisce le etichette minute e ne toglie la spaziatura estrema
   5. sottolinea i link dentro il testo e rinforza i bordi dei pulsanti

   Cosa NON fa: non sposta niente, non toglie niente, non cambia i corpi
   dei titoli né la larghezza delle colonne. L'impaginazione resta identica.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Il movimento si ferma
   -------------------------------------------------------------------------- */

/* la parallasse e l'alone che segue il mouse passano da variabili:
   azzerarle è il modo più pulito per spegnerle senza toccare i transform */
html[data-lettura="chiaro"] body {
  --par: 0;
  --mx: 0;
  --my: 0;
}

/* tutto ciò che si muove da solo: onde, bolle, zoom lenti, nastri,
   luci che respirano, il puntino del piede */
html[data-lettura="chiaro"] .wave-strip,
html[data-lettura="chiaro"] .hero__bubble,
html[data-lettura="chiaro"] .hero__glow,
html[data-lettura="chiaro"] .hero__mark,
html[data-lettura="chiaro"] .hero__mark-shine span,
html[data-lettura="chiaro"] .hero__flag-dot,
html[data-lettura="chiaro"] .ticker__track,
html[data-lettura="chiaro"] .deli-nastro__track,
html[data-lettura="chiaro"] .deli-hero__bg img,
html[data-lettura="chiaro"] .deli-hero__glow,
html[data-lettura="chiaro"] .deli-negozio__frame img,
html[data-lettura="chiaro"] .deli-order__glow,
html[data-lettura="chiaro"] .shop-head__glow,
html[data-lettura="chiaro"] .shop-head__dot,
html[data-lettura="chiaro"] .gate__media img,
html[data-lettura="chiaro"] .gate__glow,
html[data-lettura="chiaro"] .gate__seal,
html[data-lettura="chiaro"] .gate__shine span,
html[data-lettura="chiaro"] .gate__wave-track,
html[data-lettura="chiaro"] .gate__foot-dot,
html[data-lettura="chiaro"] .cuts__drift,
html[data-lettura="chiaro"] .lab__drift,
html[data-lettura="chiaro"] .sizes__drift,
html[data-lettura="chiaro"] .soaked__drift,
html[data-lettura="chiaro"] .order__glow,
html[data-lettura="chiaro"] .deli__glow,
html[data-lettura="chiaro"] .site-footer__logo,
html[data-lettura="chiaro"] .site-footer__logos img {
  animation: none !important;
}

/* i fondi animati avevano uno zoom di riposo: senza animazione resta
   la scala di partenza, che è quella giusta per non lasciare bordi vuoti */
html[data-lettura="chiaro"] .gate__media img,
html[data-lettura="chiaro"] .deli-hero__bg img,
html[data-lettura="chiaro"] .deli-negozio__frame img { transform: scale(1.05); }

/* le sezioni non entrano più scivolando: sono già lì, leggibili subito.
   js/main.js e js/brand-motion.js scrivono opacità e transform sull'elemento,
   per questo qui serve !important */
html[data-lettura="chiaro"] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* niente effetti al passaggio del mouse che spostino le cose sotto al dito */
html[data-lettura="chiaro"] .btn:hover,
html[data-lettura="chiaro"] .shop-filter:hover,
html[data-lettura="chiaro"] .card:hover .card__bg,
html[data-lettura="chiaro"] .tile:hover .tile__img,
html[data-lettura="chiaro"] .gate__door:hover { transform: none; }

/* --------------------------------------------------------------------------
   2. Il contrasto del testo

   Il sito scrive in grigio-azzurro su fondo scuro. In lettura facile il
   testo corrente diventa quasi bianco: stesso posto, stesso corpo, molto
   più leggibile. I nomi delle classi seguono la stessa regola in tutto il
   progetto (blocco__lead, blocco__text, blocco__note...), per questo qui
   bastano poche righe invece di un elenco di duecento selettori.

   ⚠️  Il sito non è scuro dappertutto. Quattro riquadri hanno il fondo
   chiaro — la crema del configuratore, l'oro della sezione «come si
   ordina», la crema del negozio e l'oro dell'ordine sugli alimentari — e
   lì il testo è scuro di suo. Schiarirlo insieme al resto lo renderebbe
   invisibile. Per questo il colore passa da una variabile: sul fondo scuro
   vale quasi-bianco, dentro quei riquadri si ribalta in quasi-nero, e ogni
   regola qui sotto legge la variabile invece di un colore fisso.
   -------------------------------------------------------------------------- */
html[data-lettura="chiaro"] {
  --lf-testo:  #F4F8FA;   /* il testo corrente */
  --lf-titolo: #FFFFFF;   /* titoli e nomi */
}

/* le zone a fondo chiaro ribaltano le due variabili per tutto ciò che
   contengono, annidamento compreso */
html[data-lettura="chiaro"] .cfg,
html[data-lettura="chiaro"] .order,
html[data-lettura="chiaro"] .deli-negozio,
html[data-lettura="chiaro"] .deli-order {
  --lf-testo:  #2A1D06;
  --lf-titolo: #140B02;
}

/* dentro il configuratore crema c'è un'isola scura — il palco con la
   sagoma del pesce — e lì le due variabili tornano al valore chiaro */
html[data-lettura="chiaro"] .cfg__stage {
  --lf-testo:  #F4F8FA;
  --lf-titolo: #FFFFFF;
}

html[data-lettura="chiaro"] p,
html[data-lettura="chiaro"] [class*="__lead"],
html[data-lettura="chiaro"] [class*="__text"],
html[data-lettura="chiaro"] [class*="__note"],
html[data-lettura="chiaro"] [class*="__desc"],
html[data-lettura="chiaro"] [class*="__body"],
html[data-lettura="chiaro"] [class*="__caption"],
html[data-lettura="chiaro"] [class*="__para"],
html[data-lettura="chiaro"] [class*="__quote"],
html[data-lettura="chiaro"] [class*="__pull"],
html[data-lettura="chiaro"] [class*="__addr"],
html[data-lettura="chiaro"] [class*="__meta"],
html[data-lettura="chiaro"] .heritage__p,
html[data-lettura="chiaro"] .ship__p,
html[data-lettura="chiaro"] .faq__a,
html[data-lettura="chiaro"] .step__x,
html[data-lettura="chiaro"] .deli-step__x,
html[data-lettura="chiaro"] .shop-note,
html[data-lettura="chiaro"] .gate__house-meta,
html[data-lettura="chiaro"] .gate__foot,
html[data-lettura="chiaro"] .gate__foot-claim {
  color: var(--lf-testo);
}

/* i titoli e i nomi restano bianchi pieni, senza aloni che li sfocano */
html[data-lettura="chiaro"] [class*="__title"],
html[data-lettura="chiaro"] [class*="__name"],
html[data-lettura="chiaro"] h1,
html[data-lettura="chiaro"] h2,
html[data-lettura="chiaro"] h3 {
  color: var(--lf-titolo);
  text-shadow: none;
}

/* I due colori dei marchi — l'oro del pesce, il rosa degli alimentari —
   restano dove sono. Sono l'identità del sito, non un vezzo grafico: le
   regole di contrasto qui sopra le avrebbero sbiancate insieme al resto,
   e su fondo scuro erano già ben leggibili di loro. */
html[data-lettura="chiaro"] .hero__title-accent,
html[data-lettura="chiaro"] .accent-gold,
html[data-lettura="chiaro"] .lab__caption-gold,
html[data-lettura="chiaro"] .ship__p--gold,
html[data-lettura="chiaro"] .shop-head__accent,
html[data-lettura="chiaro"] .shop-how__text--accent,
html[data-lettura="chiaro"] .card--pesce .card__cta,
html[data-lettura="chiaro"] .door--fish .door__cta { color: var(--gold); }

html[data-lettura="chiaro"] .card--alimentari .card__cta,
html[data-lettura="chiaro"] .door--deli .door__cta { color: var(--rose); }

/* I punti che nel disegno originale restavano sotto la soglia di lettura:
   scritte al 40% di opacità, pastiglie grigie sulla crema, il rosa chiaro
   sul rosso del pulsante. In lettura facile si portano tutte in chiaro. */
html[data-lettura="chiaro"] .pill:not(.pill--sel),
html[data-lettura="chiaro"] .cfg__row-name,
html[data-lettura="chiaro"] .cfg__stage-note,
html[data-lettura="chiaro"] .cfg__weight-head { color: var(--lf-testo); }
html[data-lettura="chiaro"] .hero__vertical { color: rgba(255,255,255,.72); }
html[data-lettura="chiaro"] .deli-step__n { color: rgba(43,31,5,.62); }
html[data-lettura="chiaro"] .btn--red { color: #FFFFFF; }
html[data-lettura="chiaro"] .btn--sand { color: #7A5210; }

/* il piede del sito è il punto più scuro e più fitto di tutto il progetto */
html[data-lettura="chiaro"] .site-footer { color: #F4F8FA; }
html[data-lettura="chiaro"] .site-footer__label,
html[data-lettura="chiaro"] .site-footer__bottom-inner,
html[data-lettura="chiaro"] .site-footer__social a,
html[data-lettura="chiaro"] .site-footer__banchi,
html[data-lettura="chiaro"] .site-footer__banchi a { color: #EAF3F6; }

/* i numeri e le sigle di reparto sulle schede */
html[data-lettura="chiaro"] .card__cat,
html[data-lettura="chiaro"] .card__n,
html[data-lettura="chiaro"] .card__chip,
html[data-lettura="chiaro"] .card__cta,
html[data-lettura="chiaro"] .tile__tag,
html[data-lettura="chiaro"] .tile__meta,
html[data-lettura="chiaro"] .tile__order,
html[data-lettura="chiaro"] .shop-count,
html[data-lettura="chiaro"] .shop-filter { color: #FFFFFF; }
html[data-lettura="chiaro"] .shop-filter--on { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   3. Le fotografie sotto al testo

   Dove la scritta sta sopra una foto, la foto si scurisce e si smorza: il
   testo non cambia posto, ma si stacca dal fondo invece di confondersi.
   I marchi — gli stemmi del cliente — restano come sono.
   -------------------------------------------------------------------------- */
html[data-lettura="chiaro"] .hero__bg img,
html[data-lettura="chiaro"] .gate__media img,
html[data-lettura="chiaro"] .door__media img,
html[data-lettura="chiaro"] .card__bg img,
html[data-lettura="chiaro"] .tile__img,
html[data-lettura="chiaro"] .cut__img,
html[data-lettura="chiaro"] .deli-hero__bg img,
html[data-lettura="chiaro"] .deli-fam__media img,
html[data-lettura="chiaro"] .deli__media img,
html[data-lettura="chiaro"] .dry__bg img,
html[data-lettura="chiaro"] .intro__bg img,
html[data-lettura="chiaro"] .sizes__bg img,
html[data-lettura="chiaro"] .heritage__bg img,
html[data-lettura="chiaro"] .preserves__media img,
html[data-lettura="chiaro"] .process__tile img,
html[data-lettura="chiaro"] .lab__media img {
  filter: brightness(.46) saturate(.72) contrast(1.04) !important;
  opacity: 1;
}

/* i veli sopra le foto vanno alla loro opacità piena */
html[data-lettura="chiaro"] [class*="__veil"] { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Le etichette minute

   Sopra ogni sezione c'è una riga in maiuscolo da 10,5 px con un quarto di
   em di spaziatura fra le lettere: elegante e faticosa da leggere. Qui il
   corpo sale e la spaziatura scende. La riga resta larga uguale o meno,
   quindi non manda a capo niente.
   -------------------------------------------------------------------------- */
html[data-lettura="chiaro"] .eyebrow,
html[data-lettura="chiaro"] [class*="__eyebrow"],
html[data-lettura="chiaro"] [class*="__label"],
html[data-lettura="chiaro"] [class*="__flag-text"],
html[data-lettura="chiaro"] .gate__house-name,
html[data-lettura="chiaro"] .gate__house-meta,
html[data-lettura="chiaro"] .gate__foot,
html[data-lettura="chiaro"] .site-footer__label,
html[data-lettura="chiaro"] .site-footer__bottom-inner,
html[data-lettura="chiaro"] .shop-count,
html[data-lettura="chiaro"] .card__cat,
html[data-lettura="chiaro"] .card__chip,
html[data-lettura="chiaro"] .tile__tag,
html[data-lettura="chiaro"] .ship__faq-label,
html[data-lettura="chiaro"] .cfg__label,
html[data-lettura="chiaro"] .process__label {
  font-size: 12.5px;
  letter-spacing: .1em;
}

/* I numeri grandi dei passaggi — 01, 02, 03 — restano della loro misura:
   sono un elemento del disegno, non un'etichetta. Qui si limitano a
   staccarsi meglio dal fondo, che li teneva quasi trasparenti. */
html[data-lettura="chiaro"] .step__n { color: rgba(43,31,5,.62); }
html[data-lettura="chiaro"] .deli-fam__n { opacity: 1; }
/* il numerone in filigrana dietro ai tagli: da appena percepibile a
   leggibile, restando comunque una filigrana e non un titolo */
html[data-lettura="chiaro"] .cut__num { color: rgba(245,208,112,.5); }

/* i comandi scritti in mono: stessa cura, senza cambiare la pastiglia */
html[data-lettura="chiaro"] .shop-filter,
html[data-lettura="chiaro"] .pill,
html[data-lettura="chiaro"] .cut-btn,
html[data-lettura="chiaro"] .site-nav,
html[data-lettura="chiaro"] .site-nav a,
html[data-lettura="chiaro"] .site-nav__on {
  letter-spacing: .08em;
}
html[data-lettura="chiaro"] .site-nav,
html[data-lettura="chiaro"] .site-nav a,
html[data-lettura="chiaro"] .site-nav__on {
  font-size: 13px;
  color: #FFFFFF;
  text-shadow: none;
}

/* le pastiglie di pezzatura fuori portata restano spente, ma visibili:
   al 40% di opacità non si capiva più cosa ci fosse scritto */
html[data-lettura="chiaro"] .pill[disabled] { opacity: .68; }

/* --------------------------------------------------------------------------
   5. Link e pulsanti riconoscibili

   Un link dentro un paragrafo deve vedersi che è un link anche senza
   passarci sopra il mouse. I pulsanti prendono un bordo netto.
   -------------------------------------------------------------------------- */
html[data-lettura="chiaro"] p a,
html[data-lettura="chiaro"] .site-footer__social a,
html[data-lettura="chiaro"] .site-footer__banchi a,
html[data-lettura="chiaro"] .deli-pesce__link,
html[data-lettura="chiaro"] .deli-panel__link,
html[data-lettura="chiaro"] .shop-panel__link,
html[data-lettura="chiaro"] .dry__link,
html[data-lettura="chiaro"] .gate__shop {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

html[data-lettura="chiaro"] .btn { box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
html[data-lettura="chiaro"] .btn--gold,
html[data-lettura="chiaro"] .btn--red { box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
html[data-lettura="chiaro"] .shop-filter { border-color: rgba(255,255,255,.55); }
html[data-lettura="chiaro"] .shop-filter--on { border-color: var(--gold); box-shadow: none; }

/* la voce della pagina in cui si è deve saltare all'occhio */
html[data-lettura="chiaro"] .site-nav__on {
  border-bottom-width: 2px;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   6. Il pulsante che accende e spegne questa modalità

   Sta sempre nello stesso posto, in ogni pagina, sopra a tutto. È l'unico
   elemento che questa modalità aggiunge alla pagina; nel disegno originale
   c'è comunque, perché è da lì che si entra.
   -------------------------------------------------------------------------- */
.lettura-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;

  font-family: var(--mono), monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;

  color: #14202A;
  background: #F5D070;
  border: 2px solid #14202A;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.lettura-toggle:hover { background: #FFFFFF; transform: translateY(-2px); }
.lettura-toggle:active { transform: none; }

.lettura-toggle__icona { flex: none; width: 20px; height: 20px; display: block; }
.lettura-toggle__testo { white-space: nowrap; }

/* acceso: il pulsante dice come si torna indietro */
html[data-lettura="chiaro"] .lettura-toggle {
  color: #FFFFFF;
  background: #14202A;
  border-color: #FFFFFF;
}
html[data-lettura="chiaro"] .lettura-toggle:hover { background: #263A48; }

/* sui telefoni la scritta lascia il posto alla sola icona: il pulsante
   resta ben visibile senza coprire mezzo schermo */
@media (max-width: 560px) {
  .lettura-toggle { padding: 12px; gap: 0; min-width: 48px; justify-content: center; }
  .lettura-toggle__testo {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lettura-toggle { transition: none; }
  .lettura-toggle:hover { transform: none; }
}