/* 2026 site header (Klika 78.00) — markup in template-parts/header-2026.php. Every rule is under #hn so the
   old .menu / .menu-left__list rules in webstick.css + non-critical.css never win over it.
   Figma: bar 1237x75 r15 #d9d9d9 20% "Glass" (approximated with backdrop-filter), dropdowns 222:3968 lynx,
   222:4044 calico, 222:4127 learn, 222:4317 support, 324:6451 company; mobile 328:6752. */

#hn {
  --hn-fg: #1c1b1f;
  --hn-muted: rgba(28, 27, 31, .6);
  --hn-accent: #e76d2b;
  --hn-glass: rgba(255, 255, 255, .72);
  --hn-panel: rgba(255, 255, 255, .9);
  --hn-line: rgba(28, 27, 31, .18);
  --hn-top: 12px;   /* bar bottom ~87px, near the old header's 82px, so existing heroes keep their clearance */
  --hn-h: 75px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  width: auto;
  min-height: 0;
  padding: var(--hn-top) clamp(16px, 6.95vw, 100px) 0;
  background: none;
  box-shadow: none !important; /* webstick.js writes an inline box-shadow onto .sticky on guide pages */
  pointer-events: none;
  transition: padding .3s;
  font-family: "DM Sans", sans-serif;
}
body:has(.dark-hero) #hn {
  --hn-fg: #f5f5f5;
  --hn-muted: rgba(245, 245, 245, .6);
  --hn-accent: #ffa500;
  --hn-glass: rgba(217, 217, 217, .2);
  --hn-panel: rgba(217, 217, 217, .2);
  --hn-line: rgba(217, 217, 217, .7);
}
/* Figma yDuOq guidance: glass stroke #D9D9D9, 0.25px. Reviewer 2026-11-04: 50% lighter. Browsers draw at least one device pixel
   however thin the width, so .25px already renders as the thinnest possible line and the reduction has to come from opacity. */
body:has(.dark-hero) #hn .hn-bar::before { border: .25px solid rgba(217, 217, 217, .5); }
/* Scrolled past a dark hero the page under the bar is usually white: darken the glass so white text stays legible. */
body:has(.dark-hero) #hn.hn-scrolled {
  --hn-glass: rgba(28, 27, 31, .78);
  --hn-panel: rgba(28, 27, 31, .9);
}
body:has(.hp26) #hn { --hn-top: 50px; }   /* the homepage frame places the bar 50px down */
body #hn.hn-scrolled { --hn-top: 12px; --hn-h: 64px; }
body.admin-bar #hn { top: 32px; }

/* Same 50% on pages without a dark hero: --hn-line is .18 here. The dropdown panels share that variable and keep it. */
#hn .hn-bar::before { border-color: rgba(28, 27, 31, .09); }
#hn .hn-bar {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1240px;
  height: var(--hn-h);
  margin: 0 auto;
  padding: 0 15px 0 34px;
  pointer-events: auto;
  transition: height .3s;
}
/* The glass sits on a pseudo-element: a backdrop-filter on the bar itself would make it the backdrop root of the
   dropdown panels, and their own blur would then see only the bar, not the page. */
#hn .hn-bar::before,
#hn .hn-list > .hn-top > .sub-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 15px;
  background: var(--hn-glass);
  border: 1px solid var(--hn-line);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  transition: background-color .3s;
}

#hn .hn-logo { display: flex; align-items: center; justify-self: start; padding: 0; }
#hn .hn-logo img { width: auto; height: 30px; margin: 0 !important; }
#hn .hn-logo__on-dark { display: none; }
body:has(.dark-hero) #hn .hn-logo__on-dark { display: block; }
body:has(.dark-hero) #hn .hn-logo__on-light { display: none; }

#hn .hn-burger { display: none; }
#hn .hn-drawer { display: contents; }

#hn ul { list-style: none; margin: 0; padding: 0; }
#hn li { margin: 0; }
#hn li::after { display: none; }
#hn a { text-decoration: none; }

/* ---------- desktop ---------- */
#hn .hn-list {
  display: flex;
  align-self: stretch;
  gap: clamp(20px, 3.4vw, 49px);
}
#hn .hn-list > .hn-top { display: flex; align-items: center; position: relative; }
#hn .hn-list > .hn-top:nth-child(n+3) { position: static; }   /* Learn / Support / Company panels align to the bar's right edge */
#hn .hn-list > .hn-top > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  color: var(--hn-fg);
  font: 500 20px/30px "DM Sans", sans-serif;
  letter-spacing: -.22px;
  white-space: nowrap;
  cursor: default;
  transition: color .2s;
}
#hn .hn-list > .hn-top:is(:hover, .is-open, :has(:focus-visible)) > a { color: var(--hn-accent); }

#hn .hn-list > .hn-top > .sub-menu {
  position: absolute;
  top: calc(100% + 29px);
  left: -60px;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 64px;
  row-gap: 21px;
  align-content: center;
  min-height: 202px;
  padding: 32px 48px 32px 24px;
  color: var(--hn-fg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
#hn .hn-list > .hn-top:nth-child(n+3) > .sub-menu { left: auto; right: 0; }
#hn .hn-list > .hn-top > .sub-menu::after {   /* hover bridge across the 29px gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -29px;
  height: 29px;
}
#hn .hn-list > .hn-top:is(:hover, .is-open, :has(:focus-visible)) > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s, transform .2s, visibility 0s;
}
#hn .hn-list > .hn-top > .sub-menu { --hn-glass: var(--hn-panel); }

#hn .sub-menu a {
  display: block;
  color: var(--hn-fg);
  font: 500 20px/31px "DM Sans", sans-serif;
  letter-spacing: -.22px;
  white-space: nowrap;
  transition: color .2s;
}
#hn .sub-menu a:hover,
#hn .sub-menu a:focus-visible { color: var(--hn-accent); }
#hn .sub-menu a[href="#"],
#hn .sub-menu a:not([href]) { cursor: default; }

/* intro column: icon + product name + one-liner, then the divider. Optional: a menu item with no Description renders no column. */
#hn .hn-intro:not(:has(.menu-item-description)) { display: none; }
#hn .hn-intro {
  grid-row: 1 / -1;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  min-width: 170px;
  padding: 0 30px 0 0;
  margin-right: 20px;
  border-right: .5px solid var(--hn-line);
}
#hn .hn-intro > a {
  display: grid;
  grid-template-columns: auto minmax(0, 190px);
  column-gap: 9px;
  align-items: start;
  white-space: normal;
}
#hn .hn-intro > a:not(:has(.menu-item-icon)) { display: block; }
/* No icon (Learn/Support/Company): the description sits under the title, Figma width ~150px. */
@media (min-width: 1025px) {
  #hn .hn-intro > a:not(:has(.menu-item-icon)) .menu-item-description { display: block; max-width: 190px; }
}
#hn .hn-intro > a[href="#"] { pointer-events: none; }
#hn .hn-intro .menu-item-icon { grid-row: 1 / span 2; width: 52px; height: 52px; object-fit: contain; }
#hn .hn-intro .menu-item-title,
#hn .hn-intro > a:not(:has(.menu-item-title)) { font: 700 20px/31px "DM Sans", sans-serif; letter-spacing: -.22px; }
#hn .hn-intro .menu-item-description {
  grid-column: 2;
  margin-top: 6px;
  font: 400 15px/20px "DM Sans", sans-serif;
  letter-spacing: -.165px;
  opacity: .95;
}

/* Learn: two titled groups instead of loose links */
#hn .hn-group { grid-row: 1 / -1; }
#hn .hn-group > a {
  margin-bottom: 12px;
  color: var(--hn-muted);
  font: 500 14px/20px "DM Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}
#hn .hn-group > .sub-menu { display: flex; flex-direction: column; gap: 4px; }
#hn .hn-group .sub-menu a { font-size: 16px; line-height: 28px; letter-spacing: -.16px; }
#hn .hn-group--wide > .sub-menu { display: block; columns: 2; column-gap: 48px; }
#hn .hn-group--wide > .sub-menu > li { break-inside: avoid; padding-bottom: 14px; }
#hn .hn-group--wide > .sub-menu > li > a { font-weight: 700; }
#hn .hn-group--wide .sub-menu .sub-menu a { font-weight: 400; line-height: 26px; }

/* right side: search + Book demo */
#hn .hn-actions { display: flex; align-items: center; justify-self: end; gap: 25px; }
#hn .hn-search { display: flex; padding: 0; }
#hn .hn-search svg { width: 25px; height: 25px; fill: var(--hn-fg); stroke: none; }
#hn .hn-cta-list { display: flex; }
#hn .hn-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(90deg, #ed8823 0%, #e76d2b 100%);
  box-shadow: none;
  color: #000;
  font: 700 16px/1 "DM Sans", sans-serif;
  letter-spacing: -.176px;
  white-space: nowrap;
  transition: filter .2s;
}
#hn .hn-cta > a:hover,
#hn .hn-cta > a:focus-visible { filter: brightness(1.08); color: #000; }
#hn .hn-cta > a::before,
#hn .hn-cta > a::after { display: none; }

/* search box (tigera.js moves #tigera-main-search into .menu; header-2026.js toggles it) */
#hn #tigera-main-search {
  display: none;
  position: static;
  max-width: 1240px;
  margin: 12px auto 0;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: auto;
}
#hn #tigera-main-search .search-form { background: none; border: 0; display: block; padding: 0; }
#hn #tigera-main-search .search-form__input {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--hn-line);
  border-radius: 15px;
  background: var(--hn-panel);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--hn-fg);
  font: 400 16px/1 "DM Sans", sans-serif;
}
body:has(.dark-hero) #hn #tigera-main-search .search-form__input { background: rgba(28, 27, 31, .85); }

/* ---------- mobile / tablet ---------- */
@media (max-width: 1024px) {
  #hn { --hn-top: 12px; --hn-h: 58px; padding: var(--hn-top) 24px 0; }
  body:has(.hp26) #hn { --hn-top: 25px; }
  body #hn.hn-scrolled { --hn-top: 12px; --hn-h: 58px; }
  body.admin-bar #hn { top: 46px; }

  #hn .hn-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: var(--hn-h);
    padding: 0 15px;
  }
  #hn .hn-logo { height: var(--hn-h); }
  #hn .hn-logo img { height: 27px; }

  #hn .hn-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0 8px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  #hn .hn-burger span { display: block; height: 2px; border-radius: 2px; background: var(--hn-fg); transition: transform .25s, opacity .25s; }
  #hn.is-open .hn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #hn.is-open .hn-burger span:nth-child(2) { opacity: 0; }
  #hn.is-open .hn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #hn .hn-drawer {
    display: none;
    flex-basis: 100%;
    max-height: calc(100dvh - var(--hn-top) - var(--hn-h) - 24px);
    margin: 0 7px;
    overflow-x: hidden;   /* overflow-y: auto alone turns overflow-x to auto as well, and the open menu can then be dragged sideways on a phone */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #hn.is-open .hn-drawer { display: block; }
  #hn.is-open { --hn-glass: var(--hn-panel); }
  body:has(.dark-hero) #hn.is-open { --hn-glass: rgba(28, 27, 31, .9); }

  #hn .hn-list { display: block; }
  #hn .hn-list > .hn-top { display: block; position: static; border-top: .5px solid var(--hn-line); }
  #hn .hn-list > .hn-top > a { height: 61px; justify-content: space-between; cursor: pointer; }
  #hn .hn-list > .hn-top > a::after {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 3px;   /* rotated 45deg the chevron reaches 2.5px past its box; this keeps it inside the drawer */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s;
  }
  #hn .hn-list > .hn-top.is-open > a::after { transform: translateY(3px) rotate(-135deg); }
  #hn .hn-list > .hn-top:is(:hover, :has(:focus-visible)):not(.is-open) > a { color: var(--hn-fg); }

  #hn .hn-list > .hn-top > .sub-menu,
  #hn .hn-list > .hn-top:nth-child(n+3) > .sub-menu {
    position: static;
    display: none;
    min-height: 0;
    padding: 0 0 18px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  #hn .hn-list > .hn-top.is-open > .sub-menu { display: block; }
  #hn .hn-list > .hn-top > .sub-menu::before,
  #hn .hn-list > .hn-top > .sub-menu::after { display: none; }

  #hn .sub-menu a { font-size: 17px; line-height: 38px; white-space: normal; }
  #hn .hn-intro { min-width: 0; margin: 0; padding: 0; border: 0; }
  #hn .hn-intro > a { display: flex; align-items: center; gap: 10px; }
  #hn .hn-intro > a[href="#"],
  #hn .hn-intro .menu-item-description { display: none; }
  #hn .hn-intro .menu-item-icon { width: 24px; height: 24px; }
  #hn .hn-intro .menu-item-title { font: inherit; }
  #hn .hn-group { padding-top: 6px; }
  #hn .hn-group > a { margin-bottom: 2px; }
  #hn .hn-group .sub-menu a { font-size: 16px; line-height: 34px; }
  #hn .hn-group--wide > .sub-menu { columns: 1; }
  #hn .hn-group--wide > .sub-menu > li { padding-bottom: 6px; }
  #hn .hn-group--wide .sub-menu .sub-menu { padding-left: 14px; }

  #hn .hn-actions {
    width: 100%;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 8px 30px;
    border-top: .5px solid var(--hn-line);
  }
  #hn .hn-cta-list { flex: 0 1 253px; }
  #hn .hn-cta { flex: 1; }
  #hn .hn-cta > a { width: 100%; height: 45px; }

  #hn #tigera-main-search { margin-top: 10px; }
}
html.hn-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #hn, #hn * { transition: none !important; }
}