/* ──────────────────────────────────────────────────────────────────
   Liquid-glass site header — auto theme switch (dark vs. light bg)
   #siteHeader[data-theme="dark"]  → over a dark backdrop  → white text
   #siteHeader[data-theme="light"] → over a light backdrop → ink text
   The data-theme attribute is set by header-theme.js on scroll/resize.
   ────────────────────────────────────────────────────────────────── */

#siteHeader {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border-bottom: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 24px rgba(0,0,0,0.08);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#siteHeader[data-theme="light"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  border-bottom-color: rgba(53,53,53,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 24px rgba(0,0,0,0.05);
}

/* Nav links — default = dark theme = light text.
   !important is needed because the rendered pages baked an inline
   `style="color: rgb(68, 68, 68);"` onto the nav anchors, and inline styles
   would otherwise win the cascade. */
#siteHeader nav a            { color: rgba(255,255,255,0.78) !important; transition: color .25s ease; }
#siteHeader nav a:hover      { color: #ffffff !important; }
#siteHeader[data-theme="light"] nav a       { color: rgba(53,53,53,0.65) !important; }
#siteHeader[data-theme="light"] nav a:hover { color: #353535 !important; }

/* Active link stays gold in both themes */
#siteHeader nav a.text-gold,
#siteHeader nav a.text-primary { color: #efa710 !important; }

/* Hamburger bars */
#siteHeader #mb1, #siteHeader #mb2, #siteHeader #mb3 {
  background-color: #ffffff !important;
  transition: background-color .25s ease;
}
#siteHeader[data-theme="light"] #mb1,
#siteHeader[data-theme="light"] #mb2,
#siteHeader[data-theme="light"] #mb3 { background-color: #353535 !important; }
#siteHeader button#menuBtn:hover { background-color: rgba(255,255,255,0.15); }
#siteHeader[data-theme="light"] button#menuBtn:hover { background-color: rgba(53,53,53,0.06); }

/* Logo crossfade — mark each variant with .logo-white / .logo-dark */
#siteHeader .logo-white { display: block; }
#siteHeader .logo-dark  { display: none;  }
#siteHeader[data-theme="light"] .logo-white { display: none;  }
#siteHeader[data-theme="light"] .logo-dark  { display: block; }