/* ==========================================================================
   a11y.css: accessibility preferences and widget UI (Alechko Meats site)

   Loaded after main.css on every page (render blocking, so saved modes apply
   before first paint). The widget UI lives in a11y-widget.css, which a11y.js
   loads on demand.

   1. Token fallbacks (zero specificity, main.css always wins)
   2. Preference modes on <html>
      data-a11y-text, a11y-contrast, a11y-light, a11y-grayscale,
      a11y-links, a11y-headings, a11y-readable, a11y-spacing,
      a11y-cursor, a11y-focus, no-motion
   3. Widget: trigger, tooltip, dialog panel, controls
   4. Reading guide
   5. Small screens, forced colours, print
   ========================================================================== */


/* 1. Token fallbacks
   Only used if main.css fails to load, so the widget stays legible. */
:where(:root) {
  --bg: #0d0d0f;
  --bg-elev: #15161a;
  --bg-elev-2: #1f2026;
  --text: #f7f3ee;
  --text-muted: #c2bab0;
  --accent: #ce1830;
  --accent-strong: #ff4d5e;
  --accent-ink: #ffffff;
  --champagne: #f7f471;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .24);
  --glass-bg: rgba(21, 22, 26, .66);
  --glass-border: rgba(255, 255, 255, .12);
  --focus: #f7f471;
  --success: #7fd1a8;
  --danger: #ff9c8a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7);
  --font-display: "Karantina", "Heebo", system-ui, sans-serif;
  --font-body: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
}


/* ==========================================================================
   2. Preference modes
   ========================================================================== */

/* 2.1 Text size: the site sizes type and most spacing in rem. */
html[data-a11y-text="-1"] { font-size: 90%; }
html[data-a11y-text="1"]  { font-size: 112.5%; }
html[data-a11y-text="2"]  { font-size: 125%; }
html[data-a11y-text="3"]  { font-size: 150%; }


/* 2.2 High contrast: strict black, white, yellow and cyan palette. */
html.a11y-contrast {
  --yellow: #FFD500;
  --bg: #000000;
  --bg-elev: #000000;
  --bg-elev-2: #111111;
  --text: #FFFFFF;
  --text-muted: #FFFFFF;
  --accent: #FFD500;
  --accent-strong: #FFE866;
  --accent-ink: #000000;
  --champagne: #FFE866;
  --line: #FFFFFF;
  --line-strong: #FFFFFF;
  --glass-bg: #000000;
  --glass-border: #FFFFFF;
  --focus: #00E5FF;
  --success: #7CFFB2;
  --danger: #FF9C8A;
  --shadow: none;
  color-scheme: dark;
  background-color: #000000;
}

html.a11y-contrast .decor { display: none !important; }

html.a11y-contrast *,
html.a11y-contrast *::before,
html.a11y-contrast *::after {
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Remove gradients, glows and textures; real images keep their content. */
html.a11y-contrast :not(img, picture, svg, video, canvas, iframe, [role="img"]),
html.a11y-contrast *::before,
html.a11y-contrast *::after {
  background-image: none !important;
}

html.a11y-contrast a {
  text-decoration-line: underline !important;
  text-underline-offset: .2em;
}

html.a11y-contrast :is(input, select, textarea) {
  border-color: var(--line) !important;
}

html.a11y-contrast :focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}

html.a11y-contrast ::selection {
  background: #FFD500;
  color: #000000;
}


/* 2.3 Light background: warm paper palette, every text pair at least 4.5:1. */
html.a11y-light {
  --bg: #FAF7F2;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #F1EBE1;
  --text: #1A1714;
  --text-muted: #4A433A;
  --accent: #B3122B;
  --accent-strong: #9E0F24;
  --accent-ink: #FFFFFF;
  --champagne: #6B5B00;
  --yellow: #6B5B00;
  --line: rgba(26, 23, 20, .14);
  --line-strong: rgba(26, 23, 20, .32);
  --glass-bg: rgba(255, 255, 255, .8);
  --glass-border: rgba(26, 23, 20, .16);
  --focus: #0B57D0;
  --success: #1B6B45;
  --danger: #B3261E;
  --shadow: 0 1px 2px rgba(26, 23, 20, .06), 0 14px 36px -14px rgba(26, 23, 20, .22);
  color-scheme: light;
  background-color: #FAF7F2;
}

html.a11y-light .decor { opacity: .35 !important; }

html.a11y-light ::selection {
  background: #B3122B;
  color: #FFFFFF;
}


/* 2.4 Grayscale.
   A fixed backdrop-filter layer on the root greys out everything beneath it
   without putting a filter on any ancestor, so position:fixed and sticky
   elements keep working. Browsers without backdrop-filter fall back to a
   filter on the top-level page blocks (never on <html> or the widget). */
html.a11y-grayscale::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  -webkit-backdrop-filter: grayscale(1);
  backdrop-filter: grayscale(1);
}

@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  html.a11y-grayscale::before { content: none; }
  html.a11y-grayscale body > :not(.a11y-root) { filter: grayscale(1); }
}


/* 2.5 Link highlighting */
html.a11y-links a {
  text-decoration-line: underline !important;
  text-decoration-thickness: max(2px, .08em) !important;
  text-underline-offset: .22em !important;
}

html.a11y-links a:not(:focus-visible) {
  outline: 2px dashed currentColor !important;
  outline-offset: 3px !important;
}


/* 2.6 Heading highlighting (page content only, not the widget) */
html.a11y-headings body > :not(.a11y-root) :is(h1, h2, h3, h4, h5, h6) {
  outline: 2px solid var(--accent) !important;
  outline-offset: .3em !important;
  border-radius: 2px;
}


/* 2.7 Readable font */
html.a11y-readable {
  --font-display: Arial, "Segoe UI", system-ui, sans-serif;
  --font-body: Arial, "Segoe UI", system-ui, sans-serif;
}

html.a11y-readable body,
html.a11y-readable body * {
  font-family: Arial, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: normal !important;
}


/* 2.8 Text spacing (WCAG 1.4.12 values), page content only.
   More specific than 2.7, so it wins when both are on. */
html.a11y-spacing body > :not(.a11y-root),
html.a11y-spacing body > :not(.a11y-root) * {
  line-height: 1.5 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}

html.a11y-spacing body > :not(.a11y-root) p {
  margin-block-end: 2em !important;
}


/* 2.9 Large cursor (48px arrow and pointing hand, black with a white edge) */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("../img/cursor-arrow.svg") 6 3, auto !important;
}

html.a11y-cursor :is(a[href], button:not(:disabled), [role="button"], summary, label, select,
  input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]),
html.a11y-cursor :is(a[href], button:not(:disabled), [role="button"], summary, label) * {
  cursor: url("../img/cursor-hand.svg") 17 4, pointer !important;
}

html.a11y-cursor :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"]), textarea, [contenteditable="true"]) {
  cursor: text !important;
}


/* 2.10 Stronger focus indicator */
html.a11y-focus :focus-visible,
html.a11y-focus :is(input, select, textarea):focus {
  outline: 4px solid var(--focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px rgba(247, 244, 113, .35) !important;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--focus) 35%, transparent) !important;
}


/* 2.11 Stop animations: set by the boot script (saved choice or OS setting)
   or by the widget. main.js also stops GSAP, Lenis and the marquee. */
html.no-motion {
  scroll-behavior: auto !important;
}

html.no-motion *,
html.no-motion *::before,
html.no-motion *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Kept in its own rule: browsers without view transitions drop only this one. */
html.no-motion::view-transition-group(*),
html.no-motion::view-transition-old(*),
html.no-motion::view-transition-new(*) {
  animation: none !important;
}


/* 2.12 Site-specific adjustments (Alechko)
   Brand surfaces that are not token driven: marble slabs, the cuts map,
   the thaw section and text placed on the red accent. */

/* High contrast: text on accent fills turns black on the yellow accent */
html.a11y-contrast :is(.btn-red, .btn-red:hover, .price, .ribbon--red, .ribbon-word, .badge-core, .how-icon, .fab-cart, .dock-primary, .social a:hover),
html.a11y-contrast :is(.cut-chips input:checked + .cut-chip, .doneness-track input:checked + label, .doneness-track input:checked + label span, .seg input:checked + label),
html.a11y-contrast .hours tr.is-today th::after {
  color: #000000 !important;
}
html.a11y-contrast .btn-pill {
  background-color: var(--accent) !important;
  color: #000000 !important;
}
html.a11y-contrast .lab,
html.a11y-contrast .how,
html.a11y-contrast .thaw,
html.a11y-contrast .thaw-step,
html.a11y-contrast .hero-bg::before,
html.a11y-contrast .cta-bg::before {
  background-color: #000000 !important;
}
html.a11y-contrast .thaw-step { border-color: #FFFFFF !important; }
html.a11y-contrast .thaw-num { background: #FFD500 !important; color: #000000 !important; }
html.a11y-contrast .ribbon--cream { background: #FFFFFF !important; color: #000000 !important; }
html.a11y-contrast .cow-cut.is-active { fill: #FFD500 !important; }
html.a11y-contrast .cow-label.is-active { fill: #000000 !important; }
html.a11y-contrast :is(.thaw-frost, .hero-rim, .hero-glow, .cta-glow, .steam, .grain) { display: none !important; }

/* Light background: replace the dark marble and fixed dark surfaces */
html.a11y-light .hero-bg::before,
html.a11y-light .cta-bg::before,
html.a11y-light .site-footer,
html.a11y-light .mobile-menu,
html.a11y-light .deal-more .deal-card {
  background-image: none !important;
  background-color: var(--bg-elev-2) !important;
}
html.a11y-light .hero-bg::after { background: none !important; }
html.a11y-light .lab,
html.a11y-light .how { background: var(--bg) !important; }
html.a11y-light :is(.site-header.is-scrolled, .dock) { background-color: rgba(250, 247, 242, .95) !important; }
html.a11y-light :is(.status, .thaw-step, .ribbons-toggle, .carousel-btn) { background: var(--bg-elev) !important; }
html.a11y-light .thaw { background-color: var(--bg-elev-2) !important; }
html.a11y-light .map-facade { background: var(--bg-elev-2) !important; }
html.a11y-light :is(.field input, .field textarea) { background: #FFFFFF !important; }
html.a11y-light :is(.btn-ghost, .cut-chip) { background-color: rgba(26, 23, 20, .03) !important; }
html.a11y-light .cut-chips input:checked + .cut-chip { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #FFFFFF !important; }
html.a11y-light :is(.grain, .embers, .hero-glow, .cta-glow, .hero-rim, .thaw-frost, .steam) { display: none !important; }
html.a11y-light :is(.hero-bigword, .footer-wordmark, .how-num) { -webkit-text-stroke-color: rgba(26, 23, 20, .16) !important; }
html.a11y-light .cart-count { background: var(--accent) !important; color: #FFFFFF !important; }
html.a11y-light .cow-body { fill: #ECE5DA !important; }
html.a11y-light .cow-farleg { fill: #DDD4C7 !important; stroke: rgba(26, 23, 20, .45) !important; }
html.a11y-light :is(.cow-outline, .cow-detail) { stroke: #1A1714 !important; }
html.a11y-light .cow-eye,
html.a11y-light .cow-tuft { fill: #1A1714 !important; }
html.a11y-light .cow-label { fill: #1A1714 !important; }
html.a11y-light .cow-label.is-active { fill: #FFFFFF !important; }
html.a11y-light .cow-cut { stroke: rgba(26, 23, 20, .35) !important; }
html.a11y-light .badge-ring { fill: #1A1714 !important; }
html.a11y-light .fab-wa { color: #0b3b1e !important; }
html.a11y-light .logo-for-dark { display: none !important; }
html.a11y-light .logo-for-light { display: block !important; }