/* ---- RE Data Intelligence: the first thing in the nav, and it moves ----

   Literal hex on purpose, NOT var(--accent-2). index.html and a dozen other
   pages carry their own inline CSS and never load _shared.css, so the custom
   properties are undefined there and the colour fell back to BLACK on the navy
   bar — invisible until you hovered. Never reference a shared variable from a
   file that also gets included on pages which don't define it.

   The bar is navy (#262d33), so the blink runs WHITE -> GOLD. Both stay legible
   against navy, so the link never vanishes mid-cycle; a dark half-cycle would
   read as a broken link rather than "look at me". Emphasis is motion, size and
   weight — never colour alone. Honours prefers-reduced-motion. */

.nav-links li.nav-di {
  order: -1;                 /* always first, whatever order the markup is in */
  margin-right: 96px;        /* ~1 inch of clear air before the ordinary links */
  margin-left: -10px;        /* nudge it further out toward the logo */
  display: flex;
  align-items: center;
}

.nav-links a.di-blink {
  font-size: 0.92rem !important;      /* the rest of the nav sits at 0.72rem */
  font-weight: 700 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase;
  color: #ffffff !important;
  white-space: nowrap;
  padding: 7px 14px;
  border: 1px solid rgba(201, 165, 103, .55);
  border-radius: 3px;
  animation: di-pulse 2.4s ease-in-out infinite;
}

/* the little star, spinning so the eye catches it in peripheral vision */
.nav-links a.di-blink::before {
  content: "\2726";
  margin-right: 8px;
  font-size: .9em;
  display: inline-block;
  animation: di-spark 2.4s ease-in-out infinite;
}

/* kill the shared underline-on-hover; this link has its own treatment */
.nav-links a.di-blink::after { display: none !important; }

.nav-links a.di-blink:hover,
.nav-links a.di-blink.active {
  animation: none;
  color: #262d33 !important;
  background: #e6c896;
  border-color: #e6c896;
}

@keyframes di-pulse {
  0%,  100% { color: #ffffff; border-color: rgba(201,165,103,.55);
              box-shadow: 0 0 0 rgba(230,200,150,0); }
  50%       { color: #e6c896; border-color: #e6c896;
              box-shadow: 0 0 18px rgba(230,200,150,.55); }
}

@keyframes di-spark {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.45) rotate(90deg); }
}

/* Phones: the nav collapses to a stacked drawer, so the big right-hand gap
   would just leave a hole. Keep the size and the badge, drop the spacing. */
@media (max-width: 768px) {
  .nav-links li.nav-di { margin-right: 0; margin-left: 0; }
  .nav-links a.di-blink { display: inline-block; margin: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a.di-blink,
  .nav-links a.di-blink::before { animation: none; }
  .nav-links a.di-blink { color: #e6c896 !important; border-color: #e6c896; }
}