/**
 * Subtle Animations
 * Hotel UI Color Governance
 *
 * Hospitality-Grade subtle animations for links and menu
 * Principles:
 * - Smooth transitions (0.2s - 0.3s)
 * - Light movements (translateY -2px maximum)
 * - Use Brand Colors in hover states
 * - Subtle underline effects for links
 */

/* ========================================
   MENU LINKS - SMOOTH TRANSITIONS
======================================== */

.bc-menu li > a {
  transition: color 0.3s ease, transform 0.2s ease;
}

.bc-menu li > a:hover {
  color: var(--brand-blue) !important;
  transform: translateY(-2px);
}

.bc-menu li.active > a {
  color: var(--brand-blue) !important;
}

/* ========================================
   NAVIGATION MENU ITEMS
======================================== */

.menu-item > a {
  transition: all 0.25s ease;
  position: relative;
}

.menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-gold);
  transition: width 0.3s ease;
}

.menu-item > a:hover::after {
  width: 100%;
}

.menu-item.active > a {
  color: var(--brand-blue) !important;
}

.menu-item.active > a::after {
  width: 100%;
}

/* ========================================
   GENERAL LINKS
======================================== */

a {
  transition: color 0.25s ease;
}

a:hover {
  color: var(--brand-blue) !important;
}

/* ========================================
   DROPDOWN MENU SMOOTH FADE
======================================== */

.menu-dropdown {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-dropdown li > a {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-dropdown li > a:hover {
  background-color: rgba(var(--brand-blue-rgb), 0.1) !important;
  color: var(--brand-blue) !important;
}

/* ========================================
   TOPBAR LINKS
======================================== */

.topbar-items a {
  transition: color 0.25s ease;
}

.topbar-items a:hover {
  color: var(--brand-gold) !important;
}

/* ========================================
   MOBILE MENU BUTTON
======================================== */

.bc-more-menu {
  transition: all 0.3s ease;
}

.bc-more-menu:hover {
  background-color: var(--brand-blue) !important;
  color: var(--white) !important;
}

.bc-more-menu.active {
  background-color: var(--brand-blue) !important;
  color: var(--white) !important;
}