/* ==========================================================================
   SatsRail navbar — SINGLE SOURCE OF TRUTH
   ==========================================================================

   ONE NAVBAR, FOUR SURFACES. The portal, the marketing site, the book and the
   developer docs all render the same `.navbar-bitcoin` markup, so they must
   not style it differently. This file is that style.

   It used to be a 289-line block duplicated verbatim in
   app/assets/stylesheets/satsrail.css and website/assets/css/satsrail.css,
   under a comment asking humans to "edit the two copies together". They were
   still byte-identical when the block was extracted here — which is luck, not
   a process. The same arrangement had already let flow_diagrams.css drift.

   Four consumers, one file:
     • Portal   — picked up by `require_tree .` in application.css.
     • Website  — copied to public/marketing/css/navbar.css by
                  `rake website:build`.
     • Book     — copied to public/book/assets/css/navbar.css by
                  `rake book:build`.
     • API docs — copied to public/developers/assets/css/navbar.css by
                  `rake api_docs:build`.

   The docs are the newest and the clearest argument for this file existing:
   they arrived from a repo of their own rendering a navbar of their own — a
   logo, a "Back to SatsRail" button and a gold "Get API Key" — which shared
   no markup, no styles and no links with this one, and so quietly missed
   every page the others gained.

   Depends on brand_tokens.css, which all three also load: the type scale,
   tracking and current-page colors are tokens there precisely so a size
   change lands on every navbar at once.

   One token this reads is deliberately NOT shared: --radius-sm. The portal
   uses 0.375rem and the other two 0.25rem, so each surface defines its own
   and the navbar takes whichever it is rendered on.

   Bootstrap 5.3.2 supplies the layout and behaviour underneath (.navbar,
   .dropdown, .collapse); this file is only the skin. A surface that renders
   this markup needs bootstrap.min.css and bootstrap.bundle.min.js from
   /vendor/, and bootstrap-icons for the `bi bi-*` glyphs.
   ========================================================================== */
.navbar-bitcoin {
  background: var(--gray-900);
  padding: 0;
  border-bottom: 1px solid rgba(232, 181, 60, 0.3);
}

.navbar-bitcoin .container-fluid {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.navbar-bitcoin .navbar-brand,
.navbar-bitcoin .nav-link,
.navbar-bitcoin .navbar-text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  color: var(--nav-color) !important;
}

.navbar-bitcoin .navbar-brand {
  font-size: var(--nav-fs-brand);
  font-weight: 600;
  color: #fff !important;
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
}

.navbar-bitcoin .navbar-brand i {
  color: var(--bitcoin-orange);
}

.navbar-bitcoin .navbar-brand .navbar-logo {
  height: var(--nav-logo-height);
  width: auto;
}

.navbar-bitcoin .nav-link {
  font-size: var(--nav-fs);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast, 120ms) var(--ease-out, ease),
              background var(--t-fast, 120ms) var(--ease-out, ease);
}

.navbar-bitcoin .navbar-brand,
.navbar-bitcoin .navbar-brand:hover,
.navbar-bitcoin .navbar-brand:focus,
.navbar-bitcoin .nav-link {
  text-decoration: none !important;
}

/* ── Current page ─────────────────────────────────────────────────────────
   A soft gold chip, not an underline. The marketing site used to slide a
   1px rule under the active link: it landed on the descenders, vanished
   under the icon on wrapped mobile rows, and was indistinguishable from
   the hover state it shared. The chip reads at a glance, survives
   wrapping, and matches the settings sidebar's active row — so "you are
   here" looks the same everywhere in the product.

   Gold now means current page and nothing else: hover brightens toward
   white instead of competing for the same color. */
.navbar-bitcoin .nav-link.active,
.navbar-bitcoin .nav-item.active > .nav-link {
  font-weight: 600;
  color: var(--nav-active-color) !important;
  background: var(--nav-active-bg);
}

.navbar-bitcoin .nav-link:hover,
.navbar-bitcoin .nav-link:focus {
  color: var(--nav-color-hover) !important;
  background: rgba(255, 255, 255, 0.07);
  text-decoration: none !important;
}

.navbar-bitcoin .nav-link.active:hover,
.navbar-bitcoin .nav-link.active:focus,
.navbar-bitcoin .nav-item.active > .nav-link:hover,
.navbar-bitcoin .nav-item.active > .nav-link:focus {
  color: var(--nav-active-color) !important;
  background: var(--nav-active-bg-hover);
}

/* Small count/status pill riding beside a nav label (open support
   tickets). Was five inline style declarations in the navbar partial. */
.navbar-bitcoin .nav-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.2em 0.45em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Navbar CTA Button — matches monospace theme */
.navbar-bitcoin .btn-navbar {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  font-size: var(--nav-fs-sm);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: all var(--t-fast, 120ms) var(--ease-out, ease);
}

.navbar-bitcoin .btn-navbar-primary {
  background: var(--bitcoin-orange);
  border: 1px solid var(--bitcoin-orange);
  color: #fff;
}

.navbar-bitcoin .btn-navbar-primary:hover {
  background: var(--bitcoin-orange-dark);
  border-color: var(--bitcoin-orange-dark);
  color: #fff;
}

.navbar-bitcoin .btn-navbar-outline {
  background: transparent;
  border: 1px solid rgba(232, 181, 60, 0.5);
  color: var(--bitcoin-orange);
}

.navbar-bitcoin .btn-navbar-outline:hover {
  background: rgba(232, 181, 60, 0.12);
  border-color: var(--bitcoin-orange);
  color: var(--bitcoin-orange);
}

.navbar-bitcoin .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--nav-color);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  font-size: var(--nav-fs-sm);
}

.navbar-bitcoin .btn-outline-light:hover {
  background: var(--bitcoin-orange);
  border-color: var(--bitcoin-orange);
  color: #fff;
}

/* Dropdown styling — matches monospace theme */
.navbar-bitcoin .dropdown-menu {
  background: var(--gray-900);
  font-family: var(--font-mono);
  font-size: var(--nav-fs);
  text-transform: uppercase;
  letter-spacing: var(--nav-tracking);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 181, 60, 0.3);
  margin-top: 0.25rem;
  padding: 0.35rem 0;
}

.navbar-bitcoin .dropdown-item {
  padding: 0.45rem 1rem;
  font-weight: 500;
  color: var(--nav-color);
  transition: background var(--t-fast, 120ms) var(--ease-out, ease),
              color var(--t-fast, 120ms) var(--ease-out, ease);
  text-decoration: none !important;
}

.navbar-bitcoin .dropdown-item:hover,
.navbar-bitcoin .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.07);
  color: var(--nav-color-hover);
  text-decoration: none !important;
}

/* Same chip as the top-level links, so opening the menu you are already
   inside shows you which row you are on. Also beats Bootstrap's blue
   `.dropdown-item.active`, which the dark shell has no use for. */
.navbar-bitcoin .dropdown-item.active,
.navbar-bitcoin .dropdown-item:active {
  background: var(--nav-active-bg);
  color: var(--nav-active-color);
  font-weight: 600;
}

.navbar-bitcoin .dropdown-item.active:hover,
.navbar-bitcoin .dropdown-item.active:focus {
  background: var(--nav-active-bg-hover);
  color: var(--nav-active-color);
}

.navbar-bitcoin .dropdown-header {
  font-size: var(--nav-fs-sm);
  letter-spacing: var(--nav-tracking);
  color: rgba(255, 255, 255, 0.45);
}

.navbar-bitcoin .dropdown-item i {
  font-size: 0.9em;
  opacity: 0.8;
}

.navbar-bitcoin .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 0.25rem 0;
}

/* Proportional icon sizing */
.navbar-bitcoin .nav-link i,
.navbar-bitcoin .navbar-brand i {
  font-size: 1em;
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
  .navbar-bitcoin .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .navbar-bitcoin .navbar-toggler-icon {
    width: 1.2em;
    height: 1.2em;
  }

  /* Stacked rows are their own tap targets — the chip needs to read as a
     full-width row here, not a label-width pill. */
  .navbar-bitcoin .nav-link {
    padding: 0.55rem 0.75rem;
  }

  .navbar-bitcoin .dropdown-menu {
    background: rgba(17, 24, 39, 0.95);
    border: none;
    margin-top: 0;
  }

  /* Navbar CTA buttons — full-width stacked on mobile */
  .navbar-bitcoin .navbar-cta-buttons {
    border-color: rgba(255, 255, 255, 0.1) !important;
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
  }

  .navbar-bitcoin .navbar-cta-buttons .btn {
    font-size: var(--nav-fs);
    padding: 0.55rem 1rem;
    text-align: center;
  }

  .navbar-bitcoin .navbar-cta-buttons .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.25);
  }

  .navbar-bitcoin .navbar-cta-buttons .btn-navbar-primary {
    padding: 0.55rem 1rem;
    font-size: var(--nav-fs);
  }
}

/* Remove border-top on desktop for navbar CTA */
@media (min-width: 992px) {
  .navbar-bitcoin .navbar-cta-buttons {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ============================================
   Animated hamburger → X toggle
   ============================================
   Part of the component, not a surface tweak: the shared markup carries
   `navbar-toggler-x` and without these rules the collapsed nav shows three
   unstyled bars. Lived in the marketing site's stylesheet until the book
   started rendering the same partial. The portal's own navbar markup does
   not use the class, so it renders exactly as before.
   ============================================ */
.navbar-toggler.navbar-toggler-x {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.5rem 0.65rem;
  width: 44px;
  height: 38px;
  position: relative;
  background: transparent;
}
.navbar-toggler.navbar-toggler-x:focus {
  box-shadow: 0 0 0 0.2rem rgba(232, 181, 60, 0.35);
  outline: none;
}
.navbar-toggler.navbar-toggler-x .bar {
  display: block;
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.navbar-toggler.navbar-toggler-x .bar-top { top: 12px; }
.navbar-toggler.navbar-toggler-x .bar-mid { top: 18px; }
.navbar-toggler.navbar-toggler-x .bar-bot { top: 24px; }

/* Open state: collapse top + bottom bars to the middle and rotate into an X.
 * Middle bar fades out. */
.navbar-toggler.navbar-toggler-x:not(.collapsed) .bar-top {
  top: 18px;
  transform: rotate(45deg);
}
.navbar-toggler.navbar-toggler-x:not(.collapsed) .bar-mid {
  opacity: 0;
}
.navbar-toggler.navbar-toggler-x:not(.collapsed) .bar-bot {
  top: 18px;
  transform: rotate(-45deg);
}

/* =========================================================================

/* ============================================
   .navbar-public — the outward-facing treatment
   ============================================
   The marketing site and the book render one partial; the portal renders
   its own. These are the differences that belong to that partial rather
   than to either site, so they hang off a modifier class it carries. The
   portal's markup has no `navbar-public`, so nothing here reaches it.

   They were previously unscoped rules in the marketing site's stylesheet,
   which is why the book — rendering identical markup from a different
   stylesheet — came out with a solid gold Sign In button where the site
   has a ghost.

   The site's translucent backdrop is NOT here. That one is genuinely
   surface-specific: a sticky bar over a dark canvas needs it, and over the
   book's warm paper it would just let the paper bleed through. It stays in
   website/assets/css/satsrail.css.
   ============================================ */

/* Breathing room between a dropdown's label and Bootstrap's caret. */
.navbar-public .dropdown-toggle::after {
  margin-left: 0.35rem;
}

/* Sign In: refined ghost button instead of the solid gold pill. */
.navbar-public .btn-navbar-primary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--text) !important;
  font-weight: 500;
  padding: 0.5rem 1.1rem !important;
  border-radius: var(--radius-md);
  letter-spacing: -0.01em;
  transition: background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

.navbar-public .btn-navbar-primary:hover {
  background: rgba(232, 181, 60, 0.12) !important;
  border-color: var(--bitcoin-orange) !important;
  color: var(--bitcoin-orange) !important;
}