.ndw-styled-heading {
	--ndw-heading-justify: flex-start;
	display: flex;
	position: relative;
	/* Keeps the shadow text (z-index -1) above the section background and
	   below the heading content. */
	isolation: isolate;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	gap: 14px;
	/* No container-type here: inline-size containment reports an intrinsic width
	   of zero, so in a row container (or any content-sized parent) the heading
	   collapsed to a sliver and printed one or two letters per line (1.0.1). A
	   heading sizes to its text, like the native Heading. */
}

/* Side-by-side layout (Title layout = Beside switches display to grid). The
   grid rules are ignored while the element is a flex column, so they are inert
   in the stacked layout. */
.ndw-styled-heading {
	grid-template-columns: var(--ndw-heading-side-width, 40%) minmax(0, 1fr);
}

.ndw-styled-heading > * {
	grid-column: 2;
	/* Grid items stretch by default; follow the widget alignment instead so an
	   outlined subtitle keeps its pill shape. */
	justify-self: var(--ndw-heading-justify);
}

.ndw-styled-heading > .ndw-styled-heading__title-wrap {
	grid-row: 1 / span var(--ndw-heading-rows, 1);
	grid-column: 1;
}

/* An absolutely positioned grid child with a grid-column would be confined to
   that column; auto placement keeps the shadow across the whole heading. */
.ndw-styled-heading > .ndw-styled-heading__shadow-clip {
	grid-row: auto;
	grid-column: auto;
	/* Browsers now apply justify-self / align-self to absolutely positioned
	   boxes: the `> *` alignment above would shrink this layer to 0x0 instead of
	   covering the heading. */
	justify-self: stretch;
	align-self: stretch;
}

.ndw-styled-heading__title,
.ndw-styled-heading__subtitle,
.ndw-styled-heading__description,
.ndw-styled-heading__description p {
	margin: 0;
}

.ndw-styled-heading__title-wrap {
	--ndw-heading-bar-width: 4px;
	--ndw-heading-bar-height: 100%;
	--ndw-heading-bar-gap: 16px;
	--ndw-heading-bar-offset: 0px;
	display: flex;
	align-items: center;
	max-width: 100%;
	min-width: 0;
}

.ndw-styled-heading__title {
	color: var(--e-global-color-primary, #15191e);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	transition: color 180ms ease;
}

/* Title bar: a pseudo-element of the title wrapper, drawn only when the
   switch is on (prefix_class on the widget wrapper, so a descendant rule). */
.ndw-heading-title-bar-yes .ndw-styled-heading__title-wrap {
	gap: var(--ndw-heading-bar-gap);
}

/* The bar stretches to the title row and is trimmed to its height with
   clip-path, whose inset percentages resolve against the bar itself: the same
   rule then works for %, px and em heights. */
.ndw-heading-title-bar-yes .ndw-styled-heading__title-wrap::before {
	flex: 0 0 auto;
	align-self: stretch;
	width: var(--ndw-heading-bar-width);
	background-color: var(--e-global-color-accent, #1f7667);
	content: "";
	clip-path: inset(max(0px, calc((100% - var(--ndw-heading-bar-height)) / 2)) 0 round var(--ndw-heading-bar-radius, 2px));
	translate: 0 var(--ndw-heading-bar-offset);
}

.ndw-styled-heading__title-link {
	color: inherit;
	text-decoration: none;
}

.ndw-styled-heading__title-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

.ndw-styled-heading__highlight {
	color: var(--e-global-color-accent, #1f7667);
	/* Keeps the Focus Title visible when the title uses Text fill, whose
	   transparent fill colour is inherited. */
	-webkit-text-fill-color: currentColor;
	transition: color 180ms ease;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ndw-styled-heading__subtitle {
	--ndw-heading-line-width: 40px;
	--ndw-heading-line-thickness: 2px;
	--ndw-heading-line-gap: 12px;
	--ndw-heading-line-offset: 0px;
	color: var(--e-global-color-accent, #1f7667);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Subtitle lines: pseudo-elements beside the text, coloured with the
   subtitle colour unless Line colour is set. */
:is(.ndw-heading-subtitle-lines-start, .ndw-heading-subtitle-lines-end, .ndw-heading-subtitle-lines-both) .ndw-styled-heading__subtitle {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	gap: var(--ndw-heading-line-gap);
}

:is(.ndw-heading-subtitle-lines-start, .ndw-heading-subtitle-lines-both) .ndw-styled-heading__subtitle::before,
:is(.ndw-heading-subtitle-lines-end, .ndw-heading-subtitle-lines-both) .ndw-styled-heading__subtitle::after {
	flex: 0 1 var(--ndw-heading-line-width);
	width: var(--ndw-heading-line-width);
	min-width: 4px;
	height: var(--ndw-heading-line-thickness);
	background-color: currentColor;
	content: "";
	translate: 0 var(--ndw-heading-line-offset);
}

.ndw-styled-heading__subtitle-text {
	min-width: 0;
}

/* Paragraphs keep no outer margin (the gap control spaces the heading parts),
   but consecutive paragraphs and lists are separated, as in a text block.
   Two classes: the zero-margin rule above is (0,1,1). */
.ndw-styled-heading .ndw-styled-heading__description > * + * {
	margin-top: var(--ndw-heading-paragraph-gap, 0.5em);
}

.ndw-styled-heading__description {
	max-width: 720px;
	color: var(--e-global-color-text, #4b5563);
	font-size: 18px;
	line-height: 1.65;
}

/* ---- Shadow text ---------------------------------------------------------- */

/* The shadow lives in a layer that covers the heading box and clips only
   sideways: a shadow wider than the widget never widens the page, while it can
   still rise above the heading, and nothing else in the heading is clipped.
   Until 1.0.23 the whole heading was clipped, which cut the dots of "Dots
   outside the line" (they sit 27px outside, like ElementsKit). The Layer
   (z-index) control targets this element. */
.ndw-styled-heading__shadow-clip {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow-x: clip;
	overflow-y: visible;
	pointer-events: none;
}

/* Full-width flex strip behind the heading: justify-content follows the
   widget alignment, and because it is flex a word wider than the widget
   overflows evenly on both sides instead of only to the right. */
.ndw-styled-heading__shadow {
	--ndw-heading-shadow-x: 0px;
	--ndw-heading-shadow-y: 0px;
	--ndw-heading-shadow-shift: -50%;
	display: flex;
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	justify-content: var(--ndw-heading-justify);
	pointer-events: none;
	transform: translate(var(--ndw-heading-shadow-x), calc(var(--ndw-heading-shadow-shift) + var(--ndw-heading-shadow-y)));
	-webkit-user-select: none;
	user-select: none;
}

.ndw-styled-heading__shadow-text {
	flex: 0 0 auto;
	/* Cleared fill means outline-only; the control holds the faint default. */
	color: transparent;
	font-size: clamp(56px, 11vw, 150px);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

/* Free position (Position = Free): the Top and Left controls place the text
   from the heading's top-left corner, like ElementsKit, so a % value follows
   the heading size on every device. The offsets still nudge it. */
.ndw-heading-shadow-mode-absolute .ndw-styled-heading__shadow {
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	justify-content: flex-start;
	transform: translate(var(--ndw-heading-shadow-x), var(--ndw-heading-shadow-y));
}

/* ---- Separator ------------------------------------------------------------ */

.ndw-styled-heading__separator {
	--ndw-heading-separator-thickness: 3px;
	display: inline-flex;
	align-items: center;
	width: 60px;
	max-width: 100%;
	color: var(--e-global-color-accent, #1f7667);
	gap: 8px;
}

.ndw-styled-heading__separator-line {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--ndw-heading-separator-thickness);
	border-radius: 999px;
	background-color: currentColor;
}

.ndw-styled-heading__separator--dotted .ndw-styled-heading__separator-line {
	height: 0;
	border-top: var(--ndw-heading-separator-thickness) dotted currentColor;
	background: none;
}

/* Three dots, then the line: drawn from the line colour so one control
   recolours both. */
.ndw-styled-heading__separator-dots {
	flex: 0 0 auto;
	width: 21px;
	height: 6px;
	background-image: radial-gradient(circle, currentColor 2px, transparent 2.5px);
	background-size: 7px 6px;
	background-repeat: repeat-x;
}

/* Dots outside the line: the line keeps its full width and position and the
   dots sit before it, outside its box (ElementsKit "dotted"). */
.ndw-styled-heading__separator--dots-outside {
	position: relative;
	overflow: visible;
}

.ndw-styled-heading__separator--dots-outside .ndw-styled-heading__separator-dots {
	position: absolute;
	top: 50%;
	right: calc(100% + 6px);
	transform: translateY(-50%);
}

.ndw-styled-heading__separator-marker {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
}

/* Two classes: Elementor's `.elementor img` (0,1,1) would otherwise decide the
   image height. */
.ndw-styled-heading__separator--image.ndw-styled-heading__separator--image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}