/*
 * Site-wide header — persistent utility nav.
 * Layout: left routes | center wordmark | right Account + Bag
 * Visual cues from homepage .the-header (fixed, mix-blend difference, mono type)
 * without Vue scopes, Distillery, Contact, or chapter index.
 */

@import url("playlist-panel.css");
@import url("nav-menu.css");
@import url("touch-targets.css");

:root {
  --header-height: calc(16px + 2.2em);
  --site-header-offset: 0px;
}

@media (max-width: 47.99em) {
  :root {
    /* Two-row mobile header: block padding + row gap + nav row + audio row. */
    --header-height: calc(32px + 2px + 44px + 44px);
  }
}

@media (min-width: 64em) {
  :root {
    --header-height: calc(20px + 2.4em);
    --site-header-offset: 20px;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px 14px;
  color: var(--color-white);
  mix-blend-mode: difference;
  pointer-events: none;
}

html.playlist-panel-open .site-header,
html.nav-menu-open .site-header {
  z-index: 60;
}

.site-header > * {
  pointer-events: auto;
}

@media (min-width: 64em) {
  .site-header {
    top: 20px;
    padding: 0 20px;
    column-gap: 24px;
  }
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.site-header__logo {
  display: block;
  justify-self: center;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}

.site-header__logo-img {
  display: block;
  width: min(140px, 32vw);
  height: auto;
  /* Wordmark is currentColor/black in the SVG — invert under mix-blend difference. */
  filter: invert(1);
}

@media (min-width: 64em) {
  .site-header__logo-img {
    width: 180px;
  }
}

.site-header__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.9em;
  min-width: 0;
}

.site-header__link,
.site-header__account,
.site-header__bag {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding: 4px 0;
  white-space: nowrap;
}

.site-header__audio {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  position: relative;
  line-height: 1;
  overflow: visible;
}

.site-header__transport {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}

.site-header__bracket {
  width: 0.28em;
  height: 1.05em;
  flex-shrink: 0;
  display: block;
  transition: color 500ms ease;
}

.site-header__track-nav,
.site-header__transport-play,
.site-header__playlist-toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  margin: 0;
  padding: 4px 1px;
  color: inherit;
  line-height: 0;
  flex-shrink: 0;
}

.site-header__track-icon {
  width: 0.75em;
  height: 0.75em;
  display: block;
}

.site-header__sound-icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  display: block;
}

.site-header__sound-icon path {
  transform-origin: center;
}

.site-header__transport-play[aria-pressed="false"] .site-header__sound-icon--eq path:nth-child(1) {
  animation: site-header-eq-pulse 1.2s infinite;
}

.site-header__transport-play[aria-pressed="false"] .site-header__sound-icon--eq path:nth-child(2) {
  animation: site-header-eq-pulse 1.2s infinite;
  animation-delay: 0.4s;
}

.site-header__transport-play[aria-pressed="false"] .site-header__sound-icon--eq path:nth-child(3) {
  animation: site-header-eq-pulse 1.2s infinite;
  animation-delay: 0.8s;
}

@keyframes site-header-eq-pulse {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.3);
  }
}

.site-header__transport-play[aria-pressed="true"] .site-header__sound-icon--eq {
  display: none;
}

.site-header__transport-play[aria-pressed="true"] .site-header__sound-icon--pause {
  display: block;
}

.site-header__transport-play[aria-pressed="false"] .site-header__sound-icon--pause {
  display: none;
}

.site-header__playlist-bracket {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  line-height: 0;
}

.site-header__chevron {
  width: 0.6em;
  height: 0.6em;
  display: block;
  transition: transform var(--timing-fast, 0.25s) ease-out;
}

.site-header__playlist-toggle.is-open .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__track-nav:hover,
.site-header__track-nav:focus-visible,
.site-header__transport-play:hover,
.site-header__transport-play:focus-visible,
.site-header__playlist-toggle:hover,
.site-header__playlist-toggle:focus-visible {
  opacity: 0.72;
}

.site-header__track-nav:focus-visible,
.site-header__transport-play:focus-visible,
.site-header__playlist-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

[data-site-header] .site-header__transport:has(:hover) .site-header__bracket,
[data-site-header] .site-header__transport:has(:focus-visible) .site-header__bracket,
[data-site-header] .site-header__playlist-toggle:hover .site-header__playlist-bracket .site-header__bracket,
[data-site-header] .site-header__playlist-toggle:focus-visible .site-header__playlist-bracket .site-header__bracket,
[data-site-header] .site-header__audio--hint .site-header__transport .site-header__bracket,
[data-site-header] .site-header__audio--hint .site-header__playlist-bracket .site-header__bracket {
  color: var(--color-pink, #ef2b5c);
}

.site-header__link + .site-header__link {
  margin-left: 0.7em;
  padding-left: 0.7em;
}

.site-header__link + .site-header__link::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  pointer-events: none;
}

@media (min-width: 64em) {
  .site-header__link,
  .site-header__account,
  .site-header__bag {
    font-size: 14px;
  }

  .site-header__bracket {
    height: 1.1em;
  }

  .site-header__track-icon {
    width: 0.8em;
    height: 0.8em;
  }

  .site-header__sound-icon {
    width: 1em;
    height: 1em;
  }

  .site-header__link + .site-header__link {
    margin-left: 0.9em;
    padding-left: 0.9em;
  }
}

.site-header__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}

.site-header__bag {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-header__menu-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px;
  color: inherit;
  line-height: 0;
  flex-shrink: 0;
}

.site-header__menu-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  height: 20px;
}

.site-header__menu-bar {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--timing-fast, 0.25s) ease-out,
    opacity var(--timing-fast, 0.25s) ease-out;
  transform-origin: center;
}

.site-header__menu-toggle.is-open .site-header__menu-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header__menu-toggle.is-open .site-header__menu-bar:nth-child(2) {
  opacity: 0;
}

.site-header__menu-toggle.is-open .site-header__menu-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus-visible {
  opacity: 0.72;
}

.site-header__menu-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 63.99em) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .site-header__menu-toggle {
    display: inline-flex;
  }

  .site-header__nav,
  .site-header__account {
    display: none;
  }
}

@media (max-width: 47.99em) {
  .site-header {
    grid-template-rows: auto auto;
    row-gap: 2px;
    align-items: center;
  }

  .site-header__actions {
    display: contents;
  }

  .site-header__menu-toggle {
    grid-row: 1;
    grid-column: 1;
  }

  .site-header__logo {
    grid-row: 1;
    grid-column: 2;
  }

  .site-header__bag {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }

  .site-header__audio {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    justify-content: center;
  }
}

.site-header__account--signed-in {
  letter-spacing: 0.04em;
  font-weight: 500;
}

.site-header__bag:hover,
.site-header__bag:focus-visible,
.site-header__link:hover,
.site-header__link:focus-visible,
.site-header__logo:hover,
.site-header__logo:focus-visible,
.site-header__account:hover,
.site-header__account:focus-visible {
  opacity: 0.72;
}

.site-header__bag:focus-visible,
.site-header__link:focus-visible,
.site-header__logo:focus-visible,
.site-header__account:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 47.99em) {
  .site-header__nav {
    column-gap: 0;
  }

  .site-header__link {
    font-size: 11px;
  }

  .site-header__link + .site-header__link {
    margin-left: 0.55em;
    padding-left: 0.55em;
  }

  .site-header__actions {
    gap: 0.5em;
  }

  .site-header__account,
  .site-header__bag {
    font-size: 11px;
  }

  .site-header__audio {
    gap: 0.15em;
  }

  .site-header__transport {
    gap: 0;
  }

  /* Decorative brackets — hide on narrow viewports to save horizontal space. */
  .site-header__bracket {
    display: none;
  }

  /* Audio transport — 44px minimum tap targets; icons stay visually modest. */
  .site-header__track-nav,
  .site-header__transport-play,
  .site-header__playlist-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-header__track-icon {
    width: 14px;
    height: 14px;
  }

  .site-header__sound-icon {
    width: 16px;
    height: 16px;
  }

  .site-header__chevron {
    width: 12px;
    height: 12px;
  }

  /* Homepage inline playlist reuses transport classes — beat playlist-panel.css padding overrides. */
  .playlist-inline__controls .site-header__transport {
    gap: 0;
  }

  .playlist-inline__controls .site-header__track-nav,
  .playlist-inline__controls .site-header__transport-play,
  .playlist-inline__controls .site-header__playlist-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .playlist-inline__controls .site-header__track-icon {
    width: 14px;
    height: 14px;
  }

  .playlist-inline__controls .site-header__sound-icon {
    width: 16px;
    height: 16px;
  }
}

/* Post-entry soundtrack notice — first visit with sound only */
.soundtrack-toast {
  background: var(--color-pink, #ef2b5c);
  border: none;
  border-radius: 999px;
  color: var(--color-white, #fff);
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 11px;
  font-weight: 400;
  isolation: isolate;
  left: 50%;
  letter-spacing: 0.08em;
  line-height: 1.2;
  mix-blend-mode: normal;
  opacity: 0;
  padding: 8px 14px;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  transition: opacity 500ms ease, transform 500ms ease;
  white-space: nowrap;
  z-index: 2;
}

html.soundtrack-hint-active .soundtrack-toast {
  z-index: 65;
}

html.soundtrack-hint-active .playlist-panel__backdrop {
  pointer-events: none;
}

.soundtrack-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 90em) {
  .soundtrack-toast {
    font-size: clamp(11px, 0.7638888889vw, 13.1388888889px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .soundtrack-toast {
    transition: opacity 200ms ease;
    transform: translateX(-50%);
  }

  .site-header__bracket {
    transition: none;
  }
}