/* ==========================================================================
   site.css — additions and repairs on top of the template's style.css.
   Loaded last. Uses the palette already committed by the site:
   deep purple ground, cyan accent, Play + Josefin Sans.
   ========================================================================== */

:root {
  /* Colour — taken from the existing template, not reinvented */
  --bg: #100028;
  --bg-deep: #0c001e;
  --bg-raise: #1a0b36;
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.66);
  --accent: #00bfe7;
  --accent-dim: #0a91b0;
  --rule: rgba(255, 255, 255, 0.1);

  /* Spacing — 8px base */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;

  /* Fluid section rhythm */
  --section-y: clamp(56px, 8vw, 104px);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 220ms;

  /* Semantic z-index scale */
  --z-sticky: 100;
  --z-modal-backdrop: 200;
  --z-modal: 300;
}

/* --------------------------------------------------------------------------
   Sticky footer. The footer is the last flex child, so margin-top:auto pins
   it to the bottom on short pages (contact) instead of leaving dead space.
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Sections keep their intrinsic height; only the footer absorbs the slack. */
body > * {
  flex-shrink: 0;
}

.site-footer {
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Focus. The template does `a:hover, a:focus { outline: none }`, which strips
   the keyboard focus ring entirely. Put a visible one back.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Links in prose
   -------------------------------------------------------------------------- */

.prose a,
.page-intro a,
.site-footer a {
  transition: color var(--dur) var(--ease-out-quart);
}

.link-accent {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 191, 231, 0.35);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease-out-quart),
    border-color var(--dur) var(--ease-out-quart);
}

.link-accent:hover,
.link-accent:focus {
  color: #5fd8f5;
  border-bottom-color: #5fd8f5;
}

@media (prefers-reduced-motion: reduce) {
  .link-accent,
  .prose a,
  .page-intro a,
  .site-footer a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Section heading — replaces the bare `<a name="videos">Videos</a>` that was
   rendering as unstyled black text on a white strip.
   -------------------------------------------------------------------------- */

.section-heading {
  font-family: "Play", sans-serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

.section-heading::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: var(--s-2);
  background: var(--accent);
}

.section-heading--center {
  text-align: center;
}

.section-heading--center::after {
  margin-left: auto;
  margin-right: auto;
}

/* Offset for #videos style jump links so the heading isn't flush to the top */
[id] {
  scroll-margin-top: var(--s-4);
}

/* --------------------------------------------------------------------------
   Page intro — the copy block on home / releases / live sets
   -------------------------------------------------------------------------- */

.page-intro {
  background: var(--bg);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.page-intro__inner {
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
}

.page-intro__title {
  font-family: "Play", sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

.page-intro p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0 0 var(--s-2);
  text-wrap: pretty;
}

.page-intro p:last-child {
  margin-bottom: 0;
}

.page-intro__links {
  margin-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   Contact page. Was a two-column row with an empty left column and a stack of
   twelve <br> tags holding the layout open. Now a single centred column.
   -------------------------------------------------------------------------- */

/* Short page: absorb the leftover height and sit optically centred in it,
   rather than hugging the breadcrumb with a void above the footer. */
.contact {
  background: var(--bg);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  flex: 1;
  display: flex;
  align-items: center;
}

.contact > .container {
  width: 100%;
}

.contact__inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.contact__label {
  font-family: "Josefin Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0 0 var(--s-2);
}

.contact__email {
  display: inline-block;
  font-family: "Play", sans-serif;
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
  transition: color var(--dur) var(--ease-out-quart);
}

.contact__email:hover,
.contact__email:focus {
  color: var(--accent);
}

.contact__divider {
  width: 100%;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: var(--s-6) 0 var(--s-5);
}

.contact__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

/* 44px minimum touch target */
.contact__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink);
  font-size: 18px;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out-quart),
    color var(--dur) var(--ease-out-quart),
    background-color var(--dur) var(--ease-out-quart);
}

.contact__social a:hover,
.contact__social a:focus {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 191, 231, 0.08);
}

.contact__social img {
  height: 17px;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .contact__email,
  .contact__social a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  padding: var(--s-6) 0 var(--s-5);
}

.site-footer__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.site-footer__blurb {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 0 auto var(--s-3);
  text-wrap: pretty;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

/* 44px minimum touch target — measured 33px at 375px before this */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus {
  color: var(--accent);
}

.site-footer__nav a.is-accent {
  color: var(--accent);
}

.site-footer__nav a.is-accent:hover,
.site-footer__nav a.is-accent:focus {
  color: #5fd8f5;
}

/* 0.45 measured 4.44:1 against --bg-deep, just under AA. 0.58 clears it. */
.site-footer__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}

.site-footer__meta a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.site-footer__meta a:hover,
.site-footer__meta a:focus {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Small repairs to template sections
   -------------------------------------------------------------------------- */

/* The breadcrumb strip collapses to a sliver when it has no heading */
.breadcrumb-option:has(.container .row > div:empty) {
  display: none;
}

/* Live-sets and releases intro sat too close to the grid below */
.portfolio.spad {
  padding-top: var(--s-5);
}

@media (max-width: 767px) {
  .page-intro p,
  .site-footer__blurb {
    font-size: 15px;
  }

  .site-footer__nav {
    gap: var(--s-1) var(--s-2);
  }
}