/* Alpha64: full distressed JOIN wordmark + slightly larger desktop brand logo;
 * retains Alpha63 premium neon CTA, illustrated account badges,
 * plus alpha62 duplicate cleanup/profile identity compatibility.
 */
.jam45-join-menu {
  position:relative;
  margin:0;
  padding:0;
}
.jam45-join-menu > summary {
  list-style:none;
}
.jam45-join-menu > summary::-webkit-details-marker {
  display:none;
}
.jam45-join-trigger {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-width:112px;
  cursor:pointer;
  user-select:none;
  transform-origin:center;
  border-color:rgba(116,202,255,.72)!important;
  background:linear-gradient(180deg,#11141c 0%,#07090e 55%,#030407 100%)!important;
  box-shadow:
    0 0 0 1px rgba(97,201,255,.16),
    0 8px 24px rgba(0,0,0,.42),
    0 0 18px rgba(48,158,255,.42),
    0 0 34px rgba(140,76,255,.3)!important;
  animation:jam45JoinBreathe 3.8s ease-in-out infinite!important;
}
.jam45-join-trigger::before {
  content:"";
  position:absolute;
  z-index:0;
  top:-65%;
  bottom:-65%;
  left:-42%;
  width:28%;
  pointer-events:none;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.9),rgba(255,255,255,.08),transparent);
  filter:blur(2px);
  opacity:0;
  animation:jam45JoinFlash 5.4s ease-in-out infinite;
}
.jam45-join-trigger > span,
.jam45-join-trigger > svg {
  position:relative;
  z-index:1;
}
.jam45-join-trigger > .jam45-join-word {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:30px;
  line-height:1;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.28)) drop-shadow(0 0 9px rgba(105,210,255,.22));
}
.jam45-join-trigger > .jam45-join-word img {
  width:72px;
  height:auto;
  max-width:none;
  display:block;
}
.jam45-join-trigger > svg {
  width:13px;
  height:13px;
  margin-left:.42rem;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
.jam45-join-menu[open] .jam45-join-trigger > svg {
  transform:rotate(180deg);
}
.jam45-join-trigger:hover,
.jam45-join-trigger:focus-visible {
  border-color:rgba(190,232,255,.95)!important;
  box-shadow:
    0 0 0 1px rgba(169,225,255,.28),
    0 12px 30px rgba(0,0,0,.46),
    0 0 28px rgba(52,164,255,.62),
    0 0 48px rgba(151,78,255,.46)!important;
}
.jam45-join-trigger:focus-visible {
  outline:2px solid #bfeaff;
  outline-offset:3px;
}
.jam45-join-dropdown {
  position:absolute;
  z-index:100002;
  top:calc(100% + .72rem);
  right:0;
  width:min(390px,calc(100vw - 28px));
  padding:.58rem;
  display:grid;
  gap:.38rem;
  border:1px solid rgba(116,190,255,.46);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(8,12,22,.99),rgba(5,8,15,.995));
  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    0 0 0 1px rgba(116,102,255,.10),
    0 0 25px rgba(50,150,255,.18),
    0 0 42px rgba(145,76,255,.14);
  backdrop-filter:blur(20px) saturate(135%);
}
.jam45-join-choice {
  min-width:0;
  padding:.72rem .82rem;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  grid-template-areas:"badge title arrow" "badge copy arrow";
  align-items:center;
  gap:.12rem .78rem;
  border:1px solid transparent;
  border-radius:14px;
  color:#fff!important;
  background:rgba(255,255,255,.035);
  text-decoration:none!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.jam45-join-choice:hover,
.jam45-join-choice:focus-visible {
  transform:translateY(-1px);
  border-color:rgba(101,190,255,.3);
  background:linear-gradient(135deg,rgba(39,136,255,.13),rgba(138,99,255,.09));
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  outline:none;
}
.jam45-join-choice-badge {
  grid-area:badge;
  width:58px;
  height:58px;
  display:block;
  overflow:hidden;
  border:1px solid rgba(137,214,255,.55);
  border-radius:50%;
  background:#070b12;
  box-shadow:
    0 0 0 2px rgba(52,136,255,.08),
    0 0 13px rgba(52,159,255,.22),
    0 0 18px rgba(153,75,255,.12);
}
.jam45-join-choice-badge img {
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
.jam45-join-choice:hover .jam45-join-choice-badge,
.jam45-join-choice:focus-visible .jam45-join-choice-badge {
  border-color:rgba(191,235,255,.86);
  box-shadow:0 0 0 2px rgba(63,164,255,.12),0 0 18px rgba(55,170,255,.36),0 0 25px rgba(157,83,255,.2);
}
.jam45-join-choice strong {
  grid-area:title;
  font-size:1.02rem;
  font-weight:900;
  line-height:1.2;
}
.jam45-join-choice small {
  grid-area:copy;
  color:#aebbd0;
  font-size:.88rem;
  font-weight:650;
  line-height:1.35;
}
.jam45-join-choice .jam45-join-choice-arrow {
  grid-area:arrow;
  color:#7ddcff;
  font-size:1.08rem;
  font-weight:900;
}
.jam45-join-signin {
  margin:.12rem .2rem 0;
  padding:.65rem .5rem .2rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:#aebbd0;
  font-size:.82rem;
  line-height:1.35;
  text-align:center;
}
.jam45-join-signin a {
  color:#fff!important;
  font-weight:900;
  text-decoration:none!important;
}
.jam45-join-signin a:hover,
.jam45-join-signin a:focus-visible {
  color:#7ddcff!important;
}
@keyframes jam45JoinBreathe {
  0%,100% {
    transform:scale(1) rotate(0deg);
    box-shadow:0 0 0 1px rgba(97,201,255,.16),0 8px 24px rgba(0,0,0,.42),0 0 18px rgba(48,158,255,.4),0 0 32px rgba(140,76,255,.28);
  }
  45% {
    transform:scale(1.055) rotate(-1.15deg);
    box-shadow:0 0 0 1px rgba(142,222,255,.26),0 10px 30px rgba(0,0,0,.45),0 0 32px rgba(54,170,255,.68),0 0 52px rgba(153,78,255,.5);
  }
  58% { transform:scale(1.04) rotate(.7deg); }
}
@keyframes jam45JoinFlash {
  0%,60%,100% { left:-42%; opacity:0; }
  66% { opacity:.12; }
  74% { left:118%; opacity:.92; }
  78% { left:118%; opacity:0; }
}

/* Tablet keeps the one JOIN action visible beside the icon actions. */
@media (max-width:1180px) {
  .jam45-join-trigger { min-height:40px; padding:.52rem .78rem; }
  .jam45-join-dropdown { right:0; }
}

/* On phones the normal account-action row is otherwise hidden. Restore only
 * the consolidated JOIN menu for logged-out visitors; Sign In already has its
 * dedicated compact mobile button. */
@media (max-width:760px) {
  body:not(.logged-in) .jam45-account-actions {
    display:flex!important;
  }
  body:not(.logged-in) .jam45-account-actions > .jam45-header-button,
  body:not(.logged-in) .jam45-account-actions > a {
    display:none!important;
  }
  body:not(.logged-in) .jam45-account-actions > .jam45-join-menu {
    display:block!important;
  }
  .jam45-join-trigger {
    min-width:64px;
    min-height:38px;
    padding:.48rem .66rem!important;
    font-size:.72rem!important;
  }
  .jam45-join-trigger > .jam45-join-word { width:48px; height:29px; }
  .jam45-join-trigger > .jam45-join-word img { width:48px; }
  .jam45-join-trigger > svg { width:11px; height:11px; margin-left:.3rem; }
  .jam45-join-dropdown {
    position:fixed;
    top:calc(var(--jam45-header-height) + 8px);
    right:10px;
    width:min(390px,calc(100vw - 20px));
  }
  .jam45-join-choice {
    grid-template-columns:54px minmax(0,1fr) auto;
    padding:.65rem .72rem;
  }
  .jam45-join-choice-badge { width:50px; height:50px; }
}

@media (max-width:440px) {
  /* JOIN carries an "Already a member? Sign In" link in its panel, so very
   * narrow phones can devote the scarce header space to the main CTA. */
  body:not(.logged-in) .jam45-mobile-account-link {
    display:none!important;
  }
  .jam45-join-trigger {
    min-width:60px;
    padding:.46rem .58rem!important;
    font-size:.69rem!important;
  }
  .jam45-join-trigger > .jam45-join-word { width:44px; height:27px; }
  .jam45-join-trigger > .jam45-join-word img { width:44px; }
}

@media (prefers-reduced-motion:reduce) {
  .jam45-join-trigger,
  .jam45-join-trigger::before {
    animation:none!important;
  }
  .jam45-join-trigger {
    transform:none!important;
    box-shadow:0 9px 24px rgba(0,0,0,.42),0 0 24px rgba(52,164,255,.44),0 0 38px rgba(151,78,255,.28)!important;
  }
  .jam45-join-choice,
  .jam45-join-trigger > svg {
    transition:none!important;
  }
}

.jam45-join-trigger::after{display:none!important}

/* Alpha62 readability pass: roughly +2 CSS pixels on the desktop header text
 * while retaining the theme's existing mobile breakpoints. */
@media (min-width:1181px) {
  .jam45-primary-nav > .jam45-menu > li > a { font-size:1.02rem; }
  .jam45-header-actions .jam45-header-button:not(.jam45-join-trigger) { font-size:.90rem; }
}

/* Signed-in artist/label identity: use the saved Jam45 profile photo inside
 * the existing dashboard account action rather than creating another header
 * destination. */
.jam45-header-button.is-account.has-profile-photo {
  gap:.5rem;
  padding-left:.34rem;
}
.jam45-header-account-avatar {
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.68);
  border-radius:50%;
  background:#090d16;
  box-shadow:0 0 0 2px rgba(77,178,255,.12),0 0 12px rgba(77,178,255,.22);
}
.jam45-header-account-avatar img,
.jam45-header-profile-photo {
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
@media (max-width:1180px) {
  .jam45-header-account-avatar { width:28px; height:28px; flex-basis:28px; }
}



/* Alpha64: slightly larger custom Jam45 header logo on desktop only. */
@media (min-width:1181px) {
  .jam45-site-header .custom-logo { max-height:60px; }
}
