/* bb_nav.css
 * One shared top-menu bar for every page (main app + Boats + Food). Navy bar,
 * icon stacked over label, active underline. When the items don't fit, the bar
 * scrolls horizontally (auto-scroll handled by bb_nav.js, paused on hover).
 * Applied to any <nav class="js-autonav">; wins over per-page nav CSS by
 * specificity, so all bars look identical regardless of load order.
 */
nav.js-autonav{
  display:flex; flex-wrap:nowrap; overflow-x:auto; flex-shrink:0;
  -webkit-overflow-scrolling:touch;
  background:var(--navy,#1A3060);
  scrollbar-width:none; -ms-overflow-style:none;
}
nav.js-autonav::-webkit-scrollbar{ display:none; height:0; }

nav.js-autonav > a,
nav.js-autonav > button{
  flex:1 0 auto; min-width:62px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 18px;
  color:#cdd7ea; background:none; border:0; cursor:pointer; text-decoration:none;
  font-family:inherit; font-weight:600; letter-spacing:.3px; white-space:nowrap;
  border-bottom:3px solid transparent; transition:color .15s, border-color .15s;
}
nav.js-autonav > a:hover,
nav.js-autonav > button:hover{ color:#fff; }
nav.js-autonav > a.active,
nav.js-autonav > button.active{ color:#fff; border-bottom-color:var(--lake-light,#8fd0ea); }

nav.js-autonav .mcnav-ico{ font-size:18px; line-height:1; }
nav.js-autonav .mcnav-ico img,
nav.js-autonav .mcnav-ico .tab-ico{ height:20px; width:auto; display:block; }
nav.js-autonav .mcnav-lbl{ font-size:12.5px; line-height:1; }