/*
 * Site-wide hover glow — applied to every link, button, and icon
 * (SVG/IMG inside an interactive element) across the entire platform, per
 * Victoria's explicit request (2026-08-16). Deliberately generic/layered
 * on top of whatever hover state an element already has (color changes,
 * background fills, etc. in shop-page.css, cart.css, site-header-footer.css,
 * etc.) rather than replacing those -- this only adds a glow, never removes
 * or overrides existing hover behavior.
 *
 * prefers-reduced-motion users get the glow without the transition (still
 * present on hover, just not animated in/out).
 */

a,
button,
input[type="submit"],
input[type="button"],
.button {
    transition: filter .15s ease, box-shadow .15s ease;
}

a:hover,
a:focus-visible,
button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
.button:hover,
.button:focus-visible {
    filter: drop-shadow(0 0 6px rgba(0,136,204,0.55));
}

/* Icons (SVG/IMG) inside a link or button get their own tighter glow,
   layered with the parent's via filter -- SVGs with fill/stroke read the
   glow color better through drop-shadow than a box-shadow would. */
a svg, a img,
button svg, button img,
.button svg, .button img {
    transition: filter .15s ease;
}
a:hover svg, a:hover img, a:focus-visible svg, a:focus-visible img,
button:hover svg, button:hover img, button:focus-visible svg, button:focus-visible img,
.button:hover svg, .button:hover img, .button:focus-visible svg, .button:focus-visible img {
    filter: drop-shadow(0 0 4px rgba(0,136,204,0.6));
}

@media (prefers-reduced-motion: reduce) {
    a, button, input[type="submit"], input[type="button"], .button,
    a svg, a img, button svg, button img, .button svg, .button img {
        transition: none;
    }
}