/* ============================================================
   HARK MADLEY — main stylesheet
   Cleaned up 2026. Dead rules removed:
     - #audio, #audiooverlay (old player)
     - #stream (old track list wrapper)
     - #artwork (unused)
     - #soundcloud, #email, #bandcamp (not in HTML)
     - td (no tables)
     - @keyframes pulse (never applied)
     - Obsolete vendor prefixes (-webkit-/-moz-/-o- background-size)
     - Commented-out media block
   ============================================================ */

/* ── Title colour animation ── */
@keyframes pulser {
  0%   { color: white; }
  25%  { color: #4cffb6; }
  50%  { color: #4c94ff; }
  75%  { color: #b64cff; }
  100% { color: #ff4c94; }
}

/* ── Full-page background image ── */
html {
  background: url(img/tfitq1.jpg) top left / cover no-repeat fixed;
  min-height: 100vh;
  overflow-y: scroll;
  overflow-x: clip;
}

/* Portrait mobile: iOS ignores background-attachment:fixed, use ::after instead */
@media only screen and (orientation: portrait) and (max-device-aspect-ratio: 1/1) {
  html {
    background-attachment: scroll;
    background-position: top left;
    background-size: cover;
  }

  /* Fixed background layer via pseudo-element — works on iOS where fixed bg fails */
  html::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -9;
    background: url(img/tfitq1.jpg) top left / cover no-repeat;
  }
}

/* ── Base typography ── */
body {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  min-height: 100vh;
  box-sizing: border-box;
}

/* ── Site title ── */
h1 {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 300;
  font-size: 2em;
  letter-spacing: 0;
  width: 80%;
  margin: -5px 0 -0.4em 10px;
  padding-top: 3px;
  animation: pulser 60s infinite alternate;
}

/* ── Links ── */
a,
a:visited {
  text-decoration: none;
  color: white;
}

a:hover,
nav {
  color: #33f5ff;
}

/* ── Navigation ── */
#nav {
  font-weight: 300;
  font-size: 1em;
  margin-top: 5px;
  margin-bottom: 0;
}

ul {
  list-style: none;
  padding: 0 0 2px 2px;
  display: inline-flex;
  margin: 10px;
}

li {
  padding-right: 25px;
}

/* ── Footer social icons ── */
#footer {
  position: fixed;
  top: 11px;
  right: 10px;
  height: 50px;
  z-index: 1000;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
}

.social {
  height: 1.5em;
  width: 1.5em;
  opacity: 0.8;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  flex-shrink: 0;
}

.social:hover {
  opacity: 1;
}

#instagram { background-image: url(img/icons/instaiconWHITE.png); }
#spotify   { background-image: url(img/icons/spotifyiconWHITE.png); }
#apple     { background-image: url(img/icons/appleiconWHITE.png); }
#youtube   { background-image: url(img/icons/youtubeWHITE.png); }