/* DJO_PodcastMenu — Base Structural Styles
 *
 * All visual values use CSS custom properties.
 * Override via skin CSS (skins/podcastmenu.djo.css) for branding.
 */

.djo-podcast-menu {
  --pm-gap: 35px;
  --pm-icon-size: 48px;
  --pm-icon-radius: 12px;
  --pm-icon-font-size: 22px;
  --pm-icon-bg: rgb(248, 249, 252);
  --pm-icon-border: rgb(232, 236, 242);
  --pm-icon-hover-bg: rgb(255, 255, 255);
  --pm-icon-hover-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 12px 40px rgba(74, 28, 107, 0.08);
  --pm-text-color: #64748b;
  --pm-name-font-size: 10px;
  --pm-name-weight: 600;
  --pm-name-spacing: 0.5px;
  --pm-link-gap: 6px;
  --pm-hover-lift: -3px;
  --pm-transition: all 0.3s ease;

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

  display: flex;
  align-items: center;
  gap: var(--pm-gap);
  flex-wrap: wrap;
}


/* Link */
.djo-podcast-menu__link,
.djo-podcast-menu__link:visited {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pm-link-gap);
  color: var(--pm-text-color);
  text-decoration: none;
  transition: var(--pm-transition);
}

.djo-podcast-menu__link:hover {
  transform: translateY(var(--pm-hover-lift));
}


/* Icon */
.djo-podcast-menu__icon {
  width: var(--pm-icon-size);
  height: var(--pm-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pm-icon-bg);
  border: 1px solid var(--pm-icon-border);
  border-radius: var(--pm-icon-radius);
  font-size: var(--pm-icon-font-size);
  transition: var(--pm-transition);
}

.djo-podcast-menu__link:hover .djo-podcast-menu__icon {
  background: var(--pm-icon-hover-bg);
  box-shadow: var(--pm-icon-hover-shadow);
  border-color: transparent;
}


/* Name */
.djo-podcast-menu__name {
  font-size: var(--pm-name-font-size);
  font-weight: var(--pm-name-weight);
  text-transform: uppercase;
  letter-spacing: var(--pm-name-spacing);
}


/* Platform Hover Colors */
.djo-podcast-menu__link--spotify:hover {
  color: var(--pm-color-spotify);
}

.djo-podcast-menu__link--apple:hover {
  color: var(--pm-color-apple);
}

.djo-podcast-menu__link--audible:hover {
  color: var(--pm-color-audible);
}

.djo-podcast-menu__link--youtube:hover {
  color: var(--pm-color-youtube);
}

.djo-podcast-menu__link--amazonmusic:hover {
  color: var(--pm-color-amazonmusic);
}


/* Responsive: Small Mobile */
@media (max-width: 480px) {
  .djo-podcast-menu {
    --pm-gap: 17px;
    --pm-icon-size: 42px;
    --pm-icon-font-size: 18px;
  }
}