/* Why Struggle Music website styles.
   Black on off-white, like the logo, with one blue accent for links and focus.
   High contrast in light and dark mode. Colours live in the variables at the
   top so they are easy to change. */

:root {
  --bg: #fafaf8;
  --text: #111111;
  --muted: #474747;          /* on --bg: about 9:1 */
  --accent: #0b4fa8;         /* links and focus; on --bg: about 7.6:1 */
  --accent-text: #ffffff;
  --border: #cfcfcb;
  --surface: #f0f0ec;
  --placeholder-bg: #fff3c4;
  --placeholder-text: #4a3b00;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #f2f2f2;
    --muted: #c4c4c4;
    --accent: #9cc3ff;       /* on --bg: about 10:1 */
    --accent-text: #0a1a33;
    --border: #3d3d3d;
    --surface: #1e1e1e;
    --placeholder-bg: #3d3200;
    --placeholder-text: #ffe680;
  }
}

* { box-sizing: border-box; }

html { font-size: 112.5%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Skip link: the first thing a keyboard reaches. Hidden until focused. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: bold;
  text-decoration: none;
  transform: translateY(-150%);
  z-index: 100;
}
.skip-link:focus { transform: none; }

/* Visible focus on everything. Never remove this. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Text only screen readers hear, for example "Spotify for Huskinson". */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header, main, .site-footer {
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.site-header { padding-top: 1.25rem; }

.site-name { margin: 0 0 0.75rem; text-align: center; }
.site-name a { display: inline-block; }
/* The logo is a JPEG with its own light grey background. */
.site-name img { display: block; width: 264px; max-width: 100%; height: auto; border-radius: 8px; }
@media (prefers-color-scheme: dark) {
  .site-name img { outline: 1px solid var(--border); }
}

nav[aria-label="Main"] ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.1rem;
  border-top: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}
nav[aria-label="Main"] a {
  display: inline-block;
  padding: 0.6rem 0.25rem;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
nav[aria-label="Main"] a:hover { text-decoration: underline; }
/* The current page is marked by a thick underline and heavier weight, not colour alone. */
nav[aria-label="Main"] a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  font-weight: 900;
}

main { padding-bottom: 2rem; }

h1 { font-size: 2.3rem; line-height: 1.15; margin: 0.5rem 0; font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 2rem 0 0.5rem; font-weight: 800; }
h3 { font-size: 1.25rem; margin: 1.25rem 0 0.25rem; }
.lead { font-size: 1.25rem; color: var(--muted); margin-top: 0; }
.meta, .hint, figcaption { color: var(--muted); font-size: 0.95rem; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

ul.inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.handle { font-weight: normal; }

/* Words still to be written. Shown clearly so nothing goes live half-finished. */
.placeholder {
  display: inline-block;
  padding: 0 0.4em;
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  font-weight: 800;
  border-radius: 4px;
}

.button {
  display: inline-block;
  padding: 0.7em 1.3em;
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--text);
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
}
.button:hover { text-decoration: underline; }

/* Artist cards: the heading carries the link and the meaning; the picture is decoration. */
ul.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.card h3, .card p { margin-left: 1rem; margin-right: 1rem; }
.card h3 { margin-top: 0.75rem; }
.card-image { margin: 0; }
.card-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Artist pages */
.artist-photo { margin: 0.5rem 0 1rem; }
.artist-photo img { display: block; width: 100%; max-width: 28rem; height: auto; border-radius: 12px; }
ul.releases { list-style: none; padding: 0; margin: 0; }
.release {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.release h3 { margin-top: 0; }
.artwork { margin: 0; }
.artwork img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 34rem) {
  .release { grid-template-columns: 1fr; }
  .artwork img { max-width: 12rem; }
}
.post-photo img { display: block; width: 100%; max-width: 32rem; height: auto; border-radius: 12px; }

/* Full picture descriptions, opened on request */
.image-description { margin: 0.5rem 0; font-size: 0.95rem; }
.image-description summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.image-description p { margin: 0.25rem 0 0.75rem; max-width: 40rem; }

/* Release countdowns */
.countdown {
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: 10px;
}
.countdown h2, .countdown h3 { margin-top: 0; }
.countdown-date { margin: 0.25rem 0; }
.countdown-live { margin: 0.25rem 0; font-size: 1.3rem; font-weight: 900; }
.countdown-body { display: grid; grid-template-columns: 12rem 1fr; gap: 1.25rem; align-items: start; margin-top: 0.75rem; }
.countdown-body h3 { margin-top: 0; }
@media (max-width: 34rem) { .countdown-body { grid-template-columns: 1fr; } }
ul.countdowns { list-style: none; padding: 0; margin: 0; }

/* Previous releases table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
caption { text-align: left; color: var(--muted); padding-bottom: 0.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
thead th { border-bottom: 2px solid var(--text); }
tbody th { font-weight: 700; }

/* Embedded players */
.embed { margin: 0.5rem 0; }
.embed iframe { border: 0; border-radius: 12px; display: block; }
.embed-fallback { margin: 0.5rem 0 0; font-size: 0.95rem; }

/* Lists of posts and articles */
ul.posts, ul.articles, ul.emails { list-style: none; padding: 0; margin: 0; }
.post, .article, .emails li {
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.post h2, .post h3, .article h2, .article h3, .emails h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.post p, .article p, .emails p { margin: 0.25rem 0; }

/* Search form */
.search {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 2px solid var(--text);
  border-radius: 10px;
}
.search h2 { margin-top: 0; }
.field { margin: 0.75rem 0; }
.field label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.field input, .field select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--muted);
  border-radius: 6px;
}
.field .hint { margin: 0.25rem 0 0; }
.status { font-weight: 700; min-height: 1.6em; }
.empty-state {
  padding: 1rem 1.25rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
}

.site-footer {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 2px solid var(--text);
  color: var(--muted);
}

/* Respect reduced-motion settings. There is no animation on the site anyway. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}