/* ── Floating white pill navbar ────────────────────────────────
   Extracted from home.css so every page that includes
   partials/navbar.html (My Work, admin, legal, company, etc.) gets
   the same pill chrome — not just home/free/explore which happen to
   load home.css. Loaded directly by partials/navbar.html so there is
   one source of truth and adding a new page never re-orphans the
   styling. */
.top-bar.transparent {
  background: transparent;
  /* Top inset chosen so the pill's vertical centre lines up with
     the top edge of the gradient panel (panel margin-top minus
     half the pill height). */
  padding: 6px 56px 0;
  height: auto;
  align-items: flex-start;
  /* Let clicks pass through the dead zone to the hero beneath;
     re-enabled on the visible pill below. */
  pointer-events: none;
}
.top-bar.transparent .top-bar-inner {
  pointer-events: auto;
  background: var(--white);
  border-radius: 100px;
  padding: 10px 28px;
  height: calc(var(--topbar-height) - 12px);
  max-width: var(--content-max-width);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* Flip the navbar text/logo to dark since the chrome is now white. All
   nav controls share the same size/weight so the bar reads as one row of
   peers — only language gets a slightly muted tone since it's a utility. */
.top-bar.transparent .top-bar-link,
.top-bar.transparent .nav-lang-trigger,
.top-bar.transparent .top-bar-center-link {
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
  letter-spacing: 0.1px;
}
/* Active-page bold survives the landing-hero override above. Active
   items stay black but go heavier (800) so the current page is
   unmistakable without the pink tint. */
.top-bar.transparent .top-bar-center-link.active,
.top-bar.transparent .top-bar-link.active {
  font-weight: 800;
  color: var(--navy);
}
.top-bar.transparent .nav-lang-trigger {
  color: var(--ink-2);
}
.top-bar.transparent .top-bar-link:hover,
.top-bar.transparent .nav-lang-trigger:hover,
.top-bar.transparent .top-bar-center-link:hover {
  color: var(--pink);
  opacity: 1;
}

/* Pricing icon link in the right-hand nav cluster. Kept the same
   typographic weight as its neighbours (My Work, EN) so it reads as
   another peer in the row, just expressed as an icon. */
.top-bar.transparent .top-bar-right {
  gap: 20px;
}
.top-bar.transparent .top-bar-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  padding: 6px;
  line-height: 0;
  transition: color 140ms ease;
}
.top-bar.transparent .top-bar-icon-link:hover {
  color: var(--pink);
}

/* "Free Reports" pill in the centre nav — visually distinct from the
   five mega-menu triggers because it's a direct link, not a dropdown. */
.top-bar.transparent .top-bar-center-link--pill,
.top-bar.transparent.scrolled .top-bar-center-link--pill,
.top-bar.white .top-bar-center-link--pill,
.top-bar-center-link--pill {
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
}
.top-bar.transparent .top-bar-center-link--pill:hover,
.top-bar-center-link--pill:hover {
  background: var(--pink);
  color: var(--white);
}
.top-bar.transparent .logo-full.logo-inverse {
  display: none;
}
.top-bar.transparent .logo-full.logo-color {
  display: block;
}
.top-bar.transparent .btn-signup {
  background: var(--navy);
  color: var(--white);
}
.top-bar.transparent .mobile-menu-btn,
.top-bar.transparent .mobile-search-btn,
.top-bar.transparent .mobile-profile-btn {
  color: var(--navy);
}
/* Keep the floating white pill on scroll — do not morph back into a
   flush full-width bar. The base .top-bar is position:fixed so it stays
   pinned to the top of the viewport on its own. */
.top-bar.transparent.scrolled {
  padding: 6px 56px 0;
}
.top-bar.transparent.scrolled .top-bar-inner {
  background: var(--white);
  border-radius: 100px;
  padding: 10px 28px;
  height: calc(var(--topbar-height) - 12px);
}

/* ── Mobile (≤768px) ────────────────────────────────────────
   On phones, drop the floating-pill chrome entirely. The hero
   panel sits flush to the viewport top, so a pill with side
   gutters competes with the panel's rounded corners and wastes
   vertical space.
   - Outer bar gets 20px side padding so the logo and the
     hamburger sit 20px from each viewport edge.
   - The inner is reset to a transparent, full-width row.
   - Hamburger colour follows the same scroll-triggered swap
     the logo wordmark already uses (white over the dark hero,
     black once scrolled onto white content). The .scrolled
     class is added by navbar.js when the page scrolls past
     the hero. */
@media (max-width: 767px) {
  /* Solid white fill behind the mobile navbar on every page EXCEPT
     the home page. Stops content underneath (e.g. the pink report
     hero gradient) from bleeding through the gaps around the nav
     pill. The home page keeps the see-through chrome via .page-home
     on the <body>. */
  body:not(.page-home) .top-bar.transparent,
  body:not(.page-home) .top-bar.transparent.scrolled {
    background: var(--white);
  }

  .top-bar.transparent,
  .top-bar.transparent.scrolled {
    padding: 10px 20px 0;
    align-items: center;
    pointer-events: auto;
  }
  .top-bar.transparent .top-bar-inner,
  .top-bar.transparent.scrolled .top-bar-inner {
    background: transparent;
    border-radius: 0;
    padding: 0;
    height: auto;
    box-shadow: none;
    max-width: none;
  }
  /* Default on inner pages (white content, no dark hero): hamburger
     renders black so it's visible. The home page overrides this in
     home.css to render white over the pink gradient. */
  .top-bar.transparent .mobile-menu-btn,
  .top-bar.transparent.scrolled .mobile-menu-btn {
    color: var(--navy);
  }

  /* Profile avatar + language trigger sit alongside the hamburger
     in the top-bar-right cluster on mobile. Default to the solid-
     black appearance suitable for white inner pages; home.css
     overrides these to ghost-white over the pink gradient. The
     avatar shrinks from 32px → 28px on mobile so it doesn't read
     as heavier than the 24px hamburger / language icons. */
  .top-bar.transparent .top-bar-user-avatar,
  .top-bar.transparent.scrolled .top-bar-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
    background: var(--navy);
    color: var(--white);
    box-shadow: none;
  }
  .top-bar.transparent .nav-lang-trigger,
  .top-bar.transparent.scrolled .nav-lang-trigger {
    color: var(--ink-2);
  }

  /* Credits / Top up / Upgrade pill is duplicated inside the
     hamburger menu on mobile, so hide it from the top bar to
     declutter the cluster (hamburger | logo | lang | avatar). */
  .top-bar-pill-credits {
    display: none;
  }
}