/* Sugarbot UI kit: links and navigation (decisions S3, S4). Needs tokens.css and base.css. */

/* S3 Link. Underlined at rest, so a link is visibly a link without hovering. text-decoration, not
   border-bottom: a border sits below the line box and drifts a full descender away from the text.
   Works on <a> and on <button> (Detect opens URLs by key from a button). */
.sb-link {
  font: inherit;
  color: var(--sb-color-plumb);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline 2px var(--sb-molasses-dark);
  text-underline-offset: 3px;
}
.sb-link:hover { text-decoration-color: currentColor; }
.sb-on-dark .sb-link { color: var(--sb-color-sweet-tooth); text-decoration-color: var(--sb-color-molasses); }

.sb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; justify-items: start; }
.sb-links--row { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* S4 Sidebar. The active item is styled from aria-current ("page" for page navigation, "true"
   for sections inside one view), so the look and the screen-reader announcement cannot drift
   apart. Width is per product: set --sb-nav-width. */
.sb-nav {
  width: var(--sb-nav-width, 208px);
  flex: none;
  background: var(--sb-color-plumb);
  color: var(--sb-color-sweet-tooth);
  display: flex;
  flex-direction: column;
}
.sb-nav__brand {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--sb-on-dark-rule);
  font-family: var(--sb-font-display);
  font-size: 30px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.sb-nav__items { list-style: none; margin: 0; padding: 8px 0 0; }
/* A heading over a group of items: the guide's list title, small, on Plum. */
.sb-nav__group-title {
  display: block;
  padding: 12px 16px 6px 20px;
  font-family: var(--sb-list-title-font);
  font-weight: var(--sb-list-title-weight);
  font-style: var(--sb-list-title-style);
  letter-spacing: var(--sb-list-title-tracking);
  text-transform: var(--sb-list-title-case);
  font-size: 11.5px;
  line-height: 1;
  color: var(--sb-on-dark-micro);
}
.sb-nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px 0 12px;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  color: var(--sb-on-dark-nav);
  font-family: var(--sb-font-display);
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.sb-nav__item:hover { background: var(--sb-on-dark-hover); color: var(--sb-color-sweet-tooth); }
.sb-nav__item[aria-current="page"],
.sb-nav__item[aria-current="true"] {
  border-left-color: var(--sb-color-molasses);
  background: var(--sb-on-dark-active);
  color: var(--sb-color-sweet-tooth);
}
/* An inset ring, so it is not clipped by the rail's edge. */
.sb-root .sb-nav__item:focus-visible { outline: var(--sb-focus-ring-on-dark); outline-offset: -2px; }
.sb-nav__item svg { width: 18px; height: 18px; flex: none; }
.sb-nav__footer { margin-top: auto; padding: 13px 16px 14px; border-top: 1px solid var(--sb-on-dark-rule); font-size: 13px; color: var(--sb-on-dark-muted); }

/* Narrow screens: the rail becomes a top bar and the active edge moves to the bottom. */
@media (max-width: 820px) {
  .sb-nav { width: auto; }
  .sb-nav__items { display: flex; overflow-x: auto; padding: 0; }
  .sb-nav__item { width: auto; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .sb-nav__item[aria-current="page"],
  .sb-nav__item[aria-current="true"] { border-bottom-color: var(--sb-color-molasses); }
  .sb-nav__group-title { display: none; }
}