/* Platecraft Addons – Advanced Heading and Dual Color Heading. */

/* ---------- Advanced Heading ---------- */
.pah {
	--pah-shape: #c2410c;
	--pah-shape-w: 6px;
	--pah-draw: 1.2s;
	--pah-deco: currentColor;
	--pah-line-w: 40px;
	--pah-line-h: 2px;
	--pah-deco-gap: 12px;
	--pah-sub-gap: 12px;
	--pah-marker-h: 38%;
	position: relative;
	isolation: isolate;
}
.pah--has-bg {
	overflow-x: clip;
}
.pah__title {
	position: relative;
	margin: 0 var(--pah-mr, 0) 0 var(--pah-ml, 0);
}
.pah__link {
	color: inherit;
	text-decoration: none;
}
.pah__hl {
	position: relative;
	z-index: 0;
	display: inline-block;
}
.pah-hl-block-yes .pah__hl {
	display: block;
	width: fit-content;
	margin: 0 var(--pah-mr, 0) 0 var(--pah-ml, 0);
}

/* The shape: a hand-drawn line in a 500 × 150 box stretched over the words. */
.pah__shape {
	position: absolute;
	top: calc(-10% + var(--pah-shape-y, 0px));
	left: -4%;
	z-index: -1;
	width: 108%;
	height: 120%;
	overflow: visible;
	fill: none;
	stroke: var(--pah-shape);
	stroke-width: var(--pah-shape-w);
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.pah__shape path {
	vector-effect: non-scaling-stroke;
}
/* Lines under the words sit a little lower, below the letters. */
.pah--shape-underline .pah__shape,
.pah--shape-double .pah__shape,
.pah--shape-swoosh .pah__shape,
.pah--shape-wave .pah__shape,
.pah--shape-zigzag .pah__shape {
	top: calc(14% + var(--pah-shape-y, 0px));
}
.pah--shape-over .pah__shape,
.pah-shape-front-yes .pah__shape {
	z-index: 1;
}
.pah--shape-marker {
	--pah-shape: #fde68a;
}
.pah--shape-marker .pah__hl::before {
	content: "";
	position: absolute;
	right: -0.12em;
	bottom: calc(0.06em - var(--pah-shape-y, 0px));
	left: -0.12em;
	z-index: -1;
	height: var(--pah-marker-h);
	border-radius: 0.2em;
	background: var(--pah-shape);
	transform-origin: left center;
}

/* Drawing: the shape is uncovered from left to right. */
.pah--play-view .pah__shape,
.pah--play-hover .pah__shape {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--pah-draw) cubic-bezier(0.65, 0, 0.35, 1);
}
.pah--play-view.is-drawn .pah__shape,
.pah--play-hover:hover .pah__shape {
	clip-path: inset(0 0 0 0);
}
.pah--play-view.pah--shape-marker .pah__hl::before,
.pah--play-hover.pah--shape-marker .pah__hl::before {
	transform: scaleX(0);
	transition: transform var(--pah-draw) cubic-bezier(0.65, 0, 0.35, 1);
}
.pah--play-view.pah--shape-marker.is-drawn .pah__hl::before,
.pah--play-hover.pah--shape-marker:hover .pah__hl::before {
	transform: scaleX(1);
}
.pah--play-loop .pah__shape {
	animation: pah-draw calc(var(--pah-draw) * 3) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.pah--play-loop.pah--shape-marker .pah__hl::before {
	animation: pah-mark calc(var(--pah-draw) * 3) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes pah-draw {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	35%,
	75% {
		clip-path: inset(0 0 0 0);
	}
	100% {
		clip-path: inset(0 0 0 100%);
	}
}
@keyframes pah-mark {
	0% {
		transform: scaleX(0);
		transform-origin: left center;
	}
	35%,
	75% {
		transform: scaleX(1);
		transform-origin: left center;
	}
	76% {
		transform-origin: right center;
	}
	100% {
		transform: scaleX(0);
		transform-origin: right center;
	}
}

/* Small line above (or below). */
.pah__sub {
	display: flex;
	align-items: center;
	justify-content: var(--pah-justify, flex-start);
	gap: var(--pah-deco-gap);
	margin: 0 0 var(--pah-sub-gap);
	color: #c2410c;
}
.pah__title ~ .pah__sub {
	margin: var(--pah-sub-gap) 0 0;
}
.pah__sub-text {
	color: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.pah__sub--line-before::before,
.pah__sub--line-after::after,
.pah__sub--line-both::before,
.pah__sub--line-both::after {
	content: "";
	flex: 0 0 auto;
	width: var(--pah-line-w);
	height: var(--pah-line-h);
	border-radius: 2px;
	background: var(--pah-deco);
}
.pah__sub--dot::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--pah-deco);
}
.pah__sub--pill .pah__sub-text {
	padding: 0.4em 0.95em;
	border-radius: 999px;
	background-color: rgba(194, 65, 12, 0.1);
}

.pah__desc {
	margin: 14px var(--pah-mr, 0) 0 var(--pah-ml, 0);
}
.pah__desc > :last-child {
	margin-bottom: 0;
}

/* The big word behind. */
.pah__bgtext {
	position: absolute;
	top: 50%;
	left: var(--pah-bg-l, 50%);
	z-index: -1;
	color: rgba(0, 0, 0, 0.14);
	font-size: clamp(4rem, 12vw, 9rem);
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	transform: translate(calc(var(--pah-bg-t, -50%) + var(--pah-bg-x, 0px)), calc(-50% + var(--pah-bg-y, 0px)));
	pointer-events: none;
	user-select: none;
}

/* ---------- Dual Color Heading ---------- */
.pdh {
	--pdh-icon: 40px;
	display: flex;
	flex-direction: column;
	align-items: var(--pdh-justify, flex-start);
}
/* "Parts" (Content tab) sets the layout: side by side is plain text flow, so
   the second part goes on where the first one ends; the other two lay the
   parts out as boxes (flex) – see the Parts control. */
.pdh__title {
	display: block;
	gap: var(--pdh-gap, 0.25em);
	margin: 0;
}
.pdh__link {
	display: block;
	gap: var(--pdh-gap, 0.25em);
	color: inherit;
	text-decoration: none;
}
.pdh__part {
	display: var(--pdh-part-display, inline);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* In text flow the space between the parts is a real space; "Space Between
   the Parts" adds to it (its default, 0.25em, is about one space). */
.pdh__second {
	margin-inline-start: var(--pdh-part-ms, 0px);
}
.pdh__icon {
	display: inline-flex;
	margin-bottom: 14px;
	color: #c2410c;
	font-size: var(--pdh-icon);
	line-height: 1;
}
.pdh__icon svg {
	width: var(--pdh-icon);
	height: var(--pdh-icon);
	fill: currentColor;
}
.pdh__line {
	display: block;
	width: 80px;
	height: 3px;
	border-radius: 3px;
	background-color: #c2410c;
}
.pdh__line--above {
	margin-bottom: var(--pdh-line-gap, 14px);
}
.pdh__line--below {
	margin-top: var(--pdh-line-gap, 14px);
}
.pdh__text {
	max-width: 60ch;
	margin-top: 12px;
}
.pdh__text > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pah--play-loop .pah__shape,
	.pah--play-loop.pah--shape-marker .pah__hl::before {
		animation: none;
	}
	.pah .pah__shape {
		clip-path: none;
	}
	.pah.pah--shape-marker .pah__hl::before {
		transform: none;
	}
}