/*
 * Storefront accessibility fixes shipped from the theme (no core fork).
 * Linked via config `themeConfig.headTags.links`; served by the
 * `themePublicStatic` middleware from this theme's `public/` folder.
 */

/* 1. Touch targets: header icon links (search / sign in / cart) are 36x36
 *    out of the box (p-2 + a 20px svg). Grow them to the 44x44 recommended
 *    minimum without moving the icons. */
.header a,
.header button {
  min-width: 44px;
  min-height: 44px;
}

.header__middle__right a,
.header__middle__left a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 2. Footer menu links are plain 18px-tall inline text; make each link a
 *    44px target so the footer is usable on touch screens. */
.evershop-footer-menu__link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 0.5rem;
}

/* 3. Keyboard focus: the theme resets outlines, so give every focusable
 *    element a high-contrast ring that survives on light and dark surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 4. Reflow (WCAG 1.4.10): the long file paths in the sample blocks are
 *    unbreakable inline <code>, which made the page scroll sideways at phone
 *    widths. Let them wrap instead of forcing 2D scrolling. */
code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5. Honour reduced-motion for the animated/transition chrome. */
@media (prefers-reduced-motion: reduce) {
  .header a,
  .header button,
  .evershop-footer-menu__link,
  .foo-list div {
    transition: none !important;
    animation: none !important;
  }
}