/* Neighborhood filter on /buildings.
   Loaded only on the buildings archive; see mu-plugins/elevated-buildings-filter.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 rule are --eabc-sand, the ink is --eabc-ink, and the label is the same
   letterspaced uppercase Hanken Grotesk that .eabc-eyebrow and the 404's
   labels use. The row wraps on the same measure as the cards under it, which
   is now assets/css/buildings-archive.css's 1180px .ea-bidx__inner and not the
   ported grid's 1600px; the constraint is on the list rather than on the nav so
   the section still spans the page and only the buttons are held to the field.

   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. */

.ea-hoodfilter {
  max-width: var(--maxPageWidth, 1600px);
  margin: 0 auto;
  padding: 0 6vw;
  text-align: center;
}

.ea-hoodfilter__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-hoodfilter__list {
  list-style: none;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.ea-hoodfilter__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. Twelve solid black pills would also read as twelve
   calls to action rather than one set of controls. */
.ea-hoodfilter__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 names 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-hoodfilter__btn:hover,
.ea-hoodfilter__btn:focus-visible {
  background: var(--eabc-sand, #dbd7ce);
  color: var(--eabc-ink, #2e2e2f);
  text-decoration: none;
}

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

.ea-hoodfilter__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-hoodfilter__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-hoodfilter__count {
  margin-left: .5em;
  opacity: .6;
}

.ea-hoodfilter__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));
}

/* The UA sheet's [hidden] { display: none } is the weakest rule in the cascade
   and anything that gives the card a display value beats it, which is what the
   ported Squarespace card did. .ea-bidx__card does not, but this stays: it is
   one declaration, and a filtered-out card that is still on screen is a filter
   that looks broken. Keyed off the data attribute, like the script. */
[data-ea-hoodgrid] [data-ea-hoods][hidden] { display: none !important; }

@media (max-width: 767px) {
  .ea-hoodfilter__label { margin-bottom: .9rem; font-size: .68rem; }
  .ea-hoodfilter__list { gap: .4rem; }
  .ea-hoodfilter__btn { padding: .5rem .8rem; font-size: .7rem; letter-spacing: .08em; }
  .ea-hoodfilter__status { font-size: .72rem; }
}