/* ==========================================================================
   NAV — sticky site header
   --------------------------------------------------------------------------
   Structure
     .rb-nav              <header>, sticky, 1px bottom rule
       .rb-nav__bar       one flex row: brand | search | actions
       .rb-nav__panel     collapsed navigation sheet (markup only this pass)

   Horizontal inset
     The header is page CHROME, not page content, so it deliberately opts out
     of `.rb-container`: it spans the full 1440 canvas and hugs the edge far
     tighter than the content grid does (24px vs the container's 64px desktop
     gutter). That is not decoration — the desktop bar needs 1260px of runway
     for the three rails, and `.rb-container`'s 1184px content box cannot
     supply it. The inset lives in one token, `--rb-nav-inset`, so it stays a
     single decision rather than scattered padding.
   ========================================================================== */

.rb-nav {
  --rb-nav-inset: var(--rb-ref-space-3);          /* 12px <1200 */

  position: sticky;
  inset-block-start: 0;
  z-index: var(--rb-sys-z-sticky);
  background: var(--rb-sys-bg-canvas);
  border-block-end: var(--rb-ref-border-hairline) solid var(--rb-sys-border-subtle);
}

@media (min-width: 1200px) {
  .rb-nav { --rb-nav-inset: var(--rb-ref-space-6); }  /* 24px ≥1200 */
}

/* --- The bar ------------------------------------------------------------
   20px of padding around a 44px control gives the 84px bar the reference
   measures. NORMALISED: reference padded 19.5px for an 83px bar. */
.rb-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rb-ref-space-6);
  padding-block: var(--rb-ref-space-5);
  padding-inline: var(--rb-nav-inset);
}

/* --- Brand --------------------------------------------------------------- */
.rb-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-4);
}

.rb-nav__logo {
  display: flex;
  align-items: center;
  flex: none;
}

/* Logotype geometry, from the mark's own 118.555 × 35.5869 viewBox.
   NORMALISED: reference rendered 118.53 × 35.58 — snapped to 120 wide. */
.rb-nav__logotype {
  width: 120px;
  height: auto;
  color: var(--rb-sys-fg-primary);
}

/* --- Nav lists (primary + secondary share one look) ---------------------- */
.rb-nav__list {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-4);
}

.rb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--rb-ref-space-1);
  color: var(--rb-sys-fg-secondary);
  font-size: var(--rb-sys-text-p1-size);
  line-height: var(--rb-sys-text-p1-leading);
  letter-spacing: var(--rb-sys-text-p1-tracking);
  font-weight: var(--rb-ref-weight-medium);
  white-space: nowrap;
  transition: color var(--rb-sys-duration-2) ease;
}
.rb-nav__link:hover { color: var(--rb-sys-fg-primary); }

/* NORMALISED: reference chevron box was 10px — snapped to the 4px grid.
   The 10 × 6 viewBox keeps its own aspect inside the square. */
.rb-nav__chevron {
  flex: none;
  width: var(--rb-ref-space-3);
  height: var(--rb-ref-space-3);
}

/* --- Ask Rubrik ----------------------------------------------------------
   The slot takes the leftover width and centres a 360px field in it; below
   ~1310px the field simply narrows rather than pushing the rails apart. */
.rb-nav__search-slot {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.rb-nav__search {
  width: 360px;
  max-width: 100%;
}

/* NORMALISED: reference sparkle was 19px — snapped to the 4px grid. */
.rb-nav__sparkle {
  width: var(--rb-ref-space-5);
  height: var(--rb-ref-space-5);
}

/* --- Actions rail -------------------------------------------------------- */
.rb-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-6);
}

/* Language pill — globe + locale.
   NORMALISED: reference padding was 8px 14px; 14 is off-scale → 16. */
.rb-nav__lang {
  display: flex;
  align-items: center;
  gap: var(--rb-ref-space-1);
  flex: none;
  padding: var(--rb-ref-space-2) var(--rb-ref-space-4);
  background: var(--rb-sys-bg-pill);
  border-radius: var(--rb-ref-radius-full);
  color: var(--rb-sys-fg-primary);
  font-size: var(--rb-sys-text-p1-size);
  line-height: var(--rb-sys-text-p1-leading);
  letter-spacing: var(--rb-sys-text-p1-tracking);
  font-weight: var(--rb-ref-weight-medium);
  white-space: nowrap;
}

.rb-nav__globe {
  flex: none;
  width: var(--rb-ref-space-4);
  height: var(--rb-ref-space-4);
  color: var(--rb-sys-fg-brand);
}

/* The chrome CTA runs denser than a page CTA while it shares the bar with a
   logo and a toggle; the shared `.rb-btn--md` inset returns once there is
   room for it at the desktop breakpoint. */
.rb-nav__cta { padding-inline: var(--rb-ref-space-2); }

/* --- Menu toggle --------------------------------------------------------- */
.rb-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--rb-ref-space-8);
  height: var(--rb-ref-space-8);
  border: var(--rb-ref-border-hairline) solid var(--rb-sys-border-subtle);
  border-radius: var(--rb-ref-radius-md);
  color: var(--rb-sys-fg-primary);
  transition: background-color var(--rb-sys-duration-2) ease,
              border-color     var(--rb-sys-duration-2) ease;
}
.rb-nav__toggle:hover {
  background: var(--rb-sys-bg-muted);
  border-color: var(--rb-sys-border-default);
}

/* NORMALISED: reference burger was 18px — snapped to the 4px grid. */
.rb-nav__burger {
  width: var(--rb-ref-space-5);
  height: var(--rb-ref-space-5);
}

/* --- Collapsed panel -----------------------------------------------------
   Ships `hidden`; the toggle's aria-expanded/aria-controls already point at
   it so the later behaviour pass only has to flip the attribute. */
.rb-nav__panel {
  border-block-start: var(--rb-ref-border-hairline) solid var(--rb-sys-border-subtle);
  background: var(--rb-sys-bg-canvas);
}

.rb-nav__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-6);
  padding-block: var(--rb-ref-space-6);
  padding-inline: var(--rb-nav-inset);
}

.rb-nav__search--panel { width: 100%; }

.rb-nav__panel-list {
  display: flex;
  flex-direction: column;
}

.rb-nav__panel-item + .rb-nav__panel-item {
  border-block-start: var(--rb-ref-border-hairline) solid var(--rb-sys-border-subtle);
}

.rb-nav__panel-link {
  display: flex;
  justify-content: space-between;
  min-height: var(--rb-ref-space-9);
}

.rb-nav__lang--panel { align-self: flex-start; }

/* ==========================================================================
   BREAKPOINTS
   Declared last so the visibility switch wins over the display values the
   components above set on the same elements.
   ========================================================================== */

/* Everything on `.rb-nav__rail` belongs to the full desktop bar only. */
.rb-nav__rail { display: none; }

@media (min-width: 1200px) {
  .rb-nav__rail   { display: flex; }
  .rb-nav__toggle { display: none; }
  .rb-nav__panel  { display: none; }

  /* Rails sit closer together once all four of them are on screen. */
  .rb-nav__actions { gap: var(--rb-ref-space-4); }
  .rb-nav__cta     { padding-inline: var(--rb-ref-space-6); }
}