/*
 * The SOPHIA XT site header, shared by every Safe-Desk page so desk.sophiaxt.com
 * carries the same logo, wordmark, links and menu as sophiaxt.com.
 * Fonts are the main site's own: Syncopate for the wordmark (Apache 2.0),
 * Space Grotesk for links and Orbitron for the button (SIL OFL 1.1);
 * licences in fonts/.
 *
 * @author Thomas G. and Sophia, SOPHIA XT LLC (sophiaxt.com)
 */

/* Fonts, same files as sophiaxt.com. */
@font-face { font-family: "Syncopate"; font-weight: 700; font-display: swap; src: url("/fonts/wordmark.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url("/fonts/nav.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 400 900; font-display: swap; src: url("/fonts/button.woff2") format("woff2"); }

/* The bar. */
.sxhead { position: sticky; top: 0; z-index: 50; background: rgba(5,11,19,0.95); border-bottom: 1px solid rgba(77,129,164,0.2); box-shadow: 0 4px 30px rgba(0,0,0,0.3); }
.sxhead-in { max-width: 80rem; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Logo and wordmark. */
.sx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sx-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.sx-logo { width: 36px; height: 36px; filter: drop-shadow(0 0 12px rgba(0,212,255,0.3)); }
.sx-core { transform-origin: 50px 52px; animation: sx-pulse 2.5s ease-in-out infinite; }
@keyframes sx-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.15); opacity: 1; } }
.sx-word { font: 700 18px/1 "Syncopate", "Orbitron", sans-serif; letter-spacing: 0.05em; white-space: nowrap;
  background: linear-gradient(90deg, #60f0ff, #1598ff, #2c7dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Links. */
.sx-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sx-nav a, .sx-right a.sx-link, .sx-menu summary { font: 500 14px "Space Grotesk", sans-serif; color: #91aebe; text-decoration: none; padding: 8px 10px; border-radius: 8px; white-space: nowrap; transition: color .2s, background .2s; }
.sx-nav a:hover, .sx-right a.sx-link:hover, .sx-menu summary:hover { color: #fff; background: rgba(255,255,255,0.05); }
.sx-nav a.on { color: #fff; background: rgba(255,255,255,0.1); }
.sx-nav a.live { color: #6ee7b7; display: inline-flex; align-items: center; gap: 6px; }
.sx-nav a.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: sx-blink 1.6s ease-in-out infinite; }
@keyframes sx-blink { 50% { opacity: .35; } }
.sx-right { display: flex; align-items: center; gap: 6px; }
.sx-cta { font: 700 14px "Orbitron", sans-serif; letter-spacing: 0.05em; color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 8px; white-space: nowrap; background: linear-gradient(135deg, #00d4ff, #0066ff); transition: box-shadow .2s; }
.sx-cta:hover { box-shadow: 0 0 25px rgba(0,212,255,0.5); }

/* Menu: a native disclosure, so it works without scripts. */
.sx-menu { position: relative; }
.sx-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sx-menu summary::-webkit-details-marker { display: none; }
.sx-menu summary::before { content: ""; width: 16px; height: 12px; background:
  linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
  linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
  linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.sx-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(560px, calc(100vw - 32px)); background: #050b13; border: 1px solid rgba(0,212,255,0.25); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.sx-menu-panel h4 { margin: 0 0 8px; font: 500 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; color: #8fe9ff; }
.sx-menu-panel a { display: block; padding: 7px 0; font: 500 15px "Space Grotesk", sans-serif; color: #dce6ee; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sx-menu-panel a:hover { color: #5ee6ff; }

/* Narrower screens: links move into the menu, as on sophiaxt.com. */
@media (max-width: 1100px) { .sx-nav { display: none; } }
@media (max-width: 560px) {
  .sxhead-in { padding: 0 16px; }
  .sx-word { font-size: 14px; }
  .sx-cta { display: none; }
  .sx-menu-panel { grid-template-columns: 1fr; right: -8px; }
}
@media (prefers-reduced-motion: reduce) { .sx-core, .sx-nav a.live::before { animation: none; } }