/* Gateside Accessibility Companion */

/* Visually hidden text (e.g. "(opens in a new tab)"). */
.ibs-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* WCAG 2.4.7: a focus indicator that stays visible on light, dark and yellow backgrounds. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus {
  outline: 3px solid #1a1a1a !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/*
 * WCAG 1.4.3: colour chosen by ibs-a11y.js for text that failed contrast. Hover and focus are
 * excluded so the theme's own interaction colours keep working.
 */
[data-ibs-contrast]:not(:hover):not(:focus),
html body :is(#Wrapper, #Content, #Footer, #Header, #Top_bar, #Side_slide) [data-ibs-contrast][data-ibs-contrast]:not(:hover):not(:focus) {
  color: var(--ibs-contrast-color) !important;
}

/*
 * The theme animates buttons with "transition: all .3s". Keep every other property animated, but
 * apply the corrected text colour immediately (no half-faded, failing intermediate colour).
 */
[data-ibs-contrast] {
  transition-property: background-color, border-color, box-shadow, opacity, transform !important;
}

/*
 * Mobile slide-in menu (Betheme #Side_slide): the theme paints the links #414141 on a #4a494a
 * panel (contrast 1.1:1, effectively invisible). Make them white (about 9:1). The green
 * "order online" button is excluded; the script gives it its own passing text colour.
 */
html body #Side_slide .menu_wrapper a:not(.action_button):not(.button),
html body #Side_slide #menu a:not(.action_button):not(.button),
html body #Side_slide .menu li a:not(.action_button):not(.button) {
  color: #ffffff !important;
}
/* The link text sits in a <span> that carries its own #414141, so cover it as well. */
html body #Side_slide .menu li a:not(.action_button):not(.button) span,
html body #Side_slide #menu a:not(.action_button):not(.button) span {
  color: #ffffff !important;
}
html body #Side_slide .menu li a:not(.action_button):not(.button):hover,
html body #Side_slide .menu li a:not(.action_button):not(.button):focus,
html body #Side_slide .menu li a:not(.action_button):not(.button):hover span,
html body #Side_slide .menu li a:not(.action_button):not(.button):focus span {
  color: #ffffff !important;
  text-decoration: underline;
}

/*
 * OneTap ships ".onetap-container-toggle .onetap-toggle:focus { outline: 0 !important }", which is
 * more specific than the generic ring above, so the accessibility button itself had no visible
 * focus. Same ring, higher specificity.
 */
html body .onetap-container-toggle .onetap-toggle:focus,
html body .onetap-container-toggle .onetap-toggle:focus-visible {
  outline: 3px solid #1a1a1a !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}