/* The in-page section bar on the four engagement pages (templates/default/partials/_section_bar.jinja), and the
   scroll offsets that keep every anchor target clear of the header and the bar. Colors come from the site's
   editorial tokens (.site-page), so light and dark both follow the theme. Square corners, 1px hairlines.

   Geometry: the fixed header is 4rem tall (5rem from 1024px up) and the bar is 3rem, so a section that a link
   scrolls to needs 7.75rem (8.75rem) of room above it plus a little air. The bar sticks at the header's bottom
   edge and docks there once the hero has scrolled past. */

.site-page { --sb-header: 4rem; --sb-bar: 3rem; }
@media (min-width: 1024px) { .site-page { --sb-header: 5rem; } }

.has-section-bar section[id],
.has-section-bar article[id] { scroll-margin-top: calc(var(--sb-header) + var(--sb-bar) + 0.75rem); }

.section-bar {
  position: sticky;
  top: var(--sb-header);
  z-index: 40;
  background: var(--site-paper);
  border-bottom: 1px solid var(--site-rule);
  color: var(--site-ink);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .section-bar { background: color-mix(in srgb, var(--site-paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.section-bar-inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .section-bar-inner { padding: 0 2rem; } }

.section-bar-list { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.section-bar-list::-webkit-scrollbar { display: none; }
.section-bar-list li { flex: none; }
.section-bar-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--sb-bar);
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--site-muted);
  text-decoration: none;
  white-space: nowrap;
}
.section-bar-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.section-bar-link:hover { color: var(--site-ink); }
.section-bar-link.is-current { color: var(--site-ink); }
.section-bar-link.is-current::after { background: var(--site-link); }
.section-bar-book { margin-left: auto; color: var(--site-link); }
.section-bar-list li:last-child { margin-left: auto; }
.section-bar-link:focus-visible { outline: 2px solid var(--site-link); outline-offset: -3px; }

/* The phone toggle exists only where a script can run it. */
.section-bar-toggle { display: none; }

@media (max-width: 719px) {
  .sb-js .section-bar-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--sb-bar);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--site-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .sb-js .section-bar-toggle:focus-visible { outline: 2px solid var(--site-link); outline-offset: -3px; }
  .section-bar-toggle-lead { color: var(--site-muted); font-weight: 500; }
  .section-bar-toggle-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .section-bar-chevron { flex: none; color: var(--site-link); transition: transform 0.2s ease; }
  .section-bar.is-open .section-bar-chevron { transform: rotate(180deg); }

  /* With the script running, the links become a menu under the toggle. */
  .sb-js .section-bar-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 1.5rem 0.75rem;
    overflow: visible;
    background: var(--site-paper);
    border-bottom: 1px solid var(--site-rule);
    box-shadow: 0 14px 24px -12px var(--site-scroll-shadow);
  }
  .sb-js .section-bar.is-open .section-bar-list { display: flex; }
  .sb-js .section-bar-list li,
  .sb-js .section-bar-list li:last-child { margin-left: 0; }
  .sb-js .section-bar-link { min-height: 3rem; padding: 0; border-bottom: 1px solid var(--site-rule); white-space: normal; }
  .sb-js .section-bar-list li:last-child .section-bar-link { border-bottom: 0; }
  .sb-js .section-bar-link::after { display: none; }
  .sb-js .section-bar-link.is-current { color: var(--site-link); }
  .sb-js .section-bar-book { margin-left: 0; }

  /* Without a script the row of links scrolls sideways. */
  .section-bar-list { padding: 0 0 0 0; }
  .section-bar-link { padding: 0 0.85rem; }
}

@media (prefers-reduced-motion: reduce) { .section-bar-chevron { transition: none; } }

/* The scoped booking links (under each offer card's price, at the end of "Week by week", and at the end of each
   case study's gate): a quiet text link with a 44px tap row, so it never competes with the hero's button. */
.book-scoped { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.35rem 0; font-size: 0.875rem; font-weight: 600; color: var(--site-link); text-decoration: underline; text-underline-offset: 4px; }
.book-scoped:hover { color: var(--site-ink); }
.book-scoped-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--site-rule); }
.book-scoped-row p { margin: 0; font-size: 0.875rem; color: var(--site-muted); }

/* A short line that sits under a hero headline's lead (the "at your size" line on the cost case study). */
.site-hero-sizing { display: block; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.95em; }

/* The case-study catalog's three groups: the sponsor readout first, then the long reports for the engineer, then
   the rest of the engagement week by week. */
.report-group + .report-group { margin-top: 3.5rem; }
.report-group-head { margin-bottom: 1.25rem; max-width: 48rem; }
.report-group-head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; line-height: 1.2; color: var(--site-ink); }
.report-group-head p { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.6; color: var(--site-muted); }