/* ------------------------------------------------------------------------------------------------
 * Club styling for nanogallery2 — loaded after the library's own CSS so these rules win.
 * Mostly the tag-filter bar, restyled from the library's dark chips into pills in the site palette.
 * ---------------------------------------------------------------------------------------------- */

/* The filter bar sits above the thumbnails with room to breathe, and wraps on narrow screens. */
.nGY2 .nGY2Navigationbar {
  margin: 0 0 var(--space-5);
  text-align: left;
  white-space: normal;
  background: transparent;
}

/* Three classes deep, not two — and that is the whole point of this rule.
 *
 * nanogallery2 does not ship its theme in the stylesheet we load after. It **injects a <style>
 * block at runtime**, containing
 *   .nanogallery_gallerytheme_dark_my_nanogallery .nGY2NavFilterUnselected { color:#ddd; background:#111; border-radius:4px }
 * which matches at the same specificity as a two-class selector and lands later in the document, so
 * it won every time. The header note above — "loaded after the library's own CSS so these rules win"
 * — was true of the file and false of the outcome: the filter bar rendered as the library's black
 * chips in the middle of a cream page, and had done since it was written.
 *
 * Adding `.nGY2Navigationbar` takes these to three classes, which beats the injected block without
 * a single `!important`.
 *
 * The other way to fix it is nanogallery2's own `galleryTheme` option, which would put our colours
 * into that injected block. Not taken: those options are JSON, so the colours would be frozen hex
 * values, and this site has a dark-mode palette in `tokens.css` that `var()` follows and a JSON
 * string cannot.
 */
.nGY2 .nGY2Navigationbar .nGY2NavigationbarItem {
  display: inline-flex; align-items: center;
  margin: 0 8px 8px 0; padding: 7px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.nGY2 .nGY2Navigationbar .nGY2NavigationbarItem:hover {
  border-color: var(--brand); color: var(--brand-strong); background: var(--surface);
}
.nGY2 .nGY2Navigationbar .nGY2NavigationbarItem:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* Selected tag: filled in the brand colour — the fill carries the state, so the radio glyph goes. */
.nGY2 .nGY2Navigationbar .nGY2NavFilterSelected {
  background: var(--brand); border-color: var(--brand); color: var(--ink-inverse);
}
.nGY2 .nGY2Navigationbar .nGY2NavFilterSelected:hover {
  background: var(--brand-strong); border-color: var(--brand-strong); color: var(--ink-inverse);
}

/* Drop the leading circle glyph on the tag pills; keep the icon on the reset control. */
.nGY2 .nGY2NavigationbarItem [class^="nGY2Icon-circle"],
.nGY2 .nGY2NavigationbarItem [class*=" nGY2Icon-circle"] {
  display: none;
}

/* The reset ("show all") control: a matching round icon button. */
.nGY2 .nGY2NavigationbarFilterClear,
.nGY2 .nGY2NavigationbarItem.nGY2TagSelectorTagButtonClear {
  width: 34px; height: 34px; padding: 0; justify-content: center;
  border-radius: 50%;
}

/* Round the library thumbnails to match the rest of the site. */
.nGY2 .nGY2GThumbnail, .nGY2 .nGY2GThumbnailImage, .nGY2 .nGY2GThumbnailImage img {
  border-radius: var(--radius-card);
}