/*
 * Tips page — category/media filter bar and the per-card tag row.
 *
 * A separate file, in the same spirit as bea.css: this styling is specific
 * to one page (/tips) rather than site-wide, so it ships on its own rather
 * than growing styles.css for everyone else's pages too.
 *
 * Colours and radii are read from the custom properties styles.css already
 * defines (--royal, --azure, --cyan, --navy, --border-str, --bg-alt,
 * --text-soft, --r-sm/md) so this matches the rest of the site without its
 * own palette.
 */

.tip-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.tip-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tip-filter-chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-str);
  background: #fff;
  color: var(--deep, #16337A);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.tip-filter-chip:hover {
  background: var(--bg-alt);
}

.tip-filter-chip:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 1px;
}

.tip-filter-chip.is-active {
  background: var(--royal);
  border-color: var(--royal);
  color: #fff;
}

.tip-filters__search {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.tip-filters__search input {
  height: 34px;
  min-width: 200px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-str);
  background: var(--bg-alt);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--navy);
}

.tip-filters__search input:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 1px;
}

.tip-filters__empty {
  margin: 4px 0 0;
}

@media (max-width: 560px) {
  .tip-filters__search {
    margin-left: 0;
    width: 100%;
  }
  .tip-filters__search input {
    width: 100%;
  }
}

/* ------------------------------------------------- the tag row itself -- */

.tip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tip-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tip-tag--cat {
  background: var(--bg-alt);
  color: var(--navy);
}

.tip-tag--cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--royal);
  flex-shrink: 0;
}

.tip-tag--cat[data-dot="azure"]::before { background: var(--azure); }
.tip-tag--cat[data-dot="cyan"]::before { background: var(--cyan); }
.tip-tag--cat[data-dot="navy"]::before { background: var(--navy); }
.tip-tag--cat[data-dot="royal"]::before { background: var(--royal); }

.tip-tag--general {
  background: #fff;
  color: var(--text-soft);
  border: 1px solid var(--border-str);
}

.tip-tag--general::before {
  display: none;
}

.tip-tag--media {
  background: #fff;
  border: 1px solid var(--border-str);
  color: var(--text-soft);
}

.tip-tag--media[data-kind="video"] {
  border-color: var(--cyan);
  color: var(--cyan-text);
}

/* ---------------------------------------------- actually hiding a card -- */

/*
 * The bug this fixes: .tip-card (in styles.css) sets `display: flex`. The
 * browser's own built-in rule for the hidden attribute, `[hidden] { display:
 * none }`, has the exact same specificity (one class vs. one attribute
 * selector) — and when two rules tie on specificity, the one that comes
 * later in the cascade wins. The page's own stylesheet always comes after
 * the browser's built-in one, so `.tip-card`'s `display: flex` was silently
 * beating the built-in hidden rule: tips-filter.js was correctly setting
 * card.hidden = true on every non-matching card, but nothing on screen
 * changed, because `[hidden]` was losing the tie.
 *
 * This selector combines the feed's own id with the attribute selector,
 * which outranks a bare class selector regardless of source order, so it
 * wins outright rather than by accident of file ordering.
 */
#feed-body .tip-card[hidden] {
  display: none;
}