/* Category band — the shared opening of the category pages.
 *
 * One ground, one hairline, one depth for the catalogue, Knowledge, the
 * selector and Trade. Before this each of the four opened on white and
 * differed from the others, which made four sections of one site look like
 * four sites.
 *
 * The categories are plain links on the band rather than filled chips. They
 * are a way in, not a control panel — as chips they were the loudest thing on
 * the page, above the catalogue they exist to serve.
 *
 * The ground itself is [data-theme="band"], defined in tokens.css. Trade
 * reaches it through the page-hero module rather than this template, which is
 * why the rule below names both.
 */

.pl-band,
.pl-page-hero[data-theme="band"] {
  border-bottom: var(--rule) solid var(--c-band-rule);
}

.pl-band__head {
  padding-top: var(--section-y);
}

/* With no categories under it the band still needs its floor. */
.pl-band--plain .pl-band__head {
  padding-bottom: var(--section-y);
}

.pl-band__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
}

.pl-band__eyebrow {
  margin: 0 0 var(--sp-2);
}

.pl-band__title {
  margin: 0;
  font-size: var(--step-4);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.pl-band__aside {
  margin: 0;
}

.pl-band__intro {
  margin-top: var(--sp-3);
  max-width: var(--measure);
}

/* ---------------------------------------------------------- the categories */
/* One row per taxonomy, under a hairline shared with the title above. */
.pl-band__cats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-4);
  padding-block: var(--sp-2);
  border-top: var(--rule) solid var(--c-band-rule);
}

.pl-band__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
}

.pl-band__grouplabel {
  margin: 0;
}

.pl-band__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A link, not a chip — but still a target. The 44px belongs to the link rather
 * than to the row, which is the decision the breadcrumb already makes. */
.pl-band__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text);
  text-decoration: none;
}

a.pl-band__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The one you are on. Weight and a rule, not colour: the band is a tint and a
 * second tint on top of it would say less, not more. */
.pl-band__link[aria-current] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A step is not a link. The selector's questions are the only categories that
 * cannot be jumped to, so they are spans, and read as pending until current. */
span.pl-band__link {
  color: var(--c-text-muted);
}

span.pl-band__link[aria-current] {
  color: var(--c-text);
}

.pl-band__after {
  margin-left: auto;
}