/* ==========================================================================
   Bonavero — site styles
   Modelled on janiebay.com: white page, grey letter-spaced caps,
   outlined pill buttons, hairline rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — bundled with the site and preloaded, so text doesn't change size
   when moving between pages. The fallback is Arial scaled to Source Sans 3's
   proportions, in case the font is ever slow to arrive.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-500.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 90.14%;
  ascent-override: 113.6%;
  descent-override: 44.38%;
  line-gap-override: 0%;
}

:root {
  --bg: #ffffff;
  --ink: #444444;         /* all text */
  --line: #d0d0d0;        /* button outlines, rules, field borders */
  --icon: #b5b5b5;        /* social icons at rest */
  --logo: #6e6458;        /* the logo's taupe — used for its 1px ring */

  --font: "Source Sans 3", "Source Sans 3 Fallback", Arial, sans-serif;

  --page: 47.5rem;        /* width of the rules and content column */
  --btn-h: 2.5rem;        /* 40px buttons, as on the example site */
  --track: .3em;          /* letter-spacing for buttons and the tagline */

  /* Top nav */
  --nav-count: 3;         /* pill buttons in the nav (set automatically by js/nav.js) */
  --nav-icons: 1;         /* round icon buttons in the nav, e.g. Spotify (also automatic) */
  --btn-w: 7rem;          /* nav button width */
  --nav-gap: .7rem;       /* space between nav buttons */
  --nav-span: calc(
    var(--nav-count) * var(--btn-w)
    + var(--nav-icons) * var(--btn-h)
    + (var(--nav-count) + var(--nav-icons) - 1) * var(--nav-gap)
  );

  /* Social icons (the count is set automatically by js/social.js) */
  --social-count: 5;
  --social-size: 2.75rem;
  --social-gap: 1rem;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
  height: 100%;
  background: var(--bg);
  scroll-padding-top: env(safe-area-inset-top, 0px);
  /* Keep the scrollbar's space reserved on every page, so pages that scroll
     and pages that don't line up exactly (this was the nav "jump"). */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 1rem); }

/* Header and footer measure widths from their own column (see --btn-w on phones) */
.site-nav,
.site-footer { container-type: inline-size; }

/* Header, main and footer share one centred column */
.site-nav,
main,
.site-footer {
  width: 100%;
  max-width: calc(var(--page) + 2.5rem);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* --------------------------------------------------------------------------
   Buttons — fixed-size outlined pills, like the example site.
   A fixed width and height means the buttons never resize (and so never
   shift) while the web font loads.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  vertical-align: top;    /* buttons side by side line up by their tops */
  width: 7rem;
  height: var(--btn-h);
  padding: 0 .75em 0 calc(.75em + var(--track)); /* offsets trailing tracking */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 500;
  line-height: calc(var(--btn-h) - 2px);
  letter-spacing: var(--track);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .2s ease;
}
.btn:hover,
.btn[aria-current="page"] { border-color: var(--ink); }

.btn--wide { width: 7.875rem; }
.btn--auto { width: auto; padding-left: calc(1.75em + var(--track)); padding-right: 1.75em; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn .arrow { letter-spacing: 0; margin-right: .6em; }

/* --------------------------------------------------------------------------
   Header navigation and the rule beneath it
   -------------------------------------------------------------------------- */
.site-nav { padding-top: 1.5rem; }
.site-nav .btn { width: var(--btn-w); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--nav-gap);
}
/* no baseline gap under the buttons, so the rule sits exactly where set */
.site-nav li { display: flex; }

/* Round icon button in the nav (Spotify): same height and outline as the pills */
.nav-icon {
  display: grid;
  place-items: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #777777;
  transition: color .2s ease, border-color .2s ease;
}
.nav-icon:hover { color: var(--ink); border-color: var(--ink); }
.nav-icon svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.rule-full {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line);
}

/* The rule under the nav reaches half a button past the outer buttons
   (or as far as the screen allows on phones). */
.site-nav .rule-full {
  width: min(100%, calc(var(--nav-span) + var(--btn-w)));
  margin: 1.5rem auto 0;  /* same as the space above the buttons */
}

/* --------------------------------------------------------------------------
   Main
   -------------------------------------------------------------------------- */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 4.745rem;
  padding-bottom: 4.8rem;
}

.home { display: flex; flex-direction: column; align-items: center; }

/* The logo as supplied, with its single 1px ring drawn crisply in CSS */
.logo {
  width: 12.35rem;
  aspect-ratio: 1;
  border: 1px solid var(--logo);
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.logo img { width: 100%; border-radius: 50%; }

/* "Artist" — a subtitle set close under the name */
.tagline {
  margin: .1rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track);
  padding-left: var(--track);
  text-transform: uppercase;
}

.name {
  margin: 4.075rem 0 0;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
}

.rule-short {
  width: 2.75rem;
  height: 1px;
  margin: 4.38rem auto 1.68rem;
  border: 0;
  background: var(--line);
}

/* Inner pages */
.page { width: 100%; max-width: 36rem; }

.page h1 {
  margin: 0 0 1.95rem;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
}
.page h1:focus { outline: none; }

.page p { margin: 0 0 .72rem; }
.page--left p { text-align: left; margin-bottom: 1.2rem; }   /* left-aligned paragraphs, e.g. About */
.page .rule-short { margin: 1.95rem auto; }

/* Songs page — one card per single; the list grows as you add songs */
.song-list {
  display: grid;
  gap: 1.5rem;
  text-align: left;
}

.song {
  padding: 1.75rem 1.75rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  scroll-margin-top: 1.5rem;
}

.song-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.song .song-date {
  margin: .4rem 0 0;
  color: #666666;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.song-presave-row { margin-top: 1.35rem; }
.song-presave[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.song .song-listen {
  margin: 1.1rem 0 0;
  color: #666666;
  font-size: .95rem;
}
.song-listen a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.song-listen a:hover { border-bottom-color: var(--ink); }
.song-sep { color: var(--line); }

.song-about { margin-top: 1.35rem; }
.song .song-about p { margin: 0 0 1.2rem; }
.song-about p:last-child { margin-bottom: 0; }

/* Listen and Show lyrics, side by side under the description */
.song-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: 1.5rem;
}
.song-listen-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.song-lyrics-text {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  white-space: pre-line;
  line-height: 1.8;
}

/* Contact form */
.contact-form { display: grid; gap: .81rem; text-align: left; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .81rem; }

.field label {
  display: block;
  margin: 0 0 .4rem 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  min-height: var(--btn-h);
  padding: .7rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: .75rem;   /* 12px */
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.field textarea { min-height: 10rem; resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible { outline: none; border-color: var(--ink); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: .5rem;
}

/* Hidden spam-trap field */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.7em; margin: 0; font-size: .95rem; text-align: center; }

/* --------------------------------------------------------------------------
   Footer — rule, then social icons
   -------------------------------------------------------------------------- */
.site-footer { padding-bottom: 3.52rem; }

/* The rule above the icons overhangs them by exactly as much as the nav rule
   overhangs the nav buttons. */
.site-footer .rule-full {
  width: calc(
    min(100%, calc(var(--nav-span) + var(--btn-w))) - var(--nav-span)
    + var(--social-count) * var(--social-size)
    + (var(--social-count) - 1) * var(--social-gap)
  );
  margin: 0 auto;
}

/* The icons are added by js/social.js; this reserves their row so nothing shifts */

.social {
  list-style: none;
  margin: 1.77rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--social-gap);
  min-height: var(--social-size);
}

.social a {
  display: grid;
  place-items: center;
  width: var(--social-size);
  height: var(--social-size);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--icon);
  transition: color .2s ease, border-color .2s ease;
}
.social a:hover { color: var(--ink); border-color: var(--ink); }
.social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* --------------------------------------------------------------------------
   Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 36rem) {
  :root {
    --nav-gap: .5rem;
    --social-gap: .5rem;
    /* narrow the nav buttons just enough to fit on small phones */
    --btn-w: min(6.5rem, calc((100cqw - var(--nav-icons) * var(--btn-h) - (var(--nav-count) + var(--nav-icons) - 1) * var(--nav-gap)) / var(--nav-count)));
  }
  .site-nav { padding-top: 1.05rem; }
  .site-nav .rule-full { margin-top: 1.05rem; }
  main { padding-top: 2.9rem; padding-bottom: 2.9rem; }
  .logo { width: 11rem; }
  .tagline { margin-top: .05rem; font-size: .75rem; --track: .22em; }
  .name { margin-top: 2.44rem; font-size: 1.75rem; }
  .rule-short { margin: 2.025rem auto 1.46rem; }
  .field-row { grid-template-columns: 1fr; }
  .song { padding: 1.35rem 1.25rem 1.25rem; }
  .site-footer { padding-bottom: 1.95rem; }
  .social { margin-top: 1.46rem; }
}

/* Very small phones: shrink the social icons a little so they stay on one row */
@media (max-width: 22rem) {
  :root { --social-size: 2.5rem; --social-gap: .4rem; }
}

/* Small phones: tighten the nav labels so they fit beside the Spotify button */
@media (max-width: 24rem) {
  .site-nav .btn { --track: .18em; padding: 0 .35em 0 calc(.35em + var(--track)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .social a, .nav-icon { transition: none; }
}