/* ============================================================
   FLOATING CAPSULE NAVIGATION + SPLIT ARROW BUTTON  (WO6)
   Self-contained: the homepage links this file directly and
   main.css @imports it for the code/* pages, so no full stylesheet
   is dumped onto the all-inline homepage. Nav-scoped tokens use
   literal brand hex so the nav renders identically on every page,
   including index.html whose inline :root redefines --rf-blue etc.
   Only --font-body / --font-display are borrowed (identical in both
   palettes). Title Case, 14px+, never uppercase micro-type.
   ============================================================ */
:root {
  --rf-nav-fill: rgba(255, 251, 245, 0.82);
  --rf-nav-fill-strong: rgba(255, 251, 245, 0.95);
  --rf-nav-border: rgba(255, 255, 255, 0.55);
  --rf-nav-ink: #16273B;
  --rf-nav-ink-soft: #5B6472;
  --rf-nav-accent: #003c64;
  --rf-nav-radius: 14px;
  --rf-nav-grad: linear-gradient(150deg, #4e77bb 0%, #694097 60%, #ef3f6c 100%);
  --rf-nav-shadow: 0 8px 30px rgba(10, 20, 40, 0.12);
  --rf-nav-shadow-strong: 0 12px 38px rgba(10, 20, 40, 0.20);
  --rf-nav-inset: 24px;
  --rf-nav-h: 56px;
  --rf-nav-hover: rgba(107, 155, 209, 0.14);
}

html { scroll-padding-top: calc(var(--rf-nav-h) + var(--rf-nav-inset) + 1rem); }

.rf-skip {
  position: fixed; top: 0; left: 0; z-index: 1200;
  transform: translateY(-120%);
  background: var(--rf-nav-accent); color: #fff; font-weight: 600; font-size: 0.95rem;
  padding: 0.7rem 1.1rem; border-radius: 0 0 10px 0; text-decoration: none;
  transition: transform 0.15s ease;
}
.rf-skip:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: -3px; }

.rf-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.rf-navwrap {
  position: fixed; top: var(--rf-nav-inset); left: var(--rf-nav-inset); right: var(--rf-nav-inset);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  gap: 1rem; pointer-events: none;
}
.rf-navwrap > * { pointer-events: auto; }

.rf-logo, .rf-nav__capsule, .rf-nav__burger, .rf-nav__panel {
  background: var(--rf-nav-fill);
  border: 1px solid var(--rf-nav-border);
  border-radius: var(--rf-nav-radius);
  box-shadow: var(--rf-nav-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rf-logo, .rf-nav__capsule, .rf-nav__burger, .rf-nav__panel { background: var(--rf-nav-fill-strong); }
}
.rf-navwrap.is-scrolled .rf-logo,
.rf-navwrap.is-scrolled .rf-nav__capsule,
.rf-navwrap.is-scrolled .rf-nav__burger {
  background: var(--rf-nav-fill-strong); box-shadow: var(--rf-nav-shadow-strong);
}

.rf-logo { display: inline-flex; align-items: center; height: var(--rf-nav-h); padding: 0 1.1rem; }
.rf-logo:focus-visible, .rf-logo-inline:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 3px; }
.rf-logo__full { height: 30px; width: auto; display: block; }
.rf-logo__icon { height: 32px; width: auto; display: none; }
/* Desktop shows the logo inside the single centered capsule; this standalone capsule is mobile-only. */
.rf-logo--mobile { display: none; }
.rf-logo-inline { display: inline-flex; align-items: center; padding-right: 1rem; margin-right: 0.6rem; border-right: 1px solid rgba(10, 20, 40, 0.12); text-decoration: none; }
.rf-logo-inline__full { height: 26px; width: auto; display: block; }
.rf-logo-inline__icon { height: 30px; width: auto; display: none; }

.rf-nav { display: flex; align-items: center; gap: 1.15rem; }
.rf-nav__login {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--rf-nav-ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; padding: 0.6rem 1rem; border-radius: 9px;
  margin: 0 0.1rem 0 0.2rem; transition: background 0.15s ease, color 0.15s ease;
}
.rf-nav__login:hover { background: var(--rf-nav-hover); color: var(--rf-nav-accent); }
.rf-nav__login:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 3px; }

.rf-nav__capsule {
  display: flex; align-items: center; height: var(--rf-nav-h);
  padding: 0 0.6rem 0 1.15rem; gap: 0.3rem;
}
.rf-nav__list { list-style: none; display: flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0; }
.rf-nav__item { position: relative; }

.rf-nav__link, .rf-nav__trigger {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--rf-nav-ink); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 1rem; border-radius: 9px; text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.rf-nav__link:hover, .rf-nav__trigger:hover { background: var(--rf-nav-hover); color: var(--rf-nav-accent); }
.rf-nav__link:focus-visible, .rf-nav__trigger:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 2px; }
.rf-nav__link[aria-current="page"] {
  font-weight: 700; color: var(--rf-nav-accent);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.rf-nav__chevron { width: 12px; height: 12px; transition: transform 0.2s ease; }
.rf-nav__trigger[aria-expanded="true"] .rf-nav__chevron { transform: rotate(180deg); }
.rf-nav__trigger[aria-expanded="true"] { background: var(--rf-nav-hover); }

.rf-nav__panel {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; max-width: min(92vw, 340px);
  padding: 0.5rem; z-index: 1001;
}
.rf-nav__panel ul { list-style: none; margin: 0; padding: 0; }
.rf-nav__panel a {
  display: block; padding: 0.6rem 0.75rem; border-radius: 10px; text-decoration: none;
  min-height: 44px; transition: background 0.15s ease;
}
.rf-nav__panel a:hover { background: var(--rf-nav-hover); }
.rf-nav__panel a:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: -1px; }
.rf-nav__panel-label { display: block; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--rf-nav-ink); }
.rf-nav__panel-desc { display: block; font-family: var(--font-body); font-size: 0.8125rem; color: var(--rf-nav-ink-soft); margin-top: 0.1rem; line-height: 1.35; }

.rf-nav__donate {
  margin-left: 0.35rem; display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--rf-nav-h) - 12px); padding: 0 1.1rem; border-radius: 10px;
  background: var(--rf-nav-grad); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(105, 64, 151, 0.3); transition: filter 0.15s ease;
}
.rf-nav__donate:hover { filter: brightness(1.08); }
.rf-nav__donate:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 5px var(--rf-nav-accent); }

/* Optional: nav Donate rendered as the split label+arrow button, scaled to the capsule. */
.rf-nav__donate.rf-split-btn { height: auto; margin-left: 0.35rem; }
.rf-nav__donate.rf-split-btn:hover { filter: brightness(1.08); }
.rf-nav__donate .rf-split-btn__label { padding: 0.5rem 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; border-radius: 10px; box-shadow: 0 4px 12px rgba(105, 64, 151, 0.3); }
.rf-nav__donate .rf-split-btn__arrow { width: 2.15rem; border-radius: 10px; box-shadow: 0 4px 12px rgba(105, 64, 151, 0.3); }
.rf-nav__donate .rf-split-btn__arrow svg { width: 16px; height: 16px; }

.rf-nav__burger {
  display: none; width: var(--rf-nav-h); height: var(--rf-nav-h);
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.rf-nav__burger:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 2px; }
.rf-burger-lines, .rf-burger-lines::before, .rf-burger-lines::after {
  content: ''; display: block; width: 24px; height: 2px; background: var(--rf-nav-ink);
  border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
}
.rf-burger-lines { position: relative; }
.rf-burger-lines::before { position: absolute; top: -7px; left: 0; }
.rf-burger-lines::after { position: absolute; top: 7px; left: 0; }
.rf-nav__burger[aria-expanded="true"] .rf-burger-lines { background: transparent; }
.rf-nav__burger[aria-expanded="true"] .rf-burger-lines::before { transform: translateY(7px) rotate(45deg); }
.rf-nav__burger[aria-expanded="true"] .rf-burger-lines::after { transform: translateY(-7px) rotate(-45deg); }

.rf-mobile {
  position: fixed; inset: 0; z-index: 999; background: #F8F8FF;
  padding: calc(var(--rf-nav-h) + var(--rf-nav-inset) + 1rem) 1.5rem 2rem; overflow-y: auto;
}
.rf-mobile[hidden] { display: none; }
.rf-mobile__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.rf-mobile__link, .rf-mobile__acc-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; color: var(--rf-nav-ink);
  background: none; border: none; text-align: left; text-decoration: none; cursor: pointer;
  padding: 0.85rem 0.25rem; border-radius: 10px; min-height: 44px;
}
.rf-mobile__link:hover, .rf-mobile__acc-trigger:hover { background: var(--rf-nav-hover); }
.rf-mobile__link:focus-visible, .rf-mobile__acc-trigger:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 2px; }
.rf-mobile__acc-panel { padding: 0 0 0.4rem 0.9rem; }
.rf-mobile__acc-panel[hidden] { display: none; }
.rf-mobile__acc-panel a { display: block; padding: 0.6rem 0.5rem; border-radius: 8px; text-decoration: none; min-height: 44px; }
.rf-mobile__acc-panel a:hover { background: var(--rf-nav-hover); }
.rf-mobile__acc-panel a:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: -1px; }
.rf-mobile__acc-panel .rf-nav__panel-label { font-size: 1rem; }
.rf-mobile__acc-trigger .rf-nav__chevron { width: 14px; height: 14px; }
.rf-mobile__acc-trigger[aria-expanded="true"] .rf-nav__chevron { transform: rotate(180deg); }
.rf-mobile__donate {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 1rem;
  padding: 0.95rem; border-radius: 12px; background: var(--rf-nav-grad); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.rf-mobile__donate:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 3px; }
.rf-mobile__rule { border: 0; border-top: 1px solid rgba(10, 20, 40, 0.12); margin: 1.25rem 0; }
.rf-mobile__login { display: inline-block; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--rf-nav-ink-soft); text-decoration: underline; padding: 0.5rem 0.25rem; }
.rf-mobile__login:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 2px; }

/* ---- Split arrow button ---- */
.rf-split-btn {
  display: inline-flex; align-items: stretch; gap: 7px; text-decoration: none;
  border-radius: 4px; vertical-align: middle;
}
.rf-split-btn:focus { outline: none; }
.rf-split-btn:focus-visible { outline: 3px solid var(--rf-nav-accent); outline-offset: 4px; border-radius: 15px; }
.rf-split-btn__label {
  display: inline-flex; align-items: center; padding: 0.85rem 1.4rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  border-radius: 13px; line-height: 1;
}
.rf-split-btn__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; flex: 0 0 auto;
  border-radius: 13px; transition: transform 0.15s ease;
}
.rf-split-btn__arrow svg { width: 20px; height: 20px; transition: transform 0.15s ease; }
/* Slide the whole arrow BUTTON (the pill) on hover, not just the icon inside it. */
.rf-split-btn:hover .rf-split-btn__arrow { transform: translateX(4px); }
.rf-split-btn--primary .rf-split-btn__label,
.rf-split-btn--primary .rf-split-btn__arrow { background: var(--rf-nav-grad); color: #fff; }
.rf-split-btn--light .rf-split-btn__label,
.rf-split-btn--light .rf-split-btn__arrow { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75); }

/* Sitewide split buttons: layered onto existing .btn* elements (their old
   classes stay for JS; these !important resets strip the old pill chrome). */
.rf-split-btn { display: inline-flex !important; align-items: stretch !important; justify-content: center; gap: 7px !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; transform: none !important; }
/* Neutralize legacy .btn* hover effects (lift/fill/shadow) so every split button
   hovers the same way as the hero buttons: just the arrow nudge. */
.rf-split-btn:hover { transform: none !important; box-shadow: none !important; background: none !important; filter: none !important; }
.rf-nav__donate.rf-split-btn:hover { filter: brightness(1.08) !important; }
.rf-split-btn--fill .rf-split-btn__label,
.rf-split-btn--fill .rf-split-btn__arrow { background: var(--rf-nav-grad); color: #fff; }
/* Outline adapts to its surroundings via currentColor (dark text on light
   sections, light text on dark sections). */
.rf-split-btn--outline .rf-split-btn__label,
.rf-split-btn--outline .rf-split-btn__arrow { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
/* Coral outline (matches the homepage Stay Connected button). Locked on hover
   so legacy .btn* hover colors can't flip or hide it on dark backgrounds. */
.rf-split-btn--coral, .rf-split-btn--coral:hover { color: #FF8A65 !important; }
/* Back/previous: arrow sits on the left and nudges left on hover. */
.rf-split-btn--prev:hover .rf-split-btn__arrow { transform: translateX(-4px); }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .rf-nav { gap: 0.9rem; }
  .rf-nav__capsule { padding: 0 0.5rem 0 0.95rem; }
  .rf-nav__link, .rf-nav__trigger { padding: 0.55rem 0.75rem; }
  .rf-nav__list { gap: 0.15rem; }
}
@media (max-width: 1100px) {
  .rf-logo__full { display: none; }
  .rf-logo__icon { display: block; }
  .rf-logo-inline__full { display: none; }
  .rf-logo-inline__icon { display: block; }
}
/* Below 960px: single centered capsule is replaced by the mobile pair
   (logo capsule on the left, hamburger capsule on the right). */
@media (max-width: 960px) {
  :root { --rf-nav-inset: 14px; }
  .rf-navwrap { justify-content: space-between; }
  .rf-logo--mobile { display: inline-flex; }
  .rf-nav { display: none; }
  .rf-nav__burger { display: inline-flex; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rf-logo, .rf-nav__capsule, .rf-nav__burger, .rf-nav__panel,
  .rf-nav__chevron, .rf-nav__link, .rf-nav__trigger, .rf-nav__donate,
  .rf-split-btn__arrow, .rf-split-btn__arrow svg, .rf-skip,
  .rf-burger-lines, .rf-burger-lines::before, .rf-burger-lines::after { transition: none !important; }
}