/* ==========================================================================
   Site header — fixed navbar of the public pages
   Logo · primary nav (+ auth buttons) · language · account menu · mobile toggle
   js/main.js adds .is-scrolled on scroll and toggles body.menu-open.
   Widths (the labels come from Language Data, Georgian ones are much longer):
     ≥ 1280px  full bar · 1101–1279px compact (tighter links, avatar-only account menu)
     · ≤ 1100px menu behind the toggle (also .account-menu--compact-md, account-menu.css)
   Signed-in users see the same links; only the log-in buttons become an "add transaction" icon + account menu.
   ========================================================================== */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-navbar);
  --dropdown-z: var(--z-navbar-menu);   /* lift the account dropdown above the nav */
  height: var(--nav-h);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
}
.navbar.is-scrolled { background: var(--glass); border-color: var(--hairline); box-shadow: 0 10px 30px -20px rgba(30, 27, 75, .3); }

.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.navbar__lang { margin-left: 16px; }
.navbar__account { margin-left: 10px; }

/* ---------- Primary nav ---------- */
.nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ink); background: rgba(15, 23, 42, .05); }
.nav__actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Mobile menu toggle ---------- */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--surface);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle__close { display: none; }
.menu-open .nav-toggle__open { display: none; }
.menu-open .nav-toggle__close { display: block; }

/* ---------- Georgian: the caps face (BPG Guardian Caps, core/fonts.css) is wider and reads larger ---------- */
:lang(ka) .nav__link { font-size: 14px; }

/* Signed in: "add transaction" is a square icon button (its text is the aria-label + title) */
.nav__add { width: 44px; padding: 0; }

/* ---------- Compact desktop bar (1101–1279px): tighter links, account menu as an avatar ---------- */
@media (min-width: 1101px) and (max-width: 1279px) {
  .nav { gap: 16px; }
  .nav__link { padding: 8px 10px; }
  :lang(ka) .nav__link { font-size: 13px; }
  :lang(ka) .nav__actions .btn { font-size: 14px; }
  .navbar__account .account-menu__info,
  .navbar__account .account-menu__chevron { display: none; }
  .navbar__account .account-menu__trigger { padding: 3px; }
}
/* ---------- Mobile: the nav drops down below the bar ---------- */
@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .navbar__lang { margin: 0 8px 0 auto; }
  .navbar__account { margin-left: 0; }

  .nav {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 16px;
    padding: 16px 24px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; transform: none; }
  .menu-open .navbar { background: var(--surface); }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__link { padding: 12px; font-size: 16px; }
  .nav__actions { flex-direction: column; align-items: stretch; padding-top: 16px; border-top: 1px solid var(--border-soft); }
  .nav__actions > .btn { height: 46px; }
  .nav__actions > .btn--ghost { border: 1px solid var(--border); }
}