/* Shared site navigation.
   Loaded by bs.css (so every app page gets it) and linked directly by
   index.html, which carries its own styles and does not use bs.css. One file so
   the two shells cannot drift apart again.
   Colours use var() with a literal fallback for exactly that reason — the
   homepage does not define the palette variables. */

.bsnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.bsnav-btn {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--muted, #9a9a9a); font-size: 0.83rem; letter-spacing: 0.09em;
  text-transform: uppercase; font-weight: 600; white-space: nowrap;
  padding: 9px 13px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Rajdhani', Arial, sans-serif; text-decoration: none;
}
.bsnav-btn:hover { color: #fff; background: var(--panel, #17191c); text-decoration: none; }
.bsnav-btn[aria-expanded="true"] { color: #fff; background: var(--panel, #17191c); }
/* The section you are in, marked in the bar itself — the "where am I" fix. */
.bsnav-group.here > .bsnav-btn { color: #fff; box-shadow: inset 0 -2px 0 var(--red, #ff2200); }
.bsnav-caret { font-size: 0.55rem; opacity: 0.7; transition: transform 0.15s; }
.bsnav-btn[aria-expanded="true"] .bsnav-caret { transform: rotate(180deg); }

.bsnav-group { position: relative; }
.bsnav-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 95;
  min-width: 244px; padding: 7px;
  background: var(--panel, #17191c); border: 1px solid var(--border, #2f343a);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.65);
  /* The home page centres its body text; the menu must not inherit that. */
  text-align: left;
}
.bsnav-group.open .bsnav-menu { display: block; }
.bsnav-menu a {
  display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none;
  color: var(--text, #ccc); font-size: 0.9rem; letter-spacing: 0.02em;
  text-transform: none; font-weight: 500; white-space: nowrap;
}
.bsnav-menu a:hover { background: var(--panel-2, #1e2126); color: #fff; text-decoration: none; }
.bsnav-menu a.here { color: #fff; background: var(--panel-2, #1e2126); box-shadow: inset 2px 0 0 var(--red, #ff2200); }
.bsnav-menu a .sub { display: block; font-size: 0.74rem; color: var(--muted, #8b9199); margin-top: 1px; font-weight: 400; }
.bsnav-sep { height: 1px; background: var(--border, #2f343a); margin: 6px 8px; }

/* Hamburger: hidden until the bar runs out of room. */
.bsnav-toggle { display: none; background: none; border: none; cursor: pointer; color: #fff;
  font-size: 1.35rem; line-height: 1; padding: 6px 10px; border-radius: 6px; }
.bsnav-toggle:hover { background: var(--panel, #17191c); }

@media (max-width: 900px) {
  .bsnav-toggle { display: block; }
  /* Stacked panel under the bar. Groups are already open — on a phone an
     accordion inside a dropdown is two taps to reach anything. */
  .bsnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px;
    background: var(--bg, #000); border-bottom: 1px solid var(--border, #2f343a);
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .bsnav.open { display: flex; }
  .bsnav-group { position: static; }
  .bsnav-btn { width: 100%; justify-content: space-between; padding: 11px 12px; }
  .bsnav-caret { display: none; }
  .bsnav-menu { display: block; position: static; min-width: 0; border: none;
    box-shadow: none; background: none; padding: 0 0 8px 10px; }
  .bsnav-menu a { padding: 9px 12px; }
}