/*
 * Elysian Level 18 — Accessibility + Technical SEO
 * WCAG 2.2-aware interaction hardening; intentionally no commerce/layout rewrite.
 */

html {
  scroll-padding-top: clamp(92px, 12vw, 138px);
  scroll-padding-bottom: 92px;
}

:where(#primary, [id]:target, [tabindex="-1"]) {
  scroll-margin-top: clamp(92px, 12vw, 138px);
}

/* A visible keyboard indicator with a clear 2px perimeter. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* Do not remove native focus for browsers that do not support :focus-visible. */
@supports not selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
}

/* Keep frequent icon/action targets comfortably above WCAG 2.2's 24px minimum. */
:where(
  .elysian-menu-toggle,
  .elysian-header-action,
  .elysian-chat-launcher,
  .elysian-mobile-support-trigger,
  .v589-footer-toggle,
  .elysian-l24-rail-actions button,
  .elysian-l24-review-controls button,
  .v5132-search-clear,
  .v5132-search-submit,
  .v57-quick-add-close,
  .quantity button,
  .elysian-l11-qty-step
) {
  min-width: 44px;
  min-height: 44px;
}

/* Skip link remains usable above every sticky layer. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  inset: 12px auto auto 12px !important;
  z-index: 100000 !important;
  width: auto !important;
  height: auto !important;
  padding: 11px 16px !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #111 !important;
  border-radius: 4px;
}

/* Programmatic AJAX focus should be evident without adding cards to tab order. */
.elysian-l8-product-card:focus {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Improve required/error perception without relying on color alone. */
.woocommerce-invalid :where(input, select, textarea),
[aria-invalid="true"] {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.woocommerce-invalid label::after {
  content: " — check this field";
  font-size: .78em;
  font-weight: 600;
}

/* High-contrast users should retain borders/focus even when shadows disappear. */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }

  :where(button, .button, a.button, input, select, textarea) {
    forced-color-adjust: auto;
  }
}

@media (prefers-contrast: more) {
  :where(input, select, textarea, button, .button) {
    border-width: 2px;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}