/**
 * Pretpot – Text with Multiple Borders
 * File: assets/css/text-with-multiple-borders.css
 *
 * The actual stroke layers are drawn on a <canvas> element injected by JS
 * (so we get real multi-stroke support). This file handles layout, the
 * visible HTML text node (which sits on top of the canvas), and
 * "transparent fill" mode.
 */

/* ── Wrapper ── */
.pretpot-tmb-wrapper {
	position: relative;
	display: block;
	line-height: 1;
}

/* ── Canvas drawn behind the text ── */
.pretpot-tmb-canvas {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	display: block;
	/* canvas is sized by JS to match the text element */
}

/* ── Text node sits on top of canvas ── */
.pretpot-tmb-text {
	position: relative;
	z-index: 2;
	display: inline-block; /* so width hugs the text */
	margin: 0;
	line-height: inherit;
	/* color is set via Elementor colour control */
}

/* ── Transparent fill: show only the strokes ── */
.pretpot-tmb-transparent-fill .pretpot-tmb-text {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

/* ── Responsive: prevent canvas overflow ── */
.pretpot-tmb-wrapper,
.pretpot-tmb-canvas {
	max-width: 100%;
}