/* =========================================================
   OSBEATS GLOBAL MAIN MENU / BRAND STANDARD
   One logo size, one red/black shade, one header height,
   and one navigation scale across all primary OSBeats pages.
   ========================================================= */

:root{
  --os-nav-height:72px;
  --os-logo-box:52px;
  --os-nav-red:#73070B;
  --os-nav-redblack:linear-gradient(135deg,#8b0710 0%,#73070B 42%,#3b0306 76%,#0c0d10 100%);
  --os-nav-bg:#050608;
  --os-nav-border:#73070B;
}

/* ---------- HEADER SHELL ---------- */
.site-header,
.chart-header,
.os-topbar{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  background:var(--os-nav-bg) !important;
  border-bottom:1px solid var(--os-nav-border) !important;
  box-sizing:border-box !important;
}

.site-header .header-inner,
.chart-header .chart-header-inner,
.os-topbar .brand-row{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

/* artist-profile has its brand directly inside .site-header */
.site-header > .brand{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
}

/* ---------- BRAND WRAPPER ---------- */
.site-header .logo,
.chart-header .chart-logo,
.os-topbar .brand,
.site-header > .brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  height:var(--os-nav-height) !important;
  min-height:var(--os-nav-height) !important;
  padding:0 !important;
  margin:0 !important;
  color:#fff !important;
  text-decoration:none !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
}

/* ---------- THE "OS" BOX ---------- */
.site-header .logo .logo-mark,
.chart-header .chart-logo .chart-logo-mark,
.os-topbar .brand > span:first-child,
.site-header > .brand > span:first-child{
  width:var(--os-logo-box) !important;
  min-width:var(--os-logo-box) !important;
  max-width:var(--os-logo-box) !important;
  height:var(--os-logo-box) !important;
  min-height:var(--os-logo-box) !important;
  max-height:var(--os-logo-box) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  background:var(--os-nav-redblack) !important;
  background-color:var(--os-nav-red) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:21px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.5px !important;
  box-sizing:border-box !important;
}

/* ---------- "BEATS" WORDMARK ---------- */
.site-header .logo .logo-text,
.chart-header .chart-logo > span:not(.chart-logo-mark),
.os-topbar .brand > strong,
.site-header > .brand > strong{
  color:#fff !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:27px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
}

/* ---------- MAIN NAVIGATION ---------- */
.site-header nav,
.chart-header nav,
.os-topbar nav{
  min-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

.site-header nav a,
.chart-header nav a,
.os-topbar nav a{
  height:var(--os-nav-height) !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:0 13px !important;
  margin:0 !important;
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  text-decoration:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.site-header nav a:hover,
.chart-header nav a:hover,
.os-topbar nav a:hover,
.site-header nav a.active,
.chart-header nav a.active,
.os-topbar nav a.active{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(115,7,11,.28),rgba(115,7,11,.08)) !important;
  box-shadow:inset 0 -2px 0 var(--os-nav-red) !important;
}

/* Keep right-side cart/account controls vertically aligned to the same bar. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  height:var(--os-nav-height) !important;
  min-height:var(--os-nav-height) !important;
  display:flex !important;
  align-items:center !important;
}

/* Do not let page-specific CSS resize the brand on narrower desktop widths. */
@media (min-width:701px){
  .site-header .logo,
  .chart-header .chart-logo,
  .os-topbar .brand,
  .site-header > .brand{
    transform:none !important;
  }
}

/* Small-screen fallback: still consistent, just slightly tighter. */
@media (max-width:700px){
  :root{
    --os-nav-height:64px;
    --os-logo-box:46px;
  }

  .site-header .logo .logo-text,
  .chart-header .chart-logo > span:not(.chart-logo-mark),
  .os-topbar .brand > strong,
  .site-header > .brand > strong{
    font-size:23px !important;
  }

  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    padding:0 9px !important;
    font-size:12px !important;
  }
}


/* =========================================================
   GLOBAL MAIN MENU — ACTIVE STATE / CLICK BEHAVIOR
   ========================================================= */

/* Keep the menu above page banners/cards so overlays cannot steal clicks. */
.site-header,
.chart-header,
.os-topbar{
  position:relative !important;
  z-index:10000 !important;
}

.site-header nav,
.chart-header nav,
.os-topbar nav,
.site-header .logo,
.chart-header .chart-logo,
.os-topbar .brand{
  position:relative !important;
  z-index:10002 !important;
  pointer-events:auto !important;
}

.site-header nav a,
.chart-header nav a,
.os-topbar nav a{
  position:relative !important;
  z-index:10003 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  user-select:none !important;
}

/* JS controls the ONE current-page active state. */
.site-header nav a.os-current-page,
.chart-header nav a.os-current-page,
.os-topbar nav a.os-current-page{
  color:#fff !important;
  background:linear-gradient(180deg,rgba(115,7,11,.38),rgba(115,7,11,.10)) !important;
  box-shadow:inset 0 -3px 0 #73070B !important;
}

/* Remove stale hard-coded active styles when JS has identified the real page. */
body.os-nav-ready .site-header nav a.active:not(.os-current-page),
body.os-nav-ready .chart-header nav a.active:not(.os-current-page),
body.os-nav-ready .os-topbar nav a.active:not(.os-current-page){
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
}

/* Do not let decorative banner/hero pseudo-elements sit over the menu. */
.site-header::before,
.site-header::after,
.chart-header::before,
.chart-header::after,
.os-topbar::before,
.os-topbar::after{
  pointer-events:none !important;
}


/* =========================================================
   GLOBAL HEADER — RIGHT SIDE ACTIONS / SEARCH ALIGNMENT FIX
   Prevents Dashboard, My Music, account name and Log out
   from wrapping or collapsing in the main top menu.
   ========================================================= */

/* Give the right-side menu enough room and keep everything on one line. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  margin-left:auto !important;
  min-width:0 !important;
}

/* Search box keeps a consistent desktop width instead of squeezing the nav. */
.site-header .header-actions .search-wrap,
.chart-header .header-actions .search-wrap,
.os-topbar .top-actions .search-wrap{
  display:flex !important;
  align-items:center !important;
  width:260px !important;
  min-width:220px !important;
  max-width:260px !important;
  height:38px !important;
  flex:0 0 260px !important;
}

.site-header .header-actions .search-wrap input,
.chart-header .header-actions .search-wrap input,
.os-topbar .top-actions .search-wrap input{
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  padding:0 12px !important;
  border:1px solid #333740 !important;
  background:#101116 !important;
  color:#fff !important;
  box-sizing:border-box !important;
  font-size:13px !important;
}

.site-header .header-actions .search-wrap button,
.chart-header .header-actions .search-wrap button,
.os-topbar .top-actions .search-wrap button{
  width:40px !important;
  min-width:40px !important;
  height:38px !important;
  padding:0 !important;
  flex:0 0 40px !important;
}

/* Right-side links/buttons use one consistent single-line size. */
.site-header .header-actions > a,
.site-header .header-actions > button,
.chart-header .header-actions > a,
.chart-header .header-actions > button,
.os-topbar .top-actions > a,
.os-topbar .top-actions > button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 10px !important;
  margin:0 !important;
  border-radius:0 !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:13px !important;
  font-weight:700 !important;
  box-sizing:border-box !important;
}

/* Prevent labels like "My Music" and "Log out" from breaking onto 2 lines. */
.site-header .header-actions > a *,
.site-header .header-actions > button *,
.chart-header .header-actions > a *,
.chart-header .header-actions > button *,
.os-topbar .top-actions > a *,
.os-topbar .top-actions > button *{
  white-space:nowrap !important;
}

/* Keep account/avatar block compact. */
.site-header .header-actions .account-menu,
.site-header .header-actions .user-menu,
.chart-header .header-actions .account-menu,
.os-topbar .top-actions .account-menu{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  height:38px !important;
  white-space:nowrap !important;
}

/* Slightly tighter spacing below very wide desktop so all controls fit. */
@media (max-width:1180px) and (min-width:901px){
  .site-header nav a,
  .chart-header nav a,
  .os-topbar nav a{
    padding-left:9px !important;
    padding-right:9px !important;
  }

  .site-header .header-actions,
  .chart-header .header-actions,
  .os-topbar .top-actions{
    gap:6px !important;
  }

  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    width:210px !important;
    min-width:180px !important;
    max-width:210px !important;
    flex-basis:210px !important;
  }
}


/* =========================================================
   GLOBAL HEADER — COLLISION / OVERLAP FIX
   The desktop search box now steps out BEFORE it can collide
   with Producers / Artists / Membership or account actions.
   ========================================================= */

/* Let the center navigation shrink naturally instead of overlapping. */
.site-header .header-inner,
.chart-header .chart-header-inner,
.os-topbar .brand-row{
  width:100% !important;
  max-width:none !important;
  padding-left:24px !important;
  padding-right:24px !important;
  gap:12px !important;
}

.site-header .main-nav,
.chart-header nav,
.os-topbar nav{
  flex:1 1 auto !important;
  min-width:0 !important;
  gap:0 !important;
}

.site-header .main-nav a,
.chart-header nav a,
.os-topbar nav a{
  flex:0 0 auto !important;
  padding-left:10px !important;
  padding-right:10px !important;
}

/* Right-side actions must never sit on top of the primary navigation. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:10005 !important;
  background:#050608 !important;
}

/*
  At normal laptop / browser widths there is not enough horizontal room
  for TWO navigation groups plus a 260px search field. Hide only the
  header search field; Search remains available as a normal main-menu tab.
*/
@media (max-width:1450px) and (min-width:1001px){
  .site-header .header-actions .search-wrap,
  .chart-header .header-actions .search-wrap,
  .os-topbar .top-actions .search-wrap{
    display:none !important;
  }

  .site-header .header-actions,
  .chart-header .header-actions,
  .os-topbar .top-actions{
    gap:5px !important;
  }

  .site-header .header-actions > a,
  .site-header .header-actions > button,
  .chart-header .header-actions > a,
  .chart-header .header-actions > button,
  .os-topbar .top-actions > a,
  .os-topbar .top-actions > button{
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:12px !important;
  }
}

/* Keep the primary menu visible on standard desktop widths. */
@media (max-width:1180px) and (min-width:1001px){
  .site-header .main-nav a,
  .chart-header nav a,
  .os-topbar nav a{
    padding-left:7px !important;
    padding-right:7px !important;
    font-size:12px !important;
  }

  .site-header .logo,
  .chart-header .chart-logo,
  .os-topbar .brand{
    gap:8px !important;
  }

  .site-header .logo .logo-text,
  .chart-header .chart-logo > span:not(.chart-logo-mark),
  .os-topbar .brand > strong{
    font-size:24px !important;
  }
}


/* =========================================================
   GLOBAL HEADER — REMOVE EXTRA BLACK UNDERLAY / DROP PANEL
   Fixes the visible black block extending below the top menu.
   ========================================================= */

/* Lock the header and right-side action row to the same exact height. */
.site-header,
.chart-header,
.os-topbar,
.site-header .header-inner,
.chart-header .chart-header-inner,
.os-topbar .brand-row,
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  min-height:var(--os-nav-height) !important;
  max-height:var(--os-nav-height) !important;
  height:var(--os-nav-height) !important;
  overflow:visible !important;
}

/* Remove any page-specific background/padding that creates a second black strip. */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  background:transparent !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  align-self:center !important;
}

/* The search / account items themselves must not be taller than the header. */
.site-header .header-actions .search-wrap,
.chart-header .header-actions .search-wrap,
.os-topbar .top-actions .search-wrap,
.site-header .header-actions > a,
.site-header .header-actions > button,
.chart-header .header-actions > a,
.chart-header .header-actions > button,
.os-topbar .top-actions > a,
.os-topbar .top-actions > button{
  margin-top:0 !important;
  margin-bottom:0 !important;
  align-self:center !important;
}

/* Remove pseudo-element underlays sometimes used by page-specific header CSS. */
.site-header .header-actions::before,
.site-header .header-actions::after,
.chart-header .header-actions::before,
.chart-header .header-actions::after,
.os-topbar .top-actions::before,
.os-topbar .top-actions::after{
  content:none !important;
  display:none !important;
}

/* Keep the next page section flush immediately under the 1px header border. */
.site-header + *,
.chart-header + *,
.os-topbar + *{
  margin-top:0 !important;
}


/* =========================================================
   STEP 2 — GLOBAL HEADER ACTION CONSISTENCY
   Standardizes Cart / account / logout controls without
   changing the primary-navigation layout.
   ========================================================= */
.site-header .header-actions,
.chart-header .header-actions,
.os-topbar .top-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  height:var(--os-nav-height) !important;
  min-height:var(--os-nav-height) !important;
  max-height:var(--os-nav-height) !important;
  background:transparent !important;
}

/* Standard action-button shell */
.site-header .header-actions > a,
.site-header .header-actions > button,
.chart-header .header-actions > a,
.chart-header .header-actions > button,
.os-topbar .top-actions > a,
.os-topbar .top-actions > button{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 11px !important;
  margin:0 !important;
  background:#101116 !important;
  border:1px solid #343944 !important;
  color:#fff !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

.site-header .header-actions > a:hover,
.site-header .header-actions > button:hover,
.chart-header .header-actions > a:hover,
.chart-header .header-actions > button:hover,
.os-topbar .top-actions > a:hover,
.os-topbar .top-actions > button:hover{
  background:linear-gradient(105deg,#69060A 0%,#78070B 32%,#450408 65%,#100F12 100%) !important;
  border-color:#73070B !important;
  color:#fff !important;
}

/* Count badges in the header use one standard size and red/black treatment. */
.site-header .header-actions .count,
.site-header .header-actions .badge,
.site-header .header-actions [id*="Count"],
.chart-header .header-actions .count,
.chart-header .header-actions .badge,
.os-topbar .top-actions .count,
.os-topbar .top-actions .badge{
  min-width:19px !important;
  height:19px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 5px !important;
  background:linear-gradient(105deg,#8b0710 0%,#73070B 45%,#3b0306 100%) !important;
  border:0 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}

/* Header icons always stay centered and white. */
.site-header .header-actions svg,
.chart-header .header-actions svg,
.os-topbar .top-actions svg{
  width:16px !important;
  height:16px !important;
  color:#fff !important;
  fill:none !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}