.huu-uib-core-header {
  text-align: var(--huu-uib-header-align, center);
  margin-bottom: var(--huu-uib-header-spacing-bottom, 32px);
}

.huu-uib-core-header__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--huu-uib-header-eyebrow-icon-gap, 8px);
  font-size: var(--huu-uib-header-eyebrow-size, var(--huu-uib-small-size, 12px));
  font-weight: var(--huu-uib-header-eyebrow-weight, 600);
  line-height: 1.2;
  padding: var(--huu-uib-header-eyebrow-padding, 12px);
  border: var(--huu-uib-header-eyebrow-border-width, 1px) solid var(--huu-uib-header-eyebrow-border, var(--huu-uib-color-border, #dce8d2));
  border-radius: var(--huu-uib-header-eyebrow-radius, 6px);
  background: var(--huu-uib-header-eyebrow-bg, var(--huu-uib-color-bg, #eef7ea));
  color: var(--huu-uib-header-eyebrow-color, var(--huu-uib-color-primary, #287a2f));
  margin-bottom: var(--huu-uib-header-eyebrow-spacing, 20px);
}

.huu-uib-core-header__heading {
  color: var(--huu-uib-header-title-color, var(--huu-uib-color-heading, inherit));
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h2-size, 48px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h2-weight, 700));
  line-height: var(--huu-uib-title-line-height, 1.08);
  margin: 0;
}

.huu-uib-core-header__heading--h1 {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h1-size, 60px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h1-weight, 800));
}
.huu-uib-core-header__heading--h2 {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h2-size, 48px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h2-weight, 700));
}
.huu-uib-core-header__heading--h3 {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h3-size, 36px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h3-weight, 600));
}
.huu-uib-core-header__heading--h4 {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h4-size, 30px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h4-weight, 600));
}
.huu-uib-core-header__heading--h5 {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h5-size, 24px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h5-weight, 500));
}
.huu-uib-core-header__heading--h6 {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-h6-size, 20px));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h6-weight, 500));
}
.huu-uib-core-header__heading--div,
.huu-uib-core-header__heading--p,
.huu-uib-core-header__heading--span {
  font-size: var(--huu-uib-header-title-size, var(--huu-uib-title-size, var(--huu-uib-h2-size, 48px)));
  font-weight: var(--huu-uib-header-title-weight, var(--huu-uib-h2-weight, 700));
}

.huu-uib-core-header__subtitle {
  color: var(--huu-uib-header-subtitle-color, var(--huu-uib-color-text, inherit));
  font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size, 17px));
  font-weight: var(--huu-uib-body-weight, 400);
  line-height: var(--huu-uib-description-line-height, 1.65);
  max-width: var(--huu-uib-header-description-max-width, 760px);
  margin: 14px auto 0;
}

.huu-uib-core-header--left .huu-uib-core-header__subtitle { margin-left: 0; }
.huu-uib-core-header--right .huu-uib-core-header__subtitle { margin-right: 0; }

.huu-uib-core-header__highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
  --huu-uib-header-highlight-width-effective: var(--huu-uib-header-highlight-width, 100%);
}

.huu-uib-core-header__highlight::after {
  content: '';
  position: absolute;
  left: 50%;
  width: var(--huu-uib-header-highlight-width-effective);
  right: auto;
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
  height: var(--huu-uib-header-highlight-thickness, 8px);
  background: var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  opacity: var(--huu-uib-header-highlight-opacity, .24);
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(-50%);
}

.huu-uib-core-header__heading--highlight-straight .huu-uib-core-header__highlight::after {
  height: var(--huu-uib-header-highlight-thickness, 4px);
  border-radius: 999px;
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
}

.huu-uib-core-header__heading--highlight-curve .huu-uib-core-header__highlight::after {
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 1.4);
  border-radius: 50%;
  background: transparent;
  border-bottom: var(--huu-uib-header-highlight-thickness, 8px) solid var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  transform: translateX(-50%) translateY(.08em) skewX(-9deg) rotate(-1deg);
}

.huu-uib-core-header__heading--highlight-curve-invert .huu-uib-core-header__highlight::after {
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 1.4);
  border-radius: 50%;
  background: transparent;
  border-top: var(--huu-uib-header-highlight-thickness, 8px) solid var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px) - .05em);
  transform: translateX(-50%) translateY(.12em) skewX(9deg) rotate(1deg);
}

.huu-uib-core-header__heading--highlight-dotted .huu-uib-core-header__highlight::after {
  height: var(--huu-uib-header-highlight-thickness, 4px);
  background: radial-gradient(circle, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) 0 42%, transparent 46% 100%);
  background-size: calc(var(--huu-uib-header-highlight-thickness, 4px) * 2.4) var(--huu-uib-header-highlight-thickness, 4px);
  background-repeat: repeat-x;
  border-radius: 0;
}

.huu-uib-core-header__heading--highlight-wavy .huu-uib-core-header__highlight::after {
  height: calc(var(--huu-uib-header-highlight-thickness, 6px) * 1.5);
  background:
    radial-gradient(50% 100% at 50% 100%, transparent 54%, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) 56% 68%, transparent 70%) 0 0 / calc(var(--huu-uib-header-highlight-thickness, 6px) * 3.6) 100% repeat-x;
  border-radius: 0;
}

.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after {
  left: 50%;
  width: calc(var(--huu-uib-header-highlight-width-effective) + .22em);
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
  height: var(--huu-uib-header-highlight-thickness, .42em);
  border-radius: .22em .5em .24em .45em;
  opacity: var(--huu-uib-header-highlight-opacity, .28);
  transform: translateX(-50%) translateY(-.08em) rotate(-1.4deg) skewX(-7deg);
  clip-path: polygon(1% 30%, 7% 13%, 18% 24%, 34% 9%, 52% 20%, 70% 11%, 88% 22%, 99% 15%, 98% 78%, 90% 86%, 76% 75%, 60% 90%, 40% 78%, 22% 92%, 7% 77%, 0 86%);
}

.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight {
  padding: 0 .12em;
  border-radius: .16em;
  background: color-mix(in srgb, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) calc(var(--huu-uib-header-highlight-opacity, .18) * 100%), transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
  display: none;
}


/* v2.0-alpha.18: responsive setup tokens for Header Core.
   The setup defines desktop/tablet/mobile values; these rules avoid a desktop fallback
   when Elementor preview is in tablet/mobile mode. */
@media (max-width: 1024px) {
  .huu-uib-core-header__heading--h1 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h1-size-tablet, var(--huu-uib-h1-size, 50px))); }
  .huu-uib-core-header__heading--h2 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h2-size-tablet, var(--huu-uib-h2-size, 40px))); }
  .huu-uib-core-header__heading--h3 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h3-size-tablet, var(--huu-uib-h3-size, 32px))); }
  .huu-uib-core-header__heading--h4 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h4-size-tablet, var(--huu-uib-h4-size, 28px))); }
  .huu-uib-core-header__heading--h5 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h5-size-tablet, var(--huu-uib-h5-size, 22px))); }
  .huu-uib-core-header__heading--h6 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h6-size-tablet, var(--huu-uib-h6-size, 19px))); }
  .huu-uib-core-header__subtitle { font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size-tablet, var(--huu-uib-body-size, 16px))); }
}

@media (max-width: 767px) {
  .huu-uib-core-header__heading--h1 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h1-size-mobile, var(--huu-uib-h1-size, 40px))); }
  .huu-uib-core-header__heading--h2 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h2-size-mobile, var(--huu-uib-h2-size, 34px))); }
  .huu-uib-core-header__heading--h3 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h3-size-mobile, var(--huu-uib-h3-size, 28px))); }
  .huu-uib-core-header__heading--h4 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h4-size-mobile, var(--huu-uib-h4-size, 24px))); }
  .huu-uib-core-header__heading--h5 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h5-size-mobile, var(--huu-uib-h5-size, 20px))); }
  .huu-uib-core-header__heading--h6 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h6-size-mobile, var(--huu-uib-h6-size, 18px))); }
  .huu-uib-core-header__subtitle { font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size-mobile, var(--huu-uib-body-size, 16px))); }
}


/* v2.0-alpha.19: Header Core body/small responsive setup tokens.
   Subtitle uses body tokens; eyebrow uses small text tokens. */
@media (max-width: 1024px) {
  .huu-uib-core-header__subtitle {
    font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size-tablet, var(--huu-uib-body-size, 16px)));
  }
  .huu-uib-core-header__eyebrow {
    font-size: var(--huu-uib-header-eyebrow-size, var(--huu-uib-small-size-tablet, var(--huu-uib-small-size, 13px)));
  }
}

@media (max-width: 767px) {
  .huu-uib-core-header__subtitle {
    font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size-mobile, var(--huu-uib-body-size, 15px)));
  }
  .huu-uib-core-header__eyebrow {
    font-size: var(--huu-uib-header-eyebrow-size, var(--huu-uib-small-size-mobile, var(--huu-uib-small-size, 12px)));
  }
}

body.elementor-device-tablet .huu-uib-core-header__subtitle,
html.elementor-device-tablet .huu-uib-core-header__subtitle,
body[data-elementor-device-mode="tablet"] .huu-uib-core-header__subtitle {
  font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size-tablet, var(--huu-uib-body-size, 16px)));
}
body.elementor-device-tablet .huu-uib-core-header__eyebrow,
html.elementor-device-tablet .huu-uib-core-header__eyebrow,
body[data-elementor-device-mode="tablet"] .huu-uib-core-header__eyebrow {
  font-size: var(--huu-uib-header-eyebrow-size, var(--huu-uib-small-size-tablet, var(--huu-uib-small-size, 13px)));
}

body.elementor-device-mobile .huu-uib-core-header__subtitle,
html.elementor-device-mobile .huu-uib-core-header__subtitle,
body[data-elementor-device-mode="mobile"] .huu-uib-core-header__subtitle {
  font-size: var(--huu-uib-header-subtitle-size, var(--huu-uib-body-size-mobile, var(--huu-uib-body-size, 15px)));
}
body.elementor-device-mobile .huu-uib-core-header__eyebrow,
html.elementor-device-mobile .huu-uib-core-header__eyebrow,
body[data-elementor-device-mode="mobile"] .huu-uib-core-header__eyebrow {
  font-size: var(--huu-uib-header-eyebrow-size, var(--huu-uib-small-size-mobile, var(--huu-uib-small-size, 12px)));
}

/* Elementor editor tablet/mobile preview fallback for title tokens too. */
body.elementor-device-tablet .huu-uib-core-header__heading--h1, html.elementor-device-tablet .huu-uib-core-header__heading--h1, body[data-elementor-device-mode="tablet"] .huu-uib-core-header__heading--h1 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h1-size-tablet, var(--huu-uib-h1-size, 50px))); }
body.elementor-device-tablet .huu-uib-core-header__heading--h2, html.elementor-device-tablet .huu-uib-core-header__heading--h2, body[data-elementor-device-mode="tablet"] .huu-uib-core-header__heading--h2 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h2-size-tablet, var(--huu-uib-h2-size, 40px))); }
body.elementor-device-tablet .huu-uib-core-header__heading--h3, html.elementor-device-tablet .huu-uib-core-header__heading--h3, body[data-elementor-device-mode="tablet"] .huu-uib-core-header__heading--h3 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h3-size-tablet, var(--huu-uib-h3-size, 32px))); }
body.elementor-device-tablet .huu-uib-core-header__heading--h4, html.elementor-device-tablet .huu-uib-core-header__heading--h4, body[data-elementor-device-mode="tablet"] .huu-uib-core-header__heading--h4 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h4-size-tablet, var(--huu-uib-h4-size, 28px))); }
body.elementor-device-tablet .huu-uib-core-header__heading--h5, html.elementor-device-tablet .huu-uib-core-header__heading--h5, body[data-elementor-device-mode="tablet"] .huu-uib-core-header__heading--h5 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h5-size-tablet, var(--huu-uib-h5-size, 22px))); }
body.elementor-device-tablet .huu-uib-core-header__heading--h6, html.elementor-device-tablet .huu-uib-core-header__heading--h6, body[data-elementor-device-mode="tablet"] .huu-uib-core-header__heading--h6 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h6-size-tablet, var(--huu-uib-h6-size, 19px))); }

body.elementor-device-mobile .huu-uib-core-header__heading--h1, html.elementor-device-mobile .huu-uib-core-header__heading--h1, body[data-elementor-device-mode="mobile"] .huu-uib-core-header__heading--h1 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h1-size-mobile, var(--huu-uib-h1-size, 40px))); }
body.elementor-device-mobile .huu-uib-core-header__heading--h2, html.elementor-device-mobile .huu-uib-core-header__heading--h2, body[data-elementor-device-mode="mobile"] .huu-uib-core-header__heading--h2 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h2-size-mobile, var(--huu-uib-h2-size, 34px))); }
body.elementor-device-mobile .huu-uib-core-header__heading--h3, html.elementor-device-mobile .huu-uib-core-header__heading--h3, body[data-elementor-device-mode="mobile"] .huu-uib-core-header__heading--h3 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h3-size-mobile, var(--huu-uib-h3-size, 28px))); }
body.elementor-device-mobile .huu-uib-core-header__heading--h4, html.elementor-device-mobile .huu-uib-core-header__heading--h4, body[data-elementor-device-mode="mobile"] .huu-uib-core-header__heading--h4 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h4-size-mobile, var(--huu-uib-h4-size, 24px))); }
body.elementor-device-mobile .huu-uib-core-header__heading--h5, html.elementor-device-mobile .huu-uib-core-header__heading--h5, body[data-elementor-device-mode="mobile"] .huu-uib-core-header__heading--h5 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h5-size-mobile, var(--huu-uib-h5-size, 20px))); }
body.elementor-device-mobile .huu-uib-core-header__heading--h6, html.elementor-device-mobile .huu-uib-core-header__heading--h6, body[data-elementor-device-mode="mobile"] .huu-uib-core-header__heading--h6 { font-size: var(--huu-uib-header-title-size, var(--huu-uib-h6-size-mobile, var(--huu-uib-h6-size, 18px))); }

/* v2.0-alpha.20: Header Core local style controls are now responsive.
   Size controls output device-aware Elementor CSS instead of freezing one value for all breakpoints. */


/* v2.0-alpha.42: Header Core eyebrow icon visibility hardening.
   Elementor can render icons as <i> or inline SVG. The wrapper previously kept
   the position but some SVG icons had no reliable dimensions/fill in widgets. */
.huu-uib-core-header__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  min-width: 1em;
  height: 1em;
  line-height: 1;
  font-size: var(--huu-uib-header-eyebrow-icon-size, 1em);
  color: inherit;
}

.huu-uib-core-header__eyebrow-icon i,
.huu-uib-core-header__eyebrow-icon svg,
.huu-uib-core-header__eyebrow-icon .e-font-icon-svg,
.huu-uib-core-header__eyebrow-icon-element {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  color: inherit;
  fill: currentColor;
}

.huu-uib-core-header__eyebrow-icon svg path,
.huu-uib-core-header__eyebrow-icon .e-font-icon-svg path {
  fill: currentColor;
}


/* v2.0-alpha.43: Header Core eyebrow icon + gradient text. */
.huu-uib-core-header__eyebrow-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:1em;
  height:1em;
  min-width:1em;
  line-height:1;
  color:var(--huu-uib-header-eyebrow-icon-color, currentColor);
}
.huu-uib-core-header__eyebrow-icon svg,
.huu-uib-core-header__eyebrow-icon .huu-uib-core-header__eyebrow-icon-element{
  display:block;
  width:1em;
  height:1em;
  fill:currentColor;
  stroke:currentColor;
}
.huu-uib-core-header__eyebrow--text-gradient .huu-uib-core-header__eyebrow-text{
  background:linear-gradient(var(--huu-uib-header-eyebrow-gradient-angle,90deg),var(--huu-uib-header-eyebrow-gradient-from,#111827),var(--huu-uib-header-eyebrow-gradient-to,#c45d4b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* v2.0-alpha.45: Header Core finishing. */
.huu-uib-core-header{max-width:var(--huu-uib-header-max-width,none)}
.huu-uib-core-header__eyebrow{text-transform:var(--huu-uib-header-eyebrow-text-transform,uppercase)}
.huu-uib-core-header__heading{background-clip:text;-webkit-background-clip:text}
.huu-uib-core-header__eyebrow-text{background-clip:text;-webkit-background-clip:text}

/* v2.0-alpha.66.1: Header badge icon container. */
.huu-uib-core-header__eyebrow-icon {
  box-sizing: border-box;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.huu-uib-core-header__eyebrow-icon i,
.huu-uib-core-header__eyebrow-icon svg,
.huu-uib-core-header__eyebrow-icon .huu-uib-core-header__eyebrow-icon-element {
  flex: 0 0 auto;
}

/* v2.0-alpha.69: Header Core ownership audit. */
.huu-uib-core-header {
	max-width: var(--huu-uib-header-max-width, none);
	margin-left: var(--huu-uib-header-margin-left, auto);
	margin-right: var(--huu-uib-header-margin-right, auto);
}
.huu-uib-core-header--left {
	--huu-uib-header-margin-left: 0;
	--huu-uib-header-margin-right: auto;
}
.huu-uib-core-header--right {
	--huu-uib-header-margin-left: auto;
	--huu-uib-header-margin-right: 0;
}
.huu-uib-core-header__eyebrow {
	text-transform: var(--huu-uib-header-eyebrow-transform, none);
}
.huu-uib-core-header__subtitle {
	margin-top: var(--huu-uib-header-subtitle-spacing, 14px);
}

/* v2.1-alpha.01: Header Core Evolution — extended decorative title systems and narrative controls. */
.huu-uib-core-header__heading--highlight-curve-invert .huu-uib-core-header__highlight::after {
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 1.4);
  border-radius: 50%;
  transform: rotate(1.5deg);
}

.huu-uib-core-header__heading--highlight-dotted .huu-uib-core-header__highlight::after {
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
  height: 0;
  background: transparent;
  border-bottom: var(--huu-uib-header-highlight-thickness, 8px) dotted var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  border-radius: 0;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
}

.huu-uib-core-header__heading--highlight-wavy .huu-uib-core-header__highlight::after {
  bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 2);
  background: radial-gradient(circle at 50% 100%, transparent 54%, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) 58%, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) 68%, transparent 72%) 0 0 / calc(var(--huu-uib-header-highlight-thickness, 8px) * 3) 100% repeat-x;
  border-radius: 0;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
}

.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after {
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 1.85);
  bottom: calc(-.35 * var(--huu-uib-header-highlight-offset, 2px));
}

.huu-uib-core-header__subtitle > *:first-child { margin-top: 0; }
.huu-uib-core-header__subtitle > *:last-child { margin-bottom: 0; }
.huu-uib-core-header__subtitle p { margin: 0 0 var(--huu-uib-header-paragraph-spacing, 12px); }
.huu-uib-core-header__subtitle--multiline { white-space: normal; }

/* v2.1-alpha.01.1: Header Core decorative systems centralized from legacy Profile Highlights.
   These overrides make the decorative title styles render from the Header Core itself,
   so every core consumer receives the same visual result without widget-specific CSS. */
.huu-uib-core-header__heading--highlight-straight .huu-uib-core-header__highlight::after {
  bottom: calc(var(--huu-uib-header-highlight-offset, 2px) * -1);
  height: var(--huu-uib-header-highlight-thickness, 8px);
  background: var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  opacity: var(--huu-uib-header-highlight-opacity, .24);
  border: 0;
  border-radius: 999px;
  transform: none;
}

.huu-uib-core-header__heading--highlight-curve .huu-uib-core-header__highlight::after {
  bottom: calc(var(--huu-uib-header-highlight-offset, 2px) * -0.35);
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 2.4);
  background: transparent;
  border: 0;
  border-bottom: var(--huu-uib-header-highlight-thickness, 8px) solid var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  border-radius: 0 0 50% 50%;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
  transform: rotate(-1deg);
}

.huu-uib-core-header__heading--highlight-curve-invert .huu-uib-core-header__highlight::after {
  bottom: calc(var(--huu-uib-header-highlight-offset, 2px) * -0.35);
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 2.4);
  background: transparent;
  border: 0;
  border-top: var(--huu-uib-header-highlight-thickness, 8px) solid var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  border-radius: 50% 50% 0 0;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
  transform: rotate(-1deg);
}

.huu-uib-core-header__heading--highlight-dotted .huu-uib-core-header__highlight::after {
  bottom: calc(var(--huu-uib-header-highlight-offset, 2px) * .35);
  height: 0;
  background: transparent;
  border: 0;
  border-bottom: var(--huu-uib-header-highlight-thickness, 8px) dotted var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  border-radius: 0;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
  transform: none;
}

.huu-uib-core-header__heading--highlight-wavy .huu-uib-core-header__highlight::after {
  bottom: calc(var(--huu-uib-header-highlight-offset, 2px) * .25);
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 1.8);
  background: radial-gradient(circle at 50% 100%, transparent 55%, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) 58%, var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b)) 68%, transparent 71%) 0 0 / calc(var(--huu-uib-header-highlight-thickness, 8px) * 3) 100% repeat-x;
  border: 0;
  border-radius: 0;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
  transform: none;
}

.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
  inset: -0.06em -0.10em -0.02em -0.10em;
  width: auto;
  height: auto;
  background: var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  border: 0;
  border-radius: calc(var(--huu-uib-header-highlight-thickness, 8px) * 1.4);
  opacity: var(--huu-uib-header-highlight-opacity, .24);
  transform: rotate(-1deg);
}


/* v2.1-alpha.01.2: Header Core curve geometry polish.
   The inverted curve now overhangs the highlighted text and the distance control
   can move it farther from the word without relying on widget-specific CSS. */
.huu-uib-core-header__heading--highlight-curve-invert .huu-uib-core-header__highlight::after {
  left: -0.18em;
  right: -0.18em;
  bottom: calc(var(--huu-uib-header-highlight-offset, 2px) * -1);
  width: auto;
  height: calc(var(--huu-uib-header-highlight-thickness, 8px) * 3.2);
  background: transparent;
  border: 0;
  border-top: var(--huu-uib-header-highlight-thickness, 8px) solid var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: var(--huu-uib-header-highlight-opacity, .45);
  transform: rotate(-0.65deg);
}

.huu-uib-core-header__heading--highlight-curve .huu-uib-core-header__highlight::after {
  left: -0.18em;
  right: -0.18em;
  width: auto;
}


/* v2.1-alpha.04: Header Core highlighted span safe fill.
 * Decorative highlight modes must not inherit transparent text-fill from gradient titles on mobile/WebKit.
 */
.huu-uib-core-header__heading[class*="huu-uib-core-header__heading--highlight-"] .huu-uib-core-header__highlight{
  color:var(--huu-uib-header-highlight-text-color,var(--huu-uib-header-title-gradient-to,var(--huu-uib-header-title-color,currentColor)));
  -webkit-text-fill-color:var(--huu-uib-header-highlight-text-color,var(--huu-uib-header-title-gradient-to,var(--huu-uib-header-title-color,currentColor)));
  opacity:1;
  visibility:visible;
}

/* v2.1-alpha.04.8: Header Core responsive highlight width.
   The decorative line/curve is centered under the highlighted text and can be
   controlled per breakpoint without widget-specific CSS. */
.huu-uib-core-header__heading--highlight-straight .huu-uib-core-header__highlight::after {
  left: 50%;
  right: auto;
  width: var(--huu-uib-header-highlight-width, 100%);
  transform: translateX(-50%);
}
.huu-uib-core-header__heading--highlight-curve .huu-uib-core-header__highlight::after {
  left: 50%;
  right: auto;
  width: var(--huu-uib-header-highlight-width, calc(100% + .36em));
  transform: translateX(-50%) rotate(-0.65deg);
}
.huu-uib-core-header__heading--highlight-curve-invert .huu-uib-core-header__highlight::after {
  left: 50%;
  right: auto;
  width: var(--huu-uib-header-highlight-width, calc(100% + .36em));
  transform: translateX(-50%) rotate(-0.65deg);
}
.huu-uib-core-header__heading--highlight-dotted .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-wavy .huu-uib-core-header__highlight::after {
  left: 50%;
  right: auto;
  width: var(--huu-uib-header-highlight-width, 100%);
  transform: translateX(-50%);
}
.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
  left: 50%;
  right: auto;
  width: var(--huu-uib-header-highlight-width, calc(100% + .20em));
  transform: translateX(-50%) rotate(-1deg);
}


/* v2.1.0-rc.12 — Header Core highlight offset final fix.
 * Marker and straight background must both be controlled by the distance slider.
 * The highlight is rendered as a pseudo-element, not as text background.
 */
.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight {
	background: transparent;
	box-decoration-break: initial;
	-webkit-box-decoration-break: initial;
}

.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	right: auto;
	width: var(--huu-uib-header-highlight-width, 100%);
	bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
	height: var(--huu-uib-header-highlight-thickness, 8px);
	background: var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
	opacity: var(--huu-uib-header-highlight-opacity, .24);
	z-index: -1;
	pointer-events: none;
}

/* Fondo recto: clean, aligned, rectangular. */
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
	border-radius: .16em;
	transform: translateX(-50%);
	clip-path: none;
}

/* Marcador inclinado: organic marker, controlled by the same distance token. */
.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after {
	width: calc(var(--huu-uib-header-highlight-width, 100%) + .22em);
	border-radius: .22em .5em .24em .45em;
	transform: translateX(-50%) translateY(-.08em) rotate(-1.4deg) skewX(-7deg);
	clip-path: polygon(1% 30%, 7% 13%, 18% 24%, 34% 9%, 52% 20%, 70% 11%, 88% 22%, 99% 15%, 98% 78%, 90% 86%, 76% 75%, 60% 90%, 40% 78%, 22% 92%, 7% 77%, 0 86%);
}


/* v2.1.0-rc.14 — Header highlight real offset + marker visual rollback.
 *
 * The distance control now moves the highlight with translateY instead of
 * relying only on bottom, which is visually weak for tall background/marker
 * highlights. Positive values move the highlight downward; negative values
 * move it upward.
 *
 * Marker returns to a clean pill-style highlight, close to the original visual.
 * Fondo recto stays straight and non-rotated.
 */
.huu-uib-core-header__highlight {
	--huu-uib-header-highlight-distance: var(--huu-uib-header-highlight-offset, 2px);
}

.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight {
	position: relative;
	display: inline-block;
	z-index: 1;
	background: transparent;
	padding: 0 .08em;
}

.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	right: auto;
	top: 50%;
	bottom: auto;
	width: var(--huu-uib-header-highlight-width, calc(100% + .18em));
	height: var(--huu-uib-header-highlight-thickness, .72em);
	background: var(--huu-uib-header-highlight-color, var(--huu-uib-color-primary, #8ab31b));
	opacity: var(--huu-uib-header-highlight-opacity, .24);
	z-index: -1;
	pointer-events: none;
	clip-path: none;
}

/* Marcador: clean rounded pill, slightly organic but not ugly/jagged. */
.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after {
	border-radius: 999px;
	transform: translateX(-50%) translateY(calc(-50% + var(--huu-uib-header-highlight-distance, 2px))) rotate(-.7deg);
}

/* Fondo recto: straight rectangular background, distance works too. */
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
	border-radius: .16em;
	transform: translateX(-50%) translateY(calc(-50% + var(--huu-uib-header-highlight-distance, 2px)));
}

/* Keep line/curve styles using the classic baseline logic. */
.huu-uib-core-header__heading--highlight-straight .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-curve .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-curve-invert .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-dotted .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-wavy .huu-uib-core-header__highlight::after {
	bottom: calc(-1 * var(--huu-uib-header-highlight-offset, 2px));
}


/* v2.1.0-rc.15 — Header highlight distance hard fix.
 * Elementor preview was not visually updating marker/bg distance with transform calc.
 * Use top: calc(50% + offset) and a stable translateY(-50%) instead.
 */
.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after,
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
	top: calc(50% + var(--huu-uib-header-highlight-offset, 2px));
	bottom: auto;
}

/* Marker: back to clean pill; offset moves through top. */
.huu-uib-core-header__heading--highlight-marker .huu-uib-core-header__highlight::after {
	border-radius: 999px;
	clip-path: none;
	transform: translateX(-50%) translateY(-50%) rotate(-.7deg);
}

/* Straight background: no rotation; offset moves through top. */
.huu-uib-core-header__heading--highlight-bg .huu-uib-core-header__highlight::after {
	border-radius: .16em;
	clip-path: none;
	transform: translateX(-50%) translateY(-50%);
}