/* The nav bar, on every page that uses base.html: customer pages (dark
   theme) and admin pages (light). Markup: templates/_vb_nav.html. Loaded
   after theme-dark.css so these rules win exactly as they did when they
   lived in it. The homepages (home.html, home_vb.html) keep their own copy
   in vb/vb.css. */

/* =====================================================================
   HAND-TUNED: the VB nav bar, shared sitewide (markup: _vb_nav.html).
   Source of truth for these styles is vb.css — keep in sync.
   ===================================================================== */
:root {
  --vb-text: #f2f4f9;
  --vb-dim: #99a1b5;
  --vb-gold: #e9cd97;
  --vb-gutter: 20px;
  --vb-max-width: 72rem;
}

.page-shell { padding-top: 0; }
.vb-bar { position: sticky; }

.vb-bar {
  position: sticky;
  top: 0;
  z-index: 70;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) var(--vb-gutter) 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(7, 8, 12, .54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.vb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vb-text);
  text-decoration: none;
}
.vb-brand img { width: 34px; height: 34px; object-fit: contain; }
.vb-brand > span { font-size: 20px; line-height: 1; font-weight: 800; }
.vb-brand small { color: var(--vb-gold); font-size: .62em; }

.vb-bar-actions { display: flex; align-items: center; gap: 10px; }

.vb-balance {
  display: grid;
  min-width: 92px;
  padding: 7px 12px;
  color: var(--vb-text);
  text-decoration: none;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 12, 18, .72);
}
.vb-balance small {
  color: var(--vb-dim);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.vb-balance strong { margin-top: 4px; color: var(--vb-gold); font-size: 14px; line-height: 1; }
.vb-balance.is-login { display: inline-flex; justify-content: center; align-items: center; font-weight: 800; }

/* ---- the ledger: Balance and Rewards, one card, two rows. Each row is its
   own link (balance -> account). ---- */
.vb-ledger {
  display: grid;
  gap: 3px;
  min-width: 164px;
  padding: 6px 12px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 12, 18, .72);
}
.vb-ledger .vb-balance,
.vb-ledger .vb-balance small,
.vb-ledger .vb-balance strong { margin-top: 0; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .vb-ledger a:hover strong { filter: brightness(1.18); }
}
/* narrow phones: the wordmark gives up its ".com" and a couple of points so
   the ledger never has to squeeze */
@media (max-width: 430px) {
  .vb-bar.has-ledger .vb-brand small { display: none; }
  .vb-bar.has-ledger .vb-brand > span { font-size: 17px; }
  .vb-ledger { min-width: 0; padding: 6px 10px 7px; }
  .vb-ledger .vb-balance { gap: 10px; }
}

.vb-menu { position: relative; }
.vb-menu summary {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 12, 18, .72);
}
.vb-menu summary::-webkit-details-marker { display: none; }
.vb-menu summary i { width: 17px; height: 2px; background: var(--vb-text); }
.vb-menu nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 11, 17, .98);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.vb-menu nav a,
.vb-menu nav button {
  width: 100%;
  display: block;
  padding: 11px 12px;
  color: var(--vb-text);
  text-decoration: none;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.vb-menu nav a:hover,
.vb-menu nav button:hover { background: rgba(255, 255, 255, .07); }
.vb-menu form { margin: 0; }

.vb-bar { color: var(--vb-text); }
.vb-brand { color: var(--vb-text); text-decoration: none; }
/* ================= END VB nav ================= */

/* On a wide monitor the brand sat against the far left edge and the menu
   against the far right, because the bar only had gutter padding. The bar
   itself stays full bleed (it is sticky and needs to span), but its
   CONTENTS now stop at the same 72rem the page sections use, so the
   lockup lines up with the content underneath instead of drifting out to
   the corners. */
.vb-bar {
  /* The bar's contents stop a little OUTSIDE the 72rem content column (80rem
     when the screen allows): the lockup sits a touch left of the content
     edge and the menu a touch right, so the nav reads as the frame around
     the page rather than one more column inside it. Narrow screens still
     fall back to the gutter. */
  padding-inline: max(var(--vb-gutter), (100% - var(--vb-nav-max-width, 80rem)) / 2);
}

/* --- nav ledger: the abbreviated phone label (mirrors vb.css) --- */
/* the ledger label abbreviates on phones ("Balance" -> "BAL:") so the card
   stops crowding the hamburger. */
.vb-lbl-abbr { display: none; }
@media (max-width: 480px) {
  .vb-lbl-full { display: none; }
  .vb-lbl-abbr { display: inline; }
}

/* Admin pages stay light and have no dark sky behind the bar, so the
   see-through bar would read washed-out grey there: give it a solid ground. */
.is-admin-chrome .vb-bar {
  background: #0b0d14;
}