/*!
 * Nodalbank — site header
 *
 * Geometry, spacing and scroll behaviour are measured from the reference
 * layout's own stylesheets. Brand values (logo, hue) are Nodalbank's.
 *
 * Reference          Nodalbank
 * -----------------  ----------------------------------
 * signup  #0a0d11    navy  #2a3962   (invester theme)
 * signup dark #3ecec6  gold #cba352  (GeneralSetting.base_color)
 * accent  indigo-500  gold #cba352
 *
 * The whole site is dark, so the bar is dark at every scroll position — it
 * never inverts to a light surface. One state is toggled on <nav> by
 * nodal-header.js:
 *   .is-top     page is at the very top — fully transparent
 *   (default)   scrolled — floating glass card
 * The bar is pinned: it does not lift out of view on scroll down.
 */

.nx-nav {
    /* Reference scale is literal pixels: p-8 = 8px, rounded-12 = 12px. */
    --nxh-gap: 8px;
    --nxh-radius: 12px;
    --nxh-row-x: 16px;
    --nxh-row-y: 12px;
    --nxh-logo-h: 1.375rem;

    --nxh-surface: hsla(220, 40%, 6%, 0.6);
    --nxh-border: hsla(30, 10%, 50%, 0.14);
    --nxh-ink: #ffffff;
    --nxh-ink-hover: #cdd7df;
    --nxh-ink-dim: #b2bec9;
    --nxh-accent: #cba352;
    --nxh-signup-bg: var(--nxh-accent);
    --nxh-signup-bg-hover: #dcbb77;
    --nxh-signup-ink: #10141f;
    --nxh-panel-hover: rgba(255, 255, 255, 0.06);
    --nxh-rule: rgba(255, 255, 255, 0.1);

    --nxh-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --nxh-d1: 0.14s;
    --nxh-d2: 0.24s;
    --nxh-d3: 0.4s;

    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    width: 100%;
    padding: var(--nxh-gap);
    padding-bottom: 24px;
    pointer-events: none;
    transition: transform var(--nxh-d3) var(--nxh-ease),
                opacity var(--nxh-d3) var(--nxh-ease);
}

@media (min-width: 768px) {
    .nx-nav {
        --nxh-row-x: 24px;
        --nxh-row-y: 16px;
        --nxh-logo-h: 28px;
        padding-bottom: var(--nxh-gap);
    }
}

/* -- Masked blur strip sitting behind the bar ---------------------------- */

.nx-nav__scrim {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    height: 40px;
    width: 100%;
    background: var(--nxh-surface);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(#000 30%, #fff0 100%);
    mask-image: linear-gradient(#000 30%, #fff0 100%);
    transition: opacity var(--nxh-d1) ease;
}

.nx-nav.is-top .nx-nav__scrim { opacity: 0; }

/* -- The floating card --------------------------------------------------- */

.nx-nav__card {
    position: relative;
    z-index: 20;
    width: 100%;
    pointer-events: auto;
    border-radius: var(--nxh-radius);
    border: 1px solid var(--nxh-border);
    background: var(--nxh-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color var(--nxh-d1) ease,
                border-color var(--nxh-d1) ease,
                backdrop-filter var(--nxh-d1) ease;
}

/* At the very top the card dissolves entirely. */
.nx-nav.is-top .nx-nav__card {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
}

/* While a drawer is open the card is always solid, whatever the scroll. */
.nx-nav.is-open .nx-nav__card {
    background: var(--nxh-surface);
    border-color: var(--nxh-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* -- Top row -------------------------------------------------------------- */

.nx-nav__row {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nxh-row-y) var(--nxh-row-x);
}

.nx-nav__logo {
    position: relative;
    z-index: 20;
    display: inline-flex;
    align-items: center;
}

.nx-nav__logo img {
    height: var(--nxh-logo-h);
    width: auto;
    display: block;
    transition: opacity var(--nxh-d1) ease;
}

/* Two wordmarks are shipped; the bar is dark throughout, so only the
   light-on-dark mark is ever shown. */
.nx-nav__logo .nx-nav__logo--onlight { display: none; }
.nx-nav__logo .nx-nav__logo--ondark { display: block; }

/* -- Centred menu, laid over the row ------------------------------------- */

.nx-nav__menu {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    display: none;
    width: 100%;
    align-items: center;
    margin: 0;
    padding: 0 0 0 12rem;
    list-style: none;
}

@media (min-width: 768px) {
    .nx-nav__menu { display: flex; }
}

@media (min-width: 1024px) {
    .nx-nav__menu { justify-content: center; padding-left: 0; }
}

.nx-nav__trigger {
    display: block;
    padding: 24px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nxh-ink);
    cursor: default;
    transition: color var(--nxh-d1) ease;
}

.nx-nav__trigger:hover,
.nx-nav__trigger[aria-expanded='true'] { color: var(--nxh-ink-hover); }

.nx-nav__trigger:focus-visible {
    outline: 2px solid var(--nxh-accent);
    outline-offset: -4px;
    border-radius: 4px;
}

/* -- Right-hand controls -------------------------------------------------- */

.nx-nav__actions {
    position: relative;
    z-index: 20;
    display: flex;
    gap: 24px;
}

.nx-nav__auth {
    display: none;
    align-items: center;
}

@media (min-width: 768px) {
    .nx-nav__auth { display: flex; }
}

.nx-nav__login {
    padding: 8px 24px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nxh-ink);
    text-decoration: none;
    transition: color var(--nxh-d1) ease;
}

.nx-nav__login:hover { color: var(--nxh-ink-hover); text-decoration: none; }

/* Signup button: left-aligned label, 6px radius, flat 12/24 padding. */
.nx-nav__signup {
    display: inline-flex;
    text-align: left;
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    background: var(--nxh-signup-bg);
    color: var(--nxh-signup-ink);
    transition: background-color var(--nxh-d1) ease, color var(--nxh-d1) ease;
}

.nx-nav__signup:hover {
    background: var(--nxh-signup-bg-hover);
    color: var(--nxh-signup-ink);
    text-decoration: none;
}

/* -- Mobile cluster ------------------------------------------------------- */

.nx-nav__mobile {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (min-width: 768px) {
    .nx-nav__mobile { display: none; }
}

.nx-nav__burger {
    display: flex;
    align-items: center;
    margin: -12px -15px -12px -12px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: var(--nxh-ink);
    cursor: pointer;
}

.nx-nav__burger svg { width: 24px; height: 24px; }

/* Two bars fold into a cross while the panel is open. The rects sit at y=8
   and y=16 in a 24-unit box, so each travels 4 units to meet in the middle. */
.nx-nav__burger svg rect {
    transform-origin: center;
    transition: transform var(--nxh-d2) var(--nxh-ease);
}

.nx-nav.is-mobile-open .nx-nav__burger svg rect:first-of-type {
    transform: translateY(4px) rotate(45deg);
}

.nx-nav.is-mobile-open .nx-nav__burger svg rect:last-of-type {
    transform: translateY(-4px) rotate(-45deg);
}

/* ==========================================================================
   Drawer
   ========================================================================== */

.nx-nav__drawer {
    position: relative;
    overflow: hidden;
    height: 0;
    transition: height var(--nxh-d3) var(--nxh-ease);
}

.nx-nav__drawer-rule {
    border-top: 1px solid var(--nxh-rule);
    opacity: 0;
    transition: opacity var(--nxh-d1) ease;
}

.nx-nav.is-open .nx-nav__drawer-rule { opacity: 1; }

.nx-nav__panel {
    position: absolute;
    inset: 0 0 auto 0;
    padding-top: 1px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nxh-d2) ease;
}

.nx-nav__panel[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
}

.nx-nav__panel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: var(--nxh-row-x);
}

/* Left promo column */
.nx-nav__promo {
    grid-column: span 1;
    padding: 40px 24px 40px 0;
}

.nx-nav__promo-title,
.nx-nav__group-title {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--nxh-ink);
}

.nx-nav__group-title {
    padding-left: 16px;
    color: var(--nxh-accent);
}

.nx-nav__promo-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nxh-ink-dim);
}

.nx-nav__promo .nx-nav__cta {
    display: inline-flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 24px;
    text-align: left;
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    background: var(--nxh-signup-bg);
    color: var(--nxh-signup-ink);
    transition: background-color var(--nxh-d1) ease;
}

.nx-nav__promo .nx-nav__cta:hover {
    background: var(--nxh-signup-bg-hover);
    color: var(--nxh-signup-ink);
    text-decoration: none;
}

.nx-nav__cta svg { width: 24px; height: 24px; flex: none; }

/* Right link grid */
.nx-nav__links {
    grid-column: span 3;
    border-left: 1px solid var(--nxh-rule);
    padding: 40px 0 40px 24px;
}

/* A drawer declares how many columns it actually has, so a two-column panel
   fills the width instead of leaving a third of it empty. */
.nx-nav__cols {
    display: grid;
    grid-template-columns: repeat(var(--nxh-cols, 3), minmax(0, 1fr));
    gap: 24px;
}

.nx-nav__cols ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nx-nav__item {
    display: flex;
    border-radius: 8px;
    padding: 16px;
    text-decoration: none;
    transition: background-color var(--nxh-d2) ease;
}

@media (min-width: 1024px) {
    .nx-nav__item { padding-right: 24px; }
}

.nx-nav__item:hover {
    background: var(--nxh-panel-hover);
    text-decoration: none;
}

.nx-nav__item:focus-visible {
    outline: 2px solid var(--nxh-accent);
    outline-offset: -2px;
}

.nx-nav__item svg {
    width: 24px;
    height: 24px;
    flex: none;
    margin-right: 16px;
    display: none;
    color: var(--nxh-ink);
}

@media (min-width: 1024px) {
    .nx-nav__item svg { display: block; }
}

.nx-nav__item-title {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nxh-ink);
}

.nx-nav__item-desc {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nxh-ink-dim);
    text-wrap: balance;
}

/* Staggered entrance, driven by --anim-delay set per element. */
.nx-nav__panel[data-open='true'] [style*='--anim-delay'] {
    animation: nx-nav-in 0.36s var(--nxh-ease) both;
    animation-delay: var(--anim-delay, 0ms);
}

@keyframes nx-nav-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.nx-nav__mobile-panel {
    display: none;
    padding: 8px var(--nxh-row-x) 24px;
    /* The panel is the only scroll container in the bar. dvh rather than vh so
       the mobile browser chrome collapsing does not clip the last row. */
    max-height: calc(100dvh - 132px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@supports not (height: 100dvh) {
    .nx-nav__mobile-panel { max-height: calc(100vh - 132px); }
}

.nx-nav.is-mobile-open .nx-nav__mobile-panel { display: block; }

/* The list reset lives on `.nx-nav__cols ul`, which the mobile panel is not
   inside — without this the rows inherit the browser's bullets and 40px
   indent, and the whole panel reads as broken. */
.nx-nav__mobile-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Groups need air between them; a bare list runs straight into the next
   heading. */
.nx-nav__mobile-panel ul + .nx-nav__group-title {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--nxh-rule);
}

.nx-nav__mobile-panel .nx-nav__group-title {
    padding-left: 0;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nx-nav__mobile-panel .nx-nav__item { padding-inline: 0; }

/* A plain top-level entry has no description, so it should not carry the
   two-line height the product rows need. */
.nx-nav__mobile-panel .nx-nav__item-title { margin-bottom: 0; font-size: 17px; }

.nx-nav__mobile-panel .nx-nav__item-desc { margin-top: 4px; }

.nx-nav__mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--nxh-rule);
}

.nx-nav__mobile-auth .nx-nav__signup,
.nx-nav__mobile-auth .nx-nav__login {
    justify-content: center;
    text-align: center;
}

/* Below 768px the drawer triggers are hidden, so the desktop panels can never
   be opened — but they still lay out ~27 links behind the clipped drawer on
   every phone load. Take them out of the layout entirely. */
@media (max-width: 767px) {
    .nx-nav__drawer { display: none; }
}

/* The wordmark is the tap target for "go home"; at 22px tall it was well
   under the 44px minimum. Desktop rows are 90px tall, so this changes
   nothing there. */
.nx-nav__logo {
    min-height: 44px;
}

/* Push page content below the fixed bar. */
.nx-nav-offset { height: 62px; }

@media (min-width: 768px) {
    .nx-nav-offset { height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-nav,
    .nx-nav *,
    .nx-nav *::before,
    .nx-nav *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* -- Plain link in the top menu -------------------------------------------
   Same box as a drawer trigger so the row stays on one baseline. */
.nx-nav__trigger--link {
    text-decoration: none;
    cursor: pointer;
}

.nx-nav__trigger--link:hover { color: var(--nxh-ink-hover); text-decoration: none; }

/* -- Products that are not live yet --------------------------------------- */
.nx-nav__item--soon {
    cursor: default;
    opacity: 0.72;
}

.nx-nav__item--soon:hover { background: transparent; }

.nx-nav__soon {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(203, 163, 82, 0.16);
    color: var(--nxh-accent);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}