/* =============================================================================
   a11y-panel.css — motor del panel de accesibilidad de MYBEYOGA.
   Efecto real de las preferencias que aplica inc/a11y.php. Portado del núcleo
   genérico de sparkcms (public/assets/css/a11y-panel.css). Allí era opt-in
   porque el núcleo es compartido entre clientes; aquí el tema es propio de
   MYBEYOGA, así que va siempre activo (sin ajuste de activación).

   Se enqueue en el <head> para que el estado guardado en localStorage se
   aplique antes del primer pintado (ver mby_a11y_early_script) y no parpadee
   al navegar entre páginas.
   ============================================================================= */

/* --- Alto contraste: fuerza texto casi negro sobre fondo claro y refuerza
   bordes y enlaces con colores reales, en vez de un filtro tipo grayscale()/
   invert() que deforma fotos y no mejora la legibilidad real.

   Excepción: ".a11y-dark-block" — si alguna sección del tema usa fondo
   oscuro con texto claro, añádele esta clase (o a un contenedor ascendiente)
   para que el modo alto contraste no le pinte negro sobre negro. Los propios
   botones flotantes también quedan fuera: usan un esquema de colores fijo
   definido en su propio <style> (ver inc/a11y.php y inc/floating.php,
   #a11y-trigger / #mby-cookie-trigger / #mby-wa-trigger). --- */
html[data-a11y-contrast="1"] body {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
}
html[data-a11y-contrast="1"] body :is(header, nav, footer, main, section, article, aside, div, ul, ol, li, form, table, tr, td, th):not(.a11y-dark-block, .a11y-dark-block *, #a11y-panel, #a11y-panel *, #a11y-trigger, #mby-cookie-trigger, #mby-wa-trigger) {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #0a0a0a !important;
}
html[data-a11y-contrast="1"] body :is(h1, h2, h3, h4, h5, h6, p, span, li, label, dt, dd, blockquote, figcaption, td, th, small):not(.a11y-dark-block, .a11y-dark-block *, #a11y-panel, #a11y-panel *) {
  color: #0a0a0a !important;
  text-shadow: none !important;
}
html[data-a11y-contrast="1"] a:not(.a11y-dark-block a, #a11y-panel a, #a11y-trigger, #mby-wa-trigger) {
  color: #06316b !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
}
html[data-a11y-contrast="1"] a:visited:not(.a11y-dark-block a, #mby-wa-trigger) { color: #4b1a75 !important; }
html[data-a11y-contrast="1"] body :is(button, [type="submit"], [type="button"]):not(.a11y-dark-block *, #a11y-panel *, #a11y-trigger, #mby-cookie-trigger) {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border: 2px solid #0a0a0a !important;
}
html[data-a11y-contrast="1"] img,
html[data-a11y-contrast="1"] video {
  filter: none !important;
}

/* --- Subrayar enlaces: refuerza el subrayado en todo el sitio, independiente
   del tema. Algunos enlaces del diseño solo cambian de color al pasar el
   ratón/foco, lo que es invisible para quien no distingue el color. --- */
html[data-a11y-underline="1"] a:not(#a11y-panel a, #a11y-trigger, #mby-wa-trigger) {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* --- Resaltar enlaces y botones: contorno permanente (no solo al hover/foco)
   para que se distingan del resto del texto sin depender del color. Se usa
   currentColor en vez de un verde fijo: así el contorno siempre tiene
   contraste con su propio fondo, funcione sobre una sección clara u oscura
   del tema, sin tener que mantener una lista de excepciones por sección. --- */
html[data-a11y-highlight="1"] a:not(#a11y-panel a, #a11y-trigger, #mby-wa-trigger) {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}
html[data-a11y-highlight="1"] body :is(button, .wp-block-button__link, [type="submit"], [type="button"]):not(#a11y-panel *, #a11y-trigger, #mby-cookie-trigger) {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* --- Espaciado de texto (WCAG 2.2 · criterio 1.4.12): valores mínimos sobre
   el texto de lectura — interlineado, espacio entre letras/palabras y
   separación entre párrafos — sin tocar titulares, botones ni navegación
   para no romper ninguna maquetación del tema. --- */
html[data-a11y-spacing="1"] body :is(p, li, dd, dt, blockquote, figcaption, td, th, label):not(#a11y-panel, #a11y-panel *) {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-spacing="1"] body :is(p, li, blockquote):not(#a11y-panel, #a11y-panel *) {
  margin-bottom: 2em !important;
}

/* --- Pausar animaciones y movimiento: misma técnica que ya usa el tema para
   prefers-reduced-motion (sección 19 de mybeyoga.css), pero activable a mano
   desde el panel. Congela transiciones/animaciones en todo el documento,
   incluido el propio panel. --- */
html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-a11y-contrast="1"] * {
    transition: none !important;
    animation: none !important;
  }
}
