/* ==========================================================================
   Shared buttons, pills, links and nav arrows. Loaded site-wide + editor.
   ========================================================================== */

.sb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:var(--sb-w-btn);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.95em 2.1em;border-radius:999px;border:0;cursor:pointer;text-align:center;
  background:var(--sb-blue);color:var(--sb-white);
  transition:background .18s ease,transform .18s ease,color .18s ease;
}
.sb-btn:hover{background:var(--sb-blue-dark);transform:translateY(-1px)}
.sb-btn--light{background:var(--sb-white);color:var(--sb-blue)}
.sb-btn--light:hover{background:#eaeaea}
.sb-btn--dark{background:var(--sb-ink);color:var(--sb-white)}
.sb-btn--dark:hover{background:#322c2f}
.sb-btn--outline{background:transparent;border:1.5px solid currentColor}

.sb-link-underline{
  display:inline-block;font-weight:var(--sb-w-btn);text-transform:uppercase;
  letter-spacing:.06em;font-size:.82rem;border-bottom:2px solid currentColor;
  padding-bottom:3px;transition:opacity .18s ease;
}
.sb-link-underline:hover{opacity:.65}

.sb-pill{
  display:inline-flex;align-items:center;padding:.75em 1.7em;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:var(--sb-w-btn);font-size:.72rem;line-height:1;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sb-ink);color:var(--sb-white);transition:background .18s ease,transform .2s ease;white-space:nowrap;
}
.sb-pill:hover{background:#322c2f}
/* Active pill grows via transform so surrounding pills never shift.
   The .5px nudge counters the upward text-raster rounding the scale causes. */
.sb-pill.is-active{background:var(--sb-blue);transform:scale(1.08) translateY(.5px);animation:sb-pill-pop .32s ease}
@keyframes sb-pill-pop{
  0%{transform:scale(1)}
  55%{transform:scale(1.16) translateY(.5px)}
  100%{transform:scale(1.08) translateY(.5px)}
}
@media (prefers-reduced-motion: reduce){
  .sb-pill.is-active{animation:none}
}

.sb-arrow-btn{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:0;cursor:pointer;flex:0 0 auto;
  background:var(--sb-blue);color:#fff;transition:background .18s ease,transform .18s ease;
}
.sb-arrow-btn:hover{background:var(--sb-blue-dark)}
.sb-arrow-btn:disabled{opacity:.35;cursor:default}
.sb-arrow-btn svg{width:18px;height:18px}
.sb-arrow-btn--ghost{background:rgba(30,30,30,.5)}
.sb-arrow-btn--ghost:hover{background:rgba(30,30,30,.75)}