/* Calypsion — shared navigation styles (header active state + slide-in side panel). Loaded after each page's own CSS. */

/* ---- header: current section marker ---- */
.nav-menu .nav-item.active > a { position: relative; }
.nav-menu .nav-item.active > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: #6FE3E3; }
header.solid .nav-menu .nav-item.active > a::after { background: #0E9C9C; }
.nav-menu .nav-item > a > span:first-child { white-space: nowrap; }

/* ---- side panel ---- */
html.nv-lock, html.nv-lock body { overflow: hidden; }
.overlay { background: rgba(4,12,18,.6); }
.overlay .panel.nv-panel { width: min(440px, 92vw); padding: 0; display: flex; flex-direction: column; overflow: hidden; color: #E6EEF6;
  background: radial-gradient(520px 320px at 100% 0%, rgba(14,156,156,.22), transparent 60%), linear-gradient(180deg, #0C2230 0%, #081A25 100%);
  box-shadow: -30px 0 80px rgba(0,0,0,.45); border-left: 1px solid rgba(111,227,227,.14); }
.nv-panel a { border: 0; padding: 0; font-size: inherit; color: inherit; display: inline; }

.nv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nv-panel .nv-brand { display: inline-flex; align-items: center; gap: 12px; }
.nv-logo { width: 40px; height: 40px; flex: none; background: url("images/logo-white-v2.png") center/contain no-repeat; }
.nv-word { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.nv-word b { font-size: 20px; font-weight: 700; letter-spacing: .22em; color: #fff; }
.nv-word small { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .34em; color: #6FE3E3; }
.nv-close { width: 42px; height: 42px; flex: none; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s; }
.nv-close:hover, .nv-close:focus-visible { background: rgba(111,227,227,.14); border-color: #6FE3E3; outline: none; transform: rotate(90deg); }

.nv-body { flex: 1; overflow-y: auto; padding: 18px 16px 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.nv-panel .nv-cta { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 14px; padding: 14px 18px; border-radius: 12px; background: #0E9C9C; color: #fff; font-weight: 600; font-size: 15.5px; transition: background .2s; }
.nv-panel .nv-cta:hover { background: #0A8585; color: #fff; }
.nv-cta i { font-size: 13px; transition: transform .2s; }
.nv-cta:hover i { transform: translateX(3px); }

.nv-grp { border-top: 1px solid rgba(255,255,255,.07); }
.nv-grp:first-of-type { border-top: 0; }
.nv-gh { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 8px; background: none; border: 0; cursor: pointer; color: #8FB0C4; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nv-gh:hover, .nv-gh:focus-visible { color: #fff; outline: none; }
.nv-gh i { font-size: 11px; transition: transform .25s; }
.nv-grp.open .nv-gh { color: #fff; }
.nv-grp.open .nv-gh i { transform: rotate(180deg); }
.nv-gb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.nv-grp.open .nv-gb { grid-template-rows: 1fr; }
.nv-gi { overflow: hidden; display: grid; gap: 2px; }
.nv-grp.open .nv-gi { padding-bottom: 10px; }

.nv-panel .nv-row { display: grid; grid-template-columns: 34px 1fr 14px; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 10px; color: #E6EEF6; transition: background .2s; }
.nv-panel .nv-row.rich { padding: 10px 8px; }
.nv-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; color: #6FE3E3; background: rgba(111,227,227,.08); border: 1px solid rgba(111,227,227,.14); transition: background .2s, color .2s; }
.nv-tx b { display: block; font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.25; }
.nv-tx small { display: block; margin-top: 2px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #7E9AAE; }
.nv-go { font-size: 11px; color: #4F6B7E; transition: transform .2s, color .2s; }
.nv-panel .nv-row:hover, .nv-panel .nv-row:focus-visible { background: rgba(255,255,255,.05); outline: none; }
.nv-row:hover .nv-go { color: #6FE3E3; transform: translateX(2px); }
.nv-panel .nv-row.current { background: rgba(14,156,156,.16); }
.nv-row.current .nv-ic { background: #0E9C9C; color: #fff; border-color: #0E9C9C; }
.nv-row.current .nv-go { color: #6FE3E3; }
.nv-panel .nv-more { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 11px 8px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #6FE3E3; }
.nv-panel .nv-more:hover { background: rgba(111,227,227,.08); color: #fff; }
.nv-more i { font-size: 12px; }

.nv-foot { display: grid; gap: 9px; padding: 18px 24px 22px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); font-size: 13.5px; color: #A9BCCD; }
.nv-panel .nv-foot a, .nv-foot > span { display: flex; align-items: center; gap: 10px; color: #CFE0EE; }
.nv-panel .nv-foot a:hover { color: #fff; }
.nv-foot i { width: 14px; text-align: center; color: #6FE3E3; font-size: 12px; }
.nv-social { display: flex; gap: 8px; margin-top: 6px; }
.nv-panel .nv-social a { width: 34px; height: 34px; border-radius: 9px; justify-content: center; background: rgba(255,255,255,.07); }
.nv-panel .nv-social a:hover { background: rgba(111,227,227,.16); }
.nv-social i { color: #E4F3F3; width: auto; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .nv-gb, .nv-close, .overlay .panel { transition: none; }
}

/* social links: hide any icon still pointing at "#", and the whole Follow column if none are set */
.socials a[href="#"], .nv-social a[href="#"] { display: none !important; }
.ft-col:has(.socials):not(:has(.socials a:not([href="#"]))) { display: none; }
.nv-social:not(:has(a:not([href="#"]))) { display: none; }