/* Header and footer of the marketing site (_nv_header.html, _nv_footer.html).
 * Loaded by nv_base.html and, through _nv_legacy_header.html, by the older
 * marketing pages, where .nv-chrome supplies the palette and the container the
 * header's breakpoint reads. Nothing here styles html or body. */

.nv-chrome {
  container-type: inline-size; font-family: 'Inter', system-ui, sans-serif;
  --nav-bg: rgba(6,7,11,.72); --text: #ececef; --text-2: rgba(236,236,239,.7); --text-3: rgba(236,236,239,.5);
  --accent: #d2cefd; --glass: linear-gradient(180deg,rgba(22,23,28,.96),rgba(9,9,11,.98));
  --glass-2: #1b1c21; --field: #121317; --border: rgba(255,255,255,.07); --border-2: rgba(255,255,255,.14);
  --shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
:root[data-theme="light"] .nv-chrome {
  --nav-bg: rgba(235,249,255,.72); --text: #15171c; --text-2: rgba(21,23,28,.74); --text-3: rgba(21,23,28,.58);
  --accent: #315fca; --glass: rgba(255,255,255,.55); --glass-2: rgba(255,255,255,.85); --field: rgba(255,255,255,.9);
  --border: rgba(21,23,28,.09); --border-2: rgba(21,23,28,.2); --shadow: 0 30px 80px rgba(21,40,70,.14);
}
.nv-chrome-head { position: sticky; top: 0; z-index: 50; }
.nv-chrome a { text-decoration: none; }
.nv-chrome [hidden] { display: none !important; }
.nv-chrome *, .nv-chrome *::before, .nv-chrome *::after { box-sizing: border-box; }

/* ---- header ---- */
/* Neumorphic controls lit from the top left. The current page's pill is the
   bright one, with its icon glowing; the others sit back, faint and
   translucent, until hovered. Labels are plain white (dark ink by day). */
[data-nv-header] {
  --neu-ink: #ffffff; --neu-ink-glow: 0 0 14px rgba(255,255,255,.3);
  --neu-icon: #b8adff; --neu-icon-glow: rgba(160,148,255,.6);
  --neu-face: linear-gradient(145deg, #16171d, #0c0d11);
  --neu-raise: 5px 5px 12px rgba(0,0,0,.72), -4px -4px 10px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.05);
  --neu-raise-h: 7px 7px 16px rgba(0,0,0,.78), -5px -5px 12px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.07);
  --neu-face-off: rgba(255,255,255,.025);
  --neu-raise-off: 3px 3px 8px rgba(0,0,0,.35), -2px -2px 6px rgba(255,255,255,.015), inset 0 0 0 1px rgba(255,255,255,.035);
  --neu-face-on: linear-gradient(145deg, #24252e, #14151b);
  --neu-raise-on: 6px 6px 14px rgba(0,0,0,.75), -4px -4px 12px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(184,173,255,.18), 0 0 24px rgba(150,138,255,.16);
  --neu-press: inset 4px 4px 9px rgba(0,0,0,.78), inset -3px -3px 8px rgba(255,255,255,.045);
  --neu-pressed-face: #0b0c10;
}
:root[data-theme="light"] [data-nv-header] {
  --neu-ink: #15171c; --neu-ink-glow: none;
  --neu-icon: #315fca; --neu-icon-glow: rgba(49,95,202,.45);
  --neu-face: linear-gradient(145deg, #f4fcff, #dbe9f0);
  --neu-raise: 5px 5px 12px rgba(118,148,172,.38), -5px -5px 12px rgba(255,255,255,.95);
  --neu-raise-h: 7px 7px 16px rgba(118,148,172,.45), -6px -6px 14px rgba(255,255,255,1);
  --neu-face-off: rgba(255,255,255,.3);
  --neu-raise-off: 3px 3px 8px rgba(118,148,172,.18), -3px -3px 8px rgba(255,255,255,.6);
  --neu-face-on: linear-gradient(145deg, #ffffff, #e6f1f7);
  --neu-raise-on: 6px 6px 14px rgba(118,148,172,.42), -6px -6px 14px rgba(255,255,255,1),
    0 0 0 1px rgba(49,95,202,.14), 0 0 20px rgba(49,95,202,.12);
  --neu-press: inset 4px 4px 9px rgba(118,148,172,.4), inset -4px -4px 9px rgba(255,255,255,.95);
  --neu-pressed-face: #e2eff6;
}
/* Scoped to the header so they outrank the pages' own `a` colours. */
[data-nv-header] .nv-headbar {
  max-width: 1600px; margin: 0 auto; padding: 18px clamp(20px,4.4cqi,64px);
  display: flex; align-items: center; gap: 24px;
}
[data-nv-header] .nv-navlinks { display: flex; gap: 12px; margin-left: 20px; }
[data-nv-header] :is(.nv-navlink, .nv-iconbtn, .nv-signin) {
  border: 0; background: var(--neu-face); box-shadow: var(--neu-raise); color: var(--neu-ink); cursor: pointer;
  transition: box-shadow .25s ease, background .25s ease, opacity .25s ease, transform .2s ease;
}
[data-nv-header] .nv-navlink {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 16px;
  font-size: 15.5px; font-weight: 500; white-space: nowrap;
  background: var(--neu-face-off); box-shadow: var(--neu-raise-off); opacity: .5;
}
[data-nv-header] .nv-navlink .ph { font-size: 19px; color: var(--neu-icon); transition: filter .25s ease; }
[data-nv-header] .nv-iconbtn {
  width: 50px; height: 50px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; font-size: 21px;
}
[data-nv-header] .nv-signin {
  display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 16px;
  font-size: 15.5px; font-weight: 600; white-space: nowrap;
}
[data-nv-header] :is(.nv-iconbtn, .nv-signin):hover { box-shadow: var(--neu-raise-h); transform: translateY(-1px); }
[data-nv-header] .nv-navlink:hover { opacity: .85; box-shadow: var(--neu-raise); transform: translateY(-1px); }
[data-nv-header] .nv-navlink[aria-current="page"] {
  opacity: 1; background: var(--neu-face-on); box-shadow: var(--neu-raise-on); text-shadow: var(--neu-ink-glow);
}
[data-nv-header] .nv-navlink[aria-current="page"] .ph { filter: drop-shadow(0 0 6px var(--neu-icon-glow)); }
[data-nv-header] :is(.nv-navlink, .nv-iconbtn, .nv-signin):active {
  background: var(--neu-pressed-face); box-shadow: var(--neu-press); transform: none;
}
[data-nv-header] :is(.nv-navlink, .nv-iconbtn, .nv-signin):focus-visible {
  opacity: 1; outline: 2px solid var(--neu-icon); outline-offset: 3px;
}
/* Below a full-width bar the icons step aside so the labels keep their size. */
@container (max-width: 1139.98px) {
  [data-nv-header] .nv-headbar { gap: 16px; }
  [data-nv-header] .nv-navlinks { gap: 8px; margin-left: 4px; }
  [data-nv-header] .nv-navlink { padding: 12px 16px; }
  [data-nv-header] .nv-navlink .ph { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-nv-header] :is(.nv-navlink, .nv-iconbtn, .nv-signin) { transition: none; }
  [data-nv-header] :is(.nv-navlink, .nv-iconbtn, .nv-signin):hover { transform: none; }
}

/* Sun in night mode (click for day), moon in day mode. */
.nv-when-day { display: none; }
:root[data-theme="light"] .nv-when-day { display: inline; }
:root[data-theme="light"] .nv-when-night { display: none; }

[data-nv-menu-toggle] .nv-when-open { display: none; }
[data-nv-menu-toggle][aria-expanded="true"] .nv-when-open { display: inline; }
[data-nv-menu-toggle][aria-expanded="true"] .nv-when-closed { display: none; }

/* The design switches to the menu button below 960px of page width, where
   the five pills stop fitting beside the logo. */
.nv-narrow { display: none !important; }
@container (max-width: 959.98px) {
  .nv-wide { display: none !important; }
  .nv-narrow { display: grid !important; }
}
@container (min-width: 960px) {
  [data-nv-menu] { display: none !important; }
}

/* ---- signed-in account menu ---- */
.nv-account { position: relative; }
.nv-avatar {
  width: 50px; height: 50px; border-radius: 50%; padding: 0; overflow: hidden;
  border: 1px solid var(--border-2); background: var(--glass-2); color: var(--text);
  display: grid; place-items: center; cursor: pointer; font-size: 15px; font-weight: 600;
}
.nv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-avatar:hover { border-color: var(--accent); }
.nv-account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 14px; border: 1px solid var(--border-2); background: var(--glass-2);
  box-shadow: var(--shadow);
}
.nv-account-menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
  color: var(--text); font-size: 14px;
}
.nv-account-menu a:hover { background: var(--field); color: var(--text); }
.nv-account-menu .nv-account-email { font-size: 12.5px; color: var(--text-3); }
.nv-account-menu .nv-account-signout { flex-direction: row; align-items: center; gap: 8px; color: var(--text-2); }

/* ---- footer ---- */
.nv-footlink:hover { color: var(--text) !important; }

/* ---- logo: the badge mark and the chrome NOVPHΛ wordmark ---- */
/* Lit like the wordmark beside it; by day it turns to the same dark steel. */
.nv-logo-mark { display: grid; place-items: center; flex: none; line-height: 0; color: #fff; }
.nv-logo-mark svg { display: block; width: 82%; height: 82%; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(180,200,255,.35)); }
:root[data-theme="light"] .nv-logo-mark { color: #1d2129; }
:root[data-theme="light"] .nv-logo-mark svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)); }
/* The large hero orbs: the live 3D wireframe orb. */
.nv-orb-mark { display: grid; place-items: center; flex: none; line-height: 0; overflow: visible; }
.nv-orb-mark img, .nv-orb-mark canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.nv-orb-mark canvas {
  filter: drop-shadow(0 0 8px rgba(143,123,255,.07)) drop-shadow(0 0 18px rgba(74,168,255,.035)) brightness(.82);
}
.nv-wordmark {
  font-family: 'Sora', system-ui, -apple-system, sans-serif; font-weight: 500; text-transform: uppercase;
  line-height: 1; white-space: nowrap; letter-spacing: .55em; margin-right: -.55em;
  background: linear-gradient(179deg, #ffffff 0%, #f3f5f9 15%, #d2d8e2 32%, #a7aebd 46%, #8e95a5 55%,
    #aab2c1 68%, #d8dde7 83%, #b3bac8 94%, #939aa9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(180,200,255,.35));
}
/* The chrome is light-on-dark; by day it turns to dark steel so it stays legible. */
:root[data-theme="light"] .nv-wordmark {
  background: linear-gradient(179deg, #5a6273 0%, #3a404c 35%, #15171c 55%, #2f3540 78%, #4b5262 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
/* A large orb keeps the design's flat sphere as a fallback, shown only when
   the 3D orb cannot start (no WebGL, or three.js failed to load). */
.nv-orb-fallback { visibility: hidden; }
.nv-orb-fallback.is-shown { visibility: visible; }