/*
 * Navigation, account access and section subnavigation components.
 */
.pd-site-navigation-block,
.pd-account-access-block {
  min-width: 0;
}

.pd-site-navigation {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
}

.pd-site-navigation__toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pd-nav-trigger-gap, 0.7rem) * var(--pd-nav-trigger-scale, 1));
  min-height: calc(var(--pd-nav-trigger-min-height, 2.75rem) * var(--pd-nav-trigger-scale, 1));
  padding: calc(var(--pd-nav-trigger-padding-y, 0.5rem) * var(--pd-nav-trigger-scale, 1)) calc(var(--pd-nav-trigger-padding-x, 0.85rem) * var(--pd-nav-trigger-scale, 1));
  border: 1px solid var(--pd-nav-trigger-border);
  border-radius: 999px;
  background: var(--pd-nav-trigger-background);
  color: var(--pd-nav-trigger-text);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pd-site-navigation__toggle:hover,
.pd-site-navigation__toggle:focus-visible {
  background: var(--pd-nav-trigger-hover-background);
  border-color: var(--pd-nav-trigger-hover-border);
  transform: translateY(-1px);
}

.pd-site-navigation__toggle-label {
  font-size: calc(var(--pd-nav-trigger-font-size, 0.92rem) * var(--pd-nav-trigger-scale, 1));
  line-height: 1;
}

.pd-site-navigation__toggle-icon {
  display: inline-grid;
  gap: 0.22rem;
}

.pd-site-navigation__toggle-icon span {
  display: block;
  inline-size: calc(var(--pd-nav-icon-width, 1rem) * var(--pd-nav-trigger-scale, 1));
  block-size: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.24s ease, opacity 0.2s ease;
}

.pd-site-navigation__panel {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  z-index: 25;
  width: min(var(--pd-nav-panel-width, 24rem), calc(100vw - 1.5rem));
  padding: 0.65rem;
  border: 1px solid var(--pd-nav-panel-border);
  border-radius: 18px;
  background: var(--pd-nav-panel-background);
  box-shadow: var(--pd-shadow-card);
  backdrop-filter: blur(18px);
  color: var(--pd-nav-panel-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.45rem);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.28s;
}

.pd-site-navigation[data-panel-align='end'] .pd-site-navigation__panel {
  left: auto;
  right: 0;
}

.pd-site-navigation.is-open .pd-site-navigation__panel,
.pd-site-navigation.is-closing .pd-site-navigation__panel {
  visibility: visible;
}

.pd-site-navigation.is-open .pd-site-navigation__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.pd-site-navigation__panel[hidden] {
  display: none;
}

.pd-site-navigation__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-site-navigation__list--level-0,
.pd-site-navigation__list--level-1 {
  display: grid;
  gap: 0.3rem;
}

.pd-site-navigation__item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(50ms + (var(--pd-nav-index, 0) * var(--pd-nav-stagger-step, 45ms)));
}

.pd-site-navigation:not(.is-open):not(.is-closing) .pd-site-navigation__item,
.pd-site-navigation.is-closing .pd-site-navigation__item {
  opacity: 0;
  transform: translateY(-0.45rem);
  transition-delay: 0s;
}

.pd-site-navigation__link {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--pd-nav-item-border);
  border-radius: 14px;
  background: var(--pd-nav-item-background);
  color: inherit;
  font-size: var(--pd-nav-item-font-size, 1rem);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.pd-site-navigation__link:hover,
.pd-site-navigation__link:focus-visible,
.pd-site-navigation__item.is-current > .pd-site-navigation__link {
  color: var(--pd-nav-item-hover-text);
  border-color: var(--pd-nav-item-hover-border);
  background: var(--pd-nav-item-hover-background);
  transform: translateX(2px);
}

.pd-site-navigation__item.has-children > .pd-site-navigation__link {
  margin-bottom: 0.1rem;
}

.pd-site-navigation__list--level-1 {
  padding-left: 0.6rem;
}

.pd-site-navigation.is-open .pd-site-navigation__toggle-icon span:nth-child(1) {
  transform: translateY(3.7px) rotate(45deg);
}

.pd-site-navigation.is-open .pd-site-navigation__toggle-icon span:nth-child(2) {
  opacity: 0;
}

.pd-site-navigation.is-open .pd-site-navigation__toggle-icon span:nth-child(3) {
  transform: translateY(-3.7px) rotate(-45deg);
}

.pd-account-access__login,
.pd-account-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pd-account-trigger-gap, 0.65rem) * var(--pd-account-trigger-scale, 1));
  min-height: calc(var(--pd-account-trigger-min-height, 2.75rem) * var(--pd-account-trigger-scale, 1));
  padding: calc(var(--pd-account-trigger-padding-y, 0.5rem) * var(--pd-account-trigger-scale, 1)) calc(var(--pd-account-trigger-padding-x, 0.85rem) * var(--pd-account-trigger-scale, 1));
  border: 1px solid var(--pd-account-trigger-border);
  border-radius: 999px;
  background: var(--pd-account-trigger-background);
  color: var(--pd-account-trigger-text);
  text-decoration: none;
  cursor: pointer;
  font-size: calc(var(--pd-account-trigger-font-size, 0.92rem) * var(--pd-account-trigger-scale, 1));
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pd-account-access__login:hover,
.pd-account-access__login:focus-visible,
.pd-account-menu__trigger:hover,
.pd-account-menu__trigger:focus-visible {
  background: var(--pd-account-trigger-hover-background);
  border-color: var(--pd-account-trigger-hover-border);
  transform: translateY(-1px);
}

.pd-account-menu {
  position: relative;
}

.pd-account-menu__avatar,
.pd-account-menu__avatar-image {
  display: block;
  inline-size: calc(var(--pd-account-avatar-size, 2.25rem) * var(--pd-account-trigger-scale, 1));
  block-size: calc(var(--pd-account-avatar-size, 2.25rem) * var(--pd-account-trigger-scale, 1));
  border-radius: 50%;
}

.pd-account-menu__avatar {
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pd-color-white) 24%, transparent);
}

.pd-account-menu__caret {
  inline-size: calc(var(--pd-account-caret-size, 0.65rem) * var(--pd-account-trigger-scale, 1));
  block-size: calc(var(--pd-account-caret-size, 0.65rem) * var(--pd-account-trigger-scale, 1));
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s ease;
}

.pd-account-menu.is-open .pd-account-menu__caret {
  transform: rotate(-135deg) translateY(-1px);
}

.pd-account-menu__panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: 20;
  width: min(var(--pd-account-panel-width, 18rem), calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid var(--pd-account-panel-border);
  border-radius: 18px;
  background: var(--pd-account-panel-background);
  box-shadow: var(--pd-shadow-card);
  color: var(--pd-account-panel-text);
  font-size: var(--pd-account-panel-font-size, 1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.35rem) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.24s;
}

.pd-account-menu[data-panel-align='start'] .pd-account-menu__panel {
  left: 0;
  right: auto;
  transform-origin: top left;
}

.pd-account-menu.is-open .pd-account-menu__panel,
.pd-account-menu.is-closing .pd-account-menu__panel {
  visibility: visible;
}

.pd-account-menu.is-open .pd-account-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.pd-account-menu__panel[hidden] {
  display: none;
}

.pd-account-menu__identity {
  display: grid;
  gap: 0.15rem;
  margin: 0 0 0.35rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pd-color-border) 60%, transparent);
}

.pd-account-menu__identity span {
  color: var(--pd-color-muted);
  font-size: calc(var(--pd-account-panel-font-size, 1rem) * 0.92);
  overflow-wrap: anywhere;
}

.pd-account-menu__link {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.pd-account-menu__link:hover,
.pd-account-menu__link:focus-visible {
  background: var(--pd-account-panel-hover-background);
}

.pd-music-subnav {
  width: 100%;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pd-subnav-item-border) 82%, transparent);
}

.pd-music-subnav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-music-subnav__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.55rem 0.8rem;
  width: 100%;
}

.pd-music-subnav__group {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.45rem 0.55rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--pd-subnav-item-border) 44%, transparent);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--pd-color-white) 4%, transparent);
}

.pd-music-subnav__group-label {
  color: color-mix(in srgb, var(--pd-subnav-text) 72%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pd-music-subnav--technology .pd-music-subnav__groups {
  grid-template-columns: minmax(min(100%, 18rem), 1.15fr) repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

.pd-music-subnav--technology .pd-music-subnav__group--primary {
  border-color: color-mix(in srgb, var(--pd-subnav-item-current-border) 36%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pd-subnav-item-current-border) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--pd-color-white) 7%, transparent);
}

.pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__group-label {
  color: var(--pd-subnav-item-current-text);
}

.pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__list--group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.32rem;
}

.pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__link {
  width: 100%;
  justify-content: flex-start;
  border-color: color-mix(in srgb, var(--pd-subnav-item-border) 18%, transparent);
  border-radius: 0.82rem;
  background: color-mix(in srgb, var(--pd-subnav-item-current-background) 42%, transparent);
  text-align: left;
}

.pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__item.is-current .pd-music-subnav__link,
.pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__link:hover,
.pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__link:focus-visible {
  border-color: color-mix(in srgb, var(--pd-subnav-item-current-border) 42%, transparent);
  background: var(--pd-subnav-item-current-background);
}

.pd-technology-directory {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--pd-subnav-item-border) 46%, transparent);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pd-subnav-item-current-border) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--pd-color-white) 6%, transparent);
}

.pd-technology-directory__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--pd-subnav-text) 72%, transparent);
  font-size: 0.78rem;
  line-height: 1.2;
  list-style: none;
}

.pd-technology-directory__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.pd-technology-directory__crumb:not(:last-child)::after {
  content: "/";
  color: color-mix(in srgb, var(--pd-subnav-text) 38%, transparent);
}

.pd-technology-directory__crumb a,
.pd-technology-directory__crumb span {
  color: inherit;
  text-decoration: none;
}

.pd-technology-directory__crumb a:hover,
.pd-technology-directory__crumb a:focus-visible {
  color: var(--pd-subnav-item-current-text);
}

.pd-technology-directory__crumb.is-current span {
  color: var(--pd-subnav-item-current-text);
  font-weight: 700;
}

.pd-technology-directory__section {
  display: grid;
  gap: 0.4rem;
}

.pd-technology-directory__label {
  color: color-mix(in srgb, var(--pd-subnav-text) 76%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pd-technology-directory__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-technology-directory__list .pd-music-subnav__link {
  min-height: calc(var(--pd-subnav-link-min-height, 2.1rem) * 0.86 * var(--pd-subnav-link-scale, 1));
  padding:
    calc(var(--pd-subnav-link-padding-top, 0.35rem) * 0.72 * var(--pd-subnav-link-scale, 1))
    calc(var(--pd-subnav-link-padding-x, 0.7rem) * 0.82 * var(--pd-subnav-link-scale, 1))
    calc(var(--pd-subnav-link-padding-bottom, 0.55rem) * 0.72 * var(--pd-subnav-link-scale, 1));
  border-color: color-mix(in srgb, var(--pd-subnav-item-border) 18%, transparent);
  border-radius: 0.72rem;
  background: color-mix(in srgb, var(--pd-color-white) 5%, transparent);
  font-size: calc(var(--pd-subnav-link-font-size, 1rem) * 0.9 * var(--pd-subnav-link-scale, 1));
}

.pd-technology-directory__list .pd-music-subnav__item.is-current .pd-music-subnav__link {
  border-color: color-mix(in srgb, var(--pd-subnav-item-current-border) 46%, transparent);
  background: var(--pd-subnav-item-current-background);
}

.pd-music-subnav__list--group {
  justify-content: flex-start;
  gap: 0.22rem;
}

.pd-music-subnav__list--group .pd-music-subnav__link {
  min-height: calc(var(--pd-subnav-link-min-height, 2.1rem) * 0.84 * var(--pd-subnav-link-scale, 1));
  padding:
    calc(var(--pd-subnav-link-padding-top, 0.35rem) * 0.72 * var(--pd-subnav-link-scale, 1))
    calc(var(--pd-subnav-link-padding-x, 0.7rem) * 0.82 * var(--pd-subnav-link-scale, 1))
    calc(var(--pd-subnav-link-padding-bottom, 0.55rem) * 0.72 * var(--pd-subnav-link-scale, 1));
  border-radius: 0.72rem;
  font-size: calc(var(--pd-subnav-link-font-size, 1rem) * 0.9 * var(--pd-subnav-link-scale, 1));
}

.pd-music-subnav__list--group .pd-music-subnav__link::after {
  bottom: 0.18rem;
}

.pd-music-subnav[data-align='start'] .pd-music-subnav__list {
  justify-content: flex-start;
}

.pd-music-subnav[data-align='end'] .pd-music-subnav__list {
  justify-content: flex-end;
}

.pd-music-subnav__item {
  min-width: 0;
}

.pd-music-subnav__link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--pd-subnav-link-min-height, 2.1rem) * var(--pd-subnav-link-scale, 1));
  padding:
    calc(var(--pd-subnav-link-padding-top, 0.35rem) * var(--pd-subnav-link-scale, 1))
    calc(var(--pd-subnav-link-padding-x, 0.7rem) * var(--pd-subnav-link-scale, 1))
    calc(var(--pd-subnav-link-padding-bottom, 0.55rem) * var(--pd-subnav-link-scale, 1));
  border: 1px solid transparent;
  border-radius: var(--pd-subnav-link-radius, 0.8rem) var(--pd-subnav-link-radius, 0.8rem) 0 0;
  background: transparent;
  color: var(--pd-subnav-text);
  font-size: calc(var(--pd-subnav-link-font-size, 1rem) * var(--pd-subnav-link-scale, 1));
  text-align: center;
  text-decoration: none;
  opacity: 0.82;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.pd-music-subnav__link::after {
  content: "";
  position: absolute;
  left: calc(var(--pd-subnav-indicator-inset, 0.7rem) * var(--pd-subnav-link-scale, 1));
  right: calc(var(--pd-subnav-indicator-inset, 0.7rem) * var(--pd-subnav-link-scale, 1));
  bottom: 0.08rem;
  height: var(--pd-subnav-indicator-thickness, 2px);
  border-radius: 999px;
  background: transparent;
  transform: scaleX(0.45);
  transform-origin: center;
  transition: background-color 0.2s ease, transform 0.24s ease;
}

.pd-music-subnav__link:hover,
.pd-music-subnav__link:focus-visible {
  border-color: color-mix(in srgb, var(--pd-subnav-item-hover-border) 22%, transparent);
  background: var(--pd-subnav-item-hover-background);
  opacity: 1;
}

.pd-music-subnav__item.is-current .pd-music-subnav__link {
  border-color: color-mix(in srgb, var(--pd-subnav-item-current-border) 28%, transparent);
  background: var(--pd-subnav-item-current-background);
  color: var(--pd-subnav-item-current-text);
  opacity: 1;
}

.pd-music-subnav__link:hover::after,
.pd-music-subnav__link:focus-visible::after,
.pd-music-subnav__item.is-current .pd-music-subnav__link::after {
  background: var(--pd-subnav-item-current-border);
  transform: scaleX(1);
}

@media (max-width: 781px) {
  .pd-music-subnav--grouped {
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
  }

  .pd-music-subnav--grouped .pd-music-subnav__groups {
    display: flex;
    align-items: stretch;
    min-width: max-content;
    gap: 0.55rem;
  }

  .pd-music-subnav--grouped .pd-music-subnav__group {
    width: min(72vw, 20rem);
    flex: 0 0 auto;
  }

  .pd-music-subnav--technology .pd-music-subnav__group--primary {
    width: min(84vw, 24rem);
  }

  .pd-music-subnav--technology .pd-music-subnav__group--primary .pd-music-subnav__list--group {
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
  }

  .pd-technology-directory {
    padding: 0.55rem;
  }

  .pd-technology-directory__list {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
  }

  .pd-technology-directory__list .pd-music-subnav__item {
    flex: 0 0 auto;
  }

  .pd-music-subnav__list {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
  }

  .pd-music-subnav__item {
    flex: 0 0 auto;
  }

  .pd-music-subnav[data-mobile-mode='wrap'] .pd-music-subnav__list {
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .pd-music-subnav[data-mobile-mode='wrap'] .pd-music-subnav__item {
    flex: 0 1 auto;
  }

  .pd-music-subnav--grouped .pd-music-subnav__list {
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 0;
  }

  .pd-music-subnav--grouped .pd-music-subnav__item {
    flex: 0 1 auto;
  }

  .pd-site-navigation__toggle,
  .pd-account-access__login,
  .pd-account-menu__trigger {
    min-height: 2.5rem;
    padding: 0.45rem 0.72rem;
  }

  .pd-site-navigation__toggle-label {
    font-size: 0.88rem;
  }

  .pd-site-navigation__panel {
    width: min(22rem, calc(100vw - 1.25rem));
  }

  .pd-site-navigation[data-hide-label-mobile='true'] .pd-site-navigation__toggle-label {
    display: none;
  }
}

@media (max-width: 560px) {
  .pd-site-navigation__toggle,
  .pd-account-access__login,
  .pd-account-menu__trigger {
    padding-inline: 0.62rem;
  }

  .pd-site-navigation__toggle-label {
    font-size: 0.84rem;
  }

  .pd-site-navigation__toggle-icon span {
    inline-size: 0.92rem;
  }
}