/*
 * ff-nav.css — Flowfinity KB v2 header, desktop (Phase 3)
 * Loaded by every Knowledge Base page (base + desktop styling; media="all").
 *
 * A unique, brand-consistent glassmorphism header for the Knowledge Base.
 * Every selector is scoped under .ffkb-nav so the KB's leaky global rules
 * (e.g. main.css `a:hover{color:red;text-decoration:underline}`, `img{margin:3em}`)
 * cannot bleed into the header, and so the header cannot leak outward either.
 *
 * Modern Web Guidance applied: backdrop-filter has a solid fallback via
 * @supports; focus rings use :focus-visible + outline-offset; the header stays
 * functional in Forced Colors mode; motion is disabled under prefers-reduced-motion.
 */

/* Border-box across the whole header so width:100% + padding can never overflow
   (notably the full-width mobile CTA). Mirrors the main site's `.ff-nav *`. */
.ffkb-nav,
.ffkb-nav *,
.ffkb-nav *::before,
.ffkb-nav *::after { box-sizing: border-box; }

.ffkb-nav {
  --ffkb-red: #cd0e00;
  --ffkb-red-grad: linear-gradient(135deg, rgb(155 10 0 / .95) 0%, rgb(205 14 0 / .95) 100%);
  --ffkb-ink: rgb(71 85 105 / .92);
  --ffkb-ink-strong: rgb(30 41 59);
  --ffkb-radius: 22px;

  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  z-index: 1000;
  box-sizing: border-box;
  padding: 0 20px;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: var(--ffkb-radius);
  /* Fallback for browsers without backdrop-filter: a near-opaque pane. */
  background: rgb(241 245 249 / .97);
  box-shadow: 0 8px 32px rgb(0 0 0 / .08), 0 2px 16px rgb(0 0 0 / .04),
              inset 0 1px 0 rgb(255 255 255 / .4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.2;
}

/* Frosted glass only where supported (progressive enhancement). */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ffkb-nav {
    background: linear-gradient(135deg, rgb(248 250 252 / .8) 0%, rgb(226 232 240 / .8) 50%, rgb(203 213 225 / .8) 100%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    backdrop-filter: blur(40px) saturate(200%);
  }
}

.ffkb-nav-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  width: 100%;
}

/* Brand: logo (→ main site) + "Knowledge Base" wordmark (→ KB landing).
   Two separate links since 2026-07-14; the wrap's 6px gap plus these margins
   reproduces the old single-anchor spacing. */
.ffkb-nav .ffkb-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 6px;
}
.ffkb-nav .ffkb-logo {
  height: 36px;
  width: auto;
  display: block;
  margin: 0;
}
.ffkb-nav .ffkb-brand-tag {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ffkb-ink-strong);
  letter-spacing: .01em;
  padding-left: 12px;
  border-left: 1px solid rgb(15 23 42 / .15);
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 8px;
}
.ffkb-nav .ffkb-brand-tag:hover { color: var(--ffkb-red); text-decoration: none; }

/* Nav cluster: "Browse topics" sits on the LEFT next to the brand (the KB's
   own navigation, kept prominent); the marketing links are pushed right. */
.ffkb-nav .ffkb-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ffkb-nav .ffkb-topics { margin-right: auto; }

.ffkb-nav .ffkb-link {
  color: var(--ffkb-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .98rem;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.ffkb-nav .ffkb-link:hover {
  color: var(--ffkb-ink-strong);
  text-decoration: none;
  background: rgb(15 23 42 / .05);
}

/* "Browse topics" disclosure */
.ffkb-nav .ffkb-topics { position: relative; }
.ffkb-nav .ffkb-topics-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ffkb-ink);
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.ffkb-nav .ffkb-topics-btn:hover { color: var(--ffkb-ink-strong); background: rgb(15 23 42 / .05); }
.ffkb-nav .ffkb-chev { width: 14px; height: 14px; transition: transform .2s ease; }
.ffkb-nav .ffkb-topics.is-open .ffkb-chev { transform: rotate(180deg); }

.ffkb-nav .ffkb-topics-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;              /* the disclosure lives at the left end of the bar */
  width: min(640px, 78vw);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgb(0 0 0 / .06);
  background: #fff;
  box-shadow: 0 24px 60px rgb(0 0 0 / .16);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ffkb-nav .ffkb-topics-panel {
    background: linear-gradient(135deg, rgb(255 255 255 / .92) 0%, rgb(255 255 255 / .98) 100%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
  }
}
.ffkb-nav .ffkb-topics-panel[hidden] { display: none; }

.ffkb-nav .ffkb-topics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.ffkb-nav .ffkb-topic {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.25;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ffkb-nav .ffkb-topic:hover {
  background: rgb(205 14 0 / .05);
  border-color: rgb(205 14 0 / .12);
  color: #111827;
  text-decoration: none;
}
.ffkb-nav .ffkb-topic img {
  width: 26px;
  height: 26px;
  margin: 0;
  object-fit: contain;
  flex-shrink: 0;
}

/* Demo call to action — the one filled element in the bar, so it reads as
   the next step without shouting (gradient + soft glow + hover lift). */
.ffkb-nav .ffkb-cta {
  margin-left: 10px;
  display: inline-block;
  padding: 9px 16px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  white-space: nowrap;
  background: var(--ffkb-red-grad);
  box-shadow: 0 4px 16px rgb(205 14 0 / .3);
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}
.ffkb-nav .ffkb-cta:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgb(205 14 0 / .42);
}

/* Hamburger is desktop-hidden; the mobile sheet lives in ff-nav_mobile.css */
.ffkb-nav .ffkb-toggle { display: none; }

/* Visible, consistent keyboard focus (don't rely on :hover-only state) */
.ffkb-nav a:focus-visible,
.ffkb-nav button:focus-visible {
  outline: 2px solid var(--ffkb-red);
  outline-offset: 3px;
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ffkb-nav,
  .ffkb-nav * { transition: none !important; }
}

/* Stay functional in Windows High Contrast / Forced Colors (blur+shadow are stripped) */
@media (forced-colors: active) {
  .ffkb-nav { background: Canvas; border: 1px solid CanvasText; }
  .ffkb-nav .ffkb-topics-panel { background: Canvas; border: 1px solid CanvasText; }
  .ffkb-nav .ffkb-cta { border: 1px solid ButtonText; }
}

/* ====================================================================== *
 * Phase 4 + 5 — reader-experience components (injected by mainscreen.v2.js)
 * Base + desktop styling; ff-nav_mobile.css layers ≤1024px overrides on top.
 * Everything is namespaced with the reserved ffkb-v2- prefix.
 * ====================================================================== */

/* Shared visually-hidden live region (screen-reader announcements) */
.ffkb-v2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The mobile Browse button + sheet exist only ≤1024px (ff-nav_mobile.css);
   on desktop the sticky sidebar is the browsing surface. */
.ffkb-v2-fab,
.ffkb-v2-sheetwrap { display: none; }

/* ---- 5C — reading progress bar (decorative; aria-hidden) -------------- */
.ffkb-v2-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;             /* never more — mobile viewport budget */
  z-index: 1200;
  pointer-events: none;
  background: transparent;
}
.ffkb-v2-progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #9b0a00, #ed1c24);
  transition: opacity 0.18s ease;   /* the fade-and-refill boundary reset */
  will-change: transform;
}
.ffkb-v2-progress-fill.is-resetting { opacity: 0; }

/* ---- 5A — single sticky breadcrumb ------------------------------------ */
/* Mobile/tablet only (≤1024px): there the sidebar is hidden, so the
   breadcrumb is the one persistent "where am I" cue plus the path back out
   of the KB. On desktop the sticky sidebar highlight already carries that
   job, so the breadcrumb is not rendered at all (team decision 2026-06). */
@media (min-width: 1025px) {
  .ffkb-v2-crumb { display: none; }
}
.ffkb-v2-crumb {
  position: fixed;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  z-index: 995;
  pointer-events: none;     /* the pill itself re-enables them */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
.ffkb-v2-crumb ol {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 7px 14px;
  list-style: none;
  pointer-events: auto;
  border-radius: 12px;
  background: rgb(255 255 255 / .94);
  border: 1px solid rgb(0 0 0 / .05);
  box-shadow: 0 2px 12px rgb(0 0 0 / .05);
  font-size: 13px;
  line-height: 1.3;
  color: rgb(71 85 105);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ffkb-v2-crumb ol {
    background: rgb(248 250 252 / .78);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}
.ffkb-v2-crumb li {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ffkb-v2-crumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: rgb(100 116 139 / .7);
}
.ffkb-v2-crumb-home { flex-shrink: 0; }
.ffkb-v2-crumb a { color: rgb(71 85 105); text-decoration: none; }
.ffkb-v2-crumb a:hover { color: rgb(30 41 59); text-decoration: underline; }
.ffkb-v2-crumb a:focus-visible { outline: 2px solid #cd0e00; outline-offset: 2px; border-radius: 4px; }
.ffkb-v2-crumb-art { color: rgb(30 41 59); font-weight: 600; }
/* invisible until it has real content (landing entry: no dominant article yet) */
.ffkb-v2-crumb { visibility: hidden; }
.ffkb-v2-crumb.is-ready { visibility: visible; }

/* ---- 5D — reading time / last-updated strip --------------------------- */
.ffkb-v2-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 6px 20px 4px 50px;   /* matches the article's 50px inner gutter */
  font: 13.5px "Helvetica Neue", sans-serif;
  color: #64748b;
  letter-spacing: 0.01em;
}
.ffkb-v2-meta-item + .ffkb-v2-meta-item::before {
  content: "·";
  margin-right: 10px;
  color: #cbd5e1;
}

/* ---- End-of-article block (5E feedback, 5G related) -------------------- */
.ffkb-v2-end {
  margin: 44px 20px 8px 50px;
  font-family: "Helvetica Neue", sans-serif;
  max-width: 760px;
}

/* 5E — "Was this page helpful?" */
.ffkb-v2-fb {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgb(15 23 42 / .1);
  border-radius: 14px;
  background: rgb(248 250 252 / .85);
}
.ffkb-v2-fb:focus { outline: none; }
.ffkb-v2-fb-legend { font-weight: 600; font-size: 15px; color: #1e293b; }
.ffkb-v2-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;          /* WCAG tap target */
  padding: 8px 16px;
  border: 1px solid rgb(15 23 42 / .15);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: 14.5px "Helvetica Neue", sans-serif;
  cursor: pointer;
}
.ffkb-v2-fb-btn:hover { border-color: #cd0e00; color: #cd0e00; }
.ffkb-v2-fb-btn:focus-visible,
.ffkb-v2-fb-send:focus-visible { outline: 2px solid #cd0e00; outline-offset: 2px; }
.ffkb-v2-fb.is-done .ffkb-v2-fb-btn { pointer-events: none; opacity: 0.45; }
.ffkb-v2-fb-thanks { font-weight: 600; font-size: 14.5px; color: #15803d; }
.ffkb-v2-fb-more {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ffkb-v2-fb-label { font-size: 13.5px; color: #475569; }
.ffkb-v2-fb-more textarea {
  /* 16px minimum — sub-16px inputs make iOS Safari zoom the page on focus */
  font: 16px "Helvetica Neue", sans-serif;
  color: #1e293b;
  padding: 10px 12px;
  border: 1px solid rgb(15 23 42 / .15);
  border-radius: 10px;
  background: #fff;
  resize: vertical;
  min-height: 70px;
}
.ffkb-v2-fb-send {
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(155 10 0 / .95), rgb(205 14 0 / .95));
  color: #fff;
  font: 600 14.5px "Helvetica Neue", sans-serif;
  cursor: pointer;
}
/* Honeypot: invisible to readers, irresistible to bots */
.ffkb-v2-fb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* 5G — Related articles */
.ffkb-v2-related { margin-top: 24px; }
.ffkb-v2-related-h {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}
.ffkb-v2-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.5;
}
/* the legacy `ul li` checkmark bullet must not stack with the → suffix */
.ffkb-v2-related li { background: none; padding-left: 0; }
.ffkb-v2-related a { color: #cd0e00; text-decoration: none; }
.ffkb-v2-related a::after { content: " →"; }
.ffkb-v2-related a:hover { text-decoration: underline; }

/* ---- Reduced motion + forced colors for all v2 components ------------- */
@media (prefers-reduced-motion: reduce) {
  .ffkb-v2-progress-fill { transition: none !important; }
}
@media (forced-colors: active) {
  .ffkb-v2-crumb ol,
  .ffkb-v2-fb { background: Canvas; border: 1px solid CanvasText; }
  .ffkb-v2-progress-fill { background: Highlight; }
  .ffkb-v2-fb-btn,
  .ffkb-v2-fb-send,
  .ffkb-v2-retry { border: 1px solid ButtonText; }
}