/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  vertical-align:baseline;
}

*,*:before,*:after { box-sizing:border-box; }

body {
  font-family: monospace;
  text-transform: uppercase;
  font-size: 16px;
  background:#fff;
  color:#000;
  line-height:1.2;
  font-weight: 400;
}

.album-cell {
  font-weight: 400;
}

/* LINKS */
a { color:#000; text-decoration:none; }

/* =========================
   STICKY HEADER
========================= */
header {
  background: #fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  border-bottom:1px solid #000;
}

.sticky-wrapper {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
  will-change: transform;
}

/* ICONS */
#icons {
  display: flex;
  gap: 25px; /* adjust this value for spacing */
  align-items: center;
  list-style: none;
  margin-right: 16px;
}

#icons img {
  width:20px;
  height:20px;
}


/* =========================
   FILTER
========================= */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #000;
  background: #fff;
}

.filter-bar select {
  font-family: monospace;
  text-transform: uppercase;
  font-size: 16px;
  border: 1px solid #000;
  background: #fff;
  padding: 10px;
  flex: 0 0 auto;
}

/* =========================
   SUBSCRIBE FORM
========================= */
.newsletter-form {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.newsletter-form input[type="email"] {
  font-family: monospace;
  text-transform: uppercase;
  font-size: 16px;
  border: 1px solid #000;
  background: #fff;
  padding: 10px;
  width: 240px;
}

.newsletter-form button {
  font-family: monospace;
  text-transform: uppercase;
  font-size: 16px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 10px 16px;
  cursor: pointer;
}

.newsletter-form button:hover {
  background: #fff;
  color: #000;
}


@media (max-width: 900px) {

  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-form {
    width: 100%;
    margin-left: 0;
  }

  .newsletter-form input[type="email"] {
    flex: 1;
    width: 100%;
  }

}

/* =========================
   GRID ALBUM LIST
========================= */
.album-list {
  display:grid;
  grid-template-columns: 120px 1fr 1.2fr 250px 110px 80px;
  gap:0;
  width:100%;
  position: relative;
  z-index: 1;
}

.album-row {
  display: contents; /* makes rows behave like table rows */
}

.album-cell {
  padding:12px 16px;
  border-bottom:1px solid #000;
  display:flex;
  align-items:center;

  transition: background-color 0.2s ease, color 0.2s ease;
}

.album-cell a {
  transition: color 0.2s ease;
}

.album-row:hover .album-cell {
  background:#000;
  color:#fff;
}

.album-row:hover a {
  color:#fff;
}

/* COLUMN HINT STYLES */
.col-code { }
.col-artist { }
.col-title { }
.col-format { }
.col-date { }
.col-buy { }

/* =========================
   FOOTER
========================= */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: none;
}

/* LEFT: copyright with breathing room */
.site-footer .copyright {
  padding-left: 0px;
  white-space: nowrap;
}

/* RIGHT: site credit with breathing room */
.site-footer p:last-child {
  padding-right: 16px;
  white-space: nowrap;
  text-align: right;
}


/* =========================
   MOBILE
========================= */
@media (max-width: 900px) {

  .album-list {
    grid-template-columns: 1fr;
  }

  .album-cell {
    display: none !important;
  }

  .album-cell.col-code,
  .album-cell.col-buy {
    display: flex !important;
  }

  /* HEADER FIX */
  header {
    flex-wrap: wrap;
  }

  #icons {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .newsletter-form {
    margin-left: 0;
    width: 100%;
  }

  .newsletter-form input[type="email"] {
    width: 100%;
    min-width: 0;
  }
}