/* DJO_PodcastMenu — DJO Brand Skin
 *
 * Overrides base CSS variables with DJO brand values.
 * Uses site-level :root variables where available.
 *
 * Load AFTER DJO_PodcastMenu.css (structure).
 *
 * Themes:
 *   Default (no data-theme)       → Modern Blue
 *   data-theme="soft-light"       → Soft Light variant
 *   data-theme="glass"            → Glassmorphism (for dark/image backgrounds)
 */


/* DJO Theme — Modern Blue (Default) */
.djo.djo-podcast-menu {
  --pm-icon-bg: rgb(var(--rgb-n1, 248, 249, 252));
  --pm-icon-border: rgb(var(--rgb-n2, 232, 236, 242));
  --pm-icon-hover-bg: rgb(var(--rgb-light, 255, 255, 255));
  --pm-icon-hover-shadow: var(--boxshadow, 0 4px 6px rgba(0, 0, 0, 0.02), 0 12px 40px rgba(74, 28, 107, 0.08));
  --pm-text-color: var(--text-muted, #64748b);

  --pm-color-spotify: rgb(var(--rgb-platform-spotify, 29, 185, 84));
  --pm-color-apple: rgb(var(--rgb-platform-apple, 155, 89, 182));
  --pm-color-audible: rgb(var(--rgb-platform-audible, 247, 151, 30));
  --pm-color-youtube: rgb(var(--rgb-platform-youtube, 255, 0, 0));
  --pm-color-amazonmusic: rgb(0, 168, 225);
}

.djo.djo-podcast-menu .djo-podcast-menu__name {
  font-family: var(--font-2, 'Source Sans 3', system-ui, sans-serif);
}


/* –––––––––––––––––––––––––––––––––––––––––––––– */


/* DJO Theme — Soft Light Variant */
.djo.djo-podcast-menu[data-theme="soft-light"] {
  --pm-icon-bg: #f0f2f7;
  --pm-icon-border: #e4e7ef;
  --pm-icon-hover-bg: #ffffff;
  --pm-icon-hover-shadow: 0 2px 8px rgba(40, 48, 68, 0.1);
  --pm-text-color: #8e95a5;
  --pm-icon-radius: 14px;

  --pm-color-spotify: #3ba55d;
  --pm-color-apple: #8b6aae;
  --pm-color-audible: #d4943a;
  --pm-color-youtube: #cc4444;
  --pm-color-amazonmusic: #3a9ec7;
}


/* –––––––––––––––––––––––––––––––––––––––––––––– */


/* DJO Theme — Glass Variant */
.djo.djo-podcast-menu[data-theme="glass"] {
  --pm-text-color: rgba(255, 255, 255, 0.8);
  --pm-icon-size: 52px;
  --pm-icon-radius: 14px;
  --pm-icon-bg: rgba(255, 255, 255, 0.1);
  --pm-icon-border: rgba(255, 255, 255, 0.18);
  --pm-icon-hover-bg: rgba(255, 255, 255, 0.18);
  --pm-icon-hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.djo.djo-podcast-menu[data-theme="glass"] .djo-podcast-menu__icon {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.djo.djo-podcast-menu[data-theme="glass"] .djo-podcast-menu__link:hover .djo-podcast-menu__icon {
  border-color: rgba(255, 255, 255, 0.3);
}

.djo.djo-podcast-menu[data-theme="glass"] .djo-podcast-menu__link:hover {
  color: rgba(255, 255, 255, 1);
}