/**
 * FlowMax Heading Widget
 * Ultra-optimized CSS - minimal footprint
 * 
 * Classes:
 * - .fm-h      = Heading element
 * - .fm-hl     = Highlight span (base)
 * - .fm-hl--*  = Primary style modifiers
 * - .fm-pre--* = Preset effect modifiers
 */

/* ============================================
   Base Heading Styles
   ============================================ */

.fm-h {
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.fm-h a {
	color: inherit;
	text-decoration: none;
}

.fm-h a:hover {
	color: inherit;
}

/* ============================================
   Highlight Base
   ============================================ */

.fm-hl {
	position: relative;
	display: inline;
	--fm-preset-color: currentColor;
	--fm-underline-size: 2px;
	--fm-underline-offset: 0.1em;
	--fm-brush-angle: -2deg;
}

/* ============================================
   Primary Styles (from Highlight Style section)
   ============================================ */

/* Gradient text */
.fm-hl--gradient {
	background: linear-gradient(90deg, var(--fm-hl-grad-start, #667eea), var(--fm-hl-grad-end, #764ba2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Background marker */
.fm-hl--background {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Stroke outline */
.fm-hl--stroke {
	-webkit-text-fill-color: transparent;
}

/* ============================================
   Preset: Underlines
   ============================================ */

.fm-pre--underline-thick {
	text-decoration: underline;
	text-decoration-color: var(--fm-preset-color);
	text-decoration-thickness: calc(var(--fm-underline-size) * 2);
	text-underline-offset: var(--fm-underline-offset);
}

.fm-pre--underline-wavy {
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--fm-preset-color);
	text-decoration-thickness: var(--fm-underline-size);
	text-underline-offset: var(--fm-underline-offset);
}

/* Gradient compatibility for underline presets */
.fm-hl--gradient.fm-pre--underline-thick,
.fm-hl--gradient.fm-pre--underline-wavy {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.fm-hl--gradient.fm-pre--underline-thick::after,
.fm-hl--gradient.fm-pre--underline-wavy::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--fm-underline-offset));
}

.fm-hl--gradient.fm-pre--underline-thick::after {
	height: calc(var(--fm-underline-size) * 2);
	background: var(--fm-preset-color);
}

.fm-hl--gradient.fm-pre--underline-wavy::after {
	height: calc(var(--fm-underline-size) * 1.2);
	background-image: radial-gradient(circle at 4px 2px, var(--fm-preset-color) 0 2px, transparent 2px);
	background-size: 8px 4px;
	background-repeat: repeat-x;
}

/* ============================================
   Preset: Brush Marker
   ============================================ */

.fm-pre--brush-marker {
	position: relative;
	display: inline;
	padding: 0.05em 0.15em;
}

.fm-pre--brush-marker::before {
	content: '';
	position: absolute;
	left: -0.1em;
	right: -0.1em;
	top: 0.1em;
	bottom: -0.05em;
	background: var(--fm-preset-color);
	opacity: 0.3;
	transform: rotate(var(--fm-brush-angle)) skewX(-5deg);
	z-index: -1;
	border-radius: 0.1em 0.3em 0.2em 0.4em;
}

/* ============================================
   Preset: Circle / Oval (SVG)
   ============================================ */

/* inline-block so the span is a sizing + positioning context — zero padding, no extra space */
.fm-pre--circle {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	line-height: inherit;
	isolation: isolate;
}

.fm-svg-circle {
	position: absolute;
	top: -0.15em;
	left: -0.2em;
	width: calc(100% + 0.4em);
	height: calc(100% + 0.3em);
	pointer-events: none;
	overflow: visible;
	z-index: -1;
}

.fm-svg-circle path {
	fill: none;
	stroke: currentColor;
	stroke-width: 3px;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	will-change: stroke-dashoffset;
}

/* Draw-on: path starts hidden, draws in, waits, then repeats */
.fm-svg-circle--animate path {
	stroke-dashoffset: 100;
	animation: fm-circle-draw 3s ease-in-out infinite;
}

@keyframes fm-circle-draw {
	0%   { stroke-dashoffset: 100; opacity: 1; }
	30%  { stroke-dashoffset: 0;   opacity: 1; }
	/* Hold */
	80%  { stroke-dashoffset: 0;   opacity: 1; }
	/* Fade out */
	95%  { stroke-dashoffset: 0;   opacity: 0; }
	100% { stroke-dashoffset: 100; opacity: 0; }
}

/* ============================================
   Shared SVG Shape Base (scribble, arc, box, zigzag)
   ============================================ */

.fm-pre--scribble,
.fm-pre--curved-arc,
.fm-pre--box,
.fm-pre--zigzag,
.fm-pre--signature,
.fm-pre--signature-2 {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	line-height: inherit;
	/* Stacking context so z-index: -1 on child stays inside this element */
	isolation: isolate;
}

.fm-svg-shape {
	position: absolute;
	pointer-events: none;
	overflow: visible;
	/* -1 puts SVG behind text but above background, thanks to isolation on parent */
	z-index: -1;
}

.fm-svg-shape path {
	fill: none;
	stroke: currentColor;
	stroke-width: 3px;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	shape-rendering: geometricPrecision;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	will-change: stroke-dashoffset;
}

.fm-svg-shape--animate path {
	stroke-dashoffset: 100;
	animation: fm-shape-draw 3s ease-in-out infinite;
}

@keyframes fm-shape-draw {
	0%   { stroke-dashoffset: 100; opacity: 1; }
	30%  { stroke-dashoffset: 0;   opacity: 1; }
	/* Hold */
	80%  { stroke-dashoffset: 0;   opacity: 1; }
	/* Fade out */
	95%  { stroke-dashoffset: 0;   opacity: 0; }
	100% { stroke-dashoffset: 100; opacity: 0; }
}

/* ============================================
   Preset: Scribble Underline
   ============================================ */

.fm-pre--scribble .fm-svg-shape {
	/* Sits just below the text */
	top: auto;
	bottom: -0.3em;
	left: -0.1em;
	width: calc(100% + 0.2em);
	height: 0.5em;
}

/* ============================================
   Preset: Curved Arc
   ============================================ */

.fm-pre--curved-arc .fm-svg-shape {
	/* Arc curves below the text */
	top: auto;
	bottom: -0.45em;
	left: -0.1em;
	width: calc(100% + 0.2em);
	height: 0.6em;
}

/* ============================================
   Preset: Box
   ============================================ */

.fm-pre--box .fm-svg-shape {
	top: -0.15em;
	left: -0.2em;
	width: calc(100% + 0.4em);
	height: calc(100% + 0.3em);
}

/* ============================================
   Preset: Zigzag
   ============================================ */

.fm-pre--zigzag .fm-svg-shape {
	top: auto;
	bottom: -0.35em;
	left: -0.1em;
	width: calc(100% + 0.2em);
	height: 0.5em;
}

/* ============================================
   Preset: Signature Arrows
   ============================================ */

/* Signature 1 (Vector 12) viewBox 265×107, ratio 2.48:1 — mirrored so arrow points left toward text */
.fm-pre--signature .fm-svg-shape {
	top: auto;
	bottom: -0.5em;
	left: 3em;
	right: auto;
	width: 2em;
	height: calc(2em * 0.404);
	overflow: visible;
	transform: scaleX(-1) rotate(-9deg);
}

/* Signature 2 (Vector 37) viewBox 225×74, ratio 3.04:1 — mirrored so arrow points left toward text */
.fm-pre--signature-2 .fm-svg-shape {
	top: auto;
	bottom: -0.5em;
	left: 3em;
	right: auto;
	width: 2em;
	height: calc(2em * 0.329);
	overflow: visible;
	transform: scaleX(-1) rotate(-9deg);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 767px) {
	.fm-h {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.fm-hl,
	.fm-hl::before,
	.fm-hl::after,
	.fm-svg-circle path,
	.fm-svg-shape path {
		animation: none !important;
		transition: none !important;
	}
}