/* =====================================================================
   7thbreed — Site-wide hover & focus polish (professional standard)
   Makes hover states obvious but tasteful: pill-highlight nav links,
   lift + glow on primary buttons, tint fills on outline buttons,
   consistent focus-visible rings. Respects reduced motion.
   Loads after styles-OyjE2jJ4.css; uses utility-class hooks so it
   works on every page (SPA + standalone auth pages too).
   ===================================================================== */

/* ---------- 1. Desktop nav links: obvious pill highlight ---------- */
header nav a[class*="text-sm"] {
  position: relative;
  padding: .45rem .9rem;
  border-radius: 999px;
  transition: color .22s ease, background-color .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
header nav a[class*="text-sm"]:hover {
  color: var(--primary) !important;
  background: color-mix(in oklab, var(--primary) 9%, transparent);
  transform: translateY(-1px);
}
header nav a[class*="text-sm"][class*="text-primary"] {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}

/* ---------- 2. Primary (blue) buttons: lift + glow + brighten ---------- */
a[class*="bg-primary"]:not(header nav a),
button[class*="bg-primary"]:not([aria-label*="slide" i]):not([aria-label*="theme" i]):not([aria-label*="menu" i]) {
  transition:
    transform .22s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s ease,
    filter .22s ease,
    opacity .22s ease !important;
}
a[class*="bg-primary"]:not(header nav a):hover:not(:disabled),
button[class*="bg-primary"]:not([aria-label*="slide" i]):not([aria-label*="theme" i]):not([aria-label*="menu" i]):hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--primary) 60%, transparent),
              0 0 0 4px color-mix(in oklab, var(--primary) 13%, transparent);
  filter: brightness(1.06);
  opacity: 1 !important; /* replace the old opacity-dim hover */
}
a[class*="bg-primary"]:not(header nav a):active:not(:disabled),
button[class*="bg-primary"]:not([aria-label*="slide" i]):not([aria-label*="theme" i]):not([aria-label*="menu" i]):active:not(:disabled) {
  transform: translateY(0) scale(.98);
}

/* ---------- 3. Outline / ghost buttons: visible tint fill + border glow ---------- */
a[class*="border-border"][class*="rounded-full"]:hover,
button[class*="border-border"][class*="rounded-full"]:not([aria-label*="slide" i]):hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 7%, transparent);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--primary) 35%, transparent);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease,
              background-color .22s ease, border-color .22s ease, color .22s ease !important;
}

/* ---------- 4. Header icon buttons (theme toggle, mobile menu): soft chip ---------- */
header button[class*="rounded-full"][class*="bg-muted"]:hover,
header button[aria-label*="theme" i]:hover,
header button[aria-label*="menu" i]:hover {
  background: color-mix(in oklab, var(--primary) 12%, var(--surface)) !important;
  color: var(--primary);
  transform: translateY(-1px) scale(1.05);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, color .2s ease !important;
}

/* ---------- 5. Text links in body copy: underline slide (already used) ---------- */
main a[class*="text-primary"][class*="inline-flex"]:hover svg {
  transform: translateX(3px);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 6. Consistent professional focus ring everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: .5rem;
}

/* ---------- 7. Cookie banner always above Tawk chat bubble ---------- */
div.fixed[class*="bottom-4"][class*="inset-x-4"][class*="z-\[60\]"] {
  z-index: 2147483000 !important;
}

/* ---------- 8. Hero carousel arrows: keep the earlier grow/glow ---------- */

/* ---------- 8. Product card action buttons: align text, equal heights ----------
   The "Get Quote" anchor renders as plain inline text inside a stretched
   grid cell, so its label floats while "Purchase" centers. Make both
   flex pills with the same height. */
.product-card a[class*="rounded-full"],
.product-card button[class*="rounded-full"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  text-align: center;
}

/* ---------- 9. Reduced motion: color-only feedback ---------- */
@media (prefers-reduced-motion: reduce) {
  header nav a[class*="text-sm"]:hover,
  a[class*="bg-primary"]:hover,
  button[class*="bg-primary"]:hover,
  a[class*="border-border"][class*="rounded-full"]:hover,
  header button[class*="rounded-full"]:hover {
    transform: none !important;
  }
}