/* =========================================================================
   Case study chrome: the Work sub-nav that sits under the site nav, and the
   back-to-top button.

   Self-contained for the same reason site-nav.css is — the case studies do
   not all load the same base stylesheet.
   ========================================================================= */

/* Case studies scroll dense body copy under the two fixed bars, so both need
   a more solid backing than the marketing pages — there the nav floats over a
   quiet hero and the glass look works. This file only loads on case studies,
   and after site-nav.css, so the override is scoped to exactly those pages. */
.snav { background: rgba(255, 255, 255, 0.97); }
[data-theme="dark"] .snav { background: rgba(10, 10, 18, 0.97); }

/* ---------- Work sub-nav ---------- */
/* Fixed, not sticky: casestudy-woofio/ai-crm/myplanner set overflow on the
   html element, which makes body its own scroll container and stops a sticky
   child from ever engaging. Fixed positioning is unaffected by that. */
.csnav {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 3900;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 4%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.csnav__root {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6660;
  text-decoration: none;
  transition: color 160ms ease;
}

.csnav__root:hover { color: #e0567f; }
.csnav__root svg { width: 13px; height: 13px; }

.csnav__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: rgba(16, 24, 40, 0.12);
}

/* Quiet "you are here" label rather than a list of every project — the bar
   should say where you are, not compete with the page for attention. */
.csnav__here {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.csnav__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #17181c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csnav__count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: #a09890;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.csnav__steps {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.csnav__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  color: #3b3833;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}

.csnav__step:hover { border-color: #e0567f; color: #e0567f; }
.csnav__step svg { width: 13px; height: 13px; }
.csnav__step-label { display: inline; }

/* Holds the page clear of the fixed bar. */
.csnav-spacer { height: 54px; }

/* ---------- back to top ---------- */
/* Solid ink on purpose: an outlined white circle disappeared against these
   light case-study backgrounds. */
.totop {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 4200;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #17181c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 180ms ease, box-shadow 180ms ease, visibility 240ms;
}

.totop--on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.totop:hover {
  background: #e0567f;
  box-shadow: 0 12px 30px rgba(224, 86, 127, 0.36), 0 2px 6px rgba(16, 24, 40, 0.16);
}

.totop:active { transform: translateY(1px) scale(0.97); }

.totop:focus-visible {
  outline: 3px solid rgba(224, 86, 127, 0.45);
  outline-offset: 3px;
}

.totop svg { width: 20px; height: 20px; }

/* ---------- dark theme ---------- */
[data-theme="dark"] .csnav {
  background: rgba(10, 10, 18, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
[data-theme="dark"] .csnav__root { color: #9a938a; }
[data-theme="dark"] .csnav__root:hover { color: #f08fa9; }
[data-theme="dark"] .csnav__sep { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .csnav__title { color: #f2eee7; }
[data-theme="dark"] .csnav__count { color: #7a736b; }
[data-theme="dark"] .csnav__step {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ded8cf;
}
[data-theme="dark"] .csnav__step:hover { border-color: #f08fa9; color: #f08fa9; }
[data-theme="dark"] .totop {
  background: #fff;
  color: #17181c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .totop:hover { background: #f08fa9; color: #14130f; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .csnav__step-label { display: none; }
  .csnav__step { padding: 0 9px; }
}

@media (max-width: 860px) {
  .csnav { top: 62px; height: 50px; padding: 0 16px; gap: 10px; }
  .csnav-spacer { height: 50px; }
  .csnav__root span { display: none; }
  .totop { right: 18px; bottom: 18px; width: 46px; height: 46px; }
}

@media print {
  .csnav, .csnav-spacer, .totop { display: none !important; }
}