/*
  sidebar.css
  Category links beside the article, with the current category highlighted.
  Needs css/base.css.
*/

/* Phones and tablets: a wrapping row of chips below the story */
.fm-sidebar__nav h2 { margin-bottom: 0.75rem; font-family: var(--fm-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fm-muted); }
.fm-sidebar__nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fm-sidebar__nav a { display: block; padding: 0.35rem 0.85rem; border: 1px solid var(--fm-rule); border-radius: 999px; background: #fff; font-size: var(--fm-t-xs); font-weight: 600; }
.fm-sidebar__nav a:hover { border-color: var(--fm-blue); color: var(--fm-blue); }
/* Current category: solid blue */
.fm-sidebar__nav a[aria-current] { border-color: var(--fm-blue); background: var(--fm-blue); color: #fff; }

/* Desktop: a white card with one link per row, and an accent bar on the current one */
@media (min-width: 62rem) {
  .fm-sidebar__nav { padding: 1.1rem 0.9rem 0.9rem; border-radius: var(--fm-radius); background: #fff; }
  .fm-sidebar__nav h2 { padding-inline: 0.5rem; }
  .fm-sidebar__nav ul { display: block; }
  .fm-sidebar__nav li + li { border-top: 1px solid var(--fm-rule); }
  .fm-sidebar__nav a { padding: 0.55rem 0.5rem; border: 0; border-left: 3px solid transparent; border-radius: 0; background: none; font-size: var(--fm-t-sm); }
  .fm-sidebar__nav a:hover { background: var(--fm-blue-tint); }
  .fm-sidebar__nav a[aria-current] { border-left-color: var(--fm-blue); background: var(--fm-blue-tint); color: var(--fm-blue); }
}