/* ==========================================================================
   THINKER RK — HEADER v2 (scoped to .trk-header only)
   Fixes: two-row wrap, CTA overlap, Services mis-position, excess height,
   logo sizing. Reproduces sticky/compact/scroll-progress/mega-menu/mobile.
   ========================================================================== */

/* Neutralize Phlox/Auxin's own header chrome padding — these selectors are
   Phlox's header-specific wrapper only, so this stays scoped to the header. */
#site-elementor-header,
#site-elementor-header .aux-wrapper,
#site-elementor-header .aux-header,
#site-elementor-header .aux-header-elements-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.trk-header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #EDEDED;
  transition: box-shadow .25s ease;
}
.trk-header.trk-compact { box-shadow: 0 6px 22px rgba(0,0,0,.07); }

/* Scroll progress bar */
.trk-header .trk-progress-track { height: 3px; background: #EDEDED; }
.trk-header .trk-progress-bar {
  height: 100%; width: 0%;
  background: var(--e-global-color-primary, #F1AD1D);
  transition: width .1s linear;
}

/* Header row: single line, three zones, exact HTML height */
.trk-header-row {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  min-height: 82px !important;
  transition: min-height .25s ease;
  flex-wrap: nowrap !important;
}
.trk-header.trk-compact .trk-header-row { min-height: 64px !important; }

.trk-logo-area { flex: 0 0 auto; display: flex; align-items: center; }
.trk-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  transition: height .25s ease;
}
.trk-header.trk-compact .trk-logo img { height: 32px !important; }
.trk-logo .hfe-site-logo { display: flex; align-items: center; }

/* Nav row: single line, no wrap, tight consistent gap */
.trk-desktop-nav {
  flex-wrap: nowrap !important;
  white-space: nowrap;
  flex: 1 1 auto;
  justify-content: center;
}
.trk-nav-link .elementor-heading-title,
.trk-services-trigger .elementor-heading-title {
  white-space: nowrap;
}
.trk-nav-link .elementor-heading-title a,
.trk-services-trigger .elementor-heading-title a {
  display: inline-block;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.trk-nav-link .elementor-heading-title a:hover,
.trk-services-trigger .elementor-heading-title a:hover { color: #B87F06 !important; }
.trk-nav-active .elementor-heading-title a {
  border-bottom-color: #F1AD1D;
}

/* Right area: CTA + mobile trigger, its own dedicated zone, never overlaps nav */
.trk-right-area { flex: 0 0 auto; display: flex; align-items: center; }
.trk-cta-btn .elementor-button { min-height: 46px; display: inline-flex; align-items: center; }

/* ---- Services mega-menu ---- */
.trk-mega-wrap { position: relative; }
.trk-mega-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px; z-index: 900; opacity: 0; visibility: hidden;
  transition: opacity .22s ease;
}
.trk-mega-panel-inner {
  width: min(90vw, 620px); background: #fff; border: 1px solid #EDEDED;
  border-radius: 16px; box-shadow: 0 24px 56px rgba(0,0,0,.14); padding: 22px;
  transform: translateY(14px); transition: transform .22s ease;
}
.trk-mega-wrap.trk-mega-open .trk-mega-panel { opacity: 1; visibility: visible; }
.trk-mega-wrap.trk-mega-open .trk-mega-panel-inner { transform: translateY(0); }
.trk-mega-panel a:hover { background: #F8F8F8; }

/* ---- 1180px custom breakpoint ---- */
.trk-desktop-nav, .trk-right-area .trk-desktop-cta { display: flex; }
.trk-mobile-trigger { display: none; }
@media (max-width: 1179px) {
  .trk-desktop-nav, .trk-desktop-cta { display: none !important; }
  .trk-mobile-trigger { display: flex !important; }
}

/* ---- Mobile full-screen overlay menu ---- */
.trk-mobile-panel {
  position: fixed; inset: 0; z-index: 950; background: #fff;
  display: none; flex-direction: column;
  padding: 20px clamp(20px,6vw,40px) 32px; overflow-y: auto;
}
.trk-mobile-panel.trk-open { display: flex; }
.trk-mobile-panel .trk-mobile-nav a {
  font: 700 clamp(22px,6vw,30px)/1.3 Manrope, sans-serif;
  padding: 14px 0; border-bottom: 1px solid #F1F1F1; display: block;
  opacity: 0; transform: translateY(14px);
  animation: rkMenuIn .4s cubic-bezier(.16,1,.3,1) forwards;
}
/* rkMenuIn removed — duplicate of the global rkMenuIn keyframe now defined in trk-global.css */
body.trk-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .trk-header, .trk-header *, .trk-mega-panel, .trk-mega-panel-inner, .trk-mobile-panel .trk-mobile-nav a {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
/* Explicit, non-variable-dependent nav spacing — belt-and-suspenders fix for item collision */
.trk-desktop-nav.e-con > .e-con-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
}
.trk-desktop-nav .elementor-element {
  flex: 0 0 auto !important;
}
/* Extra safety: explicit margin fallback in case gap itself is being suppressed
   by something outside our stylesheet — zero-cost if gap already works, since
   margin and gap both add space (not additive collision: gap creates space
   BETWEEN flex items, margin-right on each non-last item does the same thing
   redundantly, so this only helps, never doubles up incorrectly because we
   only add margin, not both gap AND double margin conflicting visually). */
.trk-desktop-nav .elementor-element:not(:last-child) {
  margin-right: 16px !important;
}