/* Gitlink repository navigation widget (navbar or sidebar).
   Structural styling only; theming happens through the `--gitlink-widget-*`
   custom properties, which fall back to Bootstrap tokens so unthemed Quarto
   sites work out of the box. */

.gitlink-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.navbar .navbar-nav.ms-auto {
  align-items: center;
  gap: 0.4rem;
}

/* Quarto's search button and colour-scheme toggle are sized to match the
   widget trigger (2rem tall, glyph centred) with consistent spacing across
   the navbar-right control group. Layout only; the bordered pill style is
   opt-in via `widget.style-navbar-tools`. */
.navbar #quarto-search {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
}

.navbar .quarto-navbar-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.4rem;
}

.navbar #quarto-search .aa-DetachedSearchButton,
.navbar .quarto-navbar-tools .quarto-color-scheme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  box-shadow: none;
}

/* Collapse the autocomplete library's icon slot to a compact icon following
   currentColor, and hide the placeholder and query slots so the detached
   button stays an icon-only square. `#quarto-search` outranks `.aa-*`. */
.navbar #quarto-search .aa-DetachedSearchButtonIcon {
  width: auto;
  margin: 0;
  padding: 0;
  color: currentColor;
}

.navbar #quarto-search .aa-DetachedSearchButtonIcon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.navbar #quarto-search .aa-DetachedSearchButtonPlaceholder,
.navbar #quarto-search .aa-DetachedSearchButtonQuery {
  display: none;
}

/* The trigger is a native <button>; reset its font so it follows the navbar. */
.gitlink-widget-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  background: var(--gitlink-widget-pill-bg, transparent);
  border: 1px solid var(--gitlink-widget-border, var(--bs-border-color-translucent, rgba(128, 128, 128, 0.3)));
  border-radius: 0.375rem;
  color: inherit;
  /* iOS needs this for a <div> to fire click events. */
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.gitlink-widget-trigger:hover,
.gitlink-widget-trigger:focus-visible,
.gitlink-widget-open .gitlink-widget-trigger {
  background: var(--gitlink-widget-accent-soft, color-mix(in srgb, var(--gitlink-widget-accent, var(--bs-link-color, #0d6efd)) 15%, transparent));
  border-color: var(--gitlink-widget-accent, var(--bs-link-color, #0d6efd));
  color: var(--gitlink-widget-accent, var(--bs-link-color, #0d6efd));
}

.gitlink-widget-platform-icon {
  flex-shrink: 0;
}

.gitlink-widget-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gitlink-widget-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.gitlink-widget-stat svg {
  opacity: 0.85;
}

.gitlink-widget-count {
  min-width: 1rem;
  text-align: center;
}

.gitlink-widget-arrow {
  opacity: 0.7;
  transition: transform 150ms ease;
}

.gitlink-widget-open .gitlink-widget-arrow {
  transform: rotate(180deg);
}

/* Menu rules are scoped under `.gitlink-widget` so they outrank Quarto's
   `.navbar a` and `.sidebar-navigation a` colours, which would otherwise
   force the surrounding navigation foreground onto the items. */
.gitlink-widget .gitlink-widget-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 14rem;
  background: var(--gitlink-widget-menu-bg, var(--bs-body-bg, #ffffff));
  border: 1px solid var(--gitlink-widget-border, var(--bs-border-color-translucent, rgba(128, 128, 128, 0.3)));
  border-radius: 0.5rem;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.55);
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: 1000;
}

.gitlink-widget.gitlink-widget-open .gitlink-widget-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gitlink-widget .gitlink-widget-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.4rem 0.7rem;
  color: var(--gitlink-widget-menu-fg, var(--bs-body-color, #212529));
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background 150ms ease, color 150ms ease;
}

.gitlink-widget .gitlink-widget-item svg,
.gitlink-widget .gitlink-widget-item .bi {
  flex-shrink: 0;
}

/* Labels may carry inline markup (e.g. an iconify icon from a shortcode in
   the entry's `text`); keep any such icon aligned with the text. */
.gitlink-widget .gitlink-widget-item .gitlink-widget-item-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gitlink-widget .gitlink-widget-item:hover,
.gitlink-widget .gitlink-widget-item:focus-visible {
  background: var(--gitlink-widget-accent-soft, color-mix(in srgb, var(--gitlink-widget-accent, var(--bs-link-color, #0d6efd)) 15%, transparent));
  color: var(--gitlink-widget-accent, var(--bs-link-color, #0d6efd));
  text-decoration: none;
}

.gitlink-widget .gitlink-widget-divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--gitlink-widget-border, var(--bs-border-color-translucent, rgba(128, 128, 128, 0.3)));
}

/* Sidebar navigation item (`sidebar.contents`). Quarto's sidebar is an
   `overflow-auto` scroll container, which would clip an absolutely positioned
   menu, so the menu expands inline below the trigger, like a sidebar section.
   `display` is not animatable, hence no transition. */
.gitlink-widget-sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.gitlink-widget-sidebar .gitlink-widget-trigger {
  width: 100%;
  justify-content: space-between;
}

.gitlink-widget-sidebar .gitlink-widget-dropdown {
  position: static;
  display: none;
  min-width: 0;
  width: 100%;
  margin-top: 0.35rem;
  box-shadow: none;
  transform: none;
  transition: none;
}

.gitlink-widget-sidebar.gitlink-widget-open .gitlink-widget-dropdown {
  display: block;
}

/* A tools row holding the widget stacks vertically: the widget trigger is a
   counted pill, not an icon, so it takes its own line above the remaining
   tools (colour-scheme toggle, reader toggle, overlay search). The marker
   class is set by widget.js on whichever tools container the placeholder was
   in; the id keeps this ahead of Quarto's own `.sidebar-tools-main` rather
   than relying on stylesheet order.

   The row is also the containing block for the overlay menu below. It spans
   the sidebar, where the centred trigger does not, so anchoring the menu here
   is what keeps it inside the column. */
#quarto-sidebar .gitlink-widget-tools {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

/* Quarto pulls the tools row up under the sidebar title (`margin-top: -6px`),
   which crowds the widget pill; give it room instead. */
.sidebar-title .sidebar-tools-main.gitlink-widget-tools {
  margin-top: 0.5rem;
}

/* The widget sits below the icon tools (colour-scheme and reader toggles) and
   above the search control, whether search is the sidebar field below the row
   or an overlay button inside it. `position: static` hands the menu's
   containing block up to the row: the widget is `position: relative` by
   default, which would otherwise anchor the menu to the trigger pill. */
.gitlink-widget-tools .gitlink-widget {
  order: 1;
  position: static;
}

.gitlink-widget-tools #quarto-search {
  order: 2;
}

/* A tool sits in a strip of icon-sized controls, where an inline menu would
   be laid out as another flex item beside them, so it keeps the overlay menu.

   Quarto's sidebar does not clip: it sets `overflow-y: auto` and leaves
   `overflow-x` at `visible`, which computes to `auto`, so a menu wider than
   the column scrolls it sideways instead. The menu is hidden with
   `visibility` rather than `display`, so it takes part in layout even while
   shut and the scrollbar is there before anything is opened.

   Stretching it between both edges of the row (which the rule above made the
   containing block) is what bounds it: the trigger is centred, so anchoring
   to the trigger left the menu running past the column's right edge. `width`
   has to give way with it, since a specified width over-constrains an
   absolutely positioned box and `right` is the offset that gets dropped, and
   the 14rem floor has to go for the same reason on a narrow sidebar. */
.gitlink-widget-tools .gitlink-widget-dropdown {
  left: 0;
  right: 0;
  min-width: 0;
  width: auto;
}

/* The collapsed navbar-nav is a Bootstrap `.navbar-nav-scroll` region
   (max-height + overflow-y: auto) that clips the absolute dropdown, showing a
   scrollbar instead of the menu. Neutralise it so the menu overlays on top,
   and anchor the menu to the left edge so it stays on screen. */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse .navbar-nav {
    max-height: none;
    overflow: visible;
  }

  .navbar .gitlink-widget .gitlink-widget-dropdown {
    left: 0;
    right: auto;
  }
}

/* Visually hidden, available to assistive technology. */
.gitlink-widget-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gitlink-widget-trigger,
  .gitlink-widget-arrow,
  .gitlink-widget-dropdown,
  .gitlink-widget-item {
    transition: none;
  }
}