:root {
  --brand-color: #1976d2;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  text-decoration: none;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid #000;
  outline-offset: 2px;
}

a:focus,
button:focus,
[tabindex]:focus {
  outline: 5px solid !important;
  outline-offset: 5px !important;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-script {
  background: #fff3cd;
  color: #856404;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid #ffeeba;
  border-radius: 4px;
}