/* ---------------------------------------------------------------------------
   header.css — the black bar: logo left, menu beside it, account pinned right.

   SIZING, worked out from the logo rather than guessed. The logo is a 600x68
   wordmark — an 8.8:1 ratio — so every pixel of logo height costs ~8.8px of
   horizontal room. Everything that must share the row: logo + 7 menu items
   (Services included) + cart badge + log-in pill + gutters.

       logo 48px -> 424px wide -> row needs 1279px  (no slack on a 1280 laptop)
       logo 44px -> 388px wide -> row needs 1243px  (37px — too tight)
       logo 40px -> 353px wide -> row needs 1208px  (72px of slack)  <-- chosen

   40px in a 64px bar puts the logo at ~62% of bar height, the standard
   comfortable proportion. Smaller looks lost in the bar; larger crowds it.

   Colours are the live header's, unchanged: #000 bar, Arial 14px uppercase
   white links, #1DB954 on hover and for the active page.
   --------------------------------------------------------------------------- */

.rb-header {
  background: #000000;
  width: 100%;

  /* STICKY, added 19 September 2026.

     The footer used to repeat Browse, Pricing, Account and Contact from this
     menu. That was not redundancy for its own sake — it was the only navigation
     available at the bottom of a long page, because this header scrolled away.
     /browse in particular is meant to be scrolled, and reaching the end of it
     left a visitor with no way anywhere except back up.

     Making the header sticky solves that properly, and is what let the footer
     drop those four links and carry the pages that have no other route in
     (Become a Contributor, Become a Referrer) instead.

     ⚠️ If this is ever reverted to static, put those four footer links back in
     the same commit, or long pages become navigational dead ends. */
  position: sticky;
  top: 0;
  z-index: 50;

  /* A hairline and a shadow, so it reads as a layer over the page rather than
     as part of it once content starts passing underneath. */
  border-bottom: 1px solid #1f1f1f;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Anchor targets — the refund section of /terms, the jump links on /help —
   would otherwise land under the sticky header. */
:target { scroll-margin-top: 84px; }

/* Someone on a short phone in landscape has very little height to spare; a
   pinned header there costs more than it gives. */
@media (max-height: 420px) {
  .rb-header { position: static; box-shadow: none; }
}

.rb-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  /* Narrowed 17 September 2026 at Joe's request: the logo stays 40px, the bar
     loses 8px of air. 40 + 8 + 8 = 56px, which is the compact end of normal for
     a desktop header — the logo now fills ~71% of the bar instead of 62%, so it
     reads as deliberate rather than floating. The nav's own padding had to come
     down with it, or the links would be 41px tall inside a 40px space and push
     the bar back out to 57px. */
  padding: 8px 24px;
  min-height: 56px;
}

.rb-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.rb-logo img { height: 40px; width: auto; display: block; }

/* The nav takes the slack, so its items stay left against the logo and the
   pill is pushed to the right edge by the nav's own growth, not by a spacer. */
.rb-nav { flex: 1 1 auto; min-width: 0; }
.rb-nav ul { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.rb-nav li { margin: 0; }

.rb-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.rb-nav li:hover > a { color: #1DB954; }

/* Active page: green plus a short rule under the word, as on the live site. */
.rb-nav li.active > a { color: #1DB954; position: relative; }
.rb-nav li.active > a::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  background: #1DB954;
}

/* Account state, pinned right. flex-shrink: 0 so it is never the thing that
   gets squeezed when the menu is full. */
.rb-auth { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 1199px) {
  .rb-header-inner { gap: 20px; padding: 8px 20px; min-height: 54px; }
  .rb-logo img { height: 36px; }
  .rb-nav a { padding: 10px 8px; font-size: 13px; }
}

@media (max-width: 767px) {
  /* The wordmark cannot go much below 28px and stay readable — at 28px it is
     still 247px wide, which is most of a 375px phone. The menu therefore drops
     to its own row rather than fighting it.

     PROPER FIX, LATER: there is already a compact 'rB' mark in the repo, at
     site/assets/favicon.png. Turning that into a phone logo would free ~200px
     and let the menu sit back on one line. That is a Phase 9 job, not a
     migration job. */
  .rb-header-inner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; min-height: 56px; }
  .rb-logo img { height: 28px; }
  .rb-nav { flex: 1 0 100%; order: 3; }
  .rb-nav ul { gap: 2px; }
  /* Measured on a 375px viewport: 10px padding gave a 41px tap target. The
     accessibility guideline is 44px, and on a phone that difference is real —
     it is the gap between hitting the link and hitting the one beside it. */
  .rb-nav a { padding: 12px 8px; font-size: 13px; min-height: 44px; }
  .rb-auth { margin-left: auto; order: 2; }
}