/* ============================================
   PURPLE HEADER THEME - Audio City
   ============================================ */

/* Deep purple header background */
header,
.top-header,
.site-header {
  background-color: #2A0E4F !important;
  background: linear-gradient(135deg, #2A0E4F 0%, #1a0a33 100%) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Header text and links in white */
header,
header *,
.top-header,
.top-header *,
.site-header,
.site-header * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Header links white */
header a,
.top-header a,
.site-header a {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Brand text white */
header .brand-text,
header .logo-brand,
.top-header .brand-text,
.site-header .brand-text {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Search bar - keep white/light background for visibility */
header .header-search-input {
  background: #FFFFFF !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

header .header-search-input::placeholder {
  color: rgba(31, 41, 55, 0.5) !important;
  -webkit-text-fill-color: rgba(31, 41, 55, 0.5) !important;
}

header .header-search-icon {
  color: rgba(31, 41, 55, 0.6) !important;
  -webkit-text-fill-color: rgba(31, 41, 55, 0.6) !important;
}

header .header-search-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Nav items white */
header .nav-item,
header .nav-link {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Header buttons with accent color */
header .header-btn,
header .btn-mastering,
header .btn-signin,
header .btn-create,
header #uploadLink,
header #signOutBtnHeader {
  background: rgba(139, 92, 246, 0.8) !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

header .header-btn:hover,
header .btn-mastering:hover,
header .btn-signin:hover,
header .btn-create:hover,
header #uploadLink:hover,
header #signOutBtnHeader:hover {
  background: rgba(139, 92, 246, 1) !important;
  transform: translateY(-1px);
}

/* Profile button in header */
header #profileBtn {
  border: 2px solid rgba(139, 92, 246, 0.5) !important;
}

/* ============================================ */

/* Hide donate buttons across the entire site */
.donate-btn,
#donateBtn,
.donate-btn-header,
#donateBtnMobile,
#donateBtnDownload,
.donate-btn-download {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure mastering button is always visible across entire site */
.btn-mastering,
#masteringBtn,
a[href*="mastering.html"].btn-mastering,
a[href*="mastering.html"]#masteringBtn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Shared responsive styling for header action buttons */
@media (max-width: 540px) {
  header .header-content,
  header .header-inner,
  header .header-main,
  header .header-grid,
  header .header-row,
  header .top-bar,
  header .nav-row,
  header.header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  header .nav-right,
  header .header-actions,
  header .header-links,
  header .header-buttons,
  header .header-cta,
  header .header-controls,
  header .nav-actions,
  header .nav-cta,
  header .cta-buttons,
  header .auth-buttons,
  header .hero-actions,
  header .top-actions,
  header .actions,
  header .toolbar-actions,
  header .button-row,
  header .quick-actions,
  header .nav-buttons,
  header .cta-row,
  header .utility-actions {
    width: 100%;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px;
    gap: 10px;
  }

  header .nav-right a,
  header .nav-right button,
  header .header-actions a,
  header .header-actions button,
  header .header-links a,
  header .header-links button,
  header .header-buttons a,
  header .header-buttons button,
  header .header-cta a,
  header .header-cta button,
  header .nav-actions a,
  header .nav-actions button,
  header .cta-buttons a,
  header .cta-buttons button,
  header .auth-buttons a,
  header .auth-buttons button,
  header .top-actions a,
  header .top-actions button,
  header .utility-actions a,
  header .utility-actions button {
    flex: 1 1 calc(50% - 12px);
    min-width: 140px;
    text-align: center;
    padding: 8px 10px;
  }
}