/* ── NAVBAR — MANOR ── */

/* Three columns, and every child is placed into one of them by name rather
   than by the order it happens to appear in the markup. The side columns are
   equal fractions, so whatever sits in the middle is centred on the bar
   itself — not on the space left over between a 40px logo and a 250px auth
   cluster, which is what made the docked filters read as shoved to one side. */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 100%;
  align-items: center;
  padding: 0 40px;
  transition: background var(--trans-med), box-shadow var(--trans-med);
}

.navbar > .nav-logo   { grid-area: 1 / 1; justify-self: start; }
/* The links and the docked search share the middle cell — only one of them
   is ever visible, and both are centred in it. */
.navbar > .nav-links,
.navbar > .nav-dock   { grid-area: 1 / 2; justify-self: center; align-self: center; }
.navbar > .nav-right  { grid-area: 1 / 3; justify-self: end; }

.navbar.scrolled {
  background: rgba(22,18,19,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--hairline);
}

.navbar.dark-nav { background: transparent; }
.navbar.dark-nav.scrolled {
  background: rgba(22,18,19,0.92);
  box-shadow: 0 1px 0 var(--hairline);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
  /* Hug the mark. As a grid item it otherwise stretches across the whole
     first column, leaving a wide invisible link box reaching into the middle
     of the bar — which swallows clicks meant for the filters docked there. */
  justify-self: start;
}

.logo-en {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  letter-spacing: 0.14em;
  transition: color var(--trans-fast);
}

.dark-nav .logo-en,
.dark-nav.scrolled .logo-en { color: var(--ink); }

.logo-dv {
  font-size: 16px;
  font-weight: 600;
  color: var(--bronze);
  margin-top: 1px;
}

/* Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--trans-fast);
  position: relative;
  padding-bottom: 2px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

/* "Verify" — the one nav item that keeps catching the eye. The word
   itself carries the motion: an oxblood glint sweeps across the letters
   every few seconds (no dot, no bold). */
.nav-links a.nav-verify,
.nav-mobile-menu a.nav-verify { color: var(--ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-links a.nav-verify,
  .nav-mobile-menu a.nav-verify {
    background: linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 38%,
      var(--accent) 50%,
      var(--ink) 62%, var(--ink) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ink);
    animation: verifySheen 3.4s ease-in-out infinite;
  }
}
@keyframes verifySheen {
  0%       { background-position: 125% 0; }
  55%, 100% { background-position: -125% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-verify, .nav-mobile-menu a.nav-verify {
    animation: none; background: none;
    -webkit-text-fill-color: currentColor; color: var(--ink);
  }
}

.dark-nav .nav-links a { color: var(--muted); }
.dark-nav .nav-links a:hover { color: var(--ink); }

/* Right */
/* Right cluster — one row, one centre line, one gap. Every item is the same
   34px tall so the toggle, Login and Sign Up sit on a shared baseline instead
   of each being sized by its own padding. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  justify-self: end;
}
.nav-right > * { flex-shrink: 0; }
.nav-right .nav-login,
.nav-right .btn,
.nav-right .theme-toggle {
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  line-height: 1;
}
.nav-right .theme-toggle { width: 34px; }

.lang-btn {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--trans-fast);
}

.lang-btn:hover,
.dark-nav .lang-btn:hover {
  border-color: var(--bronze);
  color: var(--ink);
}

.dark-nav .lang-btn {
  border-color: var(--hairline);
  color: var(--muted);
}

/* Nav right order: Login → Sign Up → Toggle */
.nav-login       { order: 0; }
.nav-right .btn  { order: 1; }
.theme-toggle    { order: 2; }

/* Theme toggle */
.theme-toggle {
  width: 32px; height: 32px; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  border-radius: 2px;
  transition: color var(--trans-fast), background var(--trans-fast), transform var(--trans-fast);
  padding: 0; flex-shrink: 0;
}
.theme-toggle:hover  { color: var(--ink); background: rgba(126,123,120,0.14); }
.theme-toggle:active { transform: scale(0.88); }
.theme-toggle svg    { width: 15px; height: 15px; display: block; }

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: background var(--trans-fast);
}

.nav-hamburger:hover { background: rgba(126,123,120,0.15); }

.hamburger-line {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all var(--trans-med);
  transform-origin: center;
}

.dark-nav .hamburger-line { background: var(--ink); }

.nav-hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(13,11,11,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hairline);
  padding: 20px 20px 24px;
  flex-direction: column;
  gap: 2px;
  z-index: 499;
  transform: translateY(-8px);
  opacity: 0;
  transition: all var(--trans-med);
  pointer-events: none;
}

.nav-mobile-menu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.nav-mobile-menu a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 13px 14px;
  border-radius: 2px;
  transition: background var(--trans-fast), color var(--trans-fast);
  cursor: pointer;
}

.nav-mobile-menu a:hover {
  background: rgba(126,123,120,0.14);
  color: var(--ink);
}

.nav-mobile-divider {
  height: 1px;
  background: var(--hairline);
  margin: 8px 0;
}

.nav-mobile-bottom {
  display: flex;
  gap: 10px;
  padding-top: 8px;
}

/* Mobile menu — signed-in user row */
.nav-mobile-bottom.authed { flex-direction: column; align-items: stretch; gap: 10px; }
.nmb-user { display: flex; align-items: center; gap: 12px; padding: 4px; }
.nmb-user-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.nmb-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nmb-user-avatar .nav-user-initials { font-size: 14px; font-weight: 700; color: var(--ink); }
.nmb-user-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nmb-user-info strong { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nmb-user-info span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Responsive */
@media (max-width: 900px) {
  .navbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
  }
  .nav-links { display: none !important; }
  .nav-right {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
  }
  .nav-right .btn    { display: none; }
  .nav-right .nav-login { display: none; }
  .nav-right .nav-user-menu { display: none; }
  .nav-hamburger {
    display: flex;
    margin-left: 4px;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .lang-btn { display: none; }
}