/* =========================================
   JDK GOLD ENHANCEMENT — Metallic gradients & shine
   Loaded after main.css to override selectively
   ========================================= */

/* ---- Extended Gold Variables ---- */
:root {
  --gold-dark:    #B8860B;
  --gold-mid:     #D4AF37;
  --gold-light:   #F6E27A;
  --gold-shine:   #FFF8DC;
  --gold-metallic: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-mid) 25%, var(--gold-light) 50%, var(--gold-mid) 75%, var(--gold-dark) 100%);
  --gold-text-grad: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold-dark) 100%);
  --gold-sweep: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  --gold-glow-soft:  0 0 20px rgba(212, 175, 55, 0.25), 0 0 40px rgba(212, 175, 55, 0.08);
  --gold-glow-strong: 0 0 30px rgba(212, 175, 55, 0.45), 0 0 60px rgba(212, 175, 55, 0.15);
}

/* =========================================
   1. BUTTONS — Metallic gradient + shine sweep
   ========================================= */

.btn--gold,
.jdk-cta-button {
  background: var(--gold-metallic);
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--gold-glow-soft);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.btn--gold::before,
.jdk-cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-sweep);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.btn--gold:hover::before,
.jdk-cta-button:hover::before {
  transform: translateX(100%);
}

.btn--gold:hover,
.jdk-cta-button:hover {
  box-shadow: var(--gold-glow-strong);
  transform: translateY(-2px);
}

/* Secondary / Outline buttons */
.btn--outline {
  border: 1px solid var(--gold-mid);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.4s ease;
}

.btn--outline:hover {
  border-color: var(--gold-light);
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.08), var(--gold-glow-soft);
}

.jdk-cta-button--secondary {
  border: 1px solid var(--gold-mid);
  transition: border-color 0.3s ease, box-shadow 0.4s ease;
}

.jdk-cta-button--secondary:hover {
  border-color: var(--gold-light);
  box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.08), var(--gold-glow-soft);
}

/* =========================================
   2. TEXT GRADIENTS — Only hero eyebrows and main title accents
   ========================================= */

.hero__eyebrow,
.section__eyebrow,
.jdk-pov-hero__eyebrow,
.jdk-podcast-hero__eyebrow,
.jdk-compare-hero__eyebrow,
.jdk-compare-section__eyebrow {
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

/* =========================================
   3. NUMBERS & STATISTICS — Flat gold with enhanced glow (no text gradient)
   ========================================= */

.problem-card__num,
.model-item__num,
.timeline__num,
.calc__result-num {
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4), 0 0 24px rgba(212, 175, 55, 0.15);
}

/* =========================================
   4. HERO TITLE — Enhanced gradient
   ========================================= */

.hero__title em {
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.25));
}

/* =========================================
   5. ACCENT BORDERS — Gradient where possible
   ========================================= */

.hcard,
.jdk-hub-content .jdk-quick-answer,
.jdk-hub-content .jdk-final-cta,
.jdk-cluster-archive__hub-link,
.jdk-compare-hcard {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--gold-mid), var(--gold-light)) 1;
}

.jdk-compare-decision__card--us,
.jdk-compare-choose__col--us {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--gold-dark), var(--gold-mid), var(--gold-light)) 1;
}

/* Numbered list markers — gradient discs */
.jdk-list-item::before,
.sec__num {
  background: var(--gold-metallic);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Timeline vertical line — gradient */
.jdk-pov-timeline__line {
  background: linear-gradient(180deg, var(--gold-dark) 0%, var(--gold-mid) 50%, var(--gold-light) 100%);
}

/* =========================================
   6. LINKS — Enhanced hover glow
   ========================================= */

.sec__body a:hover,
.jdk-hub-content a:hover,
.blog-card__title a:hover,
.blog-card__link:hover,
.rel-card__link:hover,
.rel-link-card:hover,
.jdk-spoke-card__title a:hover,
.jdk-spoke-card__link:hover,
.jdk-cluster-card h3 a:hover,
.footer-trust a:hover,
.footer-links a:hover,
.jdk-legal-content a:hover,
.jdk-episode-row__title a:hover,
.jdk-episode-row__link:hover,
.jdk-podcast-episodes__more a:hover,
.event-list__name:hover,
.event-list__link:hover,
.hub-links__card:hover .hub-links__arrow,
.jdk-compare-hub__card-link:hover {
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
}

/* =========================================
   7. TABLES & COMPARISON — Gradient headers
   ========================================= */

.jdk-compare-table thead th {
  background: linear-gradient(180deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.02) 100%);
}

.jdk-compare-table thead th:nth-child(3) {
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

/* =========================================
   8. EVENTS — Premium gradient accent
   ========================================= */

.event-list__row.is-premium::before {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold-dark) 100%);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.event-list__badge {
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04));
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}

/* =========================================
   9. RATING BLOCK — Metallic accent
   ========================================= */

.jdk-rating {
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--gold-light), var(--gold-mid)) 1;
  background: linear-gradient(90deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.02) 100%);
}

/* =========================================
   10. PAGINATION — Gradient active state
   ========================================= */

.jdk-archive-pagination span.current,
.jdk-insights-pagination span.current,
.page-numbers.current {
  background: var(--gold-metallic);
  box-shadow: var(--gold-glow-soft);
}

/* =========================================
   11. TEXT SELECTION — Richer gold
   ========================================= */

::selection {
  background: rgba(212, 175, 55, 0.28);
}