/* ==============================
  FONTS
============================== */
@font-face {
  font-family: Critters;
  src        : url("../fonts/critters.woff");
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src        : url("../fonts/Atkinson-Hyperlegible-Regular-102.woff");
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src        : url("../fonts/Atkinson-Hyperlegible-Bold-102.woff");
  font-weight: bold;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src        : url("../fonts/Atkinson-Hyperlegible-Italic-102.woff");
  font-style : italic;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src        : url("../fonts/Atkinson-Hyperlegible-BoldItalic-102.woff");
  font-weight: bold;
  font-style : italic;
}

/* Visible skip link for keyboard users */
.skip-link {
  position: absolute;
  left    : -999px;
  top     : auto;
  width   : 1px;
  height  : 1px;
  overflow: hidden;
}

.skip-link:focus,
.skip-link:active {
  left      : 1rem;
  top       : 1rem;
  width     : auto;
  height    : auto;
  padding   : .5rem 1rem;
  background: var(--text-color);
  color     : var(--background-color);
  z-index   : 9999;
}

/* Restore clear focus outlines for keyboard users without changing visual design */
:where(a, button, input, select, textarea) :focus-visible {
  outline       : 3px solid var(--highlight-color);
  outline-offset: 3px;
}

/* Make sure interactive controls are identifiable when 'all: unset' is used */
button:focus-visible {
  outline       : 3px solid var(--highlight-color);
  outline-offset: 3px;
}

/* Respect users' reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration       : 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration      : 0.001ms !important;
    scroll-behavior          : auto !important;
  }
}

/* Screen-reader helper */
.sr-only {
  position   : absolute !important;
  width      : 1px !important;
  height     : 1px !important;
  padding    : 0 !important;
  margin     : -1px !important;
  overflow   : hidden !important;
  clip       : rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border     : 0 !important;
}

button {
  all: unset;
}

/* Cursor utility classes for explicit control in templates */
.cursor-default {
  cursor: default !important;
}

.cursor-interactive {
  cursor: pointer !important;
}

.cursor-nav {
  cursor: pointer !important;
}