/* nav.css
   Uses variables from static/colors.css
   ------------------------------------ */

/* ------------------------------------ */
/* Top bar                              */
/* ------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
  color: var(--text);
  height: 48px;
  padding: 0 .75rem;
}

.topbar .spacer { margin-left: auto; }

/* ------------------------------------ */
/* Brand (Akoma)                        */
/* ------------------------------------ */

.topbar__brand {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 0 .75rem 0 0;
  text-decoration: none;

  flex: 0 0 auto;
  max-height: 48px;
  overflow: visible;
}

.topbar__logo {
  height: 42px;
  max-height: 42px;
  width: auto;
  max-width: 160px;
  display: block;
  object-fit: contain;

  position: relative;
  z-index: 2;

  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
  transition: transform .2s ease;
}

.topbar__brand:hover .topbar__logo {
  transform: translateY(-1px);
}

/* -------------------------------------------------- */
/* Reference-style halo (tight ring + short bloom)     */
/* Driven by Rust/WASM via CSS vars:                   */
/*   --glow-rot (deg), --glow-opacity, --glow-x/y (px) */
/* -------------------------------------------------- */

.topbar__brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  /* Constrained footprint (short reach) */
  width: 52px;
  height: 52px;

  transform: translate(
    calc(-50% + var(--glow-x, 0px)),
    calc(-50% + var(--glow-y, 0px))
  );

  border-radius: 999px;
  pointer-events: none;
  z-index: 1;

  /* Tight ring + subtle non-uniform highlights + short bloom */
  background:
    /* short bloom (doesn't travel far) */
    radial-gradient(
      circle,
      rgba(255,252,220,0.14) 0%,
      rgba(255,252,220,0.08) 34%,
      rgba(255,252,220,0.00) 58%
    ),
    /* animated ring highlights (rotation driven by --glow-rot) */
    conic-gradient(
      from calc(180deg + var(--glow-rot, 0deg)),
      rgba(255,252,220,0.00),
      rgba(255,252,220,0.32),
      rgba(255,252,220,0.00),
      rgba(255,252,220,0.24),
      rgba(255,252,220,0.00),
      rgba(255,252,220,0.18),
      rgba(255,252,220,0.00)
    );

  /* Make it a ring (tight) */
  -webkit-mask: radial-gradient(circle,
    transparent 54%,
    #000 56%,
    #000 59%,
    transparent 61%
  );
  mask: radial-gradient(circle,
    transparent 54%,
    #000 56%,
    #000 59%,
    transparent 61%
  );

  /* Crisp-ish ring, not a huge fog */
  filter: blur(2.2px);

  opacity: var(--glow-opacity, 0);
  transition: opacity .18s ease;
}

/* ------------------------------------ */
/* Nav icon links                       */
/* ------------------------------------ */

.topbar__links {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.nav-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  background: var(--bg-elevated);
  border-color: var(--border);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
}

.nav-link.is-active {
  background: var(--brand);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

.nav-link__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  pointer-events: none;
}

/* ------------------------------------ */
/* Account menu                         */
/* ------------------------------------ */

.account-menu { position: relative; }

.account-menu button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem .6rem;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.account-menu button:hover {
  background: rgba(255,255,255,.08);
  color: var(--accent);
}

.account-menu .menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: .35rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: .4rem 0;
  min-width: 180px;
  z-index: 10;
}

.account-menu .menu a {
  display: block;
  padding: .55rem .85rem;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}

.account-menu .menu a:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
}

.account-menu .menu a.active {
  color: var(--accent);
  background: rgba(255,255,255,.12);
  font-weight: 500;
}

/* ------------------------------------ */
/* Screen reader helper                 */
/* ------------------------------------ */

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