/* ──────────────────────────────────────────────────────────────
   Site navigation — Haus Vajbz. Loaded by templates/other/base.html on
   every page (markup: other/_nav.html, behaviour: js/hv/nav.js).
   Tokens only (tokens.css + hv/theme.css): square, flat.
   ────────────────────────────────────────────────────────────── */

.hv-nav { position: relative; z-index: 60; background: var(--bg); color: var(--text); }
.hv-nav__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  min-height: 60px;
  border-bottom: 2px solid var(--text);
}
.hv-nav .hv-wordmark { flex: none; }

/* search: a row under the bar on phones (toggled), inline from 768 */
.hv-nav__search { display: none; position: relative; flex: 1 1 100%; order: 10; padding-bottom: 0.75rem; }
.hv-nav.is-search-open .hv-nav__search { display: block; }
.hv-nav__search .hv-input { width: 100%; padding: 0.5rem 0.7rem; font-size: 0.95rem; }
.hv-nav__search .hv-input::-webkit-search-decoration,
.hv-nav__search .hv-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hv-nav__suggest {
  position: absolute; left: 0; right: 0; top: calc(100% - 0.75rem); z-index: 70;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--text); border-top: 0;
  max-height: 60vh; overflow: auto;
}
.hv-nav__suggest a, .hv-nav__suggest p {
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.55rem 0.7rem; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line);
}
.hv-nav__suggest a:first-child, .hv-nav__suggest p:first-child { border-top: 0; }
.hv-nav__suggest a:hover, .hv-nav__suggest a:focus-visible { background: var(--paper-2); outline: none; }
.hv-nav__suggest img { width: 40px; height: 40px; object-fit: cover; flex: none; }
.hv-nav__suggest .hv-sub { font-size: 0.95rem; }
.hv-nav__suggest .hv-sub mark { background: transparent; color: var(--red); }
.hv-nav__suggest .hv-mono { margin-left: auto; color: var(--text-dim); white-space: nowrap; }

/* desktop links: hidden on mobile, the burger menu carries them */
.hv-nav__links { display: none; }
.hv-nav__links a {
  font-family: var(--font-sub); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hv-nav__links a:hover, .hv-nav__links a:focus-visible { color: var(--red); border-color: var(--red); outline: none; }

.hv-nav__right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

/* language toggle: two mono buttons, the active one carries a rule */
.hv-nav__lang { display: flex; gap: 0.6rem; }
.hv-nav__lang button {
  padding: 0.3rem 0; border: 0; background: transparent;
  font: inherit; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hv-nav__lang button:hover { color: var(--text); }
.hv-nav__lang button[aria-current='true'] { color: var(--text); border-color: var(--red); cursor: default; }

/* account menu (desktop) + sign-in link (desktop) */
.hv-nav__account { position: relative; display: none; }
.hv-nav__account > button {
  padding: 0.3rem 0; border: 0; background: transparent; cursor: pointer;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
  border-bottom: 2px solid transparent; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hv-nav__account > button[aria-expanded='true'] { border-color: var(--red); }
.hv-nav__dropdown {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 70; min-width: 220px;
  padding: 0 0.9rem; background: var(--bg); color: var(--text); border: 2px solid var(--text);
}
.hv-nav__dropdown > li:first-child { border-top: 0; }
.hv-nav__dropdown > li:last-child { border-bottom: 0; }
.hv-nav__dropdown a {
  display: block; flex: 1; padding: 0.55rem 0;
  font-family: var(--font-sub); font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.hv-nav__dropdown a:hover, .hv-nav__dropdown a.is-red { color: var(--red); }
.hv-nav__cta {
  display: none; font-family: var(--font-sub); font-weight: 600; font-size: 0.95rem;
  color: var(--red); text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent;
}
.hv-nav__cta:hover { border-color: var(--red); }

/* icon buttons: search toggle (mobile) and the burger (mobile) */
.hv-nav__search-toggle[aria-expanded='true'] { color: var(--red); }
.hv-nav__burger .i-close { display: none; }
.hv-nav.is-open .hv-nav__burger .i-open { display: none; }
.hv-nav.is-open .hv-nav__burger .i-close { display: block; }

/* mobile menu: ruled list under the bar, same surface as the page */
.hv-nav__menu { border-bottom: 2px solid var(--text); background: var(--bg); }
.hv-nav__menu-list { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.hv-nav__menu .hv-list > li:first-child { border-top: 0; }
.hv-nav__menu .hv-list > li:last-child { border-bottom: 0; }
.hv-nav__menu a {
  flex: 1; padding: 0.35rem 0;
  font-family: var(--font-sub); font-weight: 600; font-size: 1.15rem; text-decoration: none;
}
.hv-nav__menu a.is-red { color: var(--red); }
.hv-nav__menu a:hover { color: var(--red); }

@media (min-width: 768px) {
  .hv-nav__bar { flex-wrap: nowrap; }
  .hv-nav__search { display: block; flex: 0 1 360px; order: 0; padding-bottom: 0; margin-left: 1rem; }
  .hv-nav__suggest { top: 100%; }
  .hv-nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
  .hv-nav__right { gap: 1rem; margin-left: 1.5rem; }
  .hv-nav__account { display: block; }
  .hv-nav__cta { display: inline-block; }
  .hv-nav__search-toggle, .hv-nav__burger, .hv-nav__menu { display: none !important; }
}