/* Keep hamburger + logo on ONE line */
.lky-header-bar{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.lky-header-bar > .et_pb_column{
  margin-bottom: 0 !important;
  display:flex;
  align-items:center;
}

/* Column 1 = hamburger */
.lky-header-bar > .et_pb_column:first-child{
  flex: 0 0 auto;
  justify-content:flex-start;
}

/* Column 2 = logo */
.lky-header-bar > .et_pb_column:last-child{
  flex: 1 1 auto;
  min-width: 0;
  justify-content:flex-end; /* logo to the right */
}

/* Phone: cap logo height so it doesn't collide */
@media (max-width: 480px){
  .lky-header-bar img{
    max-height: 34px;
    width: auto;
  }
}

/* Mobile: hamburger left, logo centered (true center of viewport) */
@media (max-width: 980px){
  .lky-header-bar{
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start; /* keep hamburger to the left */
    flex-wrap: nowrap;
  }

  /* STOP Divi from forcing columns to be 100% width (stacking) */
  .lky-header-bar > .et_pb_column{
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
  }

  /* Column 1 (hamburger) stays in normal flow on the left */
  .lky-header-bar > .et_pb_column:first-child{
    position: relative;
    z-index: 3;
  }

  /* Column 2 (logo) is absolutely centered */
  .lky-header-bar > .et_pb_column:last-child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    justify-content: center;
  }

  .lky-header-bar img{
    max-height: 34px;
    width: auto;
  }
}



.cv-center{ text-align:center; }

/* Hook + variables live on the module wrapper */
/* H1-balanced settings (scales with Divi’s H1 size) */
.cv-xray{
  --dur: 6s;
  --spotH: 0.8em;     /* pill height */
  --dotSmall: 0.22em;  /* dot size */
  --dotGap: 0.1em;    /* spacing before dot */
  --overshoot: 0.4em; /* pill stretch to the LEFT */
}


/* Apply the effect to the actual heading element inside the module */
.cv-xray :is(h1,h2,h3,h4,h5,h6){
  position: relative;
  display: inline-block;
  isolation: isolate;
  line-height: 1.05; /* optional: keep consistent */
}

/* Reserve space at end (no visible dot) */
.cv-xray :is(h1,h2,h3,h4,h5,h6)::after{
  content:"";
  display:inline-block;
  width: calc(var(--dotGap) + var(--dotSmall));
}

/* Animated dot/pill */
.cv-xray :is(h1,h2,h3,h4,h5,h6)::before{
  content:"";
  position:absolute;
  top:55%;
  transform:translateY(-50%);
  right:0;

  width: var(--dotSmall);
  height: var(--dotSmall);
  border-radius:999px;
  background:#748cab;   /*light blue highlight*/

  mix-blend-mode:difference;
  pointer-events:none;
  z-index:2;

  animation:none;
}

/* Loop every 6s while in view */
.cv-xray.is-inview :is(h1,h2,h3,h4,h5,h6)::before{
  animation: cvXrayDotToPill 6s ease-in-out infinite;
}

@keyframes cvXrayDotToPill{
  0%,10%{ width:var(--dotSmall); height:var(--dotSmall); }
  20%   { width:var(--spotH);    height:var(--spotH); }
  50%   { width:calc(100% + var(--overshoot)); height:var(--spotH); }
  75%   { width:var(--spotH);    height:var(--spotH); }
  100%  { width:var(--dotSmall); height:var(--dotSmall); }
}