/**
 * Apexaio Accessibility — Front-End Styles v1.0.4
 * Fully responsive: desktop float, mobile bottom-sheet.
 * All selectors scoped to .apexacc-* or #apexacc-*
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
  --apexacc-accent:      #6ee7f7;
  --apexacc-panel-bg:    #0f1923;
  --apexacc-btn-size:    52px;
  --apexacc-text:        #e8f4f8;
  --apexacc-text-muted:  #8ba8b8;
  --apexacc-border:      rgba(110, 231, 247, 0.18);
  --apexacc-hover-bg:    rgba(110, 231, 247, 0.08);
  --apexacc-active-bg:   rgba(110, 231, 247, 0.18);
  --apexacc-shadow:      0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(110,231,247,0.12);
  --apexacc-btn-glow:    0 4px 20px rgba(110,231,247,0.30), 0 2px 8px rgba(0,0,0,0.45);
  --apexacc-radius:      16px;
  --apexacc-t:           0.18s cubic-bezier(0.4,0,0.2,1);
  --apexacc-font-scale:  1;
}

/*
  Font scaling
  Scale the root font-size so REM-based typography responds.
  Only active when JS toggles html.apexacc-font-active.
*/
html.apexacc-font-active {
  font-size: calc(100% * var(--apexacc-font-scale)) !important;
}

/* ── Root container ────────────────────────────────────────────────────── */
#apexacc-root {
  position: static !important;
  display:  block !important;
  width:    0 !important;
  height:   0 !important;
  overflow: visible !important;
}

/* ── Skip Link ──────────────────────────────────────────────────────────── */
.apexacc-skip-link {
  position:    fixed;
  top:        -100px;
  left:        16px;
  z-index:     999999;
  padding:     10px 18px;
  background:  var(--apexacc-panel-bg);
  color:       var(--apexacc-accent);
  border:      2px solid var(--apexacc-accent);
  border-radius: 8px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size:   14px;
  font-weight: 600;
  text-decoration: none;
  transition:  top var(--apexacc-t);
  box-shadow:  var(--apexacc-shadow);
}
.apexacc-skip-link:focus {
  top:     16px;
  outline: 3px solid var(--apexacc-accent);
  outline-offset: 2px;
}

/* ── Floating Button ────────────────────────────────────────────────────── */
.apexacc-btn {
  /* Size set via JS inline, but ensure minimum touch target */
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  width:           var(--apexacc-btn-size);
  min-width:       44px;   /* WCAG 2.5.5 minimum touch target */
  min-height:      44px;
  padding:         6px;
  background:      var(--apexacc-panel-bg);
  color:           var(--apexacc-accent);
  border:          1.5px solid var(--apexacc-border);
  border-radius:   14px;
  cursor:          pointer;
  box-shadow:      var(--apexacc-btn-glow);
  touch-action:    manipulation; /* prevents 300ms delay on mobile */
  -webkit-tap-highlight-color: transparent;
  user-select:     none;
  transition:      transform var(--apexacc-t), box-shadow var(--apexacc-t),
                   background var(--apexacc-t), border-color var(--apexacc-t);
  line-height:     1;
  overflow:        hidden;
}

.apexacc-btn svg {
  width:      calc(var(--apexacc-btn-size) * 0.52);
  height:     calc(var(--apexacc-btn-size) * 0.52);
  min-width:  22px;
  min-height: 22px;
  flex-shrink: 0;
}

.apexacc-btn:hover {
  border-color: var(--apexacc-accent);
  box-shadow:   0 6px 28px rgba(110,231,247,0.45), 0 2px 8px rgba(0,0,0,0.5);
  transform:    translateY(-1px);
}
.apexacc-btn:active {
  transform: scale(0.95);
}
.apexacc-btn:focus-visible {
  outline:        3px solid var(--apexacc-accent);
  outline-offset: 3px;
}
.apexacc-btn[aria-expanded="true"] {
  background:   rgba(110,231,247,0.14);
  border-color: var(--apexacc-accent);
}
.apexacc-btn-label {
  font-family:     system-ui, -apple-system, sans-serif;
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--apexacc-text-muted);
  white-space:     nowrap;
  pointer-events:  none;
}

/* ── Panel Visibility ───────────────────────────────────────────────────── */
.apexacc-panel--hidden  { display: none !important; }
.apexacc-panel--visible { display: block; }

/* ── Panel Base ─────────────────────────────────────────────────────────── */
.apexacc-panel {
  background:        var(--apexacc-panel-bg);
  border:            1px solid var(--apexacc-border);
  border-radius:     var(--apexacc-radius);
  box-shadow:        var(--apexacc-shadow);
  font-family:       system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color:             var(--apexacc-text);
  overflow-y:        auto;
  overflow-x:        hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  box-sizing:        border-box;
  /* Width + max-height set by JS for full responsiveness */
}

/* Scrollbar */
.apexacc-panel::-webkit-scrollbar        { width: 4px; }
.apexacc-panel::-webkit-scrollbar-track  { background: transparent; }
.apexacc-panel::-webkit-scrollbar-thumb  { background: var(--apexacc-border); border-radius: 2px; }

/* Mobile bottom-sheet extras */
.apexacc-panel--mobile {
  border-bottom-left-radius:  12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius:     16px;
  border-top-right-radius:    16px;
}

/* ── Panel Inner ────────────────────────────────────────────────────────── */
.apexacc-panel-inner {
  display:        flex;
  flex-direction: column;
  min-height:     0;
}

/* ── Panel Header ───────────────────────────────────────────────────────── */
.apexacc-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px 12px;
  border-bottom:   1px solid var(--apexacc-border);
  position:        sticky;
  top:             0;
  background:      var(--apexacc-panel-bg);
  z-index:         1;
  flex-shrink:     0;
}

/* Mobile: add drag handle affordance */
.apexacc-panel--mobile .apexacc-panel-header::before {
  content:       '';
  position:      absolute;
  top:           6px;
  left:          50%;
  transform:     translateX(-50%);
  width:         36px;
  height:        4px;
  background:    var(--apexacc-border);
  border-radius: 2px;
}

.apexacc-panel-title {
  margin:          0;
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--apexacc-accent);
}

.apexacc-close-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;  /* larger touch target */
  height:          36px;
  padding:         0;
  background:      transparent;
  color:           var(--apexacc-text-muted);
  border:          1px solid transparent;
  border-radius:   8px;
  cursor:          pointer;
  flex-shrink:     0;
  touch-action:    manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:      background var(--apexacc-t), color var(--apexacc-t);
}
.apexacc-close-btn svg    { width: 18px; height: 18px; }
.apexacc-close-btn:hover  { background: var(--apexacc-hover-bg); color: var(--apexacc-text); }
.apexacc-close-btn:focus-visible { outline: 2px solid var(--apexacc-accent); outline-offset: 2px; }

/* ── Panel Body ─────────────────────────────────────────────────────────── */
.apexacc-panel-body {
  padding:    6px 0;
  overflow-y: auto;
  flex:       1;
}

.apexacc-section {
  padding:       10px 16px;
  border-bottom: 1px solid var(--apexacc-border);
}
.apexacc-section:last-child { border-bottom: none; }

.apexacc-section-title {
  margin:          0 0 10px;
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--apexacc-text-muted);
}

/* ── Font Controls ──────────────────────────────────────────────────────── */
.apexacc-font-controls {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.apexacc-font-display {
  flex:             1;
  text-align:       center;
  font-size:        16px;
  font-weight:      700;
  color:            var(--apexacc-text);
  font-feature-settings: "tnum";
}

.apexacc-ctrl-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           42px; /* bigger touch target */
  height:          42px;
  padding:         0;
  background:      var(--apexacc-hover-bg);
  color:           var(--apexacc-text);
  border:          1px solid var(--apexacc-border);
  border-radius:   10px;
  cursor:          pointer;
  flex-shrink:     0;
  touch-action:    manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:      background var(--apexacc-t), border-color var(--apexacc-t);
}
.apexacc-ctrl-btn svg    { width: 18px; height: 18px; }
.apexacc-ctrl-btn:hover  { background: var(--apexacc-active-bg); border-color: var(--apexacc-accent); color: var(--apexacc-accent); }
.apexacc-ctrl-btn:focus-visible { outline: 2px solid var(--apexacc-accent); outline-offset: 2px; }

/* ── Contrast Mode Grid ─────────────────────────────────────────────────── */
.apexacc-mode-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.apexacc-mode-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             7px;
  padding:         12px 8px;
  background:      var(--apexacc-hover-bg);
  color:           var(--apexacc-text);
  border:          1px solid var(--apexacc-border);
  border-radius:   12px;
  cursor:          pointer;
  font-family:     inherit;
  font-size:       11px;
  font-weight:     600;
  text-align:      center;
  touch-action:    manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:      background var(--apexacc-t), border-color var(--apexacc-t), color var(--apexacc-t);
  min-height:      64px; /* comfortable touch target */
}
.apexacc-mode-btn:hover  { background: var(--apexacc-active-bg); border-color: var(--apexacc-accent); }
.apexacc-mode-btn.is-active {
  background:   rgba(110,231,247,0.18);
  border-color: var(--apexacc-accent);
  color:        var(--apexacc-accent);
}
.apexacc-mode-btn:focus-visible { outline: 2px solid var(--apexacc-accent); outline-offset: 2px; }

.apexacc-mode-swatch {
  width:        30px;
  height:       30px;
  border-radius: 50%;
  border:        2px solid rgba(255,255,255,0.15);
  flex-shrink:   0;
}
.apexacc-mode-swatch-high     { background: linear-gradient(135deg, #000 50%, #fff 50%); }
.apexacc-mode-swatch-bw       { background: linear-gradient(135deg, #888 0%, #fff 100%); }
.apexacc-mode-swatch-invert   { background: linear-gradient(135deg, #c66 0%, #66c 100%); }
.apexacc-mode-swatch-readable { background: linear-gradient(135deg, #1a1a1a 0%, #f5f0e8 100%); }

/* ── Toggle Switches ────────────────────────────────────────────────────── */
.apexacc-toggles {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.apexacc-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 0; /* larger touch target height */
  gap:             12px;
}

.apexacc-toggle-label {
  font-size:   13px;
  font-weight: 500;
  color:       var(--apexacc-text);
  flex:        1;
  cursor:      pointer;
}

.apexacc-toggle-switch {
  position:     relative;
  width:        48px;  /* wider = easier to tap */
  height:       26px;
  padding:      0;
  background:   transparent;
  border:       none;
  cursor:       pointer;
  flex-shrink:  0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.apexacc-toggle-switch:focus-visible .apexacc-toggle-track {
  outline:        2px solid var(--apexacc-accent);
  outline-offset: 2px;
}

.apexacc-toggle-track {
  display:       block;
  width:         48px;
  height:        26px;
  background:    rgba(255,255,255,0.12);
  border-radius: 13px;
  position:      relative;
  transition:    background var(--apexacc-t);
  border:        1px solid rgba(255,255,255,0.08);
}
.apexacc-toggle-thumb {
  display:       block;
  position:      absolute;
  top:           4px;
  left:          4px;
  width:         16px;
  height:        16px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform var(--apexacc-t), background var(--apexacc-t);
  box-shadow:    0 1px 4px rgba(0,0,0,0.35);
}
.apexacc-toggle-switch.is-on .apexacc-toggle-track {
  background:   rgba(110,231,247,0.35);
  border-color: var(--apexacc-accent);
}
.apexacc-toggle-switch.is-on .apexacc-toggle-thumb {
  transform:  translateX(22px);
  background: var(--apexacc-accent);
}

/* ── Panel Footer ───────────────────────────────────────────────────────── */
.apexacc-panel-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  border-top:      1px solid var(--apexacc-border);
  position:        sticky;
  bottom:          0;
  background:      var(--apexacc-panel-bg);
  flex-shrink:     0;
  /* Safe area inset for iOS home bar */
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

.apexacc-reset-btn {
  display:         flex;
  align-items:     center;
  gap:             6px;
  padding:         9px 14px;
  background:      transparent;
  color:           var(--apexacc-text-muted);
  border:          1px solid var(--apexacc-border);
  border-radius:   10px;
  cursor:          pointer;
  font-family:     inherit;
  font-size:       12px;
  font-weight:     600;
  touch-action:    manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:      background var(--apexacc-t), color var(--apexacc-t), border-color var(--apexacc-t);
}
.apexacc-reset-btn svg   { width: 14px; height: 14px; }
.apexacc-reset-btn:hover { background: var(--apexacc-hover-bg); color: var(--apexacc-accent); border-color: var(--apexacc-accent); }
.apexacc-reset-btn:focus-visible { outline: 2px solid var(--apexacc-accent); outline-offset: 2px; }

.apexacc-branding {
  font-size:   10px;
  color:       var(--apexacc-text-muted);
  text-decoration: none;
  opacity:     0.7;
  transition:  opacity 0.2s;
}
.apexacc-branding:hover { opacity: 1; color: var(--apexacc-accent); }

/* ─────────────────────────────────────────────────────────────────────── */
/* ── BODY CLASS EFFECTS ─────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════ */
/* ── ENHANCED FONT SCALING — v1.0.9 ──────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
 * PROBLEM: Modern themes and sliders (Smart Slider 3, Elementor, etc.) 
 * set explicit pixel font-sizes that ignore percentage-based body scaling.
 *
 * SOLUTION: CSS custom property + universal selector with !important
 * to force-scale ALL text including px-based elements.
 */

/* Keep legacy body classes for backwards compatibility */
body.apexacc-font-90  { font-size: 0.90em; }
body.apexacc-font-95  { font-size: 0.95em; }
body.apexacc-font-100 { font-size: 1.00em; }
body.apexacc-font-105 { font-size: 1.05em; }
body.apexacc-font-110 { font-size: 1.10em; }
body.apexacc-font-115 { font-size: 1.15em; }
body.apexacc-font-120 { font-size: 1.20em; }
body.apexacc-font-125 { font-size: 1.25em; }
body.apexacc-font-130 { font-size: 1.30em; }
body.apexacc-font-135 { font-size: 1.35em; }
body.apexacc-font-140 { font-size: 1.40em; }

/* NEW: Universal scaling via CSS variable (works with px-based elements) */
:root.apexacc-font-active {
  /* JS sets this dynamically based on user's choice */
  --apexacc-font-scale: 1.1;
}

/* Apply to ALL elements except our own UI and WP admin UI */
:root.apexacc-font-active body *:not([class*="apexacc-"]):not(#apexacc-root):not(#apexacc-root *):not(#wpadminbar):not(#wpadminbar *):not(.wp-admin):not(.wp-admin *) {
  font-size: calc(1em * var(--apexacc-font-scale)) !important;
}

/* Ensure our panel/button text AND WordPress admin elements stay at original size */
.apexacc-panel,
.apexacc-panel *,
.apexacc-btn,
.apexacc-btn *,
.apexacc-skip-link,
#wpadminbar,
#wpadminbar *,
body.wp-admin,
body.wp-admin * {
  font-size: initial !important;
}


/* High Contrast */
body.apexacc-contrast-high { background-color: #000 !important; color: #fff !important; }
body.apexacc-contrast-high *:not([class*="apexacc-"]):not(#apexacc-root):not(.apexacc-panel):not(.apexacc-btn) {
  background-color: #000 !important; color: #fff !important;
  border-color: #fff !important; text-shadow: none !important;
}
body.apexacc-contrast-high a:not([class*="apexacc-"]) { color: #ff0 !important; text-decoration: underline !important; }
body.apexacc-contrast-high img, body.apexacc-contrast-high video,
body.apexacc-contrast-high canvas { filter: none !important; }

/* WCAG FIX: Preserve focus indicators in high contrast mode */
body.apexacc-contrast-high *:focus,
body.apexacc-contrast-high *:focus-visible {
  outline: 3px solid yellow !important;
  outline-offset: 2px !important;
}

/* Black & White */
body.apexacc-bw { filter: grayscale(1); }
body.apexacc-bw img, body.apexacc-bw video, body.apexacc-bw canvas,
body.apexacc-bw [data-apexacc-no-filter] { filter: none !important; }
body.apexacc-bw #apexacc-root { filter: none; }

/* Invert Colors (safe scope)
   We DO NOT filter <body> directly because it can create rendering/stacking issues
   with some themes/builders (e.g., Astra). Instead we add a scope class to the
   primary theme wrapper (#page, #site, etc.) and filter that wrapper.
*/
body.apexacc-invert { filter: none !important; }

.apexacc-invert-scope {
  filter: invert(1) hue-rotate(180deg);
}

/* Cancel inversion for media + explicitly excluded elements */
.apexacc-invert-scope img,
.apexacc-invert-scope video,
.apexacc-invert-scope canvas,
.apexacc-invert-scope [data-apexacc-no-filter] {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* If the scope must be <body> as a last resort, keep the plugin UI readable */
body.apexacc-invert-body #apexacc-root {
  filter: invert(1) hue-rotate(180deg);
}

/* Readable */
body.apexacc-readable { background-color: #f5f0e8 !important; color: #1a1a1a !important; }
body.apexacc-readable *:not([class*="apexacc-"]):not(#apexacc-root):not(.apexacc-panel):not(.apexacc-btn) {
  background-color: transparent; color: inherit; line-height: 1.7;
}
body.apexacc-readable a:not([class*="apexacc-"]) { color: #1a4f8e !important; }

/* Reduce Motion */
body.apexacc-reduce-motion *:not([data-apexacc-allow-motion="true"]):not([class*="apexacc-"]) {
  animation-duration:      0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration:     0.001ms !important;
  scroll-behavior:         auto !important;
  /* Stop transforms too */
  transform: none !important;
}

/* Pause autoplay videos in reduce motion mode */
body.apexacc-reduce-motion video[autoplay] {
  animation-play-state: paused !important;
}

/* Stop CSS-based parallax effects */
body.apexacc-reduce-motion * {
  background-attachment: scroll !important;
}

/* Link Emphasis */
body.apexacc-links-underline a:not([class*="apexacc-"]) {
  text-decoration:          underline !important;
  text-underline-offset:    3px !important;
  text-decoration-thickness: 2px !important;
}

/* Reading Aid */
body.apexacc-reading-aid *:focus,
body.apexacc-reading-aid *:hover {
  outline:        2px solid var(--apexacc-accent) !important;
  outline-offset: 2px !important;
  border-radius:  2px;
}

/* ── Respect prefers-reduced-motion in CSS too ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .apexacc-btn, .apexacc-panel, .apexacc-toggle-thumb,
  .apexacc-ctrl-btn, .apexacc-mode-btn, .apexacc-close-btn, .apexacc-reset-btn {
    transition-duration: 0.001ms !important;
    animation: none !important;
  }
}

/* ── Mobile-specific panel tweaks ───────────────────────────────────────── */
@media (max-width: 599px) {
  /* Slightly larger text in panel on mobile for readability */
  .apexacc-toggle-label { font-size: 14px; }
  .apexacc-section-title { font-size: 11px; }
  .apexacc-font-display { font-size: 18px; }

  /* 2-column mode grid looks great on mobile too */
  .apexacc-mode-grid { gap: 10px; }
  .apexacc-mode-btn  { min-height: 70px; padding: 14px 8px; }

  /* Toggle rows more spaced for touch */
  .apexacc-toggle-row { padding: 12px 0; }
}

/* ── Safe area support (iPhone notch / home bar) ────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .apexacc-panel--mobile .apexacc-panel-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ── Screen Reader Only Text (WCAG best practice) ──────────────────────── */
.sr-only {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}