/* --- Header layout: left (logo/name) | middle (nav) | right (phone) --- */
#navBarContainer {
  display: flex;
  align-items: center;      /* vertical alignment */
  gap: 16px;
  flex-wrap: nowrap;        /* prevent wrapping (also helps sticky state) */
}

/* Left side should not stretch */
.Header__logo,
.Header__name {
  flex: 0 0 auto;
}

/* Middle area grows and we push nav toward the right */
.Header__menuTab {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;     /* shifts nav toward the right */
  padding-right: 1px;          /* tune this (80-220px usually) */
}

/* Keep nav links in one row */
.Header__menuList {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}

/* Right side phone */
.Header__itPhone {
  flex: 0 0 auto;
  margin-left: auto;             /* pins to far right */
  white-space: nowrap;
  font-size: 14px;
  color: #ffffff;
  float: none !important;        /* kill any old float */
}

.Header__itPhone a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.Header__itPhone a:hover {
  text-decoration: underline;
}

/* --------------------------------
   Sticky header: compress phone
--------------------------------- */

/* Attempt known sticky class patterns */
.Header__navbar.Header__fixed .Header__itPhone,
.Header__navbar.is-fixed .Header__itPhone,
.Header__navbar.is-sticky .Header__itPhone,
.Header__navbar.sticky .Header__itPhone {
  font-size: 12px !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Fallback sticky detection: any ancestor with class containing "fixed" or "sticky" */
[class*="fixed"] .Header__itPhone,
[class*="sticky"] .Header__itPhone {
  font-size: 12px !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ===========================================
   STICKY HEADER FIX (Zoho: Header__homeNavbarFixed)
   - adds spacing from logo
   - reduces ellipsis frequency
   - removes "Phone:" label to save room
=========================================== */

/* When sticky header is active */
header.Header__homeNavbarFixed #navBarContainer {
  flex-wrap: nowrap !important;
  gap: 18px !important;                 /* more breathing room between items */
}

/* Give the logo a predictable width so phone can't "sit under it" */
header.Header__homeNavbarFixed .Header__logo {
  flex: 0 0 44px !important;            /* matches typical icon width */
}

/* Phone: separate it visually + give it more room */
header.Header__homeNavbarFixed .Header__itPhone {
  margin-left: 32px !important;         /* moves away from logo */
  padding-left: 12px !important;        /* internal space */
  border-left: 1px solid rgba(255,255,255,0.25) !important;

  max-width: 320px !important;          /* more space before ellipsis */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Hide the "Phone:" label ONLY in sticky mode to save space */
header.Header__homeNavbarFixed .Header__itPhone .Header__itLabel {
  display: none !important;
}

/* Optional: tighten the anchor spacing in sticky mode */
header.Header__homeNavbarFixed .Header__itPhone a {
  display: inline-block !important;
}