/* Global interaction layer — theme-driven hover & focus effects.
 *
 * Accent colors, gradients, rings, and shadows resolve from `--mm-*` tokens
 * generated in theme_utils.py from the backend theme config.
 */

/* --- Consistent, theme-colored focus ring for keyboard users -------------- */
:where(a, button, [role="button"], summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mm-ring-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--mm-ring);
}

/* --- Shared animated underline for footer, drawer, and text links ----------- */
:where(footer nav a, footer p a, #site-shell-drawer .site-shell-nav-link,
  main a, .subnav-link, .floating-nav-link, .mm-anchor-nav-link,
  .mm-component p a, .mm-component li a, .mm-component-links-list a):not(.mm-cta):not(.site-shell-nav-cta):not(.mm-cta-link):not([class*="rounded-full"]) {
  position: relative;
  text-decoration: none;
}

:where(footer nav a, footer p a, #site-shell-drawer .site-shell-nav-link,
  main a, .subnav-link, .floating-nav-link, .mm-anchor-nav-link,
  .mm-component p a, .mm-component li a, .mm-component-links-list a):not(.mm-cta):not(.site-shell-nav-cta):not(.mm-cta-link):not([class*="rounded-full"])::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--mm-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

:where(footer nav a, footer p a, #site-shell-drawer .site-shell-nav-link,
  main a, .subnav-link, .floating-nav-link, .mm-anchor-nav-link,
  .mm-component p a, .mm-component li a, .mm-component-links-list a):not(.mm-cta):not(.site-shell-nav-cta):not(.mm-cta-link):not([class*="rounded-full"]):hover::after,
:where(footer nav a, footer p a, #site-shell-drawer .site-shell-nav-link,
  main a, .subnav-link, .floating-nav-link, .mm-anchor-nav-link,
  .mm-component p a, .mm-component li a, .mm-component-links-list a):not(.mm-cta):not(.site-shell-nav-cta):not(.mm-cta-link):not([class*="rounded-full"]):focus-visible::after {
  transform: scaleX(1);
}

/* Footer / drawer links: smooth color shift on hover. */
:where(footer nav a, footer p a, #site-shell-drawer .site-shell-nav-link):not(.site-shell-nav-cta) {
  transition: color 0.25s ease, opacity 0.25s ease;
}

:where(footer nav a, footer p a):not(.site-shell-nav-cta):hover,
:where(footer nav a, footer p a):not(.site-shell-nav-cta):focus-visible {
  color: var(--mm-primary) !important;
}

/* --- Filled buttons & CTAs: theme gradient sweep (no lift) ---------------- */
:where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
  button.bg-primary, input[type="submit"].bg-primary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
  button.bg-primary, input[type="submit"].bg-primary)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mm-gradient-primary-hover);
  background-size: 200% 200%;
  background-position: 0% 50%;
  opacity: 0;
  transition: opacity 0.35s ease, background-position 0.55s ease;
  /* Behind label text — z-index: 0 painted over bare text nodes in <a>/<button>. */
  z-index: -1;
  pointer-events: none;
}

:where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
  button.bg-primary, input[type="submit"].bg-primary):not(:disabled):hover::before,
:where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
  button.bg-primary, input[type="submit"].bg-primary):not(:disabled):focus-visible::before {
  opacity: 1;
  background-position: 100% 50%;
}

:where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
  button.bg-primary, input[type="submit"].bg-primary):not(:disabled):hover,
:where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
  button.bg-primary, input[type="submit"].bg-primary):not(:disabled):focus-visible {
  /* Reveal the gradient layer sitting at z-index: -1. */
  background-color: transparent !important;
  box-shadow: var(--mm-hover-glow);
  filter: brightness(1.04);
}

:where(.mm-cta.bg-primary, button.bg-primary, input[type="submit"].bg-primary):not(:disabled):hover,
:where(.mm-cta.bg-primary, button.bg-primary, input[type="submit"].bg-primary):not(:disabled):focus-visible {
  color: var(--mm-on-primary) !important;
}

:where(.mm-cta.bg-primary-container):not(:disabled):hover,
:where(.mm-cta.bg-primary-container):not(:disabled):focus-visible {
  color: var(--mm-on-primary-container) !important;
}

:where(.site-shell-nav-cta):not(:disabled):hover,
:where(.site-shell-nav-cta):not(:disabled):focus-visible {
  color: var(--mm-on-primary-container) !important;
}

/* Outline CTAs: soft gradient wash on hover. */
:where(.mm-cta.glass-card) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:where(.mm-cta.glass-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mm-gradient-primary);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
  pointer-events: none;
}

:where(.mm-cta.glass-card):hover::before,
:where(.mm-cta.glass-card):focus-visible::before {
  opacity: 0.14;
}

/* Keep button label/icons above the gradient layer. */
:where(.mm-cta, .site-shell-nav-cta, button.bg-primary, input[type="submit"].bg-primary) > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  :where(a, button, [role="button"], summary, .mm-cta, .site-shell-nav-cta,
    input[type="submit"], input[type="button"]) {
    transition: color 0.2s ease, background-color 0.2s ease,
      border-color 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
  }

  /* Icon links: nudge icon on hover. */
  :where(.mm-component-links-list a) .material-symbols-outlined {
    transition: transform 0.2s ease;
  }

  :where(.mm-component-links-list a):hover .material-symbols-outlined {
    transform: translateX(3px);
  }

  :where(.mm-cta-link) .material-symbols-outlined {
    transition: transform 0.2s ease;
  }

  :where(.mm-cta-link):hover .material-symbols-outlined,
  :where(.mm-cta-link):focus-visible .material-symbols-outlined {
    transform: translateX(4px);
  }

  /* Images: zoom inside clipped frames; glow when standalone. */
  :where(.mm-component img:not(.home-gallery-media img)) {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.4s ease, box-shadow 0.4s ease;
  }

  :where(.mm-component .overflow-hidden:not(.home-gallery-media):not(.mm-bento-infographic)):hover > img {
    transform: scale(1.06);
    filter: saturate(1.05);
  }

  :where(.mm-component img:not(.home-gallery-media img)):hover {
    filter: brightness(1.04) saturate(1.06);
    box-shadow: var(--mm-img-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.mm-cta.bg-primary, .mm-cta.bg-primary-container, .site-shell-nav-cta,
    button.bg-primary, input[type="submit"].bg-primary):hover {
    box-shadow: var(--mm-hover-glow);
  }

  :where(.mm-component img:not(.home-gallery-media img)):hover {
    filter: brightness(1.04);
  }
}