/* ==========================================================================
   Callix nav — Figma 878:4933 · 1920 × 72 · 1:1 at 1920
   --------------------------------------------------------------------------
   The header, its two dropdowns and the mobile sheet are styled here; their
   behaviour is in menu.js and nav.js.

   Figma: frame h-72, px-351 py-8, items-center, justify-between with three
   groups — lockup 85.16×24 · links 342×32 · buttons 220×32. Under the standing
   sizing the gutter is 40px on the 1360 container (same column as the hero), so the
   lockup sits on the hero H1's left edge exactly as it does in Figma (x=351).
   ========================================================================== */

.cx-nav {
  background: transparent;          /* Figma nav has no fill; page ground shows through */
}
/* the bar overlays the page rather than scrolling away with it, which is the whole of its behaviour */
.cx-nav { position: sticky; top: 0; z-index: 10; }

/* the bar */
.cx-nav__bar {
  display: flex;
  height: 72px;
  box-sizing: border-box;
  padding: 8px 40px !important;     /* py-8; the previous build's py-4 / lg:py-8.5 made it 109px */
  gap: 0 !important;
  justify-content: space-between;   /* Figma: justify-between, not an ml-auto push */
  align-items: center;
}

/* lockup — Figma 878:4934 */
.cx-nav__logo { display: block; width: 85.157px; height: 24px; }

/* links group — Figma 891:11445: flex gap-8, no fill, no border, no padding. The previous build's ul
   carried a rgba(255,255,255,.85) pill + border + px-2.25, and an x-shift on scroll that Figma has no
   state for; the pill returns on scroll below, the x-shift does not. */
.cx-nav__links {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px;
  transform: none !important;        /* neutralise the scroll x-shift (undesigned) */
  font-size: 14px;                   /* 0.875rem */
}
.cx-nav__item { display: flex; }
/* each item — Figma 891:11441 / 11450 / 11455: h-32, px-16 py-8, gap-8, r-8, Inter 14/24 500 −0.18 */
.cx-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 8px 16px !important;
  border-radius: 8px;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.18px;
  color: var(--cx-ink);
  white-space: nowrap;
  background: transparent;
  border: 0;
}
.cx-nav__chev {
  width: 16px; height: 16px; margin: 0; flex: 0 0 16px;
}

/* buttons group — Figma 878:4938: gap-8 */
.cx-nav__actions {
  display: flex;
  gap: 8px !important;
  margin: 0;
  padding: 0;
}
.cx-nav__actions > li { margin: 0; }
/* both: h-32, px-24 py-8, r-8, Inter 14/24 500 −0.18 */
.cx-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 8px 24px !important;
  border-radius: 8px !important;
  border: 0 !important;
  font-family: var(--cx-sans);
  font-weight: 500;
  font-size: 14px !important;
  line-height: 24px;
  letter-spacing: -0.18px;
  white-space: nowrap;
}
/* "Log in" — Figma 878:4939: bg #dcdcdb, ink #262626 */
.cx-nav__btn.login {
  background: var(--cx-btn-2) !important;
  color: var(--cx-ink) !important;
}
/* "Get a demo" — Figma 878:4941: bg #262626, ink #fafaf9 */
.cx-nav__btn.cta {
  background: var(--cx-btn) !important;
  color: var(--cx-btn-ink) !important;
}

/* hover / focus: undesigned in Figma — a restrained, token-only treatment so
   the states exist. Replace when the designer specifies them. */
.cx-nav__link:hover { background: var(--cx-subtle); }
.cx-nav__link:focus-visible,
.cx-nav__btn:focus-visible,
.cx-nav__home:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }

/* scrolled — the link container returns (request 2026-09-15: "on scroll, add the container to the links
   so they stay visible"). site/callix/nav.js sets `is-scrolled` past 65px of scroll, 130 above 1024.
   The values are the ones the request pointed at; Figma has no scrolled state. */
.cx-nav__links {
  transition: background-color .25s ease, border-color .25s ease, padding .25s ease;
}
.cx-nav.is-scrolled .cx-nav__links {
  padding: 0 9px !important;                                   /* px-2.25 */
  background: linear-gradient(#cecece4d 0% 100%), #ffffffd9 !important;
  background-blend-mode: plus-darker, normal;
  border: 0.5px solid #cecece38 !important;
}

/* bg-aware (request 2026-09-15): over a dark host (dark features, FAQ, CTA, footer, band — site/callix/nav.js)
   the lockup and the primary CTA invert to the #fafaf9 token. brightness(0) invert(.98) maps the #262626
   lockup export to #fafafa without a second asset. */
.cx-nav__logo,
.cx-nav__btn.cta { transition: filter .2s ease, background-color .2s ease, color .2s ease; }
html.cx-nav-dark .cx-nav .cx-nav__logo { filter: brightness(0) invert(0.98); }
/* pass 28 — the product pages open on a dark hero with the nav sitting ON it (Figma 937:11639 / 898:11702),
   so the menu links and "Log in" invert too. On / this only shows once the page is scrolled over a dark
   section, where the scrolled pill already sits behind the links. */
html.cx-nav-dark .cx-nav__link { color: var(--cx-inverse); }
html.cx-nav-dark .cx-nav:not(.is-scrolled) .cx-nav__link:hover { background: rgba(250, 250, 249, 0.08); }
html.cx-nav-dark .cx-nav__btn.login {
  background: rgba(220, 220, 219, 0.11) !important; color: var(--cx-inverse) !important;   /* 937:11655 */
}
/* the scrolled pill is a light plate: over a dark host the links go back to ink so they stay readable */
html.cx-nav-dark .cx-nav.is-scrolled .cx-nav__link { color: var(--cx-ink); }
html.cx-nav-dark .cx-nav__btn.cta {
  background: var(--cx-inverse) !important;
  color: var(--cx-ink) !important;
}

/* floating CTA pill (request 2026-09-16) — the booking link wears the primary button's colour pair and
   inverts over the dark hosts, the way the header's lockup and CTA do. It replaced a translucent
   announcement bar that carried a white icon chip and a dismiss button; both are gone, so the padding is
   rebalanced: tight on the mark, open on the arrow. `cx-pill-dark` is set by site/callix/nav.js from what
   sits under the PILL, not under the header. */
.cx-pill__box {
  background: var(--cx-btn);
  color: var(--cx-btn-ink);
  gap: 10px;
  padding: 10px 20px 10px 12px;
  box-shadow: 0 8px 24px rgba(38, 38, 38, 0.18), inset 0 0 0 1px rgba(250, 250, 249, 0.08);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cx-pill__link { gap: 10px; }
.cx-pill__icon {      /* the white chip goes; the mark sits on the pill */
  width: 24px; height: 24px; border-radius: 0; background: transparent; color: inherit;
}
.cx-pill__mark {
  width: 100%; height: 100%;
  filter: invert(1);                                          /* dark pill → white square, dark waveform */
  transition: filter .2s ease;
}
.cx-pill__text { font-weight: 500; letter-spacing: -0.18px; }

html.cx-pill-dark .cx-pill__box {
  background: var(--cx-inverse);
  color: var(--cx-ink);
  box-shadow: 0 8px 24px rgba(38, 38, 38, 0.24), inset 0 0 0 1px rgba(38, 38, 38, 0.08);
}
html.cx-pill-dark .cx-pill__mark { filter: none; }
/* while the booking calendar is open (site/callix/cal.js) the pill gets out of its own way */
html.cx-cal-open .cx-pill { opacity: 0; pointer-events: none; transition: opacity .15s ease; }

/* ==========================================================================
   The rest of the header: the hamburger, the mobile sheet and the floating pill.
   ========================================================================== */

/* the hamburger — 44 tall, which is the tap target the mobile pass asked for, and the same colour pair,
   radius and weight as the "Get a demo" button it sits beside (decision 2026-09-17). */
.cx-nav__burger {
  display: none;
  align-items: center; justify-content: center;
  height: 44px; padding: 8px 14px; margin-right: -4px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--cx-btn); color: var(--cx-btn-ink);
  font-family: var(--cx-sans); font-weight: 500; font-size: 14px; line-height: 24px; letter-spacing: -0.18px;
}
.cx-nav__burger:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }
html.cx-nav-dark .cx-nav__burger { background: var(--cx-inverse); color: var(--cx-ink); }

@media (max-width: 1023px) {
  .cx-nav__links, .cx-nav__actions { display: none; }
  .cx-nav__burger { display: inline-flex; }
  /* the wordmark gets a 44 target without moving the mark itself */
  .cx-nav__home { padding: 10px 8px 10px 0; margin: -10px -8px -10px 0; }
  /* transparent by design at 1920; below 1024 the bar overlaps every section while sticky, so once
     scrolled it takes a translucent ground */
  .cx-nav.is-scrolled { background: rgba(250, 250, 249, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s ease; }
  html.cx-nav-dark .cx-nav.is-scrolled { background: rgba(38, 38, 38, 0.86); }
}

/* ---- the mobile sheet. It lives in the document and is hidden, so it needs no framework to exist —
        only `hidden` off and a class on <html> to lock the scroll. ---------------------------------- */
.cx-sheet {
  position: fixed; inset: 72px 0 0; z-index: 9;
  display: flex; flex-direction: column;
  background: var(--cx-page);
  overflow-y: auto; overscroll-behavior: contain;
}
.cx-sheet[hidden] { display: none; }
html.cx-sheet-open { overflow: hidden; }
html.cx-nav-dark .cx-sheet { background: var(--cx-dark); color: var(--cx-inverse); }

.cx-sheet__panel { display: flex; flex-direction: column; gap: 32px; padding: 24px 20px 40px; }
.cx-sheet__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cx-sheet__item { border-bottom: 1px solid var(--cx-line); }
html.cx-nav-dark .cx-sheet__item { border-bottom-color: var(--cx-line-dark-2); }

.cx-sheet__trigger, .cx-sheet__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 56px; padding: 16px 0; border: 0; background: transparent;
  font-family: var(--cx-sans); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.18px;
  color: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.cx-sheet__trigger .cx-nav__chev { transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.cx-sheet__trigger[aria-expanded="true"] .cx-nav__chev { transform: rotate(180deg); }
.cx-sheet__trigger:focus-visible, .cx-sheet__link:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* a group's links, revealed under its trigger — the same grid-rows collapse the FAQ uses */
.cx-sheet__group { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.cx-sheet__item.is-open .cx-sheet__group { grid-template-rows: 1fr; }
.cx-sheet__group > div { min-height: 0; overflow: hidden; }
.cx-sheet__sub { margin: 0; padding: 0 0 12px; list-style: none; display: flex; flex-direction: column; }
.cx-sheet__sub a {
  display: block; padding: 12px 0 12px 16px; text-decoration: none; color: inherit; opacity: 0.7;
  font-size: 16px; line-height: 24px;
}
.cx-sheet__actions { display: flex; flex-direction: column; gap: 12px; }
.cx-sheet__actions .cx-nav__btn { height: 48px; width: 100%; }

@media (min-width: 1024px) { .cx-sheet { display: none !important; } }

/* the pill's host: fixed 24 from the bottom, centred across the viewport, above everything, and the
   link a flex row of mark, label, arrow. */
.cx-pill.is-gone { display: none; }   /* the footer has arrived — see site/callix/nav.js */
.cx-pill { position: fixed; left: 0; bottom: 24px; z-index: 50; display: flex; justify-content: center; width: 100%; pointer-events: none; }
.cx-pill__box { pointer-events: auto; display: flex; border-radius: 12px; }
.cx-pill__link { display: flex; align-items: center; text-decoration: none; color: inherit; }
.cx-pill__text { font-family: var(--cx-sans); font-size: 16px; line-height: 24px; font-weight: 500;
                 letter-spacing: -0.18px; }   /* 24 is the scale's leading; the pill's height comes
                                                 from the 24px mark either way, so nothing moves */   /* 1.3, not a fixed 21: the label steps to 14px on a
                                                 phone and a fixed line box shifted the baseline 1px */
.cx-pill__arrow { display: flex; width: 20px; height: 20px; flex: none; }
.cx-pill__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }