/**
 * Accessibility assistant — shared (neutral colors via theme tokens).
 * Mode filler/Hyla can override accents; filters stay brand-agnostic.
 *
 * Hard rules:
 * - Never apply CSS filter on <html> (breaks SVG filter refs → white screen).
 * - Colorblind matrices run on <body>; SVG defs live in <head>.
 * - "Hide images" hides product/content photos only — UI icons/SVGs stay.
 */

/* —— Overlays (capped alpha — never fully opaque wash) —— */
.hyla-a11y-shader {
  display: none;
  position: fixed;
  inset: -10%;
  z-index: 2147483000;
  pointer-events: none;
  mix-blend-mode: multiply;
}
html.hyla-a11y-blue .hyla-a11y-shader--blue {
  display: block;
  background: rgba(245, 168, 93, var(--hyla-a11y-blue, 0.3));
  mix-blend-mode: multiply;
}
html.hyla-a11y-grey .hyla-a11y-shader--grey {
  display: block;
  /* Cap alpha: full 1.0 black + saturation blend can blank some engines */
  background: rgba(0, 0, 0, var(--hyla-a11y-grey, 0.35));
  mix-blend-mode: saturation;
}
html.hyla-a11y-sat .hyla-a11y-shader--sat {
  display: block;
  background: rgba(0, 200, 0, var(--hyla-a11y-sat, 0.25));
  mix-blend-mode: saturation;
}

.hyla-a11y-svg-filters {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/*
 * Color blindness / contrast on <body> — NOT <html>.
 * filter:url(#…) on <html> includes the SVG defs in the filtered tree → white screen.
 */
html.hyla-a11y-protanomaly body { filter: url(#hyla-a11y-protanomaly); }
html.hyla-a11y-deuteranomaly body { filter: url(#hyla-a11y-deuteranomaly); }
html.hyla-a11y-tritanomaly body { filter: url(#hyla-a11y-tritanomaly); }
html.hyla-a11y-contrast:not(.hyla-a11y-protanomaly):not(.hyla-a11y-deuteranomaly):not(.hyla-a11y-tritanomaly) body {
  filter: contrast(var(--hyla-a11y-contrast, 1.15));
}
html.hyla-a11y-contrast.hyla-a11y-protanomaly body {
  filter: url(#hyla-a11y-protanomaly) contrast(var(--hyla-a11y-contrast, 1.15));
}
html.hyla-a11y-contrast.hyla-a11y-deuteranomaly body {
  filter: url(#hyla-a11y-deuteranomaly) contrast(var(--hyla-a11y-contrast, 1.15));
}
html.hyla-a11y-contrast.hyla-a11y-tritanomaly body {
  filter: url(#hyla-a11y-tritanomaly) contrast(var(--hyla-a11y-contrast, 1.15));
}

/* Keep fixed chrome readable above filtered body where possible */
html.hyla-a11y-protanomaly .hyla-a11y-exclude,
html.hyla-a11y-deuteranomaly .hyla-a11y-exclude,
html.hyla-a11y-tritanomaly .hyla-a11y-exclude,
html.hyla-a11y-contrast .hyla-a11y-exclude {
  /* children of filtered body cannot escape filter; panel stays usable enough */
}

/* Typography via CSS variables — no DOM mutation */
html.hyla-a11y-font {
  font-size: calc(100% * var(--hyla-a11y-font, 1));
}
html.hyla-a11y-line body p,
html.hyla-a11y-line body li,
html.hyla-a11y-line body .entry-content,
html.hyla-a11y-line body .hyla-home-block {
  line-height: var(--hyla-a11y-line, 1.5) !important;
}

/*
 * Hide images — PRODUCT / CONTENT photos only.
 * Never hide inline SVG icons, UI chrome, logos, payment marks.
 */
html.hyla-a11y-no-images .woocommerce img,
html.hyla-a11y-no-images .products img,
html.hyla-a11y-no-images .product img,
html.hyla-a11y-no-images .woocommerce-product-gallery img,
html.hyla-a11y-no-images .woocommerce-cart-form img,
html.hyla-a11y-no-images .hyla-cart-item img,
html.hyla-a11y-no-images .hyla-cart-line img,
html.hyla-a11y-no-images .hyla-ymal img,
html.hyla-a11y-no-images .hyla-pdp-gallery img,
html.hyla-a11y-no-images .hyla-pdp img,
html.hyla-a11y-no-images .hyla-home-block img,
html.hyla-a11y-no-images .hyla-sh-rail img,
html.hyla-a11y-no-images .hyla-sh-brands img,
html.hyla-a11y-no-images .hyla-sh-cats img,
html.hyla-a11y-no-images .hyla-sh-hero img,
html.hyla-a11y-no-images .entry-content img,
html.hyla-a11y-no-images .wp-block-image img,
html.hyla-a11y-no-images article img,
html.hyla-a11y-no-images .post img,
html.hyla-a11y-no-images img.wp-post-image,
html.hyla-a11y-no-images img.attachment-woocommerce_thumbnail,
html.hyla-a11y-no-images img.attachment-woocommerce_single,
html.hyla-a11y-no-images picture.woocommerce-product-gallery__image,
html.hyla-a11y-no-images .woocommerce picture,
html.hyla-a11y-no-images .entry-content picture,
html.hyla-a11y-no-images .hyla-home-block picture,
html.hyla-a11y-no-images .woocommerce video,
html.hyla-a11y-no-images .entry-content video,
html.hyla-a11y-no-images .hyla-pdp video {
  opacity: 0.04 !important;
  filter: grayscale(1) !important;
}

/* Content background photos */
html.hyla-a11y-no-images .hyla-home-block[style*="background-image"],
html.hyla-a11y-no-images .hyla-sh-hero[style*="background-image"],
html.hyla-a11y-no-images .woocommerce-product-gallery [style*="background-image"] {
  background-image: none !important;
  background-color: #e8e8e8 !important;
}

/* Restore UI / icons / logos / payments / canvas chrome (never hide) */
html.hyla-a11y-no-images svg,
html.hyla-a11y-no-images .icon-btn img,
html.hyla-a11y-no-images .hyla-logo img,
html.hyla-a11y-no-images .custom-logo,
html.hyla-a11y-no-images .site-logo img,
html.hyla-a11y-no-images header .logo img,
html.hyla-a11y-no-images .hyla-pay img,
html.hyla-a11y-no-images .hyla-pay-icons img,
html.hyla-a11y-no-images .hyla-payment-icons img,
html.hyla-a11y-no-images .payment-icons img,
html.hyla-a11y-no-images .woocommerce-PaymentMethods img,
html.hyla-a11y-no-images .payment_method img,
html.hyla-a11y-no-images .wc_payment_method img,
html.hyla-a11y-no-images .hyla-a11y-panel img,
html.hyla-a11y-no-images #dnx-hyla-canvas-account img,
html.hyla-a11y-no-images #dnx-hyla-canvas-menu img,
html.hyla-a11y-no-images .hyla-fnav img,
html.hyla-a11y-no-images .hyla-trust img,
html.hyla-a11y-no-images .hyla-sh-trust img,
html.hyla-a11y-no-images img.hyla-a11y-keep,
html.hyla-a11y-no-images .hyla-a11y-keep img {
  opacity: 1 !important;
  filter: none !important;
}

/* Reading light bar.
   The on-state class must NOT be `.hyla-a11y-lightbar`: that name is also the
   overlay. Putting it on <html> set display:none on the document (white page)
   and pointer-events:none, persisted in localStorage. */
.hyla-a11y-lightbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  background: rgba(26, 20, 24, 0.55);
  z-index: 20;
}
html.hyla-a11y-lightbar-on {
  display: block;
  position: static;
  width: auto;
  height: auto;
  pointer-events: auto;
  background: transparent;
  z-index: auto;
}
html.hyla-a11y-lightbar-on .hyla-a11y-lightbar {
  display: block;
}
.hyla-a11y-lightbar--top { top: 0; height: 0; }
.hyla-a11y-lightbar--bottom { bottom: 0; height: 0; }

/* —— Account canvas panel UI —— */
.hyla-a11y-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-bottom: 1.25rem;
}
.hyla-a11y-section {
  margin: 0;
  padding: 0.85rem 0.9rem 1rem;
  background: #fafafa;
  border: 1px solid rgba(26, 20, 24, 0.08);
  border-radius: 12px;
}
.hyla-a11y-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg, #1a1418);
}
.hyla-a11y-grid {
  display: grid;
  gap: 0.75rem 0.85rem;
}
.hyla-a11y-grid--3 { grid-template-columns: 1fr; }
.hyla-a11y-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 420px) {
  .hyla-a11y-grid--3 { grid-template-columns: 1fr 1fr; }
  .hyla-a11y-grid--2 { grid-template-columns: 1fr 1fr; }
  .hyla-a11y-control--full { grid-column: 1 / -1; }
}
.hyla-a11y-control {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hyla-a11y-control label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg, #1a1418);
  margin: 0;
}
.hyla-a11y-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(26,20,24,0.12), rgba(26,20,24,0.28));
  outline: none;
  cursor: pointer;
}
.hyla-a11y-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg, #1a1418);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.hyla-a11y-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg, #1a1418);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.hyla-a11y-range:focus-visible {
  outline: 2px solid var(--fg, #1a1418);
  outline-offset: 3px;
}

.hyla-a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--fg, #1a1418);
  background: #fff;
  border: 1px solid rgba(26, 20, 24, 0.14);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hyla-a11y-btn:hover {
  background: #f5f5f5;
  border-color: rgba(26, 20, 24, 0.28);
}
.hyla-a11y-btn:focus-visible {
  outline: 2px solid var(--fg, #1a1418);
  outline-offset: 2px;
}
.hyla-a11y-btn[aria-pressed="true"] {
  background: var(--fg, #1a1418);
  color: #fff;
  border-color: var(--fg, #1a1418);
}
.hyla-a11y-btn--reset {
  margin-top: 0.25rem;
  background: transparent;
  border-style: dashed;
  font-weight: 700;
}
.hyla-a11y-btn--reset:hover {
  background: rgba(26, 20, 24, 0.04);
}

/* Entry row in account list */
.hyla-account-a11y-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
.hyla-account-a11y-link .chev {
  opacity: 0.45;
  font-size: 1.1em;
}
.hyla-account-a11y-ico {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  vertical-align: -0.15em;
  opacity: 0.7;
}

@media (max-width: 899px) {
  .hyla-a11y-btn--desktop-only { display: none; }
}

/* Reduced motion: skip heavy filters */
@media (prefers-reduced-motion: reduce) {
  html.hyla-a11y-protanomaly body,
  html.hyla-a11y-deuteranomaly body,
  html.hyla-a11y-tritanomaly body,
  html.hyla-a11y-contrast body {
    filter: none;
  }
}