/* Ensure halo isn’t clipped */
.header-menu-extra { overflow: visible !important; }

/* Base pill */
.header-menu-extra .button.button-urgent{
  background:#D32F2F; color:#fff; border:0; position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; min-height:40px; border-radius:9999px;
  line-height:1; font-size:.875rem; font-weight:800; letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(211,47,47,.35);
  transition:background-color .2s, box-shadow .2s, transform .08s;

  /* loop forever */
  animation-name: urgent-ping, urgent-breathe;
  animation-duration: 3.2s, 4s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* Hover/focus */
.header-menu-extra .button.button-urgent:hover,
.header-menu-extra .button.button-urgent:focus{
  background:#B71C1C; box-shadow:0 12px 26px rgba(211,47,47,.45); transform:translateY(-1px);
}

/* Focus ring */
.header-menu-extra .button.button-urgent:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(211,47,47,.8), 0 12px 26px rgba(211,47,47,.45);
}

/* Icon & text */
.header-menu-extra a.button.button-urgent .icon,
.header-menu-extra a.button.button-urgent .icon svg{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px;         /* don’t let flexbox shrink it */
}

/* Animations */
@keyframes urgent-ping{
  0%{ box-shadow:0 0 0 0 rgba(211,47,47,.55), 0 8px 18px rgba(211,47,47,.35); }
  35%{ box-shadow:0 0 0 14px rgba(211,47,47,0), 0 8px 18px rgba(211,47,47,.35); }
  60%{ box-shadow:0 0 0 0 rgba(211,47,47,0), 0 8px 18px rgba(211,47,47,.35); }
  100%{ box-shadow:0 8px 18px rgba(211,47,47,.35); }
}
@keyframes urgent-breathe{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-1px) scale(1.015); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .header-menu-extra .button.button-urgent{ animation:none; transition:none; }
}

/* Remove the micro nudge now that the icon is larger */
.header-menu-extra a.button.button-urgent .icon{
  transform:none;
  line-height:0;
}

/* — Make the pill fit the larger icon — */
.header-menu-extra a.button.button-urgent{
  min-height:46px;       /* was 40px */
  padding:.5rem 1rem;    /* slightly tighter vertical padding */
  gap:.6rem;             /* a little more room between icon/text */
}