/* Skip to main content link: hidden until it receives keyboard focus */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background: #000;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff !important;
  outline-offset: -6px;
}

/* The skip link target is focused by script only, so it needs no outline */
#main-content:focus {
  outline: none;
}

/*
 * Visible keyboard focus on every interactive element. Two tones (a white halo
 * inside a black ring) so it shows on light, dark and coloured backgrounds.
 * !important on the outline overrides plugins that remove it (Cookie Law Info,
 * Instagram Feed). Script-focused targets with tabindex="-1" are excluded.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
  transition: none;
}

/* Map markers sit on a dark map, so use a white ring with a black halo instead */
.mapboxgl-marker .eaf-venue-marker:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #000;
}