/* ============================================================================
   site-header.css — shared header + light/dark theming for the sub-pages
   (Works, Visual Music, Screen Scoring, Performance, Research, About).

   The header mirrors the V10 home header (DC mark, brand, menu, Listen,
   dark/light toggle). The dark/light SWITCH works by flipping the site's CSS
   color variables: default (no .theme-dark) = LIGHT, .theme-dark = the original
   dark base. Scoped to body.gold-header, loaded after style.css.
============================================================================ */

/* ---- theme palettes (the switch just swaps these variables) ---- */
body.gold-header {                 /* LIGHT (default, matches the home model) */
  --bg:        #f5f2ec;
  --bg-soft:   #ece7db;
  --ink:       #1b1714;
  --ink-dim:   #5f5950;
  --ink-mute:  #8c857a;
  --gold:      #8a6618;
  --gold-soft: #9c7a2a;
  --line:      rgba(138,102,24,0.22);
  --hairline:  rgba(0,0,0,0.08);
  /* header colours — match the home header exactly (light mode) */
  --hdr-ink:    #080808;
  --hdr-accent: #C6B18B;
}
body.gold-header.theme-dark {      /* DARK — warm espresso + muted gold (Deniz's chosen palette) */
  --bg:        #1a1714;
  --bg-soft:   #221d18;
  --ink:       #e2d4bd;
  --ink-dim:   #9a8f80;
  --ink-mute:  #7c746c;
  --gold:      #d1ab65;
  --gold-soft: #b88f48;
  --line:      rgba(209,171,101,0.20);
  --hairline:  rgba(255,255,255,0.05);
  /* header colours — muted gold in dark */
  --hdr-ink:    #d1ab65;
  --hdr-accent: #d1ab65;
}

/* keep the base nav's fixed position; transparent (no grey bar), like the home */
.gold-header .nav {
  align-items: center;
  box-sizing: border-box;
  padding: 0 clamp(22px, 4.4vw, 63px);
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
}
.gold-header .nav.is-scrolled { background: transparent; border-bottom-color: transparent; }

/* brand lockup */
.gold-header .nav__brand { display: flex; align-items: center; gap: clamp(16px, 3.2vw, 50px); }
.gold-header .dc-mark {
  font-family: "Cormorant Garamond", "Helvetica Neue", "Helvetica", serif;
  font-weight: 500;
  letter-spacing: -1px;
  border: none;
  background: none;
  font-size: 32px;
  line-height: 1;
  padding: 0;
}
.gold-header .nav__brand-text {
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: clamp(10px, 0.83vw, 12px);
  font-weight: 600;
  letter-spacing: clamp(1.5px, 0.18vw, 2.6px);
  text-transform: uppercase;
  white-space: nowrap;
}

/* menu */
.gold-header .nav__right { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 34px); }
.gold-header .nav__list { display: flex; gap: clamp(9px, 1.2vw, 22px); align-items: center; line-height: 1; margin: 0; padding: 0; list-style: none; }
.gold-header .nav__list li { display: flex; align-items: center; }
.gold-header .nav__list a {
  display: flex;
  align-items: center;
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: clamp(10px, 0.83vw, 12px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: clamp(1.2px, 0.16vw, 2.4px);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.92;
}
.gold-header .nav__list a:hover,
.gold-header .nav__list a.is-active { opacity: 1; }
.gold-header .nav__list a::after { background: var(--hdr-accent); }

/* listen pill */
.gold-header .listen-pill {
  border: 1px solid var(--hdr-accent);
  background: transparent;
  padding: 7px 16px;
  gap: 8px;
}
.gold-header .listen-pill .label {
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.gold-header .listen-pill .dot { background: var(--hdr-accent); width: 6px; height: 6px; flex-shrink: 0; animation: dc-listen-pulse 2.4s ease-in-out infinite; }
@keyframes dc-listen-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214,178,105,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(214,178,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,178,105,0); }
}

/* theme toggle */
.gold-header .theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hdr-accent);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.gold-header .theme-toggle:hover { background: color-mix(in srgb, var(--hdr-accent) 16%, transparent); }

/* ---- header colour: near-black in light, gold in dark (matches the home header) ---- */
.gold-header .dc-mark,
.gold-header .nav__brand-text,
.gold-header .nav__list a,
.gold-header .listen-pill,
.gold-header .listen-pill .label,
.gold-header .theme-toggle { color: var(--hdr-ink); }
.gold-header .nav__burger span { background: var(--hdr-ink); }

/* toggle icon: moon (=> go dark) in light, sun (=> go light) in dark */
.gold-header .theme-toggle__moon  { display: none; }
.gold-header .theme-toggle__sun { display: block; }
.gold-header.theme-dark .theme-toggle__sun { display: none; }
.gold-header.theme-dark .theme-toggle__moon  { display: block; }

/* ---------------------------------------------------------------------------
   Collapse the inline menu to a burger overlay below 1200px (same as home).
--------------------------------------------------------------------------- */
/* (old 1300px burger-collapse removed 2026-07-04: menu now stays visible
   on desktops; the 960px overlay below handles small screens) */

/* phones: drop the long name so DC + listen + toggle + burger fit */
@media (max-width: 560px) {
  .gold-header .nav__brand-text { display: none; }
}

/* ===========================================================================
   MOBILE MENU (gold-header sub-pages) — fix for the menu leaking over content
   while scrolling on phones (Deniz 2026-07-03). The base style.css overlay is
   kept, but: hidden means hidden (visibility), theme-aware panel colors, and
   the burger gets a z-index above the panel.
=========================================================================== */
@media (max-width: 880px) {
  .gold-header .nav__list {
    visibility: hidden;
    background: rgba(245, 242, 236, 0.97);
    -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
    z-index: 120;
  }
  .gold-header .nav__list.is-open { visibility: visible; }
  .gold-header .nav__list a { color: var(--ink); font-size: 16px; letter-spacing: 0.22em; opacity: 1; }
  .gold-header .nav__list a.is-active { color: var(--gold); }
  .gold-header.theme-dark .nav__list { background: rgba(20, 17, 14, 0.97); }
  .gold-header.theme-dark .nav__list a { color: #d6b269; }
  .gold-header .nav__burger { display: block; z-index: 121; }
  .gold-header .nav__burger span { background: var(--ink); }
}

/* ===========================================================================
   LAPTOP-WIDTH HEADER FIT (Deniz 2026-07-04): between ~960 and 1200px the
   full 8-link menu STAYS VISIBLE by compressing the brand (DC mark only) and
   the Listen pill (dot only). Below 960px the burger overlay takes over
   (raised from the base 880 so the row can never wrap and leak over content).
=========================================================================== */
@media (max-width: 1200px) {
  .gold-header .nav__brand-text { display: none; }
  .gold-header .listen-pill .label { display: none; }
  .gold-header .listen-pill { padding: 8px 12px; }
}
@media (max-width: 960px) {
  .gold-header .nav__list {
    position: fixed; inset: 0; margin: 0;
    background: rgba(245, 242, 236, 0.97);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    flex-direction: column; align-items: center; justify-content: center; gap: 30px;
    transform: translateY(-100%); transition: transform 0.5s ease;
    visibility: hidden; z-index: 120;
  }
  .gold-header .nav__list.is-open { transform: none; visibility: visible; }
  .gold-header .nav__list a { color: var(--ink); font-size: 16px; letter-spacing: 0.22em; opacity: 1; }
  .gold-header .nav__list a.is-active { color: var(--gold); }
  .gold-header.theme-dark .nav__list { background: rgba(20, 17, 14, 0.97); }
  .gold-header.theme-dark .nav__list a { color: #d6b269; }
  .gold-header .nav__burger { display: block; z-index: 121; }
  .gold-header .nav__burger span { background: var(--ink); }
}