/* Skip Link - visually hidden by default */
.rlb-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: var(--text-color-inverse);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--border-radius) 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

/* Visible on keyboard focus */
.rlb-skip-link:focus {
  position: absolute;
  top: 0;
  left: 0;
  clip: auto;
  overflow: visible;
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}


/* STYLES FOR SKIP NAVIGATION DEMO */
/* Demo only */

.rlb-skip-nav-demo {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  min-height: 200px;
}

.rlb-skip-nav-demo__nav {
  background: var(--gray-200);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.rlb-skip-nav-demo__nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rlb-skip-nav-demo__nav a {
  text-decoration: none;
  color: var(--primary-color-hover);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
}

.rlb-skip-nav-demo__nav a:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

.rlb-skip-nav-demo__main {
  padding: 1.5rem;
  background: var(--background-color);
}

.rlb-skip-nav-demo__main:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: -3px;
}

.rlb-skip-nav-demo__main h3 {
  margin-top: 0;
}

.rlb-skip-nav-demo__main kbd {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
  font-family: monospace;
  background: var(--gray-200);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 0 var(--gray-400);
}