/* Sticky "Jump to" section selector — a single dropdown that tracks the
   section you're in and jumps to any other. Pins just under the site header.
   Opt-in per page: link this file and catbar.js, then mount
   <div class="catbar" data-catbar> (markup in ingredients/index.html).
   catbar.js publishes --catbar-header-h (live header height) and
   --catbar-offset (header + bar) so sticky page art can clear the bar. */
.catbar {
  position: sticky; top: var(--catbar-header-h, 64px); z-index: 90;
  margin-bottom: 3rem;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.catbar__trigger {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: .95rem .2rem;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: var(--fs-2xs); letter-spacing: var(--track-2); text-transform: uppercase;
  color: var(--ink);
}
.catbar__trigger:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.catbar__trigger .cb-icon { width: 1rem; height: 1rem; flex: none; color: var(--ink-mute); }
.catbar__trigger .cb-lead { color: var(--ink-mute); }
.catbar__trigger .cb-current { color: var(--accent); }
.catbar__trigger .cb-chevron {
  margin-left: auto; width: .72rem; height: .72rem; flex: none; color: var(--ink-mute);
  transition: transform var(--dur) var(--ease);
}
.catbar.is-open .cb-chevron { transform: rotate(180deg); }

.catbar__menu {
  position: absolute; left: 0; right: 0; top: 100%;
  margin: 0; padding: .4rem 0; list-style: none;
  max-height: calc(100vh - var(--catbar-offset, 120px) - 1rem); overflow-y: auto;
  background: var(--paper-deep);
  border: 1px solid var(--rule); border-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.catbar.is-open .catbar__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.catbar__menu a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .7rem 1.1rem; text-decoration: none;
  font-family: var(--font-serif); font-size: var(--fs-md);
  color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.catbar__menu a:hover { background: var(--paper); color: var(--ink); }
.catbar__menu a:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; color: var(--ink); }
.catbar__menu a .cb-count {
  margin-left: auto;
  font-family: var(--font-sans); font-size: var(--fs-2xs);
  letter-spacing: var(--track-1); color: var(--ink-mute);
}
.catbar__menu a[aria-current="true"] { color: var(--accent); }
/* Inset variant for pages whose sections are full-width blocks (the technique
   guides): the bar is a direct child of <body> so it can stay pinned through
   every section, and is inset to the 1140px content column by width alone. */
.catbar--inset {
  width: calc(100% - 5rem); max-width: calc(1140px - 5rem);
  margin: 2.5rem auto 0;
}
@media (max-width: 900px) {
  .catbar--inset { width: calc(100% - 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-chevron, .catbar__menu { transition: none; }
}
@media print {
  .catbar { display: none; }
}