/**
 * Reusable chip pattern for the Makerspace card-display module.
 *
 * Used wherever a small labeled value should stand out from body text
 * (location, slack channel, area-of-interest, tags). Variants follow the
 * BEM `--modifier` convention for color tweaks.
 */

.mh-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2xs);
  padding: var(--mh-space-2xs) var(--mh-space-sm);
  border-radius: var(--mh-radius-pill, 999px);
  background: var(--mh-color-neutral-100);
  border: 1px solid var(--mh-color-border);
  color: var(--mh-color-neutral-800);
  font-size: 0.9em;
  line-height: 1.3;
  text-decoration: none;
  vertical-align: middle;
}

.mh-chip:hover,
.mh-chip:focus-visible {
  background: var(--mh-color-neutral-150);
  text-decoration: none;
  color: var(--mh-color-neutral-900);
}

.mh-chip__icon {
  font-size: 1em;
  opacity: 0.75;
  flex-shrink: 0;
}

.mh-chip__label {
  font-weight: 500;
}

.mh-chip__crumb {
  color: var(--mh-color-neutral-700);
  font-weight: 400;
}

.mh-chip__sep {
  color: var(--mh-color-neutral-400);
}

/* A row of chips that wrap. */
.mh-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-xs);
}

/* --- Variants --- */

.mh-chip--location {
  background: #fff3e0;
  border-color: #ffd9a8;
  color: #7a4a00;
}

.mh-chip--location .mh-chip__icon {
  color: #c47600;
  opacity: 1;
}

/* Slack: solid purple button matching the legacy asset_injector treatment.
 * Reused on `.field--name-field-member-slack-id-number .field__item a` so
 * the facilitator-schedule embed picks up the same look without preprocess.
 * `body` prefix is intentional — the facilitator_schedules view embeds a
 * stale inline <style> with the same specificity, and boosting ours wins. */
body .mh-chip--slack,
body .field--name-field-member-slack-id-number .field__item a,
body .field--name-field-interest-slack-channel .field__item a {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-2xs);
  padding: var(--mh-space-2xs) var(--mh-space-sm);
  background: #4a154b; /* Slack brand purple */
  border: 1px solid #4a154b;
  color: #fff;
  font-weight: 600;
  border-radius: var(--mh-radius-sm, 5px);
  text-decoration: none;
  line-height: 1.3;
}

body .mh-chip--slack:hover,
body .mh-chip--slack:focus-visible,
body .field--name-field-member-slack-id-number .field__item a:hover,
body .field--name-field-member-slack-id-number .field__item a:focus-visible,
body .field--name-field-interest-slack-channel .field__item a:hover,
body .field--name-field-interest-slack-channel .field__item a:focus-visible {
  background: #611f69;
  border-color: #611f69;
  color: #fff;
  text-decoration: none;
}

.mh-chip--slack .mh-chip__icon {
  color: #fff;
  opacity: 1;
}

/* Inject a Slack icon (Bootstrap Icons font) before the bare "Slack" link
 * inside the facilitator schedule. The link there has no markup we control,
 * so use ::before. */
body .field--name-field-member-slack-id-number .field__item a::before,
body .field--name-field-interest-slack-channel .field__item a::before {
  font-family: "bootstrap-icons";
  content: "\f565"; /* bi-slack */
  font-weight: normal;
  margin-right: 0.25em;
  font-size: 1em;
  line-height: 1;
  width: auto;
  height: auto;
}

.mh-chip--aoi {
  background: var(--mh-color-surface);
  border-color: var(--mh-color-border);
}

.mh-chip--aoi .mh-chip__icon {
  color: var(--mh-color-brand-secondary);
  opacity: 1;
}

/* The Location field uses an inline label by default ("Location: Metal shop").
 * Hide the label so the chip can stand on its own — the icon makes the
 * meaning obvious and avoids redundant "Location" prefix. */
body.node--type-item .field--name-field-item-location .field__label {
  display: none;
}

body.node--type-item .field--name-field-item-location {
  display: block;
  margin: var(--mh-space-xs) 0;
}

/* Same treatment for the Associated Slack Channel — drop the label, let the
 * Slack-purple chip carry the meaning. */
body.node--type-item .field--name-field-item-slack-channel .field__label {
  display: none;
}

body.node--type-item .field--name-field-item-slack-channel {
  display: block;
  margin: var(--mh-space-xs) 0;
}