/* =========================================
   SECONDARY MENU – BASE FIXES
   ========================================= */

/* Remove phantom "blank tile" caused by pseudo-elements */
ul.orientationHorizontal.alignCenter::before,
ul.orientationHorizontal.alignCenter::after,
ul.orientationHorizontal.alignCenter > li::before,
ul.orientationHorizontal.alignCenter > li::after,
ul.orientationHorizontal.alignCenter > li > a::before,
ul.orientationHorizontal.alignCenter > li > a::after {
  content: none !important;
  display: none !important;
}

/* =========================================
   MOBILE LAYOUT (UNCHANGED)
   ========================================= */

@media (max-width: 768px) {
  ul.orientationHorizontal.alignCenter {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;

    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-items: center !important;
  }

  ul.orientationHorizontal.alignCenter > li {
    width: 100% !important;
    max-width: 100% !important;
  }

  ul.orientationHorizontal.alignCenter > li > a {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   DESKTOP INTERACTION (NO SIZE CHANGES)
   ========================================= */

@media (min-width: 769px) {
  ul.orientationHorizontal.alignCenter > li > a {
    transition:
      color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.15s ease;
  }
}

/* =========================================
   ACTIVE & HOVER / TAP COLORS (ALL DEVICES)
   ========================================= */

/* Active / current page (desktop + mobile) */
ul.orientationHorizontal.alignCenter a.cifia-active {
  color: #dc2626 !important;          /* lighter red */
  font-weight: 700 !important;
  border-color: #dc2626 !important;
}

/* Desktop hover (mouse / trackpad) */
@media (hover: hover) and (pointer: fine) {
  ul.orientationHorizontal.alignCenter > li > a:hover {
    color: #b91c1c !important;        /* darker red */
    border-color: #b91c1c !important;
  }

  ul.orientationHorizontal.alignCenter a.cifia-active:hover {
    color: #b91c1c !important;
    border-color: #b91c1c !important;
  }
}

/* Mobile tap / pressed state */
@media (hover: none) and (pointer: coarse) {
  ul.orientationHorizontal.alignCenter > li > a:active {
    color: #b91c1c !important;
    border-color: #b91c1c !important;
  }
}
/* CIFIA: PRIMARY menu - subtle transparent pulse for Annual Conference */
.WaGadgetMenuHorizontal a[href*="/Annual-Conference"] {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 700 !important;

  background-color: rgba(179, 0, 0, 0.08); /* very light red */
  color: #b30000 !important;

  animation: cifiaConferenceBoxPulse 6s ease-in-out infinite !important;
}

@keyframes cifiaConferenceBoxPulse {
  0% {
    background-color: rgba(179, 0, 0, 0.06);
    color: #b30000;
  }
  50% {
    background-color: rgba(179, 0, 0, 0.35); /* soft, not solid */
    color: #ffffff;
  }
  100% {
    background-color: rgba(179, 0, 0, 0.06);
    color: #b30000;
  }
}

/* Stop pulse on hover */
.WaGadgetMenuHorizontal a[href*="/Annual-Conference"]:hover {
  animation: none !important;
  background-color: rgba(179, 0, 0, 0.45) !important;
  color: #ffffff !important;
}