/* ==========================================================================
   Skin: Neo-brutalist (default)
   Tokens (colours, 2px outline, radii, the hard shadow) are in skin.php.
   This file only adds what a token can't: WHERE the hard shadow goes, and
   the press-in interaction. To tone it down, change the tokens — not this.
   ========================================================================== */

/* Buttons: ink outline + hard offset shadow, pressed in on click. */
.sorted-btn {
  border: var(--sorted-border-width) solid var(--sorted-ink);
  border-radius: var(--sorted-radius-sm);
  box-shadow: var(--sorted-shadow);
  font-weight: 700;
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease;
}
.sorted-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--sorted-ink); }
.sorted-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sorted-ink); }
.sorted-btn.sorted-btn--link,
.sorted-btn.sorted-btn--link:hover,
.sorted-btn.sorted-btn--link:active { border: 0; box-shadow: none; transform: none; }

/* Cards: the shared ink outline (theme.css) + the hard shadow, lifting on hover. */
.sorted-feature-card,
.sorted-pricing-card,
.sorted-category-tile,
.sorted-faq-item,
.sorted-card,
.sorted-pricing-tier,
.wpcf7 {
  box-shadow: var(--sorted-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .15s ease;
}
.sorted-feature-card:hover,
.sorted-category-tile:hover,
.sorted-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sorted-shadow-lg);
}

/* Inverted bands: the shadow follows the band's own ink, not the page's. */
.sorted-tone--tertiary .sorted-btn { box-shadow: 3px 3px 0 var(--sorted-bg); }

@media (prefers-reduced-motion: reduce) {
  .sorted-btn, .sorted-btn:hover, .sorted-btn:active,
  .sorted-feature-card:hover, .sorted-category-tile:hover, .sorted-card:hover { transform: none; }
}