/* ==========================================================================
   Gold button glow — every gold CTA, site-wide
   The rotating rim first built for the homepage "Configure Your Build"
   button (.btn-glow in home-2026.css), lifted out so one rule covers every
   gold button on every page, whichever stylesheet gave it its fill.

   Covered: .btn-gold, .btn-primary, and .gold-glow — a hook for gold
   buttons that carry neither class (inline-styled Subscribe buttons and post
   CTAs, the standalone audit pages' .cta-button).

   ::before repaints the button's own fill. It takes `background: inherit`
   rather than a fixed gradient because many pages restyle these buttons in
   their own <style> block or style attribute (flat gold, a lighter hover
   gold), and the copy has to follow whatever the button actually is.
   ::after is a conic ring spinning underneath it, so only a 2px rim of the
   ring shows round the edge, softened by a drop-shadow halo.

   isolation: isolate makes the button its own stacking context, so both
   negative-z layers stay inside it — above the page, below the label — even
   when :hover adds a transform. Only the gradient's angle animates (through
   a registered custom property); where @property is unsupported the ring
   holds still and still reads as a highlight.
   ========================================================================== */

@property --glow-angle {
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}

/* :where() keeps this at zero specificity so a button some other rule has
   already positioned (fixed bars, absolute overlays) stays where it was. */
:where(.btn-gold, .btn-primary, .gold-glow) { position: relative; isolation: isolate; }

:is(.btn-gold, .btn-primary, .gold-glow)::before,
:is(.btn-gold, .btn-primary, .gold-glow)::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
}
:is(.btn-gold, .btn-primary, .gold-glow)::before {
  inset: 0; z-index: -1;
  background: inherit;
}
:is(.btn-gold, .btn-primary, .gold-glow)::after {
  inset: -2px; z-index: -2;
  background: conic-gradient(from var(--glow-angle),
    transparent 0deg, transparent 200deg,
    #E6C766 290deg, #FFF4C2 330deg, #E6C766 350deg, transparent 360deg);
  filter: drop-shadow(0 0 6px #D4AF37) drop-shadow(0 0 14px rgba(212,175,55,0.35));
  animation: glow-spin 3s linear infinite;
}
@keyframes glow-spin { to { --glow-angle: 360deg; } }

/* One hover and focus treatment. Page-level styles disagreed: some gold
   buttons lifted, some only changed colour, and the inline-styled ones had no
   visible keyboard focus at all. The outline sits outside the rim. */
:is(.btn-gold, .btn-primary, .gold-glow):hover { transform: translateY(-2px); }
:is(.btn-gold, .btn-primary, .gold-glow):focus-visible {
  outline: 2px solid #FFF4C2; outline-offset: 4px;
}

/* Article styles colour every link gold (.article-content a, .post-body a
   and their :hover), which outranks .btn-gold and left gold-on-gold labels
   on blog-post CTAs. The `body` prefix lifts the label colour just above
   those rules, hover included. */
body :is(a.btn-gold, a.btn-primary, a.gold-glow):not(.btn-gold-outline),
body :is(a.btn-gold, a.btn-primary, a.gold-glow):not(.btn-gold-outline):hover { color: #0A0E14; }

/* Outlined buttons that borrow a gold class are not gold buttons: a fill
   copy and spinning ring would cut across their transparent centre. That is
   the cookie banner's Accept, and the blog posts' secondary CTA, which reuses
   .btn-gold for its sizing and goes transparent through a style attribute. */
.cookie-banner .btn-primary::before,
.cookie-banner .btn-primary::after,
.btn-gold-outline::before,
.btn-gold-outline::after { content: none; }
/* Its label is gold. Two posts' own .btn-gold rule made it dark, which on
   the dark CTA panel left it unreadable. */
body a.btn-gold-outline,
body a.btn-gold-outline:hover { color: #D4AF37; }

@media (prefers-reduced-motion: reduce) {
  :is(.btn-gold, .btn-primary, .gold-glow)::after { animation: none; }
  :is(.btn-gold, .btn-primary, .gold-glow):hover { transform: none; }
}