/* BestProps v2 - NAV workstream (src/inc/nav.php). Loaded on every v2 view, including wrapped bespoke templates.
   Builds on the mockup's components.css shell rules (.nav, .mega*, .mobile-menu*, .site-footer*). */

/* ---------- Firms mega: four market columns (futures, forex, crypto, perpetuals) + top-rated aside ---------- */
.mega.bpn-mega--firms { left: max(var(--gutter), calc(50% - 590px)); max-width: min(1180px, calc(100vw - 48px)); width: max-content; }
.bpn-firms { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: var(--s-4); }
.bpn-firms .mega__cols { grid-template-columns: repeat(4, minmax(190px, 1fr)); }
.bpn-firms .mega__aside { padding-top: 0; }
.bpn-firms .mega__aside .mega__all { margin-top: 2px; }

/* content.css carries the old theme's `.bp-tile` card rule (padding, flex, surface): restore the v2 monogram tile here */
.site-header .bp-tile, .mobile-menu .bp-tile {
  display: inline-grid; flex-direction: initial; place-items: center; padding: 0;
  width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.2); color: inherit;
  background: linear-gradient(150deg, rgba(160, 170, 255, 0.22), rgba(40, 46, 90, 0.35) 45%, rgba(10, 12, 26, 0.6));
  border: 1px solid rgba(190, 196, 255, 0.28);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.28), inset -1px -1px 0 rgba(0, 0, 0, 0.35), 0 12px 26px -12px rgba(79, 72, 255, 0.6);
  transform: none; transition: none;
}
.site-header .mega__firm:hover .bp-tile { transform: none; }

/* compact link lists (market filters, curated firms from menu 91) */
.bpn-mini { padding: 10px 12px 2px; }
.bpn-mini + .bpn-mini { padding-top: 6px; }
.bpn-mini__label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.bpn-mini__links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.bpn-mini__links a {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 9px; border-radius: 999px;
  font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-2);
  border: 1px solid var(--draft-2); background: color-mix(in srgb, var(--indigo) 4%, transparent);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bpn-mini__links a:hover, .bpn-mini__links a:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--indigo) 14%, transparent); border-color: color-mix(in srgb, var(--indigo) 40%, transparent); }

/* Deals link at the foot of the Firms aside */
.bpn-aside-link { display: flex; align-items: center; gap: 10px; margin: auto -6px -6px; padding: 8px 6px; border-top: 1px solid var(--draft-2); border-radius: 0 0 6px 6px; transition: background-color var(--t-fast); }
.bpn-aside-link:hover { background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.bpn-aside-link .bp-icon { width: 32px; height: 32px; flex: none; }

/* mega panels never taller than the viewport */
.site-header .mega { max-height: calc(100vh - var(--header-h, 60px) - 24px); overflow-y: auto; overscroll-behavior: contain; }

/* the Firms mega needs room: between 1024 and 1279 drop the aside column */
@media (max-width: 1279px) {
  .bpn-firms { grid-template-columns: minmax(0, 1fr); }
  .bpn-firms .mega__aside { display: none; }
  .mega.bpn-mega--firms { left: var(--gutter); right: var(--gutter); width: auto; max-width: none; }
  .bpn-firms .mega__cols { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}

/* ---------- Mobile menu ---------- */
/* keep the menu foot (CTA, search, theme) clear of the fixed staging banner */
.bp-export-banner ~ .mobile-menu .mobile-menu__foot { padding-bottom: max(52px, env(safe-area-inset-bottom)); }
.mobile-menu .bpn-mchips { padding: 6px 12px 10px; }
.mobile-menu .bpn-mchips .bpn-mini__links a { min-height: 34px; padding: 4px 12px; font-size: var(--fs-sm); flex-direction: row; }
.mobile-menu .mobile-menu__links .bpn-mini__links a small { display: none; }
.mobile-menu .mobile-menu__links a.bpn-mfirm { flex-direction: row; align-items: center; justify-content: space-between; min-height: 44px; }
.mobile-menu .bpn-mfirm .num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.mobile-menu .mobile-menu__links .bpn-mini__links a { min-height: 34px; display: inline-flex; }

/* ---------- Footer ---------- */
.bp-export-banner ~ .site-footer { padding-bottom: calc(var(--s-6, 24px) + 32px); }
.site-footer.bpn-footer .site-footer__col ul { gap: 9px; }
.site-footer.bpn-footer .site-footer__bottom > span:first-child { font-variant-numeric: tabular-nums; }

/* ---------- current page ---------- */
.mega a[aria-current="page"] .mega__title, .mega__item[aria-current="page"] .mega__title { color: var(--indigo-ink, var(--ink)); }
.mobile-menu__links a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--indigo) 10%, transparent); }

/* ---------- wrapped bespoke templates: Mercury globals that leak into the shell ---------- */
.bp-v2--wrapped .site-header .mega a, .bp-v2--wrapped .mobile-menu a, .bp-v2--wrapped .site-footer a { text-decoration: none; }
.bp-v2--wrapped .site-footer ul { margin: 0; }
.bp-v2--wrapped .site-footer li { margin: 0; padding: 0; list-style: none; }
.bp-v2--wrapped .site-footer h2, .bp-v2--wrapped .site-footer p { margin-top: 0; }
.bp-v2--wrapped .site-footer__legal h2 { margin-bottom: 8px; }
.bp-v2--wrapped .mobile-menu summary { list-style: none; }
.bp-v2--wrapped .bpn-mini__links a, .bp-v2--wrapped .mega__title, .bp-v2--wrapped .mega__desc { font-family: var(--font-sans); }

/* ---------- LOGOS (2026-10-19): firm logo inside the mega menu's "Top rated" tiles (inc/nav.php) ---------- */
.bpn-logo { overflow: hidden; padding: 0; background: #0b0f17; }
.bpn-logo::after { display: none; }
.bpn-logo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: inherit; }
/* LOGOS 2 (2026-10-20): the same logo tile everywhere else a firm shows (search palette, compare tray, /rules/ index and
   reports, Rule Lab, True Cost, /match/). Works on .bp-tile and the mockup's .mono-tile; nav.css loads on every v2 view. */
.bp-logo-tile { position: relative; overflow: hidden; padding: 0; background: #0b0f17; color: transparent; text-shadow: none; }
.bp-logo-tile::after { display: none; }
.bp-logo-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; border-radius: inherit; }