/* One partnership link across the existing public headers. */
.nav-partner { font: inherit; font-size: .85rem; font-weight: 700; color: var(--orange, #ea481e); white-space: nowrap; padding: .5rem .6rem; border-radius: 10px; }
.nav-partner:hover, .nav-partner[aria-current="page"] { background: var(--bg-3); }
.nav-partner:focus-visible { outline: 2px solid var(--orange, #ea481e); outline-offset: 3px; }
@media (max-width: 980px) {
  .navbar .nav-links { position: fixed; top: 0; right: -100%; height: 100vh; height: 100dvh; width: min(300px, 82vw); background: var(--bg-card); flex-direction: column; align-items: stretch; padding: 5.5rem 1.25rem 1.5rem; gap: .25rem; transition: right .3s; border-left: 1px solid var(--border); z-index: 999; box-shadow: var(--shadow-lg); }
  .navbar .nav-links.open { right: 0; }
  .navbar .nav-links a { display: block; font-size: 1.05rem; padding: .8rem 1rem; }
  .navbar .hamburger { display: flex; }
  .navbar .btn-nav { display: none; }
}
@media (max-width: 600px) {
  .navbar .nav-inner { gap: .65rem; }
  .navbar .nav-logo { flex-shrink: 0; }
  .navbar .nav-actions { flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
  .navbar .nav-actions .nav-partner { font-size: .78rem; padding: .4rem; }
  .navbar .nav-actions > .btn { padding: .5rem .65rem; font-size: .75rem; }
}

/* ============================================================
   COMPATIBILITY TEST — the header's one secondary action
   ============================================================
   It lives in .nav-actions, between the theme toggle and the primary
   CTA, so it is built as that CTA's quieter sibling: same pill shape,
   same type scale, hairline + brand tint instead of the gradient fill.
   The mark is two interlocking rings — the Venn read of "compatible",
   and an echo of the r()mrr logo — and it is the one element that
   takes the gradient, on hover and on the current page.
   Below 820px the label is dropped and the pill becomes the mark. */
.navbar .nav-compat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  padding: 0.55rem 1rem 0.55rem 0.55rem;  /* matches .btn-nav's 39px pill */
  border-radius: var(--radius-full, 9999px);
  background-color: var(--tint, rgba(234, 72, 30, 0.08));
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px var(--border-2, rgba(20, 18, 15, 0.16));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color var(--t, 0.24s ease), background-color var(--t, 0.24s ease),
              box-shadow var(--t, 0.24s ease), transform var(--t, 0.24s ease);
}
.navbar .nav-compat:hover {
  color: var(--text);
  background-color: var(--tint-2, rgba(234, 72, 30, 0.14));
  box-shadow: inset 0 0 0 1px rgba(234, 72, 30, 0.42), 0 6px 18px var(--glow, rgba(234, 72, 30, 0.18));
  transform: translateY(-1px);
}
.navbar .nav-compat:active { transform: translateY(0); }
.navbar .nav-compat:focus-visible { outline: 2px solid var(--orange, #ea481e); outline-offset: 3px; }
.navbar .nav-compat[aria-current="page"] {
  color: var(--orange, #ea481e);
  background-color: var(--tint-2, rgba(234, 72, 30, 0.14));
  box-shadow: inset 0 0 0 1px rgba(234, 72, 30, 0.45);
}

/* The mark: a 22px badge that inverts to the brand gradient on hover. */
.nav-compat-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  color: var(--orange, #ea481e);
  background: var(--tint-2, rgba(234, 72, 30, 0.14));
  box-shadow: inset 0 0 0 1px rgba(234, 72, 30, 0.18);
  transition: color var(--t, 0.24s ease), background var(--t, 0.24s ease);
}
.nav-compat-icon svg { width: 13px; height: 13px; display: block; }
.navbar .nav-compat:hover .nav-compat-icon,
.navbar .nav-compat[aria-current="page"] .nav-compat-icon {
  color: #fff;
  background: var(--grad-brand, linear-gradient(135deg, #ea481e, #f7940c));
  box-shadow: 0 2px 6px var(--glow, rgba(234, 72, 30, 0.2));
}

/* Between the drawer breakpoint and the full container width the row is at
   its tightest: five links, the pill and the CTA. Everything gives up a
   little padding rather than the pill dropping out of the bar. */
@media (min-width: 981px) and (max-width: 1180px) {
  .navbar .nav-inner { gap: 1rem; }
  .navbar .nav-links a { padding: 0.45rem 0.55rem; font-size: 0.85rem; white-space: nowrap; }
  .navbar .nav-actions { gap: 0.7rem; }
}

/* Phones: the label goes, the mark stays — a 34px tap target that reads as
   a sibling of the toggle. The accessible name is unchanged. */
@media (max-width: 820px) {
  /* The pill's own ring and fill come off so the mark is the whole control —
     a ring inside a ring reads as a target. */
  .navbar .nav-compat,
  .navbar .nav-compat:hover {
    padding: 0; background: none; box-shadow: none; transform: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .navbar .nav-compat .nav-compat-icon { width: 34px; height: 34px; }
  .navbar .nav-compat .nav-compat-icon svg { width: 17px; height: 17px; }
  .navbar .nav-compat .nav-compat-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .nav-compat:hover { transform: none; }
}