/*
 * a11y.css  v2
 * Solo accessibilità — nessun restyling del sito originale
 * Fix: tabelle dark mode + font scaling
 */

/* ── Skip link ────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999999;
  background: #007ca6;
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Focus visibile ───────────────────────────────────────── */
:focus-visible {
  outline: 3px solid #007ca6 !important;
  outline-offset: 3px !important;
}

/* ── Toolbar ──────────────────────────────────────────────── */
#a11y-bar {
  font-size: 14px;
  position: fixed;
  bottom: 24px;
  left: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#a11y-bar .a11y-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #007ca6;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  transition: background .2s, transform .2s;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
  box-sizing: border-box !important;
}
#a11y-bar .a11y-btn:hover  { background: #005f80; transform: scale(1.1); }
#a11y-bar .a11y-btn.active { background: #004d66; box-shadow: 0 0 0 3px rgba(0,124,166,.4); }

/* Tooltip */
#a11y-bar .a11y-btn::before {
  content: attr(aria-label);
  position: absolute;
  left: 52px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#a11y-bar #a11y-bar .a11y-btn:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   DARK MODE
   Obiettivo: sfondo scuro + testo chiaro su TUTTO il contenuto,
   incluse le tabelle con sfondi colorati (gold, free, light blue)
   ════════════════════════════════════════════════════════════ */
body.a11y-dark {
  background-color: #0f1a1a !important;
  color: #dce8e8 !important;
}

/* contenitori principali */
body.a11y-dark .content-outer,
body.a11y-dark #page-content,
body.a11y-dark #primary,
body.a11y-dark #secondary       { background-color: #0f1a1a !important; }

body.a11y-dark #page-title,
body.a11y-dark #page-title *    { background-color: #162020 !important; }

body.a11y-dark #info,
body.a11y-dark #journal,
body.a11y-dark #bestseller,
body.a11y-dark #works,
body.a11y-dark #distributori,
body.a11y-dark footer            { background-color: #162020 !important; }

/* testo generico */
body.a11y-dark p,
body.a11y-dark li,
body.a11y-dark span,
body.a11y-dark div               { color: #dce8e8 !important; }

body.a11y-dark h1, body.a11y-dark h2, body.a11y-dark h3,
body.a11y-dark h4, body.a11y-dark h5, body.a11y-dark h6 { color: #aee8e8 !important; }

body.a11y-dark a                 { color: #4dd4d6 !important; }
body.a11y-dark a:hover           { color: #80e8e8 !important; }

/* ── TABELLE — fix completo ─────────────────────────────── */
body.a11y-dark table             { background-color: #1a2a2a !important; }

body.a11y-dark th,
body.a11y-dark td                {
  background-color: #1e3030 !important;
  color: #dce8e8 !important;
  border-color: #2a4040 !important;
}

/* colonna Features / caratteristiche */
body.a11y-dark td.caratteristiche { color: #dce8e8 !important; background-color: #243838 !important; }

/* colonne GOLD */
body.a11y-dark th.gold,
body.a11y-dark td.gold           {
  background-color: #3a2e00 !important;
  background-image: none !important;
  color: #ffd96a !important;
}

/* colonne FREE */
body.a11y-dark th.free,
body.a11y-dark td.free           {
  background-color: #0a2e1a !important;
  background-image: none !important;
  color: #72e8a0 !important;
}

/* tabella plan header row (light-blue nel sito originale) */
body.a11y-dark #plan thead th    { background-color: #1a3a3a !important; color: #aee8e8 !important; }

/* righe alternate profilo utente */
body.a11y-dark .riga             { border-bottom-color: #2a4040 !important; }
body.a11y-dark .riga2            { background-color: #1a2a2a !important; }

/* traduttori */
body.a11y-dark #traduttori th    { background-color: #243838 !important; color: #aee8e8 !important; }
body.a11y-dark #traduttori td    { background-color: #1e3030 !important; color: #dce8e8 !important; }

/* ── Form ──────────────────────────────────────────────── */
body.a11y-dark input,
body.a11y-dark textarea,
body.a11y-dark select            {
  background-color: #1e3030 !important;
  color: #dce8e8 !important;
  border-color: #2a4040 !important;
}


/* ── HEADER ─────────────────────────────────────────────── */
body.a11y-dark header,
body.a11y-dark header .row        { background-color: #0f1a1a !important; }

/* barra lingua (#lingua ha background inline !important: usiamo filter per invertirla) */
body.a11y-dark #lingua            { background-color: #1a3a3a !important; filter: none !important; }
body.a11y-dark #lingua *          { color: #dce8e8 !important; }

/* logotext (Iscriviti / Accedi in alto a destra) */
body.a11y-dark .logotext          { background-color: #0f1a1a !important; }
body.a11y-dark .logotext a        { color: #4dd4d6 !important; }

/* stats box (Traduttori / Narratori / Autori / Libri) */
body.a11y-dark #stats             { background-color: #162828 !important; border-color: #2a4040 !important; }
body.a11y-dark #stats td          { background-color: transparent !important; color: #dce8e8 !important; border: none !important; }

/* orologio */
body.a11y-dark #orologio          { color: #aee8e8 !important; }

/* nav */
body.a11y-dark #nav-wrap,
body.a11y-dark #nav-wrap ul,
body.a11y-dark #nav-wrap li       { background-color: #0d2020 !important; }
body.a11y-dark #nav-wrap a        { color: #dce8e8 !important; }
body.a11y-dark #nav-wrap ul ul    { background-color: #162828 !important; border-color: #2a4040 !important; }

/* ── FOOTER ──────────────────────────────────────────────── */
body.a11y-dark footer,
body.a11y-dark footer .row,
body.a11y-dark .fondo             { background-color: #0a1818 !important; border-color: #1e3030 !important; }

body.a11y-dark .fondo hr          { border-color: #2a4040 !important; }

/* link footer-nav */
body.a11y-dark .footer-nav,
body.a11y-dark .footer-nav li,
body.a11y-dark .footer-nav a      { color: #88d0d0 !important; background-color: transparent !important; }
body.a11y-dark .footer-nav a:hover { color: #aee8e8 !important; }

/* social */
body.a11y-dark .footer-social,
body.a11y-dark .footer-social li,
body.a11y-dark .footer-social a   { color: #88d0d0 !important; background-color: transparent !important; }

/* copyright */
body.a11y-dark .copyright,
body.a11y-dark .copyright li,
body.a11y-dark .copyright a       { color: #668888 !important; background-color: transparent !important; }

/* torna su */
body.a11y-dark #go-top a          { background-color: #1a3a3a !important; color: #aee8e8 !important; }

/* testo condividi */
body.a11y-dark footer p           { color: #88d0d0 !important; background-color: transparent !important; }

/* span lingua nel footer */
body.a11y-dark .footer-nav span   { color: #88d0d0 !important; }

/* ── TORTA TABLE (stili inline con !important nel sorgente) ── */
body.a11y-dark .torta-table                    { background: #1a2a2a !important; border-color: #2a3a5a !important; box-shadow: none !important; }
body.a11y-dark .torta-table th                 { background: linear-gradient(90deg, #2a1a5a, #001050) !important; color: #dce8e8 !important; border-color: #2a3a5a !important; }
body.a11y-dark .torta-table td                 { background-color: #1a2a2a !important; color: #dce8e8 !important; border-color: #2a3a4a !important; }
body.a11y-dark .torta-table tbody tr:nth-child(even) td { background-color: #1e3030 !important; }
body.a11y-dark .torta-table tbody tr:hover td  { background-color: #243838 !important; }
body.a11y-dark .torta-table .cell-autore       { color: #a088ff !important; }
body.a11y-dark .torta-table .cell-traduttore   { color: #6688ff !important; }
body.a11y-dark .torta-table .cell-tektime      { color: #aabbcc !important; }

/* ── Alto contrasto ───────────────────────────────────────── */
body.a11y-contrast::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
  backdrop-filter: contrast(1.65);
  -webkit-backdrop-filter: contrast(1.65);
}

/* ════════════════════════════════════════════════════════════
   FONT SCALING
   Usa zoom su html invece di font-size, così sovrascrive
   qualsiasi font-size hardcoded nel sito
   ════════════════════════════════════════════════════════════ */

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  #a11y-bar  { bottom: 14px; right: 10px; gap: 6px; }
  #a11y-bar .a11y-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; max-height: 30px !important; font-size: 10px !important; padding: 0 !important; }
  #a11y-bar .a11y-btn::before { display: none; }
}

/* ── #aiuto e #aiuto-menu dark mode ─────────────────────── */
body.a11y-dark #aiuto                     { background: #0f1a1a !important; }
body.a11y-dark #aiuto p,
body.a11y-dark #aiuto li                  { color: #dce8e8 !important; }
body.a11y-dark #aiuto h1,
body.a11y-dark #aiuto h4                  { color: #aee8e8 !important; }
body.a11y-dark #aiuto h5                  { background: #1e3030 !important; color: #dce8e8 !important; }
body.a11y-dark #aiuto a,
body.a11y-dark #aiuto a:visited           { color: #4dd4d6 !important; }
body.a11y-dark #aiuto a:hover             { color: #ff6666 !important; }
body.a11y-dark #aiuto .risposta a:visited { color: #4dd4d6 !important; }

body.a11y-dark #aiuto-menu                { border-bottom-color: #2a4040 !important;  background: #1e3030}
body.a11y-dark #aiuto-menu .aiuto-nav a   { background: #1e3030 !important; color: #4dd4d6 !important; }
body.a11y-dark #aiuto-menu a,
body.a11y-dark #aiuto-menu a:visited      { color: #4dd4d6 !important; }
body.a11y-dark #aiuto-menu a:hover        { color: #ffff00 !important; background: #005f80 !important; }

body.a11y-dark #aiuto-btn a,
body.a11y-dark #aiuto-btn a:visited       { background: #0a4a4a !important; color: #dce8e8 !important; }
body.a11y-dark #aiuto-btn a:hover         { background: #cccc00 !important; color: #111111 !important; }
body.a11y-dark #NormeEditoriali            { background: #0f1a1a !important; }
body.a11y-dark .row            { background: #0f1a1a !important; }

body.a11y-dark .boost-sales            { background: #0f1a1a !important; }
body.a11y-dark #Tek           { background: #0f1a1a !important; }
body.a11y-dark #Tek2           { background: #0f1a1a !important; }