/* nav-island.css
   Self-contained, scoped nav island for legacy/bespoke pages that are not yet
   on the build system. Depends ONLY on tokens.css custom properties. Every rule
   is scoped under .nav-island (or .skip-link) so it cannot collide with a host
   page's own classes (.btn, .card, etc.). Pair with: tokens.css + nav.js. */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: var(--space-8) var(--space-16);
  background: var(--orange);
  color: #000;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}
.skip-link:focus { clip: auto; clip-path: none; overflow: visible; white-space: normal; }

.nav-island {
  position: sticky;
  top: var(--space-16);
  margin: var(--space-16) auto 0;
  max-width: var(--page-max);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-16);
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  z-index: 1000;
}
.nav-island.scrolled { background: var(--nav-bg-scrolled); }
.nav-island .nav-brand { display: flex; align-items: center; gap: var(--space-8); text-decoration: none; flex-shrink: 0; }
.nav-island .nav-wordmark { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--fg); line-height: 1; }
.nav-island .nav-wordmark em { font-style: normal; color: var(--muted); }
.nav-island .nav-links { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-24); list-style: none; margin: 0; padding: 0; position: static; inset: auto; width: auto; max-width: none; height: auto; background: transparent; border: 0; box-shadow: none; }
.nav-island .nav-links a { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--text-caption); color: var(--fg-2); text-decoration: none; letter-spacing: 0.1em; }
.nav-island .nav-links a:hover { color: var(--fg); }
.nav-island .nav-actions { display: flex; align-items: center; gap: var(--space-8); flex-shrink: 0; }
.nav-island .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  color: var(--fg-2); font-family: var(--font-mono); font-size: 14px; cursor: pointer;
}
.nav-island .theme-toggle::before { content: "\25D1"; }
.nav-island .theme-toggle:hover { border-color: var(--hair-active); color: var(--fg); }
.nav-island .btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--text-caption); font-weight: var(--fw-medium); line-height: 1;
  padding: var(--space-8) var(--space-16);
  background: var(--orange); color: #000; border: 1px solid var(--orange);
  border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap;
}
.nav-island .nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid var(--hair); border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer;
}
.nav-island .nav-burger::before { content: "\2261"; }
.nav-island .nav-burger[aria-expanded="true"]::before { content: "\2715"; }

@media (max-width: 1024px) {
  .nav-island { flex-wrap: wrap; border-radius: var(--radius-lg); gap: var(--space-12); }
  .nav-island .nav-burger { display: inline-flex; }
  .nav-island .nav-links {
    display: none; flex-direction: column; align-items: flex-start; width: 100%;
    gap: var(--space-4); padding: var(--space-12) 0 var(--space-8); border-top: 1px solid var(--hair);
  }
  .nav-island.menu-open .nav-links { display: flex; }
}