/* Knowledge Center index (/knowledge-center).
   Loaded only on the posts page; see mu-plugins/elevated-kc-archive.php.

   No new colours, no new button and no new face. The buttons are .eabc-btn
   from sitewide.css re-skinned to a smaller outlined variant, the ground and
   the rules are --eabc-sand and --eabc-ink, and the labels are the same
   letterspaced uppercase Hanken Grotesk that .eabc-eyebrow, .ea-hood__meta and
   the 404's labels use.

   What this file deliberately does NOT contain is a card. The article cards
   here reuse .ea-kc__grid / .ea-kc__card / .ea-kc__name / .ea-kc__line /
   .ea-kc__link from home-sections.css, unchanged, so the Knowledge Center
   section on the homepage and the Knowledge Center index itself are literally
   the same card and cannot drift apart. That stylesheet is enqueued sitewide
   and is also a declared dependency of this one. If .ea-kc ever stops being
   loaded everywhere, this page has to grow those five rules; grep before
   changing either side.

   This file must load AFTER elevated-sitewide: .eabc-btn:hover paints solid
   black at the same specificity as the hover rule below, so source order is
   what keeps an inactive button from going black under the cursor.

   The .ea-topicfilter block is a rule-for-rule copy of .ea-hoodfilter in
   buildings-filter.css, which shipped the same control on /buildings the same
   day. Two files rather than one only because each is enqueued from its own
   mu-plugin; when those enqueues move into functions.php these should collapse
   into a single shared filter bar. Keep them in step until then. */

/* --- Page frame -------------------------------------------------------- */

/* Matches .ea-kc__inner: same column, same gutter, so a visitor arriving from
   the homepage section lands on cards sitting on the same measure. */
.ea-kcindex {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw 5.5rem;
  color: var(--eabc-ink, #2e2e2f);
}

/* The homepage grid carries a bottom margin for the button under it. There is
   no button here, and the wrapper supplies the space instead. */
.ea-kcindex__grid { margin-bottom: 0; }

/* --- Card meta --------------------------------------------------------- */

/* The one line the homepage card does not have: topic and date, above the
   title, in the same small caps as .ea-hood__meta. Flex rather than a written
   separator so a long topic label can drop to its own line at 390 instead of
   pushing the card wide. */
.ea-kcindex__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .55rem;
  margin: 0 0 .6rem;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--eabc-muted, rgba(0, 0, 0, .58));
}

/* A dot, not a rule or a dash: the separator has to survive the topic and the
   date sitting on two different lines, where a border would hang in space. */
.ea-kcindex__cats + .ea-kcindex__date::before {
  content: "\00b7";
  margin-right: .55rem;
}

.ea-kcindex__name { margin: 0; }

/* --- Filter row -------------------------------------------------------- */

.ea-topicfilter {
  max-width: 1180px;
  margin: 0 auto 2.6rem;
  padding: 0 6vw;
  text-align: center;
}

.ea-topicfilter__label {
  margin: 0 0 1.1rem;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-weight: 400;
  font-size: .72rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--eabc-muted, rgba(0, 0, 0, .58));
}

.ea-topicfilter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.ea-topicfilter__item { margin: 0; padding: 0; }

/* Inactive: outlined. The base .eabc-btn is the solid ink pill, which is kept
   for the ACTIVE filter, so the two states differ in fill and not only in a
   shade of the same fill. Five solid black pills would also read as five calls
   to action rather than one set of controls. */
.ea-topicfilter__btn {
  padding: .58rem 1.05rem;
  font-size: .76rem;
  letter-spacing: .1em;
  background: transparent;
  color: var(--eabc-ink, #2e2e2f);
  border: 1px solid var(--eabc-sand, #dbd7ce);
  /* Long labels wrap inside their own button rather than pushing the row wide.
     A single nowrap label is all it takes to overflow 390px. */
  white-space: normal;
}

.ea-topicfilter__btn:hover,
.ea-topicfilter__btn:focus-visible {
  background: var(--eabc-sand, #dbd7ce);
  color: var(--eabc-ink, #2e2e2f);
  text-decoration: none;
}

.ea-topicfilter__btn[aria-current] {
  background: var(--eabc-ink, #2e2e2f);
  color: var(--eabc-paper, #fafafa);
  border-color: var(--eabc-ink, #2e2e2f);
}

.ea-topicfilter__btn[aria-current]:hover {
  background: #000;
  color: var(--eabc-paper, #fafafa);
}

/* Visible on both fills: ink at 2px sits outside the button, so it reads
   against the page ground whether the button itself is sand or ink. */
.ea-topicfilter__btn:focus-visible {
  outline: 2px solid var(--eabc-ink, #2e2e2f);
  outline-offset: 2px;
}

/* Opacity, not --eabc-muted: the count has to stay legible on the ink fill of
   the active button, where a fixed dark grey would disappear. */
.ea-topicfilter__count {
  margin-left: .5em;
  opacity: .6;
}

.ea-topicfilter__status {
  margin: 1.1rem 0 0;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--eabc-muted, rgba(0, 0, 0, .58));
}

/* --- Link to the reports index ----------------------------------------- */

/* One centred sentence between the filter row and the cards, pointing at
   /market-watch. Deliberately NOT a button: it is a signpost, not a call to
   action, and a fifth pill in the row above would read as a topic filter that
   empties the page. Same label type and muted ink as the filter status line
   directly above it, so the two read as one block of page furniture rather
   than as a new component. */
.ea-kcindex__aside {
  max-width: 1180px;
  margin: 0 auto 2.4rem;
  padding: 0 6vw;
  text-align: center;
  font-family: var(--primary-button-font-font-family, "Hanken Grotesk"), system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--eabc-muted, rgba(0, 0, 0, .58));
}

/* Ink, not muted: the link has to be the thing the eye finds in the sentence,
   and underlining it in sand alone is not enough contrast against grey text. */
.ea-kcindex__aside a {
  color: var(--eabc-ink, #2e2e2f);
  text-decoration: none;
  border-bottom: 1px solid var(--eabc-sand, #dbd7ce);
}

.ea-kcindex__aside a:hover,
.ea-kcindex__aside a:focus-visible {
  color: var(--eabc-ink, #2e2e2f);
  border-bottom-color: var(--eabc-ink, #2e2e2f);
  text-decoration: none;
}

.ea-kcindex__aside a:focus-visible {
  outline: 2px solid var(--eabc-ink, #2e2e2f);
  outline-offset: 3px;
}

/* The ported bundle gives article elements a display value in places, which
   beats the UA sheet's [hidden] { display: none }. Without this a filtered-out
   card can stay on screen and the filter looks broken with scripts off. */
.ea-kcindex__card[hidden] { display: none !important; }

/* --- Narrow ------------------------------------------------------------ */

@media (max-width: 767px) {
  .ea-kcindex { padding-bottom: 3.5rem; }
  .ea-topicfilter { margin-bottom: 2rem; }
  .ea-topicfilter__label { margin-bottom: .9rem; font-size: .68rem; }
  .ea-topicfilter__list { gap: .4rem; }
  .ea-topicfilter__btn { padding: .5rem .8rem; font-size: .7rem; letter-spacing: .08em; }
  .ea-topicfilter__status { font-size: .72rem; }
  .ea-kcindex__aside { margin-bottom: 1.8rem; font-size: .72rem; }
}