/* ====== Global fixes ====== */
/* Ensure predictable box sizing across the site */
html, body {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* Prevent Horizontal Scrolling */
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ====== Header: full-bleed but centered content ====== */
/* Make header span the full viewport */
header {
  position: relative !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
}

/* Centered inner nav container that does not clip header */
.nav-container {
  width: 100% !important;
  max-width: 1200px !important; /* controls content width only */
  margin: 0 auto !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* If you have a .container or .content-container, keep them from clipping header */
.container, .content-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* ====== Logo and search alignment ====== */
.logo-img {
  height: 48px !important;
  width: auto !important;
  display: block !important;
}

/* Use flex to align logo, nav links and search bar without manual margins */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Search bar: remove hard-coded left margin and let flex handle spacing */
.search-bar {
  height: 36px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

/* ====== Nav links and burger behavior ====== */
.nav-links {
  display: none; /* default hidden on small screens */
  gap: 12px;
  align-items: center;
}

/* Desktop: show inline nav links */
@media screen and (min-width: 769px) {
  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    position: static !important;
    background: none !important;
    padding: 0 !important;
    align-items: center !important;
  }

  .burger-icon {
    display: none !important;
  }

  .search-bar {
    width: 300px !important;
    margin-left: 20px !important;
  }
}

/* Mobile nav: dropdown anchored to header */
@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    top: 70px; /* anchored below header */
    left: 0;
    width: 100%;
    background-color: #2196F3;
    padding: 12px 16px;
    transition: top 0.35s ease-in-out;
    box-sizing: border-box;
  }

  .nav-links.active {
    display: flex;
    top: 70px;
  }

  .burger-icon {
    display: inline-flex;
    font-size: 30px;
    cursor: pointer;
    border: 2px solid #fff;
    border-radius: 6px;
    padding: 6px;
    align-items: center;
    justify-content: center;
  }

  .search-bar {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ====== List results and song-box (keeps cards inside grid) ====== */
.list-results {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px !important;
  margin: 20px auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Category accents */
.results-recent .song-box { background: #f9f9f9 !important; border-left: 4px solid #2196F3 !important; }
.results-topzed .song-box { background: #fff !important; border-left: 4px solid #4CAF50 !important; }
.results-rnb .song-box { background: #fff !important; border-left: 4px solid #E91E63 !important; }

/* Breakpoints for list grid */
@media screen and (min-width: 768px) {
  .list-results { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (min-width: 1024px) {
  .list-results { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Static song-box styles (normalized margins so they don't push header) */
.song-box {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-bottom: 20px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
  transition: transform 0.25s ease-in-out !important;
}
.song-box:hover { transform: translateY(-4px) !important; }

/* Ensure song-container doesn't add extra horizontal space */
.song-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Small-screen tweaks */
@media screen and (max-width: 480px) {
  .song-info p.description { display: none; }
  .song-title { font-size: 12px; }
  .song-box img { width: 120px; height: 90px; border-radius: 5px; margin-right: 8px; }
  .nav-container { padding: 10px 12px !important; }
}

/* Tablet tweaks */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .song-box { flex: 1 1 calc(50% - 24px); max-width: 350px; margin: 10px; }
}