/*
 * CUD Plugin — Frontend styles
 *
 * Minimal defaults only. Designers override via theme CSS or block settings.
 */

/* -----------------------------------------------------------------------
 * Filter button active state
 * The .cud-active class is toggled by ajax-filter.js when a button is
 * selected. These defaults make the selected state visually obvious while
 * remaining easily overridable.
 * ----------------------------------------------------------------------- */
.cud-filter-btn {
  background: none;
  cursor: pointer;
}

.cud-filter-btn.cud-active {
  font-weight: 700;
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: -1px;
  opacity: 1;
}

.cud-filter-btn:not(.cud-active) {
  opacity: 0.65;
}

/* After deselecting, suppress browser :focus outline/style so the button
 * doesn't linger in a bold/outlined state until focus moves away.
 * :focus-visible is left intact so keyboard navigation remains accessible. */
.cud-filter-btn:focus:not(.cud-active):not(:focus-visible) {
  outline: none;
  border-color: #ccc;
  font-weight: normal;
}

.cud-filter-btn:hover {
  /* Inactive buttons render at opacity:0.65, so the effective alpha against the page
     is alpha × 0.65. To match a ~0.05 darkening on a fully opaque element:
     0.05 / 0.65 ≈ 0.077 → rounded to 0.08. Active buttons (opacity:1) see 0.08,
     which is close enough to the intended effect. */
  background: rgba(0, 0, 0, .08);
}