/* Dedicated donation CTA stylesheet.
   Kept separate from styles.css so deployments cannot accidentally serve an older cached nav style. */

.nav-links .donation-cta {
  position: relative !important;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 154px;
  padding: 12px 18px !important;
  overflow: hidden;
  color: #1b0b00 !important;
  font-weight: 900 !important;
  letter-spacing: .075em;
  text-shadow: 0 1px 0 rgba(255,255,255,.72) !important;
  border: 1px solid #fff4ad !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 30%),
    linear-gradient(110deg, #8b4a00 0%, #ffad00 14%, #ffe45f 32%, #fff7ae 45%, #ffc400 60%, #ff8a00 80%, #7d3e00 100%) !important;
  background-size: 100% 100%, 260% 100% !important;
  box-shadow:
    0 0 8px rgba(255,228,90,.95),
    0 0 24px rgba(255,186,0,.7),
    0 0 54px rgba(255,132,0,.35),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -3px 8px rgba(101,42,0,.35) !important;
  transform: translateZ(0);
  animation: donationGoldPulse 2s ease-in-out infinite, donationGoldFlow 4s linear infinite !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.nav-links .donation-cta::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  width: 42% !important;
  height: 190% !important;
  left: -80% !important;
  top: -45% !important;
  opacity: 0;
  transform: rotate(18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), transparent) !important;
  filter: blur(.5px);
  pointer-events: none;
  animation: donationShine 2.5s ease-in-out infinite !important;
}

.nav-links .donation-cta::after {
  content: "£   $   €" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 2px !important;
  width: auto !important;
  height: auto !important;
  text-align: center;
  color: rgba(87,38,0,.16) !important;
  background: none !important;
  font: 800 8px/1 Arial,sans-serif !important;
  letter-spacing: .85em !important;
  white-space: nowrap;
  transform: translateX(.4em) !important;
  pointer-events: none;
}

.donation-label {
  position: relative;
  z-index: 2;
}

.money-coin {
  position: relative;
  z-index: 2;
  display: inline-grid !important;
  place-items: center;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 50% !important;
  color: #6b3200 !important;
  font: 1000 17px/1 Arial,sans-serif !important;
  background: radial-gradient(circle at 30% 24%, #fffde0 0 9%, #ffed75 22%, #ffc400 53%, #cd7000 78%, #713700 100%) !important;
  border: 2px solid rgba(99,46,0,.72) !important;
  box-shadow: inset 0 0 0 2px rgba(255,246,165,.6), 0 2px 7px rgba(76,29,0,.35) !important;
  animation: moneyCoinSpin 3s cubic-bezier(.45,.04,.25,1) infinite !important;
}

.nav-links .donation-cta:hover,
.nav-links .donation-cta:focus-visible {
  color: #160900 !important;
  transform: translateY(-4px) scale(1.065) !important;
  filter: brightness(1.08) saturate(1.12);
  border-color: #fffbd1 !important;
  box-shadow:
    0 0 12px rgba(255,247,175,1),
    0 0 34px rgba(255,200,0,.95),
    0 0 72px rgba(255,132,0,.55),
    inset 0 1px 0 #fff,
    inset 0 -3px 8px rgba(101,42,0,.3) !important;
}

.nav-links .donation-cta:hover .money-coin,
.nav-links .donation-cta:focus-visible .money-coin {
  animation-duration: .7s !important;
}

.nav-links .donation-cta:active {
  transform: translateY(0) scale(.985) !important;
}

@keyframes donationGoldPulse {
  0%,100% { filter: brightness(1) saturate(1.04); }
  50% { filter: brightness(1.16) saturate(1.2); }
}

@keyframes donationGoldFlow {
  from { background-position: 0 0, 0% 0; }
  to { background-position: 0 0, 260% 0; }
}

@keyframes donationShine {
  0%,25% { left:-80%; opacity:0; }
  36% { opacity:1; }
  58% { left:145%; opacity:.85; }
  68%,100% { left:145%; opacity:0; }
}

@keyframes moneyCoinSpin {
  0%,68% { transform: rotateY(0deg) translateY(0); }
  78% { transform: rotateY(180deg) translateY(-2px); }
  90%,100% { transform: rotateY(360deg) translateY(0); }
}

@media (max-width: 900px) {
  .nav-links .donation-cta {
    width: calc(100% - 24px) !important;
    margin: 9px 12px 4px !important;
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links .donation-cta,
  .nav-links .donation-cta::before,
  .money-coin { animation: none !important; }
}