/*
 * Keyboard focus for every storefront page, whatever the theme does with
 * outlines. Linked right after the theme's stylesheet by
 * theme_head_tags_for() (includes/themes.php).
 *
 * The ring is the theme's ink on a halo of its paper: two colours far apart,
 * so one of them stands out against whatever it sits on, light or dark.
 * :not(#px-focus-off) lifts the rule above a theme's own `outline: none`
 * (ids included) and !important above its !important ones. A theme can
 * recolour it with --px-focus-ring / --px-focus-halo but can't switch it off
 * by accident.
 *
 * The two colours are taken from the page's own ink and paper, not a
 * section's: a footer band or a panel that redefines --ink/--paper for its
 * own colours (sometimes to the same value) would otherwise hide the ring.
 */
:root {
  --px-focus-ring: var(--ink, #15131a);
  --px-focus-halo: var(--paper, #ffffff);
}

/* A date field's own calendar button takes focus without :focus-visible. */
:root :focus-visible:not(#px-focus-off),
:root input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus:not(#px-focus-off) {
  outline: 2px solid var(--px-focus-ring, var(--ink, #15131a)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)) !important;
}

/* Something focused by script so a screen reader starts there (the page's
   main region after the skip link, a dialog with nothing to press yet). */
:root [tabindex="-1"]:focus:not(#px-focus-off),
:root [data-px-focus-target]:focus:not(#px-focus-off) {
  outline: none !important;
  box-shadow: none !important;
}

.px-skip-link {
  position: fixed;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 2147483000;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink, #15131a);
  color: var(--paper, #ffffff);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.px-skip-link:focus {
  transform: none;
}