:root {
  --gold: #fbc63c;
}

body {
  margin: 0;
  color: #fff;
  background:
      linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.9)),
      url("../assets/img/background.webp") #050505;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.index-navbar {
  height: 4rem;
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
}

.index-navbar > div {
    min-width: 0;
}

.index-navbar a, .index-navbar a:visited {
  text-decoration: none;
  color: white;
  padding: 1em;
}

.index-navbar .website-title {
  margin-left: 0.75rem;
  font-size: 1.6rem;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.index-content {
  max-width: 800px;
  margin: auto;
}

.song-list {
  margin: 0;
  padding: 0;

  background: rgba(20,20,20,.65);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;

  overflow: hidden;
}

.song-list li {
  list-style: none;
}

.song-list li a {
  display: block;
  color: #fff;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: .2s;
}

.gold {
  color: var(--gold);
}

.song-list li a:hover {
  background: rgba(249,188,73,.08);
  /*padding-left: 28px;*/
}

.song-list li:last-child a {
  border-bottom: none;
}

.search-container {
  display: flex;
  justify-content: center;
}

#search-bar {
  width: min(800px, 100%);
  padding: 12px 20px 12px 55px; /* Extra padding on the left (45px) clears room for the icon */
  font-size: 1.1rem;

  background: rgba(30,30,30,.85);
  color: white;

  border: 1px solid rgba(249,188,73,.4);
  border-radius: 999px;

  box-sizing: border-box;

  transition: .25s;

  /* Injecting the Search SVG directly as a background image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5A93C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18px center; /* Positions the icon precisely on the left */
  background-size: 28px 28px;        /* Sizes the icon perfectly */
  transition: border-color 0.2s;
}

/* Optional: Style the placeholder text so it isn't too bright */
#search-bar::placeholder {
  color: #888;
  font-size: 0.9em;
}

#search-bar:focus {
  border-color: #f9bc49;
  box-shadow: 0 0 20px rgba(249,188,73,.25);
}

.hero {
  text-align: center;
  padding: 0.5rem 2rem 2.5rem 2rem;
}

.hero h1 {
  margin: 0;
  font-size: 2rem;
  color: white;
}

.hero p {
  margin-top: 1rem;
  margin-bottom: 2rem;
  color: #a4a4a4;
  font-size: 1.15rem;
}

.song-section {
  max-width: 1000px;
  margin: auto;
  padding: 0 2rem 4rem 2rem;
}

.song-section h2 {
  color: white;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: normal;
  display: flex;
  align-items: center;
}

.song-section h2 > svg {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.song-section h2::after {
    content: "";
    flex-grow: 1;        /* Forces the line to take up all remaining space on the right */
    height: 1px;         /* The thickness of your line */
    background-color: rgba(249,188,73,.4); /* Line color—change to var(--gold) if you want it gold! */
    margin-left: 0.8em;
}

.song-list li > a {
  display: flex;
  align-items: center; /* Vertically centers icons and text */
}

/* Center text spacing */
.song-text {
    flex-grow: 1; /* Pushes the right chevron all the way to the edge */
    font-size: 15px;
}

/* Base styles for both icons */
.icon-left, 
.icon-right {
    width: 18px;
    height: 18px;
    color: #E5A93C; /* Matches your gold/amber theme */
    flex-shrink: 0; /* Prevents icons from squishing on small screens */
}

/* Specific spacing for the icons */
.icon-left {
    margin-right: 14px;
}

.icon-right {
    margin-left: 14px;
}