/* =========================================================
   Acessibilidade – Hub (1 botão) + Leitor
   v17.2.4 (FA + balões + painel unificado "Hub")
   ========================================================= */

/* ---------------- Tokens / Variáveis ---------------- */
:root{
  --ally-font-percent: 100%;
  --ally-font-step: 5;                 /* 5% por clique */

  --ally-z-floor: 2147483600;

  --ally-gap: 12px;
  --ally-btn-size: 56px;
  --ally-radius: 16px;

  --ally-blue: #004A80;
  --ally-blue-800:#004A80;
  --ally-blue-900:#004A80;

  --ally-panel-bg: #ffffff;
  --ally-panel-fg: #0b2239;

  --ally-shadow-sm: 0 2px 8px rgba(0,0,0,.20);
  --ally-shadow-md: 0 8px 20px rgba(0,0,0,.25);
}

html{ font-size: var(--ally-font-percent); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* =====================================================
   FAB ÚNICO
   ===================================================== */
#a11yBtn.a11y-fab{
  position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: calc(var(--ally-z-floor) + 10);
  width: 46px; height: 46px; border-radius: 12px;
  border: 0; background: var(--ally-blue); color: #fff;
  display: grid; place-items: center; box-shadow: var(--ally-shadow-md); cursor: pointer;
}
#a11yBtn.a11y-fab:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

/* Balão do FAB */
#a11yBtn.a11y-fab::after{
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ally-blue-900); color: #fff; font-weight: 700;
  padding: .45rem .7rem; border-radius: 12px; box-shadow: var(--ally-shadow-md);
  white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
}
#a11yBtn.a11y-fab:hover::after, #a11yBtn.a11y-fab:focus-visible::after{ opacity: 1; visibility: visible; }
#a11yBtn[aria-expanded="true"]::after{ display: none; }

/* =====================================================
   Painel Unificado: #a11yHub
   ===================================================== */
#a11yHub{
  position: fixed; left: calc(20px + 46px + var(--ally-gap)); top: 50%;
  transform: translateY(-50%);
  background: var(--ally-panel-bg); color: var(--ally-panel-fg);
  z-index: calc(var(--ally-z-floor) + 15);
  border-radius: 16px; box-shadow: var(--ally-shadow-md);
  width: min(560px, calc(100vw - 120px));
}
#a11yHub[hidden]{ display: none !important; }

.a11y-section{ padding: 10px; }
.a11y-section + .a11y-section{ border-top: 8px solid transparent; }
.a11y-heading{
  background: var(--ally-blue);
  color: #fff; font-weight: 800; letter-spacing: .02em;
  border-radius: 12px; padding: 10px 16px; text-transform: uppercase;
  margin: 6px 6px 10px;
}

/* Grade de botões */
.a11y-grid{ display: grid; gap: 10px; padding: 0 6px 6px; }
.a11y-row-3{ grid-template-columns: repeat(3, 1fr); }
.a11y-row-3 .ally-ctl{ height: 44px; }

/* Botão padrão */
.ally-ctl{
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem;
  min-width: 44px; height: 44px; padding: .55rem .7rem;
  font: inherit; font-weight: 700;
  border-radius: 12px; border: 1px solid rgba(0,0,0,.12);
  background: #eef3f8; color: var(--ally-blue);
  box-shadow: var(--ally-shadow-sm); cursor: pointer;
}
.ally-ctl i{ font-size: 1rem; line-height: 1; }
.ally-ctl:hover{ filter: brightness(0.97); }
.ally-ctl:focus-visible{ outline: 3px solid rgba(0,120,212,.45); outline-offset: 2px; }
.ally-ctl .lbl{ font-size: .9rem; font-weight: 700; }

/* Utilitários (3 colunas) */
.a11y-utils{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 6px 10px; }

/* =====================================================
   Sub-seção: Leitor de Sites
   ===================================================== */
.a11y-reader{ padding: 10px 6px 14px; }
.reader-instructions{ padding: 0 10px 10px; color: #5a6a7b; font-weight: 700; }

/* Player (única definição, 4 colunas) */
.reader-controls{
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 10px; align-items: center;
  padding: 0 6px;
}
.reader-controls .ally-ctl{ width: 44px; height: 44px; }

/* EXCEÇÃO: o botão de velocidade precisa de largura automática */
.reader-controls #lfSpeed.ally-ctl{
  width: auto;
  padding: .55rem .7rem;
  display: inline-flex;
  align-items: center;
}

/* Ajustes cosméticos do botão de velocidade */
#lfSpeed i:first-child{ margin-right: .35rem; }
#lfSpeed i:last-child{  margin-left:  .35rem; }
#lfSpeed .val{
  font-weight: 800;
  font-size: .95rem;
  min-width: 3.2ch;  /* evita pulo ao alternar 0.8x ↔ 1.5x */
  text-align: center;
  display: inline-block;
}

/* =====================================================
   Toggles aplicados no <html>
   ===================================================== */
html.ally-contrast body{ filter: contrast(120%) saturate(110%); }
html.ally-dark body{ background: #0b2239 !important; color: #ffffff !important; }
html.ally-dark a{ color: #a7d8ff !important; }
html.ally-lineheight body{ line-height: 1.8 !important; }
html.ally-letterspace body{ letter-spacing: .06em !important; }
html.ally-underline a{ text-decoration: underline !important; }
html.ally-highlight-links a{ outline: 2px solid #ffbf47 !important; background: #fff5cc !important; }
html.ally-readable-font body{ font-family: "Atkinson Hyperlegible", "OpenDyslexic", Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif !important; }
html.ally-grayscale body{ filter: grayscale(100%); }
html.ally-reduce-motion *{ animation: none !important; transition: none !important; }
html.ally-focus-boost :where(button,[role="button"],a,input,select,textarea):focus-visible{ outline: 4px solid #ffbf47 !important; outline-offset: 3px !important; }

/* Esconde o toast quando não há conteúdo */
#lfToast:empty{ display: none !important; }

/* =====================================================
   Responsivo / Print
   ===================================================== */
@media (max-width: 680px){
  #a11yBtn.a11y-fab{ left: 12px; top: auto; bottom: 16px; transform: none; }
  #a11yHub{ left: 12px; right: 12px; top: auto; bottom: calc(16px + 46px + 12px); transform: none; width: auto; }
  .a11y-utils{ grid-template-columns: repeat(2, 1fr); }
  .reader-controls{ grid-template-columns: repeat(4, max-content); } /* mantém 4 colunas */
}

@media print{
  #a11yBtn, #a11yHub { display:none !important; }
}


/* Aplique a escala ao conteúdo principal do site */
html.ally-font-force body,
html.ally-font-force main,
html.ally-font-force .site-main,
html.ally-font-force #content,
html.ally-font-force .content-area,
html.ally-font-force article,
html.ally-font-force .entry-content {
  font-size: var(--ally-font-percent) !important;
}

/* Normalize tipografia interna para herdar e permitir a escala */
html.ally-font-force p,
html.ally-font-force li,
html.ally-font-force a,
html.ally-font-force span,
html.ally-font-force small,
html.ally-font-force strong,
html.ally-font-force em,
html.ally-font-force h1,
html.ally-font-force h2,
html.ally-font-force h3,
html.ally-font-force h4,
html.ally-font-force h5,
html.ally-font-force h6,
html.ally-font-force blockquote,
html.ally-font-force figure,
html.ally-font-force table,
html.ally-font-force th,
html.ally-font-force td {
  font-size: 1em !important;
  line-height: inherit;
}

#lfToast { display: none; }
#lfToast.is-on { display: block; }