/* ============================================================================
   Hover legibility fix — 2026-05-19
   Reason: Maria reported (multiple items in feedback dashboard, May 19) that
   when her cursor went over cards/CTAs, the "whole cell" turned solid pink and
   the letters became hard to read. This stylesheet forces every rose-gold
   hover surface to have crisp, high-contrast white text + a subtle text-shadow
   for definition, regardless of which Tailwind utility set the original color.

   Loaded on every page via:  <link rel="stylesheet" href="/hover-fix.css?v=1">
   ============================================================================ */

/* ----- 1. The universal rule: any rose-gold-fill hover always shows cream text ----- */
.btn-magnetic:hover,
[class*="hover:bg-rose-gold"]:hover,
.tier-card:hover [data-cta],
.shine-card:hover [data-cta] {
  color: #FAFAF7 !important;        /* cream-white, easier on the eye than pure #fff */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  -webkit-font-smoothing: antialiased;
}

/* Children of those hover surfaces inherit (icons, spans, em, etc.) */
.btn-magnetic:hover *,
[class*="hover:bg-rose-gold"]:hover *,
.tier-card:hover [data-cta] *,
.shine-card:hover [data-cta] * {
  color: inherit !important;
  text-shadow: inherit;
}

/* ----- 2. Keep the magnetic-button sheen ::after BEHIND the text -------------------- */
/* Without this, the ::after pseudo-element can render on top of the text node, causing
   the "letters disappear" perception even though the bg/text colors look correct. */
.btn-magnetic { isolation: isolate; }
.btn-magnetic::after { z-index: 0 !important; }
.btn-magnetic > *,
.btn-magnetic { z-index: auto; }
.btn-magnetic { position: relative; }

/* Promote ALL direct text content of magnetic buttons above the sheen. We can't add
   a wrapper to bare text nodes, but we can give them their own stacking context
   indirectly via the button's `isolation: isolate` above + this contain hint. */
.btn-magnetic { contain: layout style; }

/* ----- 3. Card hover — guarantee no pink overlay can cover internal text ------------ */
/* The tier-card / shine-card hover state should ONLY lift + glow the border. If any
   page ships a pink overlay variant, force it to stay below text. */
.tier-card, .shine-card { isolation: isolate; }
.tier-card > *, .shine-card > * { position: relative; z-index: 1; }
.tier-card::before, .tier-card::after,
.shine-card::before, .shine-card::after { z-index: 0 !important; }

/* ----- 4. "Email Us"-style outline buttons — even MORE legible on hover ------------ */
/* These are the buttons Maria specifically flagged on the Collaborate page. */
a[href^="mailto"][class*="border-rose-gold"]:hover,
a[href^="mailto"][class*="hover:bg-rose-gold"]:hover {
  background-color: #B76E79 !important;
  color: #FAFAF7 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

/* ----- 5. Hover state on the contact form's "Send Message" button ------------------- */
/* Same rule, kept explicit for safety. */
button[type="submit"].btn-magnetic:hover,
button[type="submit"][class*="hover:bg-rose-gold"]:hover {
  background-color: #B76E79 !important;
  color: #FAFAF7 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

/* ----- 6. Mobile/touch — skip hover effects entirely to keep tap targets predictable */
@media (hover: none), (pointer: coarse) {
  .btn-magnetic::after,
  .tier-card::after, .shine-card::after { display: none; }
}