/* =============================================================================
   Imagine & Become — premium navigation hover effects (site-wide)  v1.8.3
   -----------------------------------------------------------------------------
   Loaded on every page. The site header is WHITE with black nav links, so the
   hover cues are tuned for a light background (an earlier version used light-
   gold text + a white highlight, which was invisible on white — hence it looked
   unchanged). Effect now: a soft GOLD glossy pill + a center-out gold underline
   + deep readable gold text + a subtle warm glow. Easing 0.28-0.3s. CSS-only:
   no markup, links, order or structure is changed. Literal gold values are used
   because the hero stylesheet's CSS variables aren't loaded on non-front pages.
   Selectors are doubled (`.hostinger-ai-site-navigation` + `.wp-block-
   navigation`) for resilience, and key properties use !important so the theme
   cannot override them.
   ============================================================================= */

.hostinger-ai-site-navigation a.wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content {
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  transition: color .28s ease, text-shadow .28s ease;
}

/* Soft glossy GOLD highlight pill behind the label (clearly visible on white). */
.hostinger-ai-site-navigation a.wp-block-navigation-item__content::before,
.wp-block-navigation a.wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  inset: -5px -12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(212, 175, 55, .30),
    0 6px 16px rgba(212, 175, 55, .20);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .28s ease, transform .28s ease;
  z-index: 0;
  pointer-events: none;
}

/* Center-out gold underline with a soft glow. */
.hostinger-ai-site-navigation a.wp-block-navigation-item__content::after,
.wp-block-navigation a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #e6b422 18%, #b8860b 50%, #e6b422 82%, transparent);
  box-shadow: 0 0 8px rgba(212, 175, 55, .7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  z-index: 1;
  pointer-events: none;
}

/* Keep the label above both pseudo layers. */
.hostinger-ai-site-navigation a.wp-block-navigation-item__content > *,
.wp-block-navigation a.wp-block-navigation-item__content > * {
  position: relative;
  z-index: 2;
}

/* Hover / keyboard-focus: deep readable gold text + subtle warm glow. */
.hostinger-ai-site-navigation a.wp-block-navigation-item__content:hover,
.hostinger-ai-site-navigation a.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
  color: #a2740a !important;
  text-shadow: 0 1px 10px rgba(212, 175, 55, .4);
}
.hostinger-ai-site-navigation a.wp-block-navigation-item__content:hover::before,
.hostinger-ai-site-navigation a.wp-block-navigation-item__content:focus-visible::before,
.wp-block-navigation a.wp-block-navigation-item__content:hover::before,
.wp-block-navigation a.wp-block-navigation-item__content:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}
.hostinger-ai-site-navigation a.wp-block-navigation-item__content:hover::after,
.hostinger-ai-site-navigation a.wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation a.wp-block-navigation-item__content:hover::after,
.wp-block-navigation a.wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

/* Current page keeps a subtle persistent gold underline. */
.hostinger-ai-site-navigation .current-menu-item > a.wp-block-navigation-item__content::after,
.wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content::after {
  transform: scaleX(1);
  opacity: .5;
}

/* Respect reduced-motion: keep the affordances, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .hostinger-ai-site-navigation a.wp-block-navigation-item__content,
  .hostinger-ai-site-navigation a.wp-block-navigation-item__content::before,
  .hostinger-ai-site-navigation a.wp-block-navigation-item__content::after,
  .wp-block-navigation a.wp-block-navigation-item__content,
  .wp-block-navigation a.wp-block-navigation-item__content::before,
  .wp-block-navigation a.wp-block-navigation-item__content::after {
    transition: none !important;
  }
}