/* Bunklow hover highlight, look A "Lift and outline" (Randy, Oct 30 2026, about 2:40 PM PT).
   Says "I'm clickable" on desktop: cards and buttons rise a little with an orange outline,
   text links get the outline plus a soft orange tint. Phones and tablets never see the hover part.
   Keyboard users get the same outline when they tab onto a link (focus visible).
   Every rule sits inside :where(), so it has zero weight and never beats a page's own styles.
   Added to every page at build time by tools/stamp-build.mjs. */

:root {
  --bk-hover-orange: #fc8002;
  --bk-hover-ring: rgba(252, 128, 2, 0.85);
  --bk-hover-tint: rgba(252, 128, 2, 0.24);
}

/* Smooth change in and out */
:where(a, button, [role="button"], summary) {
  transition: transform 0.18s ease, outline-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Every link and button: orange outline. Cards and buttons also lift.
     A card is a link that holds a picture, heading or block. Header and menu links, and anything
     holding a video or canvas (the locked Reel), only get the outline, never the lift. */
  :where(a, button, [role="button"], summary):hover {
    outline: 2px solid var(--bk-hover-ring);
    outline-offset: 2px;
  }
  :where(a:has(img, picture, h1, h2, h3, h4, p, div, article, figure, li), button, [role="button"]):where(:not(header *, nav *, :has(video, canvas))):hover {
    transform: translateY(-3px);
  }

  /* Text links: soft orange tint behind the words */
  :where(a:not(:has(img, picture, h1, h2, h3, h4, p, div, article, figure, li, video, canvas))):hover {
    background-color: var(--bk-hover-tint);
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

/* Keyboard: the same orange outline on any device */
:where(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid var(--bk-hover-ring);
  outline-offset: 2px;
}

/* People who ask for less motion: outline and tint only, no lift */
@media (prefers-reduced-motion: reduce) {
  :where(a, button, [role="button"], summary) {
    transition: none;
  }
  :where(a, button, [role="button"]):hover {
    transform: none;
  }
}