/* Strategy categories in the left sidebar.
   The five categories are those of the Texas Air Quality Portal strategies
   page. Each strategy's sidebar link gets its category's colour and icon.

   To move a strategy, move its selector to another category block below; the
   selector is the strategy number as it starts the folder name ("/5.1-").
   Icons are Bootstrap Icons (bundled with Quarto), given by their code. */

:root {
  --category-transit: #0072b2;
  --category-bike-ped: #1b8a5a;
  --category-infrastructure: #c8560a;
  --category-vehicle: #8a4fa8;
  --category-demand: #a8324e;
}

/* ----- Transit (icon: bus-front-fill) ----------------------------------- */
.category-transit,
.sidebar-link[href*="/1.1-"],
.sidebar-link[href*="/1.2-"],
.sidebar-link[href*="/1.3-"] {
  --category-color: var(--category-transit);
  --category-icon: "\f87e";
}

/* ----- Bicycle and Pedestrian (icon: bicycle) --------------------------- */
.category-bike-ped,
.sidebar-link[href*="/3.2-"],
.sidebar-link[href*="/9.1-"],
.sidebar-link[href*="/9.2-"] {
  --category-color: var(--category-bike-ped);
  --category-icon: "\f18d";
}

/* ----- Infrastructure & Traffic Operations (icon: stoplights-fill) ------ */
.category-infrastructure,
.sidebar-link[href*="/2.1-"],
.sidebar-link[href*="/2.2-"],
.sidebar-link[href*="/2.3-"],
.sidebar-link[href*="/2.4-"],
.sidebar-link[href*="/5.1-"],
.sidebar-link[href*="/5.2-"],
.sidebar-link[href*="/5.3-"],
.sidebar-link[href*="/5.4-"],
.sidebar-link[href*="/5.5-"],
.sidebar-link[href*="/5.6-"],
.sidebar-link[href*="/5.7-"],
.sidebar-link[href*="/5.8-"],
.sidebar-link[href*="/6.1-"],
.sidebar-link[href*="/6.2-"],
.sidebar-link[href*="/6.3-"],
.sidebar-link[href*="/6.4-"] {
  --category-color: var(--category-infrastructure);
  --category-icon: "\f594";
}

/* ----- Vehicle Activity & Technology (icon: truck-front) ---------------- */
.category-vehicle,
.sidebar-link[href*="/7.1-"],
.sidebar-link[href*="/7.2-"],
.sidebar-link[href*="/7.3-"],
.sidebar-link[href*="/10.1-"],
.sidebar-link[href*="/10.2-"],
.sidebar-link[href*="/10.3-"],
.sidebar-link[href*="/11-extreme-"],
.sidebar-link[href*="/14.1-"],
.sidebar-link[href*="/16.1-"],
.sidebar-link[href*="/16.2-"] {
  --category-color: var(--category-vehicle);
  --category-icon: "\f821";
}

/* ----- Travel Demand Management (icon: people-fill) --------------------- */
.category-demand,
.sidebar-link[href*="/3.1-"],
.sidebar-link[href*="/3.3-"],
.sidebar-link[href*="/4.1-"],
.sidebar-link[href*="/4.2-"],
.sidebar-link[href*="/4.3-"],
.sidebar-link[href*="/4.4-"],
.sidebar-link[href*="/4.5-"],
.sidebar-link[href*="/8.1-"],
.sidebar-link[href*="/8.2-"],
.sidebar-link[href*="/8.3-"],
.sidebar-link[href*="/12.1-"],
.sidebar-link[href*="/12.2-"],
.sidebar-link[href*="/12.3-"],
.sidebar-link[href*="/13.1-"],
.sidebar-link[href*="/13.2-"],
.sidebar-link[href*="/13.3-"],
.sidebar-link[href*="/15.1-"],
.sidebar-link[href*="/15.2-"],
.sidebar-link[href*="/15.3-"],
.sidebar-link[href*="/15.4-"],
.sidebar-link[href*="/17.1-"],
.sidebar-link[href*="/17.2-"],
.sidebar-link[href*="/17.3-"] {
  --category-color: var(--category-demand);
  --category-icon: "\f4cf";
}

/* ----- how a categorised entry looks ------------------------------------ */

/* Strategy links: a bar in the category colour and the category icon.
   Entries without a category keep a transparent bar so the text lines up. */
.sidebar-navigation .sidebar-link {
  border-left: 3px solid var(--category-color, transparent);
  padding-left: 0.5rem;
}

.sidebar-navigation .sidebar-link::before,
.category-legend li::before {
  content: var(--category-icon, none);
  display: inline-block;
  flex: none;
  width: 1.5em;
  color: var(--category-color);
  font-family: "bootstrap-icons";
  font-weight: normal;
  letter-spacing: 0;
  vertical-align: -0.1em;
}

/* Legend at the top of the sidebar. */
/* The legend stays in view while the sidebar scrolls, so an active filter is visible. */
#quarto-sidebar .quarto-sidebar-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  /* Covers the strip above it where scrolled entries would show through. */
  box-shadow: 0 -2rem 0 #ffffff;
}

.category-legend {
  margin: 0 0 1rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--portal-rule);
  list-style: none;
  font-size: 0.82rem;
}

/* Legend entries are buttons that filter the sidebar (category-filter.html). */
.category-legend li {
  cursor: pointer;
  border-radius: 4px;
}

.category-legend li:hover,
.category-legend li:focus-visible {
  background: var(--portal-band);
}

.category-legend.category-filtering li[aria-pressed="false"] {
  opacity: 0.45;
}

.category-legend li[aria-pressed="true"] {
  background: var(--portal-band);
  box-shadow: inset 3px 0 0 var(--category-color);
}

.sidebar-navigation .category-hidden {
  display: none;
}

.category-legend li {
  display: flex;
  align-items: baseline;
  padding: 0.15rem 0.35rem;
  color: var(--category-color);
  font-weight: 600;
}