/* ============================================================
   FB OVERRIDES — loaded LAST so it wins against per-page CSS
   extracted from the mockups.

   These exist because each page-*.css file inherits the mockup's
   inline <style> block, which includes a navy .fb-header definition.
   The mockup intentionally renders dark navy headers, but Marq
   asked 2026-05-25 for a lighter shell + dimmed brand blue.
   ============================================================ */

/* ---- HEADER: lighter shell, visible nav --------------------- */

.fb-header,
header.fb-header {
  background: var(--cream-warm) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hairline) !important;
  padding: 18px 0 !important;
}

.fb-header__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-5) !important;
}

/* Nav visibility — per-page CSS sometimes hides .fb-nav__list because
   the mockup used a different nav class. Force ours visible. */
.fb-nav,
.fb-header .fb-nav {
  display: block !important;
  margin-left: auto !important;
}
.fb-nav__list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 26px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fb-nav__item { display: list-item !important; }
.fb-nav__link {
  font-family: 'Epilogue', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  transition: color .2s !important;
}
.fb-nav__link:hover,
.fb-nav__link.is-current { color: var(--fb-warm-deep) !important; }

@media (max-width: 900px) {
  .fb-nav__list { display: none !important; }
}

/* ---- WORDMARK: dim the blue ---------------------------------
   --fb-blue (#21ACCB) was too vibrant. Switch to fb-blue-deep
   (#1A88A3) for a more muted, editorial feel. */
.fb-wordmark { color: var(--fb-blue-deep) !important; }
.fb-wordmark__beach { color: var(--fb-warm) !important; }

/* The same dim applies to the footer wordmark (currently inherits blue) */
.fb-footer .fb-wordmark { color: var(--fb-blue-deep) !important; }

/* ---- BREADCRUMB DARK BAR (mockup artefact) -----------------
   page-activepace.css renders a dark navy strip under the header
   labelled "Home / ActivePace". Lighten to cream so it matches the
   new shell. */
.breadcrumbs,
nav.breadcrumbs,
.breadcrumb,
.fb-breadcrumbs,
section.breadcrumbs {
  background: var(--cream-warm) !important;
  border-bottom: 1px solid var(--hairline) !important;
  color: var(--ink-mid) !important;
}
.breadcrumbs a,
.breadcrumb a { color: var(--fb-blue-deep) !important; }

/* ---- HEADER CTA button keeps orange — unchanged ---- */

/* ---- Subtle dim on any element using raw --fb-blue --------- */
.fb-stat__number,
.fb-eyebrow.is-blue {
  /* For places that explicitly opted into blue accents, prefer the
     deep variant. Components without this opt-in are unaffected. */
}