/* ============================================================
   nav.css — top navigation bar.
   Brand (compass + wordmark + subtitle) | links | actions.
   Sticky so it stays visible while scrolling through screens.
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-nav__wrap {
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

/* --- Brand cluster --- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
}
.brand__mark {
  width: 36px; height: 36px;
  animation: compassIdle 8s ease-in-out infinite;
  transform-origin: center;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.brand__sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
}

/* --- Nav links --- */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
}
.nav-links__item {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.nav-links__item:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.nav-links__item[aria-current="page"] {
  background: var(--sun-soft);
  color: var(--ink);
}

/* --- Actions cluster: theme toggle + sign-in + add-my-org --- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* --- Theme toggle button (round) --- */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms, transform 160ms;
}
.theme-toggle:hover { background: var(--surface-2); transform: rotate(20deg); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---------- Mobile ---------- */
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .site-nav { height: var(--nav-h-mob); }
  .site-nav__wrap {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
  }
  .nav-links,
  .nav-actions { display: none; }
  .nav-toggle {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    justify-self: end;
  }
  .brand__sub { display: none; }
}

/* --- Hamburger morphs into an X while the nav sheet is open.
       Rotating about the viewBox centre (11,11): each outer line
       is first slid onto that centre, then turned, so the two
       arms cross exactly there. The middle line just fades. --- */
.nav-toggle svg line {
  transform-box: view-box;
  transform-origin: 11px 11px;
  transition: transform 200ms ease, opacity 140ms ease;
}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle svg line { transition-duration: 0s; }
}

/* ============================================================
   Five nav items instead of three — Events and the Xavier Cup
   joined Discover, Organizations and About. Between the desktop
   layout and the hamburger there is a band where all five fit
   only if they tighten up, so they do.
   ============================================================ */
@media (max-width: 1080px) {
  .site-nav__wrap { gap: var(--space-3); }
  .nav-links { gap: 2px; }
  .nav-links__item { padding: 8px 10px; font-size: 13px; }
  .brand__sub { display: none; }
}