/* GLOBAL HIGHLIGHT UTILITIES (site-wide) */
/* Accent colour uses Elementor global accent if set */
:root { --hl-accent: var(--e-global-color-accent, #10b981); }

/* Base behaviour: any class starting with hl- */
:where([class^="hl-"], [class*=" hl-"]) {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 1) Thick underline */
.hl-underline{
  text-decoration: underline;
  text-decoration-color: var(--hl-accent);
  text-decoration-thickness: .14em;
  text-underline-offset: .18em;
}

/* 2) Dashed underline */
.hl-dashed{
  text-decoration: underline dashed var(--hl-accent);
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
}

/* 3) Double underline */
.hl-double{
  text-decoration: underline double var(--hl-accent);
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
}

/* 4) Marker band (bottom 35%) – multi-line safe */
.hl-marker{
  background-image: linear-gradient(to top, var(--hl-accent) .35em, transparent .35em);
  background-repeat: no-repeat;
  background-size: 100% 1em;
  background-position: 0 100%;
}

/* 5) Inset underline – multi-line safe */
.hl-inset{
  box-shadow: inset 0 -0.4em 0 var(--hl-accent);
  padding: 0 .05em;
}

/* 6) Accent fill (badge) */
.hl-fill{
  background: var(--hl-accent);
  color: #061118;
  padding: .05em .45em;
  border-radius: .25em;
}

/* 7) Pill outline */
.hl-pill{
  border: 2px solid var(--hl-accent);
  border-radius: 999px;
  padding: .1em .6em;
}

/* 8) Left bar rule */
.hl-leftbar{
  border-left: .28em solid var(--hl-accent);
  padding-left: .5em;
}

/* 9) Diagonal swipe – multi-line safe */
.hl-diagonal{
  background-image: linear-gradient(-10deg, transparent 55%, var(--hl-accent) 0);
  background-size: 100% 1em;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* 10) Glow */
.hl-glow{
  text-shadow: 0 0 .6em var(--hl-accent), 0 0 .2em var(--hl-accent);
}

/* 11) Hover wipe (animated underline fill) */
.hl-wipe{
  background-image: linear-gradient(to right, var(--hl-accent), var(--hl-accent));
  background-size: 0 40%;
  background-repeat: no-repeat;
  background-position: 0 90%;
  transition: background-size .35s ease;
}
.hl-wipe:hover{ background-size: 100% 40%; }

/* 12) Overline */
.hl-overline{
  text-decoration: overline;
  text-decoration-color: var(--hl-accent);
  text-decoration-thickness: .15em;
}

/* 13) Diagonal stripes */
.hl-stripes{
  background-image: repeating-linear-gradient(
    135deg,
    var(--hl-accent) 0,
    var(--hl-accent) 6px,
    transparent 6px,
    transparent 12px
  );
  padding: .05em .35em;
  border-radius: .2em;
}

/* 14) Corner-tag */
.hl-corner{
  position: relative;
  padding: .05em .4em;
  border: 1px solid var(--hl-accent);
  border-radius: .2em;
}
.hl-corner::after{
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: .6em; height: .6em;
  background: var(--hl-accent);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* 15) Simple accent text */
.hl-accent{ color: var(--hl-accent); }

/* 16) Dark block */
.hl-dark-block{
  background: #000;
  color: var(--hl-accent);
  padding: 0.3em;
  border-radius: .2em;
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: reduce){
  .hl-wipe{ transition: none; }
}