/* RADIO PARTY MIX | GLOBAL BACKGROUND | 2026-11-01
 * Purely presentational. No player, catalogue, modal, chat, or request logic. */
html body.np-home,
html body.np-inner {
  background-color: #fff4fb !important;
  background-image:
    linear-gradient(180deg, rgba(255,252,254,.70) 0%, rgba(255,245,252,.58) 55%, rgba(255,249,253,.72) 100%),
    url('../images/rpm-global-background-2026.webp') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center top, center top !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
}
/* The Hits Request hero no longer repeats the home page Alexandra portrait. */
html body.np-inner .np-request-hero {
  background-image:
    linear-gradient(90deg, rgba(255,251,254,.98) 0%, rgba(255,241,250,.93) 42%, rgba(255,223,241,.43) 72%, rgba(255,210,238,.15) 100%),
    url('../images/rpm-global-background-2026.webp') !important;
  background-color: rgba(255,245,252,.85) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  background-position: center, center 43% !important;
}
/* Readable shared navigation on light backgrounds, including other inner pages. */
html body.np-inner .np-header {
  width: min(1500px, calc(100% - 34px));
  height: 82px;
  grid-template-columns: 225px minmax(0,1fr) auto;
  background: rgba(255,255,255,.95);
  border: 1px solid #f4d0e4;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 26px rgba(173,24,91,.08);
  padding: 0 17px;
  box-sizing: border-box;
}
html body.np-inner .np-logo img,
html body.np-inner .np-footer-brand img {
  content: url('../images/rpm-logo-dark-preview.png');
}
html body.np-inner .np-logo img { width: 205px; max-height: 55px; }
html body.np-inner .np-nav { gap: clamp(10px,1.6vw,26px); }
html body.np-inner .np-nav a { color: #41425f; font-weight: 750; font-size: 12px; }
html body.np-inner .np-nav a:hover,
html body.np-inner .np-nav a.active { color: #c9006e; }
html body.np-inner .np-social-top a,
html body.np-inner .np-footer-social a {
  background: rgba(255,255,255,.92);
  border-color: #f4d4e3;
  color: #28283e;
}
html body.np-inner .np-menu-button { color: #17152f; }
html body.np-inner .np-footer { color:#68647d; border-color:#f0d1e3; }
html body.np-inner .np-footer-brand img { width: 165px; max-height: 48px; }
@media (max-width: 820px) {
  html body.np-home,
  html body.np-inner {
    background-attachment: scroll, scroll !important;
    background-size: cover, cover !important;
  }
  html body.np-inner .np-header {
    height:72px;
    grid-template-columns:1fr auto;
    padding:0 13px;
    width:calc(100% - 24px);
  }
  html body.np-inner .np-logo img { width:174px; }
  html body.np-inner .np-nav {
    background:#fffafd;
    border:1px solid #f8d7e9;
  }
  html body.np-inner .np-nav a { color:#28253d; }
}

/* Ensure legacy white login icon is visible in the light navigation on ALL inner pages. */
html body.np-inner .np-nav .np-login-link {
  align-self:center !important;
  display:inline-grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  margin-top:0 !important;
  margin-left:5px !important;
  border:1px solid #f3bbd8 !important;
  border-radius:50% !important;
  background:#fff0f8 !important;
  color:#c5006a !important;
}
html body.np-inner .np-nav .np-login-link:hover {
  background:#dc0075 !important;
  border-color:#dc0075 !important;
  color:#fff !important;
}
html body.np-inner .np-nav .np-login-link i {
  color:inherit !important;
  font-size:17px !important;
}
@media (max-width:820px) {
 html body.np-inner .np-request-hero {
   background-image:
     linear-gradient(180deg,rgba(255,250,254,.98) 0%,rgba(255,241,250,.93) 48%,rgba(255,229,245,.50) 75%,rgba(255,228,248,.1) 100%),
     url('../images/rpm-global-background-2026.webp') !important;
   background-position: center, center bottom !important;
   background-size: cover, auto 360px !important;
 }
}

/* INNER MOBILE MENU FIX - 2026-11-01
 * Keep mobile header above each inner-page hero stacking context.
 * Size the menu to its content rather than an empty full-viewport drawer.
 */
@media (max-width: 820px) {
  html body.np-inner .np-header {
    position: relative;
    z-index: 5001;
  }
  html body.np-inner .np-nav {
    height: auto;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  html body.np-inner .np-nav .np-login-link {
    align-self: flex-start !important;
    margin-left: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
  }
}