/* ── Renatus v2 navbar ──────────────────────────────────────
   Site-wide v2 chrome (brevon-style header). Loaded by
   partials/navbar.html in addition to navbar.css. All rules are
   scoped under `.v2-nav` so this stylesheet has zero effect on
   any page that does not opt into the v2 markup. Sister of
   brevon-renatus-overrides.css but page-agnostic (no body.home-v2
   scope) so every page that includes the navbar partial picks it
   up automatically. */

/* ── tokens ─────────────────────────────────────────────── */
.v2-nav {
  --v2-theme: var(--pink, #ff11df);
  --v2-header: #1b2230;
  --v2-text: #475569;
  --v2-white: #ffffff;
  --v2-border: rgba(0, 0, 0, 0.08);
  --v2-shadow: 0 6px 24px rgba(15, 30, 65, 0.08);
}

/* ── reset base .top-bar so v2 chrome can take over ────── */
.top-bar.v2-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  z-index: 999;
  display: block;
  pointer-events: auto;
}
.top-bar.v2-nav .top-bar-inner {
  background: transparent;
  border-radius: 0;
  padding: 0;
  height: auto;
  max-width: none;
  box-shadow: none;
  pointer-events: auto;
  display: block;
}

/* Announcement strip — desktop only (matches brevon @ ≤1399 hides).
   `margin-bottom: 0` overrides brevon main.css (which sets 30px) so the
   navbar sits flush against the strip per the original v2 design. */
.v2-nav .header-top-section {
  background-color: var(--v2-header);
  position: relative;
  margin-bottom: 0;
}
.v2-nav .header-top-section .container-fluid { padding: 0 30px; }
.v2-nav .header-top-wrapper {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  position: relative; z-index: 999;
}
.v2-nav .header-top-wrapper .header-left .list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 20px;
}
.v2-nav .header-top-wrapper .header-left .list li,
.v2-nav .header-top-wrapper .header-left .list li a {
  color: #ffffff; font-size: 15px; font-weight: 500;
  text-decoration: none;
}
.v2-nav .header-top-wrapper .header-left .list li a:hover { color: var(--v2-theme); }
.v2-nav .header-top-wrapper .header-right {
  display: flex; align-items: center; gap: 20px;
  color: #ffffff; font-size: 15px;
}
.v2-nav .header-top-wrapper .header-right span { color: #ffffff; }
.v2-nav .header-top-wrapper .header-right .social-icon {
  display: flex; align-items: center; gap: 10px;
}
.v2-nav .header-top-wrapper .header-right .social-icon a {
  color: var(--v2-theme); width: 28px; height: 28px;
  line-height: 28px; text-align: center;
  background-color: #ffffff; opacity: 0.7;
  display: inline-block; border-radius: 100px;
  font-size: 13px; transition: all 0.3s ease-in-out;
  text-decoration: none;
}
.v2-nav .header-top-wrapper .header-right .social-icon a:hover {
  opacity: 1; color: var(--v2-header);
}
@media (max-width: 1399px) {
  .v2-nav .header-top-section { display: none; }
}

/* ── Main header row ─────────────────────────────────────── */
.v2-nav.header-1 .container-fluid { padding: 0 30px; }
@media (max-width: 575px) {
  .v2-nav.header-1 .container-fluid { padding: 0 15px; }
}
.v2-nav .mega-menu-wrapper { background: transparent; }
.v2-nav .header-main {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  /* Match brevon main.css .header-main exactly (10px) so /methodology,
     /pricing, etc. line up pixel-for-pixel with /. Previously 12px,
     which produced a ~4px taller bar on every non-home page. */
  padding: 10px 0;
  min-height: 64px;
  gap: 24px;
}
.v2-nav .header-main .header-left .logo {
  display: inline-flex; align-items: center;
}
.v2-nav .header-main .header-left .header-logo img,
.v2-nav .header-main .header-left .header-logo-2 img {
  height: 38px; width: auto; max-width: none; display: block;
}
.v2-nav .header-main .header-left .header-logo-2 { display: none; }

/* Centred nav — absolutely positioned so logo+right cluster don't
   shift the centre. Brevon ships this as an inline style on home_v2;
   moved here so every page gets it. */
.v2-nav .header-main > .mean__menu-wrapper {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
@media (max-width: 1199px) {
  .v2-nav .header-main > .mean__menu-wrapper {
    position: static; transform: none;
  }
  /* Hide desktop centre nav on mobile — offcanvas takes over. */
  .v2-nav .main-menu { display: none; }
}

/* Centre menu links + dropdowns (distilled from brevon main.css). */
.v2-nav .main-menu ul {
  list-style: none; margin: 0; padding: 0;
}
.v2-nav .main-menu > nav > ul {
  display: flex; align-items: center;
}
.v2-nav .main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  /* Match brevon main.css link spacing (50px) so non-home pages have
     the same horizontal rhythm as /. Was 38px which made the bar feel
     tighter and slightly shorter. */
  margin-inline-end: 50px;
}
@media (max-width: 1199px) {
  .v2-nav .main-menu ul li { margin-inline-end: 30px; }
}
.v2-nav .main-menu ul li:last-child { margin-inline-end: 0; }
.v2-nav .main-menu ul li a {
  display: inline-block;
  /* Match brevon main.css link typography exactly (16px font) so the
     total navbar height equals the home sticky bar. Christine 2026-05-24. */
  font-size: 16px; font-weight: 600;
  color: var(--v2-header);
  /* Match brevon main.css .main-menu link padding exactly (20px) so
     non-home pages have the same total navbar height as /. */
  padding: 20px 0;
  text-align: left;
  position: relative;
  text-decoration: none;
  text-transform: capitalize;
  transition: color 0.3s ease-in-out;
  letter-spacing: -0.1px;
}
.v2-nav .main-menu ul li a i { margin-left: 4px; font-size: 12px; }
/* Hover behaviour, consistent across every page.
   ──────────────────────────────────────────────
   brevon ships three things we have to neutralise on hover:
   (1) link colour flips to --theme (#F94D00 orange) with
       !important;
   (2) the link gets margin-left: 10px, which slides the whole
       label text rightward;
   (3) submenu items get a 10px-wide ::before "hyphen" that
       inherits the same orange --theme background.
   We want: bold-weight on hover for centre-nav, no colour
   flash, no text slide, and the submenu hyphen recoloured
   to our pink so it matches selected-state. Christine
   2026-05-24. */
.v2-nav .main-menu ul li a:hover { font-weight: 700; }
.v2-nav .main-menu ul li:hover > a {
  color: var(--v2-header) !important;
  margin-left: 0 !important;
}
/* Christine (28 May): submenu item hover — bold black text on a
   soft off-white wash (#FAFCFE) so the row reads as a clearly
   active target across every dropdown (Free Reports, Products,
   Solutions, Methodology, etc.). Wash colour #f2f3f4 matches the
   /home page body background so the hover blends with the surface
   rather than reading as a distinct grey chip. Was: var(--v2-theme)
   pink text with no background. */
.v2-nav .main-menu ul li .submenu li a:hover,
.v2-nav .main-menu ul li .submenu li:hover > a {
  color: var(--black) !important;
  font-weight: 700 !important;
  background: #f2f3f4 !important;
  margin-left: 0 !important;
}
/* Recolour the brevon hyphen dash from orange → pink.
   Hard-coded #FF11DF (not var(--v2-theme)) because brevon's
   --theme pink override is scoped to body.home-v2 only, so
   any var indirection that resolves through cascade could
   still leak orange on non-home pages. The literal removes
   all doubt. Christine 2026-05-24. */
.v2-nav .main-menu ul li .submenu li a::before {
  background: #FF11DF !important;
}

/* Submenu fallback (no jQuery dependency — CSS hover). */
.v2-nav .main-menu ul li .submenu {
  position: absolute;
  top: calc(100% - 18px);
  inset-inline-start: -70px;
  min-width: 240px;
  padding: 14px 0;
  z-index: 99999;
  visibility: hidden; opacity: 0;
  transform-origin: top center;
  color: var(--v2-header);
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
  border-top: 4px solid var(--v2-theme);
  background-color: var(--v2-white);
  box-shadow: var(--v2-shadow);
  border-radius: 10px;
}
.v2-nav .main-menu ul li:hover > .submenu {
  visibility: visible; opacity: 1; transform: translateY(0);
}
/* Nested submenus (level 2+: Country Intelligence → Pacific →
   Australia/NZ) must CASCADE to the side, not drop straight down.
   The generic rule above gives every .submenu top:100%/start:0, which
   on a nested submenu stacks it directly beneath its parent item so
   the panels overlap and become unusable. Anchoring to the relative
   parent <li>, fly the nested panel out to the inline-end edge and
   align its top with the parent row. Scoped to a .submenu inside a
   .submenu li, so level-1 panels and the home mega-panel are
   untouched. */
.v2-nav .main-menu ul li .submenu li .submenu {
  top: -18px;
  inset-inline-start: calc(100% - 70px);
}
/* Level-3 (third column): much less left overlap so it doesn't
   clip the level-2 item text. Higher specificity wins over the rule above. */
.v2-nav .main-menu ul li .submenu li .submenu li .submenu {
  inset-inline-start: calc(100% - 20px);
}

/* ── Per-menu overrides (fully isolated per menu + per level) ───────
   Each menu uses > direct-child combinators so its rules only apply
   to that exact depth within that menu. Global fallbacks above do
   not bleed in. Adjust values per menu independently. */

/* Products */
.v2-nav .main-menu ul li.nav-products > .submenu                                          { inset-inline-start: -90px; }
.v2-nav .main-menu ul li.nav-products > .submenu > li > .submenu                          { inset-inline-start: calc(100% - 100px); }
.v2-nav .main-menu ul li.nav-products > .submenu > li > .submenu > li > .submenu          { inset-inline-start: calc(100% - 50px); }

/* Solutions */
.v2-nav .main-menu ul li.nav-solutions > .submenu                                         { inset-inline-start: -90px; }
.v2-nav .main-menu ul li.nav-solutions > .submenu > li > .submenu                         { inset-inline-start: calc(100% - 100px); }
.v2-nav .main-menu ul li.nav-solutions > .submenu > li > .submenu > li > .submenu         { inset-inline-start: calc(100% - 30px); }

/* Free reports */
.v2-nav .main-menu ul li.nav-free > .submenu                                              { inset-inline-start: -70px; }
.v2-nav .main-menu ul li.nav-free > .submenu > li > .submenu                              { inset-inline-start: calc(100% - 50px); }
.v2-nav .main-menu ul li.nav-free > .submenu > li > .submenu > li > .submenu              { inset-inline-start: calc(100% - 50px); }
.v2-nav .main-menu ul li .submenu li {
  display: block; width: 100%; margin: 0;
}
.v2-nav .main-menu ul li .submenu li a {
  font-size: 14px; font-weight: 500;
  color: var(--v2-header);
  line-height: 34px;
  /* Left padding matches brevon's 32px so the hover dash (::before at
     left:14px, width:10px) clears the text with an 8px gap. The
     previous flat 22px caused the dash to butt against the label. */
  padding: 0 22px 0 32px;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
/* Duplicate of the unified hover rule above — kept here only so
   the source order is obvious; both resolve to bold-black on
   #f2f3f4 per Christine (28 May). */
.v2-nav .main-menu ul li .submenu li a:hover {
  color: var(--black);
  font-weight: 700;
  background: #f2f3f4;
}

/* ── Home mega panel (has-homemenu) ──────────────────────
   The generic v2 .submenu rule above sets `padding: 14px 0`
   and `inset-inline-start: 0`, which clobbers brevon's
   intended 30px panel padding and -250px centering offset
   for the 4-tile home preview. Without these overrides the
   tiles stretch edge-to-edge with no frame and the whole
   panel anchors to the Home link's left edge. Restore the
   brevon geometry only for has-homemenu (extra class bumps
   specificity above the generic submenu rule). Also cap
   tile width so the placeholders/screenshots render at the
   intended ~200px instead of inflating to ~230px+.        */
.v2-nav .main-menu ul li .submenu.has-homemenu {
  width: 1000px;
  left: -250px;
  inset-inline-start: -250px;
  padding: 30px 30px 10px 30px;
  background-color: var(--v2-white);
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu-items {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  justify-content: space-between;
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.v2-nav .main-menu ul li .submenu.has-homemenu .homemenu-title {
  display: block;
  text-align: center;
  margin: 12px auto 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-header);
}

/* Active-page styling — Christine (28 May): unified across every
   centre-nav item. The active label renders black, bold, and
   underlined (originally a /work-only treatment, now applied to
   Free Reports, Products, etc. as well) so the current
   destination is signalled identically regardless of which tab
   the user is on. The !important is required because the
   hover-neutralizer above sets colour with !important to
   override brevon's orange — without it, hovering the active
   link would knock it back to dark ink. */
.v2-nav .main-menu ul li > a.active,
.v2-nav .main-menu ul li:hover > a.active {
  color: var(--black) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 14px;
  text-decoration-thickness: 2px;
}

/* ── Right cluster ───────────────────────────────────────── */
.v2-nav .header-right.d-flex,
.v2-nav .header-main .header-right {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 18px;
  position: relative; z-index: 999;
}
.v2-nav .header-btn { display: flex; align-items: center; gap: 14px; }
.v2-nav .header-btn h6 {
  margin: 0; font-size: 15px; font-weight: 600;
  color: var(--v2-header);
}
.v2-nav .header-btn h6 a {
  color: var(--v2-header); text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.v2-nav .header-btn h6 a:hover { color: var(--v2-theme); }
.v2-nav .header-btn--pricing h6 { font-weight: 600; }

/* Pricing / Sign-in links in the right-side header buttons use the
   `.top-bar-link` class (legacy hook). base.css gives that class
   `color: var(--white)` and `font-weight: var(--font-medium)` (500),
   which on app pages (where base.css loads before navbar-v2.css)
   paints the Pricing label white and at the wrong weight — visually
   inconsistent with the home page (which doesn't load base.css and
   so picks up the v2 h6 styling directly). Override on the v2-nav
   scope with matching specificity so the link inherits the same
   dark colour + 600 weight regardless of which page it renders on.
   Per Christine 2026-05-24. */
.v2-nav .header-btn .top-bar-link,
.v2-nav .header-btn .top-bar-link:link,
.v2-nav .header-btn .top-bar-link:visited {
  /* !important needed: base.css ships `.top-bar-link { color: var(--white); }`
     as a legacy rule for the old transparent-over-hero navbar. On app pages
     base.css loads before navbar-v2.css, and the legacy selector has equal
     specificity, so without !important it wins via source order and renders
     Pricing as white text on the white v2 navbar. */
  color: var(--v2-header) !important;
  font-weight: 600;
  /* 16px to match the other centre-nav links (brevon parity). */
  font-size: 16px;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.v2-nav .header-btn .top-bar-link:hover { color: var(--v2-theme) !important; }
.v2-nav .header-btn .top-bar-link.active { color: var(--v2-theme) !important; }

/* Get Started CTA pill (brevon-style). */
.v2-nav .theme-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  color: var(--v2-white) !important;
  text-decoration: none;
  padding: 12px 22px;
  background-color: var(--v2-theme);
  border-radius: 100px;
  border: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  gap: 6px;
  white-space: nowrap;
}
.v2-nav .theme-btn:hover {
  background-color: var(--v2-header);
  color: var(--v2-white) !important;
}

/* Hamburger toggle for offcanvas. */
.v2-nav .header__hamburger { display: none; }
@media (max-width: 1199px) {
  .v2-nav .header__hamburger { display: inline-flex; }
}
.v2-nav .sidebar__toggle {
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--v2-header);
  border-radius: 50%;
}
.v2-nav .sidebar__toggle svg { width: 22px; height: 22px; display: block; }

/* ── Solid (always white) — set via navbar_solid=True in the route.
   Used on pages where content starts at the top and a transparent
   navbar would cause overlap (e.g. public free-report viewer).
   No fade-in animation — the bar should appear white on first paint. */
.top-bar.v2-nav.v2-nav--solid,
.top-bar.v2-nav.v2-nav--solid.sticky {
  position: fixed !important;
  top: 0; left: 0; right: 0; width: 100%;
  background-color: var(--v2-white) !important;
  box-shadow: 0 4px 18px rgba(15, 30, 65, 0.08) !important;
  z-index: 99999;
  animation: none !important;
}

/* ── Sticky on scroll (white background, hover lift) ───── */
.v2-nav.sticky,
.top-bar.v2-nav.sticky {
  position: fixed !important;
  top: 0; left: 0; right: 0; width: 100%;
  background-color: var(--v2-white);
  box-shadow: 0 4px 18px rgba(15, 30, 65, 0.08);
  z-index: 99999;
  animation: v2NavFadeDown 0.45s ease both;
}
@keyframes v2NavFadeDown {
  from { transform: translateY(-12px); opacity: 0.4; }
  to   { transform: translateY(0); opacity: 1; }
}
.v2-nav.sticky .header-top-section { display: none; }
/* DO NOT shrink .header-main on sticky — brevon's home sticky keeps the
   default 10px/20px padding, and the user reported that the v2 sticky
   state on non-home pages was visibly shorter than home's sticky bar.
   Removed: `.v2-nav.sticky .header-main { padding: 8px 0; }` per
   Christine 2026-05-24. */

/* ── Offcanvas drawer (mobile menu) ─────────────────────── */
.v2-nav .offcanvas__info {
  background: var(--v2-white);
  border-left: 2px solid var(--v2-theme);
  position: fixed;
  right: 0; top: 0;
  width: 360px; max-width: 90vw; height: 100%;
  transform: translateX(calc(100% + 60px));
  transition: transform 0.45s ease-in-out;
  z-index: 9999999;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.v2-nav .offcanvas__info::-webkit-scrollbar { display: none; }
.v2-nav .offcanvas__info.info-open { transform: translateX(0); }
.v2-nav .offcanvas__overlay {
  position: fixed; inset: 0;
  background: #151515;
  opacity: 0; visibility: hidden;
  z-index: 900;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.v2-nav .offcanvas__overlay.overlay-open { opacity: 0.55; visibility: visible; }
.v2-nav .offcanvas__wrapper { padding: 24px; }
.v2-nav .offcanvas__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.v2-nav .offcanvas__logo img { height: 32px; width: auto; display: block; }
.v2-nav .offcanvas__close button {
  width: 40px; height: 40px; line-height: 0;
  border-radius: 50%; border: none;
  background-color: var(--v2-theme);
  color: var(--v2-white);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.v2-nav .offcanvas__close button svg { width: 16px; height: 16px; }
.v2-nav .offcanvas__nav { display: flex; flex-direction: column; }
.v2-nav .offcanvas__nav a {
  display: block;
  padding: 12px 0;
  font-size: 16px; font-weight: 600;
  color: var(--v2-header);
  text-decoration: none;
  border-bottom: 1px solid var(--v2-border);
}
.v2-nav .offcanvas__nav a:hover { color: var(--v2-theme); }
.v2-nav .offcanvas__nav .offcanvas__divider {
  height: 1px; background: var(--v2-border); margin: 12px 0;
}

/* ── Dropdown skin upgrade for avatar + language ─────────
   Brevon mega-menu submenu look: white rounded card, 4px
   pink top border, soft shadow. Applies only inside the
   v2 navbar so other usages of these classes (if any) are
   untouched. */
.v2-nav .top-bar-user-menu,
.v2-nav .nav-lang-dropdown {
  background-color: var(--v2-white);
  border: none;
  border-top: 4px solid var(--v2-theme);
  box-shadow: var(--v2-shadow);
  border-radius: 10px;
  padding: 14px 0;
  min-width: 240px;
}
.v2-nav .nav-lang-dropdown { padding: 8px 0; }
.v2-nav .top-bar-user-menu-header { padding: 4px 18px 12px; }
.v2-nav .top-bar-user-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--v2-header);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
/* Open state only — base.css hides the menu by default with
   `display:none` and reveals via `.open { display:block }`. Our v2
   skin needs flex column layout when open, but must NOT force the
   menu visible when closed. Previously this rule was unscoped to
   `.open`, which meant the dropdown sat permanently expanded under
   the avatar on every v2 page (app + home). Per Christine 2026-05-24. */
.v2-nav .top-bar-user-menu.open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.v2-nav .top-bar-user-menu-header {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* The identity header used to carry its own border-bottom from
     base.css, but the template now renders an explicit
     `.top-bar-user-menu-divider` element directly under the header
     as the canonical separator. Keeping both produced a visible
     double line under the role/plan row. Drop the inherited border
     so only the explicit divider paints. Per Christine 2026-05-24. */
  border-bottom: 0;
  margin-bottom: 0;
}
.v2-nav .top-bar-user-menu-header > span { display: block; }
/* Identity header (name + role/plan/credits) — match the menu-item
   typography below so the dropdown reads as one consistent type
   scale instead of mixing inherited browser defaults. Per Christine
   2026-05-24. */
.v2-nav .top-bar-user-menu-name,
.v2-nav .top-bar-user-menu-plan,
.v2-nav .top-bar-user-menu-tokens {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-header);
  line-height: 1.4;
}
.v2-nav .top-bar-user-menu-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 6px 0;
}
.v2-nav .top-bar-user-menu-item:hover {
  background: rgba(255, 17, 223, 0.05);
  color: var(--v2-theme);
}
.v2-nav .nav-lang-option {
  padding: 8px 16px;
  font-size: 14px; color: var(--v2-header);
}
.v2-nav .nav-lang-option:hover {
  background: rgba(255, 17, 223, 0.05);
  color: var(--v2-theme);
}
.v2-nav .nav-lang-option.active { color: var(--v2-theme); font-weight: 600; }
.v2-nav .nav-lang-trigger {
  color: var(--v2-header);
  font-size: 14px; font-weight: 600;
  background: transparent;
  border: none;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 6px 4px;
}
.v2-nav .nav-lang-trigger:hover { color: var(--v2-theme); }

/* User avatar: solid dark-navy disc, white initials.
   Per Christine 2026-05-24 — the avatar reads as a brand mark, not
   an action, so it uses --black (deep navy) rather than the pink
   theme accent that the rest of the navbar uses for affordances. */
.v2-nav .top-bar-user-avatar {
  width: 36px; height: 36px;
  background-color: var(--black);
  color: var(--v2-white);
  font-size: 13px; font-weight: 700;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 30, 65, 0.25);
  transition: transform 0.2s ease;
}
.v2-nav .top-bar-user-avatar:hover { transform: scale(1.05); }

/* Help (chat) button — small circle in the cluster. */
.v2-nav .navbar-help-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--v2-header);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.v2-nav .navbar-help-btn:hover { color: var(--v2-theme); background: rgba(255, 17, 223, 0.06); }
.v2-nav .navbar-help-btn svg { width: 20px; height: 20px; display: block; }
/* RenStars tri-color logo replaces the prior "?" icon. Star fills
   mirror .ren-chat-avatar so brand stays consistent. */
.v2-nav .navbar-help-btn .ren-star--cyan  { fill: var(--cyan, #ff11df); }
.v2-nav .navbar-help-btn .ren-star--purple { fill: var(--purple, #ff5a5f); }
.v2-nav .navbar-help-btn .ren-star--yellow { fill: var(--yellow, #f5a623); }
.v2-nav .navbar-help-btn:hover { background: rgba(255, 17, 223, 0.08); }

/* Page offset: when the v2 nav is absolutely positioned and the
   content underneath is NOT a hero panel, pages may get the navbar
   sitting on top of their content. Each consuming template already
   handles its own hero offset; we only spend space here to neutralise
   the legacy `--topbar-height` reservation that base.css would
   otherwise leave for the old chrome. */
.top-bar.v2-nav + * { /* no-op selector kept as a docstring anchor */ }

/* Hide legacy left-cluster pill credits / mobile menu overlay /
   page-name fallbacks — v2 chrome doesn't render them. */
.v2-nav .top-bar-page-name { display: none; }

/* On mobile, swap to a static-positioned solid bar so the offcanvas
   trigger is reachable above any hero content. */
@media (max-width: 1199px) {
  .top-bar.v2-nav { position: relative; background: var(--v2-white); }
  .top-bar.v2-nav.sticky { position: fixed !important; }
  .v2-nav .header-main { padding: 10px 0; }
}

/* Christine (28 May): Free Reports nav entry — recolour the
   dropdown's 4px top border and its submenu hover-hyphen from
   the default pink (--v2-theme #FF11DF) to brand orange
   #ff9100. The active label text itself follows the unified
   black/bold/underlined active treatment above; only the
   accent chrome (border + dash + hover) is orange-scoped via
   :has() to the <li> containing the /free anchor. */
/* Christine (28 May): per-category accent applies to EVERY nested
   .submenu (not just the direct child), so the 4px top border on
   sub-submenus (e.g. Solutions → Review The Business → Leaders)
   inherits the parent category's colour instead of falling back
   to the global pink. Same descendant-combinator scope applies
   to the ::before hyphen marker below. */
.v2-nav .main-menu ul li:has(a[href="/free"]) .submenu {
  /* Free Reports → brand yellow */
  border-top-color: #ffd400;
}
.v2-nav .main-menu ul li:has(a[href="/explore"]) .submenu {
  /* Products → pink (explicit so it's locked against --v2-theme drift) */
  border-top-color: var(--pink, #FF00AA);
}
.v2-nav .main-menu ul li:has(a[href="/solutions"]) .submenu {
  /* Solutions → cyan (matches /work palette) */
  border-top-color: var(--cyan, #3bc0ff);
}
.v2-nav .main-menu ul li:has(a[href="/methodology"]) .submenu {
  /* Methodology → purple (matches /work palette) */
  border-top-color: var(--purple, #8011fa);
}
.v2-nav .main-menu ul li:has(a[href="/free"]) .submenu li a::before {
  background: #ff9100 !important; /* Free Reports → orange */
}
.v2-nav .main-menu ul li:has(a[href="/explore"]) .submenu li a::before {
  background: var(--pink, #FF00AA) !important; /* Products → pink */
}
.v2-nav .main-menu ul li:has(a[href="/solutions"]) .submenu li a::before {
  background: var(--cyan, #3bc0ff) !important; /* Solutions → cyan */
}
.v2-nav .main-menu ul li:has(a[href="/methodology"]) .submenu li a::before {
  background: var(--purple, #8011fa) !important; /* Methodology → purple */
}