/* Site-wide mega header.
 *
 * Shipped as one shared file (/site-header.css) that every page links, so the
 * bytes are paid for once and cached across the whole site.
 *
 * EVERY selector is prefixed .bmh- and every custom property --bmh-*. The 260
 * pages this lands on were each written standalone and between them already
 * define .header, .nav, .btn, --green, --purple and more. Without the prefix the
 * header would inherit whichever page it happened to be on and look different on
 * every one. Nothing here selects a bare element outside .bmh-root either, for
 * the same reason.
 *
 * Tokens mirror public/home/styles.css so the header reads as the same product
 * as the homepage. Change them in both places or the site stops matching.
 */

/* 175 of the pre-rendered pages set `overflow-x: hidden` on html or body to tame
 * a wide hero. That turns the element into a scroll container, and a scroll
 * container is exactly what stops `position: sticky` sticking — the header would
 * scroll away on two thirds of the site.
 *
 * `clip` does the same visual job without creating that scroll container, so
 * sticky keeps working. Browsers that predate `overflow: clip` simply drop this
 * declaration and keep the page's own `hidden`, which is today's behaviour — so
 * the worst case is a header that scrolls, never a broken layout. */
html:has(.bmh-root),
html:has(.bmh-root) body {
  overflow-x: clip;
}

.bmh-root {
  --bmh-bg: #ffffff;
  --bmh-panel: #f5f5f7;
  --bmh-border: rgb(0 0 0 / 10%);
  --bmh-text: #141416;
  --bmh-muted: #55555f;
  --bmh-subtle: #86868f;
  --bmh-purple: #b15af8;
  --bmh-orange: #ff8951;
  --bmh-grad: linear-gradient(104deg, #b15af8 12%, #ff8951 94%);
  --bmh-purple-dim: rgb(177 90 248 / 10%);
  --bmh-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bmh-shell: 1300px;
  --bmh-gutter: clamp(1rem, 4vw, 2.5rem);
  --bmh-h: 64px;
  --bmh-radius: 10px;
  --bmh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bmh-shadow: 0 24px 60px rgb(20 20 22 / 12%);

  position: sticky;
  top: 0;
  /* Near the maximum on purpose. 109 of the pre-rendered pages already carry a
     z-index: 9999 of their own (progress bars, floating CTAs, chat launchers),
     and any of them would otherwise punch through an open dropdown. The site
     header has to win against every page it lands on. */
  z-index: 2147483000;
  font-family: var(--bmh-font);
  color: var(--bmh-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bmh-root *,
.bmh-root *::before,
.bmh-root *::after { box-sizing: border-box; }

.bmh-root a { color: inherit; text-decoration: none; }
.bmh-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Keyboard focus must stay visible: this is the primary nav of the whole site. */
.bmh-root :focus-visible {
  outline: 2px solid var(--bmh-purple);
  outline-offset: 2px;
  border-radius: 6px;
}

.bmh-bar {
  height: var(--bmh-h);
  display: flex;
  align-items: center;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bmh-border);
}

.bmh-shell {
  width: 100%;
  max-width: var(--bmh-shell);
  margin: 0 auto;
  padding: 0 var(--bmh-gutter);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bmh-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.bmh-logo img { display: block; height: 30px; width: auto; }

/* ---------------------------------------------------------------- desktop nav */

.bmh-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 14px;
  flex: 1 1 auto;
}

.bmh-item { position: relative; }

.bmh-trigger,
.bmh-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bmh-muted);
  white-space: nowrap;
  transition: color 0.15s var(--bmh-ease), background-color 0.15s var(--bmh-ease);
}

.bmh-trigger:hover,
.bmh-link:hover,
.bmh-item[data-open='true'] .bmh-trigger {
  color: var(--bmh-text);
  background: var(--bmh-purple-dim);
}

.bmh-caret { transition: transform 0.2s var(--bmh-ease); }
.bmh-item[data-open='true'] .bmh-caret { transform: rotate(180deg); }

/* The panel is hidden with visibility, not display, so the fade can animate and
   so its links stay out of the tab order while closed. */
.bmh-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--bmh-ease), transform 0.18s var(--bmh-ease), visibility 0.18s;
  background: var(--bmh-bg);
  border: 1px solid var(--bmh-border);
  border-radius: 16px;
  box-shadow: var(--bmh-shadow);
  padding: 22px;
  display: grid;
  gap: 26px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(182px, auto);
  /* Last line of defence if JS has not run: never wider than the screen. */
  max-width: calc(100vw - 32px);
}

.bmh-item[data-open='true'] .bmh-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.bmh-col-h {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bmh-subtle);
  margin: 0 0 10px;
}

.bmh-col ul { list-style: none; margin: 0; padding: 0; }
.bmh-col li + li { margin-top: 2px; }

.bmh-entry {
  display: block;
  padding: 7px 9px;
  margin: 0 -9px;
  border-radius: 8px;
  transition: background-color 0.15s var(--bmh-ease);
}

.bmh-entry:hover { background: var(--bmh-panel); }
.bmh-entry b { display: block; font-size: 0.85rem; font-weight: 600; color: var(--bmh-text); }
.bmh-entry span { display: block; font-size: 0.75rem; color: var(--bmh-subtle); margin-top: 1px; }

.bmh-feature {
  /* Fills its grid track instead of a fixed 232px: when the panel is capped at
     the viewport width the tracks shrink, and a fixed-width card would spill
     over the first column. */
  width: 100%;
  max-width: 232px;
  padding: 18px;
  border-radius: 12px;
  background: var(--bmh-panel);
  display: flex;
  flex-direction: column;
}

.bmh-feature-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bmh-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bmh-feature b { display: block; font-size: 0.98rem; font-weight: 700; margin: 8px 0 6px; }
.bmh-feature p { margin: 0 0 14px; font-size: 0.8rem; color: var(--bmh-muted); }
.bmh-feature-cta { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: var(--bmh-purple); }

.bmh-viewall {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--bmh-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bmh-purple);
}

/* -------------------------------------------------------------------- actions */

.bmh-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }

.bmh-login { display: none; padding: 8px 10px; font-size: 0.875rem; font-weight: 500; color: var(--bmh-muted); }
.bmh-login:hover { color: var(--bmh-text); }

.bmh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s var(--bmh-ease), box-shadow 0.15s var(--bmh-ease);
}

.bmh-btn:hover { transform: translateY(-1px); }
.bmh-btn-ghost { border: 1px solid var(--bmh-border); color: var(--bmh-text); }
.bmh-btn-ghost:hover { border-color: var(--bmh-purple); }
.bmh-btn-grad { background: var(--bmh-grad); color: #fff; box-shadow: 0 6px 18px rgb(177 90 248 / 28%); }

/* Below 1180px the call label is dropped and only the handset shows: the bar has
   no room for three labelled buttons next to the logo. */
.bmh-call-label { display: none; }

.bmh-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 36px;
  border: 1px solid var(--bmh-border);
  border-radius: 8px;
}

/* --------------------------------------------------------------------- drawer */

.bmh-drawer {
  position: fixed;
  inset: var(--bmh-h) 0 0;
  background: var(--bmh-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px var(--bmh-gutter) 48px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s var(--bmh-ease), visibility 0.25s;
}

.bmh-root[data-drawer='true'] .bmh-drawer { transform: translateX(0); visibility: visible; }

.bmh-acc { border-bottom: 1px solid var(--bmh-border); }

.bmh-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
}

.bmh-acc-btn .bmh-caret { transition: transform 0.2s var(--bmh-ease); }
.bmh-acc[data-open='true'] .bmh-acc-btn .bmh-caret { transform: rotate(180deg); }

.bmh-acc-body { display: none; padding: 0 2px 14px; }
.bmh-acc[data-open='true'] .bmh-acc-body { display: block; }

.bmh-acc-body .bmh-col + .bmh-col { margin-top: 16px; }
.bmh-acc-body .bmh-entry { padding: 9px 9px; }

.bmh-drawer-cta { display: grid; gap: 10px; margin-top: 24px; }
.bmh-drawer-cta .bmh-btn { height: 46px; justify-content: center; font-size: 0.9rem; }

.bmh-drawer-contact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bmh-border);
  display: grid;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--bmh-muted);
}

/* ------------------------------------------------- icon buttons, demo, search */

.bmh-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bmh-border);
  border-radius: 8px;
  color: var(--bmh-muted);
  transition: color 0.15s, border-color 0.15s;
}
.bmh-icon-btn:hover { color: var(--bmh-text); border-color: var(--bmh-purple); }
.bmh-wa { color: #1fa855; }
.bmh-wa:hover { color: #1fa855; border-color: #25d366; }
/* Below desktop the bar is already full (logo, call, trial, burger); WhatsApp
   moves to the bottom bar and Book a demo into the drawer. */
.bmh-wa, .bmh-demo { display: none; }

.bmh-search[hidden] { display: none; }
.bmh-search {
  position: fixed;
  inset: 0;
  /* Above the bar (and its open panels) so the whole page, header included,
     dims behind the box instead of the box landing on top of the nav. */
  z-index: 10;
  background: rgb(20 20 22 / 50%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: max(14vh, calc(var(--bmh-h) + 48px)) var(--bmh-gutter) 0;
}
.bmh-search-box {
  width: 100%;
  max-width: 620px;
  background: var(--bmh-bg);
  border-radius: 14px;
  box-shadow: var(--bmh-shadow);
  overflow: hidden;
}
.bmh-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--bmh-border);
  color: var(--bmh-muted);
}
.bmh-search-field:focus-within { color: var(--bmh-purple); }
/* Pages style bare inputs (borders, radius, focus rings) and the header's own
   :focus-visible rule would ring it too; the field row is the visual box. */
.bmh-search-field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 1rem;
  color: var(--bmh-text);
}
.bmh-search-field button {
  font-size: 0.72rem;
  padding: 3px 7px;
  border: 1px solid var(--bmh-border);
  border-radius: 6px;
  color: var(--bmh-subtle);
}
.bmh-search-results { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.bmh-search-results:empty { display: none; }
.bmh-search-field { border-bottom-color: transparent; }
.bmh-search-box:has(.bmh-search-results:not(:empty)) .bmh-search-field { border-bottom-color: var(--bmh-border); }
.bmh-search-field input::-webkit-search-cancel-button { display: none; }
.bmh-search-results a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--bmh-text);
}
.bmh-search-results a:hover, .bmh-search-results a:focus { background: var(--bmh-panel); outline: 0; }
.bmh-search-label { padding: 8px 12px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bmh-subtle); }
.bmh-search-empty { padding: 14px 12px; font-size: 0.88rem; color: var(--bmh-muted); }

/* ------------------------------------------------------------- announcement */
/* Outside .bmh-root (it scrolls away while the bar stays sticky), so it cannot
   read the --bmh-* tokens and carries literal values instead. */

.bmh-announce {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 8px 16px;
  background: linear-gradient(104deg, #b15af8 12%, #ff8951 94%);
  color: #fff !important;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
}
.bmh-announce b { font-weight: 700; white-space: nowrap; }
/* Phones get the two facts that matter most on one line. */
@media (max-width: 600px) {
  .bmh-announce { font-size: 12px; padding: 7px 12px; }
  .bmh-announce .bmh-announce-extra, .bmh-announce b { display: none; }
}
.bmh-announce:hover b { text-decoration: underline; }

/* ------------------------------------------- floating WhatsApp + mobile bar */

.bmh-wa-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147482000;
  display: none;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgb(37 211 102 / 38%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bmh-wa-float svg { width: 24px; height: 24px; }
.bmh-wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgb(37 211 102 / 45%); }

.bmh-mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147482000;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 96%);
  border-top: 1px solid rgb(0 0 0 / 10%);
  box-shadow: 0 -6px 20px rgb(20 20 22 / 8%);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bmh-mbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgb(0 0 0 / 10%);
  color: #141416 !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.bmh-mbar .bmh-mbar-wa { background: #25d366; border-color: #25d366; color: #fff !important; }
.bmh-mbar .bmh-mbar-cta {
  background: linear-gradient(104deg, #b15af8 12%, #ff8951 94%);
  border: 0;
  color: #fff !important;
}
/* The chat widget's launcher (from /embed-snippet.js) sits 13px from the
   bottom; on phones that is under the bar, so lift it above. Its position is
   an inline style, hence !important. */
@media (max-width: 767px) {
  body:has(.bmh-mbar) #saas-chatbot-launcher { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}
/* Room under the page so the bar never covers the footer's last line. */
body:has(.bmh-mbar) { padding-bottom: 64px; }

@media (min-width: 768px) {
  .bmh-mbar { display: none; }
  body:has(.bmh-mbar) { padding-bottom: 0; }
  .bmh-wa-float { display: inline-flex; }
}

@media print {
  .bmh-announce, .bmh-wa-float, .bmh-mbar { display: none !important; }
}

/* ----------------------------------------------------------------- breakpoints */

@media (min-width: 1140px) {
  .bmh-nav { display: flex; }
  .bmh-login { display: inline-flex; }
  .bmh-burger { display: none; }
  .bmh-drawer { display: none; }
}

@media (min-width: 1280px) {
  .bmh-call-label { display: inline; }
  .bmh-wa { display: inline-flex; }
}

@media (min-width: 1400px) {
  .bmh-demo { display: inline-flex; }
}

@media (max-width: 420px) {
  .bmh-cta-long { display: none; }
}

/* Logo, search, call, trial and the menu button need about 364px, so on smaller
   phones the menu button was pushed off the screen. The call button goes first:
   the bottom bar already carries "Talk to AI". */
@media (max-width: 379px) {
  .bmh-call { display: none; }
}

@media (max-width: 339px) {
  .bmh-logo img { height: 26px; }
  .bmh-actions { gap: 6px; }
}

@media (min-width: 421px) {
  .bmh-cta-short { display: none; }
}

/* Respect a reduced-motion preference: the header still opens, just without the
   slide and fade. */
@media (prefers-reduced-motion: reduce) {
  .bmh-root *,
  .bmh-root *::before,
  .bmh-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* The pre-rendered SEO pages are light-only documents, so the header does not
   follow the OS dark preference on them. It does follow a page that explicitly
   opts in by setting data-theme="dark" on <html>, which is how the app shell
   marks itself. */
html[data-theme='dark'] .bmh-root {
  --bmh-bg: #0f0f14;
  --bmh-panel: #16161d;
  --bmh-border: rgb(255 255 255 / 12%);
  --bmh-text: #f4f4f4;
  --bmh-muted: #a3a3ad;
  --bmh-subtle: #86868f;
}

html[data-theme='dark'] .bmh-bar { background: rgb(15 15 20 / 88%); }