/* Polyh: Site Bar — fixed header with nav, CTA, burger and a mobile panel.
 * Every colour/size below reads a CSS variable that the widget's Elementor
 * controls write via {{WRAPPER}}; the fallbacks here are the defaults, so the
 * bar renders correctly even before a single control is touched.
 * Layout skeleton only — no hardcoded brand values. */

.polyh-sitebar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--polyh-sitebar-z, 50);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}

/* Scrolled state — added by the widget's JS past the offset. */
.polyh-sitebar.is-scrolled {
  background: var(--polyh-sitebar-scrolled-bg, rgba(12, 13, 15, .8));
  backdrop-filter: blur(var(--polyh-sitebar-blur, 20px));
  -webkit-backdrop-filter: blur(var(--polyh-sitebar-blur, 20px));
  border-bottom-color: var(--polyh-sitebar-hairline, rgba(255, 255, 255, .08));
}

.polyh-sitebar__nav {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--polyh-sitebar-height, 64px);
  max-width: var(--polyh-sitebar-max, 1152px);
  padding: 0 var(--polyh-sitebar-gutter, 20px);
}

/* ---- logo ---- */
.polyh-sitebar__logo {
  display: inline-flex;
  /* flex-end, not baseline: the accent glyph is much smaller than the logo
     text, and baseline alignment leaves it floating. Bottom-aligning the two
     boxes is what makes "bp." read as one mark. */
  align-items: flex-end;
  line-height: 1;
  font-family: var(--polyh-sitebar-logo-font, inherit);
  font-weight: 700;
  user-select: none;
  text-decoration: none;
  flex: 0 0 auto;
}
.polyh-sitebar__logo-main {
  font-size: var(--polyh-sitebar-logo-size, 26px);
  letter-spacing: -.06em;
  color: var(--polyh-sitebar-logo-color, #B4E84F);
}
.polyh-sitebar__logo-dot {
  font-size: var(--polyh-sitebar-dot-size, 11.4px);
  line-height: 1;
  color: var(--polyh-sitebar-dot-color, #2FD37A);
}

/* ---- desktop links ---- */
.polyh-sitebar__links {
  display: none;
  align-items: center;
  gap: var(--polyh-sitebar-link-gap, 32px);
}
.polyh-sitebar__link {
  position: relative;
  font-size: var(--polyh-sitebar-link-size, 14px);
  color: var(--polyh-sitebar-link-color, #9BA1A8);
  text-decoration: none;
  transition: color .2s;
}
.polyh-sitebar__link:hover { color: var(--polyh-sitebar-link-hover, #F3F5F6); }
.polyh-sitebar__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: var(--polyh-sitebar-underline, #2FD37A);
  transition: width .3s cubic-bezier(.2, .8, .2, 1);
}
.polyh-sitebar__link:hover::after { width: 100%; }

/* ---- right cluster ---- */
.polyh-sitebar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.polyh-sitebar__signin {
  display: none;
  padding: 8px 12px;
  font-size: var(--polyh-sitebar-link-size, 14px);
  color: var(--polyh-sitebar-signin-color, #F3F5F6);
  text-decoration: none;
  transition: color .2s;
}
.polyh-sitebar__signin:hover { color: var(--polyh-sitebar-link-hover, #F3F5F6); }

.polyh-sitebar__cta {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--polyh-sitebar-cta-font, inherit);
  font-size: var(--polyh-sitebar-link-size, 14px);
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--polyh-sitebar-cta-radius, 999px);
  background: var(--polyh-sitebar-cta-bg, #2FD37A);
  color: var(--polyh-sitebar-cta-color, #0C0D0F);
  text-decoration: none;
  white-space: nowrap;
  transition: filter .2s, transform .2s;
}
.polyh-sitebar__cta:hover { filter: brightness(1.08); }

/* ---- burger ---- */
/* :hover and :focus are stated explicitly, and that is NOT redundant. Hello
   Elementor's reset.css ships `button:focus, button:hover {background:#CC3366}`
   — a (0,1,1) selector that outranks a bare (0,1,0) class, so without these the
   burger flashes theme-pink on every tap. Class+pseudo (0,2,0) wins it back.
   Found on a real mobile tap 2026-07-31; a synthetic .click() never shows it
   because it produces neither hover nor focus. */
.polyh-sitebar__burger,
.polyh-sitebar__burger:hover,
.polyh-sitebar__burger:focus {
  margin-left: 4px;
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--polyh-sitebar-burger-border, rgba(255, 255, 255, .1));
  background: transparent;
  color: var(--polyh-sitebar-burger-color, #F3F5F6);
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}

/* Keyboard users still need to see focus — just not as a pink block. */
.polyh-sitebar__burger:focus-visible {
  outline: 2px solid var(--polyh-sitebar-underline, #2FD37A);
  outline-offset: 2px;
}
.polyh-sitebar__burger i { position: relative; display: block; height: 12px; width: 16px; }
.polyh-sitebar__burger i b {
  position: absolute;
  left: 0;
  height: 1px;
  width: 16px;
  background: currentColor;
  transition: all .25s;
}
.polyh-sitebar__burger i b:nth-child(1) { top: 0; }
.polyh-sitebar__burger i b:nth-child(2) { top: 6px; }
.polyh-sitebar__burger i b:nth-child(3) { top: 12px; }
.polyh-sitebar.is-open .polyh-sitebar__burger i b:nth-child(1) { top: 6px; transform: rotate(45deg); }
.polyh-sitebar.is-open .polyh-sitebar__burger i b:nth-child(2) { opacity: 0; }
.polyh-sitebar.is-open .polyh-sitebar__burger i b:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---- mobile panel ---- */
.polyh-sitebar__mobile {
  display: none;
  border-top: 1px solid var(--polyh-sitebar-hairline, rgba(255, 255, 255, .08));
  background: var(--polyh-sitebar-panel-bg, rgba(12, 13, 15, .95));
  backdrop-filter: blur(var(--polyh-sitebar-blur, 20px));
  -webkit-backdrop-filter: blur(var(--polyh-sitebar-blur, 20px));
  padding: 16px var(--polyh-sitebar-gutter, 20px);
}
.polyh-sitebar.is-open .polyh-sitebar__mobile { display: block; }
.polyh-sitebar__mobile a {
  display: block;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--polyh-sitebar-panel-size, 16px);
  color: var(--polyh-sitebar-panel-color, #F3F5F6);
  text-decoration: none;
}
.polyh-sitebar__mobile a:hover { background: rgba(255, 255, 255, .05); }
.polyh-sitebar__mobile a.is-muted { color: var(--polyh-sitebar-link-color, #9BA1A8); }

/* ---- breakpoints ----
 * Two independent thresholds, both overridable per instance through the
 * generated media queries in the widget's own style controls. */
/* Touch target: Apple HIG 44pt / Material 48dp. Phone breakpoint only — on a
   pointer device the shorter pill is fine and matches the bar's proportions. */
@media (max-width: 767px) {
  .polyh-sitebar__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 641px) {
  .polyh-sitebar__nav { padding: 0 var(--polyh-sitebar-gutter-lg, 32px); }
  .polyh-sitebar__signin { display: inline-block; }
}
@media (min-width: 769px) {
  .polyh-sitebar__links { display: flex; }
  .polyh-sitebar__burger { display: none; }
  .polyh-sitebar.is-open .polyh-sitebar__mobile { display: none; }
}