/* Skip link, fixed top navigation and the mobile menu panel. */

/* ----- Skip link: off-screen until keyboard focus ----- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ----- Navigation ----- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.is-scrolled, .nav.is-open {
  background: rgba(11, 13, 12, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 0.95rem; color: var(--text-2); }
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__links .btn { color: var(--on-primary); }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; }
.logo__mark { width: 32px; height: 32px; flex-shrink: 0; }
/* Two-tone wordmark mirrors the banner: "Gy" in text colour, "mate" in lime. */
.logo__accent { color: var(--primary); }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 25px; }
.nav__toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__toggle { display: block; }
  /* Note: backdrop-filter on .nav makes .nav the containing block for this fixed panel.
     That only works because .nav itself sits at 0,0 at full width; keep both true. */
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 16px 24px;
    background: var(--bg); /* opaque: hero text must not show through the open menu */
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav__links a:not(.btn) { padding: 12px 0; font-size: 1.05rem; }
  .nav__links .btn { margin-top: 8px; }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; }
}