/* ==========================================================================
   MENU & SUÍTE DE ACESSIBILIDADE WCAG 2.1 AAA - SACA ESSA
   Integração nativa de acessibilidade + suporte e compatibilidade UserWay
   ========================================================================== */

/* Botão Flutuante de Acessibilidade */
.accessibility-trigger-btn {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background: var(--color-royal);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
  border: 2px solid #ffffff;
  z-index: 998;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.accessibility-trigger-btn:hover {
  background: var(--color-gold);
  color: var(--color-primary-dark);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 184, 0, 0.5);
}

/* Painel / Gaveta de Acessibilidade */
.accessibility-panel {
  position: fixed;
  bottom: 90px;
  left: 24px;
  width: 340px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-border);
  z-index: 999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: panelSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.accessibility-panel.open {
  display: flex;
}

@keyframes panelSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.access-panel-header {
  background: var(--color-primary-dark);
  color: #ffffff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.access-panel-header h3 {
  font-size: 1.05rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.access-close-btn {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.access-close-btn:hover {
  color: var(--color-gold);
}

.access-panel-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.access-group-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Controle de Tamanho de Fonte */
.font-size-controls {
  display: flex;
  gap: 8px;
}
.btn-font-size {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all var(--transition-fast);
}
.btn-font-size:hover {
  background: var(--color-border-hover);
}
.btn-font-size.active {
  background: var(--color-royal);
  color: #ffffff;
  border-color: var(--color-royal);
}

/* Grade de Botões de Recursos */
.access-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.access-feature-btn {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.access-feature-btn i {
  font-size: 1.3rem;
  color: var(--color-royal);
}
.access-feature-btn:hover {
  background: #ffffff;
  border-color: var(--color-royal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.access-feature-btn.active {
  background: var(--color-royal);
  color: #ffffff;
  border-color: var(--color-royal);
}
.access-feature-btn.active i {
  color: var(--color-gold);
}

.btn-reset-accessibility {
  margin-top: 6px;
  width: 100%;
  padding: 10px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition-fast);
}
.btn-reset-accessibility:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* ==========================================================================
   MODOS GLOBAIS DE ACESSIBILIDADE APLICADOS NO BODY
   ========================================================================== */

/* 1. Ajustes de Tamanho de Fonte */
body.access-font-lg {
  font-size: 18px !important;
}
body.access-font-lg h1 { font-size: 3.5rem !important; }
body.access-font-lg h2 { font-size: 2.8rem !important; }
body.access-font-lg h3 { font-size: 2rem !important; }

body.access-font-xl {
  font-size: 20px !important;
}
body.access-font-xl h1 { font-size: 4rem !important; }
body.access-font-xl h2 { font-size: 3.2rem !important; }
body.access-font-xl h3 { font-size: 2.3rem !important; }

body.access-font-sm {
  font-size: 14px !important;
}

/* 2. Alto Contraste (Fundo Preto com Texto Amarelo/Branco) */
body.access-high-contrast {
  background-color: #000000 !important;
  color: #ffffff !important;
}
body.access-high-contrast .site-header,
body.access-high-contrast .pillar-card,
body.access-high-contrast .polo-card,
body.access-high-contrast .org-card,
body.access-high-contrast .doc-card,
body.access-high-contrast .sponsor-card,
body.access-high-contrast .contact-info-card,
body.access-high-contrast .contact-form-card,
body.access-high-contrast .transparencia-controls,
body.access-high-contrast .accessibility-panel {
  background-color: #121212 !important;
  border-color: #ffff00 !important;
  color: #ffffff !important;
}
body.access-high-contrast h1,
body.access-high-contrast h2,
body.access-high-contrast h3,
body.access-high-contrast h4,
body.access-high-contrast strong {
  color: #ffff00 !important;
}
body.access-high-contrast p,
body.access-high-contrast span,
body.access-high-contrast li {
  color: #ffffff !important;
}
body.access-high-contrast a {
  color: #00ffff !important;
  text-decoration: underline !important;
}
body.access-high-contrast .btn-cta,
body.access-high-contrast .btn-hero-primary,
body.access-high-contrast .btn-doc-view,
body.access-high-contrast .btn-submit-form {
  background: #ffff00 !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

/* 3. Modo Monocromático (Escala de Cinza) */
body.access-grayscale {
  filter: grayscale(100%) !important;
}

/* 4. Fonte para Dislexia */
body.access-dyslexic {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
  line-height: 1.8 !important;
}
body.access-dyslexic * {
  font-family: inherit !important;
}

/* 5. Sublinhar Todos os Links */
body.access-underline-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* 6. Destacar Cabeçalhos e Botões */
body.access-highlight-headings h1,
body.access-highlight-headings h2,
body.access-highlight-headings h3 {
  background: rgba(255, 184, 0, 0.25) !important;
  border-left: 5px solid var(--color-gold) !important;
  padding-left: 10px !important;
}

/* 7. Guia / Régua de Leitura */
.reading-guide-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 38px;
  background: rgba(255, 235, 59, 0.22);
  border-top: 2px solid #fbc02d;
  border-bottom: 2px solid #fbc02d;
  pointer-events: none;
  z-index: 10000;
  display: none;
}
body.access-reading-guide .reading-guide-line {
  display: block;
}

/* Fixação perfeitamente simétrica do widget UserWay com a mesma distância do WhatsApp (bottom: 24px, left: 24px) */
.userway_buttons_wrapper {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  position: fixed !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.uai, #userwayAccessibilityIcon, .userway_p1 {
  top: auto !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  position: fixed !important;
  z-index: 99999 !important;
  margin: 0 !important;
}

/* ==========================================================================
   COMPATIBILIDADE FANCYBOX / LIGHTBOX:
   Garante que o Fancybox fique sempre acima de todos os elementos e
   oculta os icones flutuantes (UserWay e WhatsApp) durante a visualizacao das fotos.
   ========================================================================== */
.fancybox__container {
  z-index: 2147483647 !important;
}

html.with-fancybox .uai,
html.with-fancybox #userwayAccessibilityIcon,
html.with-fancybox .userway_p1,
html.with-fancybox .userway_buttons_wrapper,
html.with-fancybox #whatsapp-float,
body.compensate-for-scrollbar .uai,
body.compensate-for-scrollbar #userwayAccessibilityIcon,
body.compensate-for-scrollbar #whatsapp-float,
body.fancybox-active .uai,
body.fancybox-active #userwayAccessibilityIcon,
body.fancybox-active .userway_p1,
body.fancybox-active .userway_buttons_wrapper,
body.fancybox-active #whatsapp-float {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
