/* ============================================================
   BUYARY — floating section navigator
   A persistent way to see where you are and move around the page:
   a labelled tick rail on desktop, a compact sheet on touch sizes.
   Theme-agnostic: js sets --light / --dark from the page background.
   ============================================================ */

.secnav {
  position: fixed; right: clamp(0.9rem, 2vw, 1.9rem); top: 50%;
  transform: translateY(-50%);
  z-index: 880;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px;
  --sn-fg: #1C1B1B;
  --sn-dim: rgba(28, 27, 27, 0.32);
  --sn-panel: rgba(248, 247, 243, 0.92);
  --sn-edge: rgba(28, 27, 27, 0.12);
}
.secnav--dark {
  --sn-fg: #F3F1EC;
  --sn-dim: rgba(243, 241, 236, 0.34);
  --sn-panel: rgba(19, 18, 17, 0.92);
  --sn-edge: rgba(243, 241, 236, 0.14);
}

.secnav__item {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.28rem 0;
  border: none !important;
  text-decoration: none;
  cursor: pointer;
}
.secnav__label {
  font-family: var(--sans, sans-serif);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sn-fg);
  white-space: nowrap;
  opacity: 0; transform: translateX(8px);
  /* fast out so de-activated labels don't stack up as ghosts mid-scroll */
  transition: opacity 0.1s ease, transform 0.1s ease;
  pointer-events: none;
}
/* soft in, only for the label that's actually being shown */
.secnav:hover .secnav__label,
.secnav__item:focus-visible .secnav__label {
  transition: opacity 0.3s var(--ease-out, ease), transform 0.3s var(--ease-out, ease);
}
.secnav__tick {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: var(--sn-dim);
  transition: width 0.32s var(--ease-out, ease), background 0.32s var(--ease-out, ease);
  flex-shrink: 0;
}
.secnav__item:hover .secnav__tick { width: 26px; background: var(--sn-fg); }
.secnav__item.is-active .secnav__tick { width: 30px; background: var(--orange, #D9623C); }
/* reveal labels on rail hover, on keyboard focus, and for the active item */
.secnav:hover .secnav__label,
.secnav__item:focus-visible .secnav__label { opacity: 1; transform: none; }
.secnav__item.is-active .secnav__label { color: var(--orange, #D9623C); }
/* label only appears on hover/focus now; the orange tick alone tracks
   scroll progress so fast scrolling can't leave a label stuck on screen */
.secnav__item:focus-visible { outline: 2px solid var(--orange, #D9623C); outline-offset: 4px; border-radius: 3px; }

/* back to top — sits above the rail, appears once you've scrolled */
.secnav__top {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--sn-edge) !important;
  background: var(--sn-panel);
  color: var(--sn-fg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-out, ease), border-color 0.3s, color 0.3s;
  align-self: flex-end;
}
.secnav.is-scrolled .secnav__top { opacity: 1; pointer-events: auto; }
.secnav__top:hover { color: var(--orange, #D9623C); border-color: var(--orange, #D9623C) !important; }

/* ---------- touch / narrow: rail becomes a sheet behind one button ---------- */
.secnav-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 881;
  display: none;
  width: 46px; height: 46px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--sn-panel, rgba(248,247,243,0.92));
  border: 1px solid var(--sn-edge, rgba(28,27,27,0.12));
  color: var(--sn-fg, #1C1B1B);
  box-shadow: 0 6px 22px -8px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  /* stays out of the hero; appears once you're actually into the page */
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-out, ease);
}
.secnav-fab.is-ready { opacity: 1; pointer-events: auto; }
/* clicks must land on the button itself: the icon is swapped out mid-click,
   and a detached target makes the outside-click handler re-close the sheet */
.secnav-fab svg { pointer-events: none; }
.secnav-sheet {
  position: fixed; right: 1rem; bottom: 4.4rem; z-index: 881;
  display: none; flex-direction: column;
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  min-width: 220px; max-width: min(78vw, 300px);
  padding: 0.5rem;
  border-radius: 14px;
  background: var(--sn-panel, rgba(248,247,243,0.96));
  border: 1px solid var(--sn-edge, rgba(28,27,27,0.12));
  box-shadow: 0 18px 50px -14px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 0.25s var(--ease-out, ease), transform 0.25s var(--ease-out, ease);
}
.secnav-sheet.is-open { opacity: 1; transform: none; }
.secnav-sheet a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: none !important; border-radius: 9px;
  font-family: var(--data, system-ui); font-size: 0.86rem;
  color: var(--sn-fg, #1C1B1B); text-decoration: none;
}
.secnav-sheet a:hover { background: rgba(217, 98, 60, 0.1); }
.secnav-sheet a.is-active { color: var(--orange, #D9623C); font-weight: 600; }
.secnav-sheet a i {
  font-style: normal;
  font-family: var(--data, system-ui); font-size: 0.68rem;
  color: var(--sn-dim); min-width: 1.1rem;
}
.secnav-sheet a.is-active i { color: var(--orange, #D9623C); }
.secnav-sheet__top { border-bottom: 1px solid var(--sn-edge) !important; border-radius: 9px 9px 0 0 !important; }

@media (max-width: 1180px) {
  .secnav { display: none; }
  .secnav-fab { display: flex; }
  .secnav-sheet.is-open { display: flex; }
}

/* never compete with the full-screen menu overlay */
body.menu-open .secnav,
body.menu-open .secnav-fab,
body.menu-open .secnav-sheet { opacity: 0 !important; pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) {
  .secnav__label, .secnav__tick, .secnav__top, .secnav-sheet { transition: none; }
}