docgen-utils 1.0.5

package/dist/packages/docs/parse.js

@@ -0,0 +1,4253 @@
+import { CONTAINER_TAGS } from "./common";
+/**
+ * Remove @media blocks from CSS text by tracking brace nesting.
+ * This properly handles nested braces within media queries.
+ */
+function removeMediaQueries(cssText) {
+    let result = "";
+    let i = 0;
+    while (i < cssText.length) {
+        // Check for @media at current position
+        if (cssText.substring(i, i + 6).toLowerCase() === "@media") {
+            // Find the opening brace
+            let braceStart = cssText.indexOf("{", i);
+            if (braceStart === -1) {
+                // Malformed CSS, include rest as-is
+                result += cssText.substring(i);
+                break;
+            }
+            // Track brace depth to find matching closing brace
+            let depth = 1;
+            let j = braceStart + 1;
+            while (j < cssText.length && depth > 0) {
+                if (cssText[j] === "{") {
+                    depth++;
+                }
+                else if (cssText[j] === "}") {
+                    depth--;
+                }
+                j++;
+            }
+            // Skip the entire @media block (from @media to matching })
+            i = j;
+        }
+        else {
+            result += cssText[i];
+            i++;
+        }
+    }
+    return result;
+}
+/**
+ * Extract the first color from a CSS gradient value.
+ * Handles linear-gradient, radial-gradient, and conic-gradient.
+ * Returns the first color stop (hex, rgb, rgba, hsl, or named color).
+ *
+ * Examples:
+ *   "linear-gradient(135deg, #7c3aed, #a78bfa, #c084fc)" -> "#7c3aed"
+ *   "linear-gradient(to right, red, blue)" -> "red"
+ *   "radial-gradient(circle, rgb(124, 58, 237), purple)" -> "rgb(124, 58, 237)"
+ */
+function extractFirstGradientColor(value) {
+    if (!value)
+        return undefined;
+    // Check if it's a gradient
+    const gradientMatch = value.match(/(?:linear|radial|conic)-gradient\s*\(([^)]+)\)/i);
+    if (!gradientMatch)
+        return undefined;
+    const gradientContent = gradientMatch[1];
+    // Split by commas, but handle rgb/rgba/hsl/hsla which contain commas
+    // Find color values after the direction/angle part
+    const parts = [];
+    let current = "";
+    let parenDepth = 0;
+    for (let i = 0; i < gradientContent.length; i++) {
+        const char = gradientContent[i];
+        if (char === "(") {
+            parenDepth++;
+            current += char;
+        }
+        else if (char === ")") {
+            parenDepth--;
+            current += char;
+        }
+        else if (char === "," && parenDepth === 0) {
+            parts.push(current.trim());
+            current = "";
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        parts.push(current.trim());
+    }
+    // Direction/angle keywords to skip
+    const directionKeywords = /^(?:\d+deg|to\s+(?:top|bottom|left|right|top\s+left|top\s+right|bottom\s+left|bottom\s+right)|circle|ellipse|at\s+|closest-side|farthest-side|closest-corner|farthest-corner)/i;
+    // Color patterns
+    const colorPattern = /^(?:#[0-9a-fA-F]{3,8}|rgba?\s*\([^)]+\)|hsla?\s*\([^)]+\)|[a-zA-Z]+)(?:\s+\d+%)?$/i;
+    for (const part of parts) {
+        // Skip direction/angle specifications
+        if (directionKeywords.test(part))
+            continue;
+        // Check if this looks like a color (possibly with a percentage stop position)
+        if (colorPattern.test(part)) {
+            // Extract just the color part (remove percentage if present)
+            const colorOnly = part.replace(/\s+\d+%$/, "").trim();
+            return colorOnly;
+        }
+    }
+    return undefined;
+}
+/**
+ * Parse a CSS gradient value into a TextGradient structure.
+ * Extracts angle and all color stops for use in DOCX gradient fills.
+ *
+ * Examples:
+ *   "linear-gradient(135deg, #7c3aed, #a78bfa, #c084fc)" ->
+ *     { angle: 135, stops: [{ color: "7C3AED", position: 0 }, { color: "A78BFA", position: 50 }, { color: "C084FC", position: 100 }] }
+ */
+function parseGradient(value) {
+    if (!value)
+        return undefined;
+    // Check if it's a linear gradient (only linear gradients are supported in DOCX)
+    const gradientMatch = value.match(/linear-gradient\s*\(([^)]+)\)/i);
+    if (!gradientMatch)
+        return undefined;
+    const gradientContent = gradientMatch[1];
+    // Split by commas, but handle rgb/rgba/hsl/hsla which contain commas
+    const parts = [];
+    let current = "";
+    let parenDepth = 0;
+    for (let i = 0; i < gradientContent.length; i++) {
+        const char = gradientContent[i];
+        if (char === "(") {
+            parenDepth++;
+            current += char;
+        }
+        else if (char === ")") {
+            parenDepth--;
+            current += char;
+        }
+        else if (char === "," && parenDepth === 0) {
+            parts.push(current.trim());
+            current = "";
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        parts.push(current.trim());
+    }
+    // Extract angle from first part if it's a direction
+    let angle = 180; // Default: top to bottom
+    let colorStartIndex = 0;
+    if (parts.length > 0) {
+        const firstPart = parts[0];
+        // Check for angle in degrees
+        const degMatch = firstPart.match(/^(\d+)deg$/i);
+        if (degMatch) {
+            angle = parseInt(degMatch[1], 10);
+            colorStartIndex = 1;
+        }
+        else if (firstPart.match(/^to\s+/i)) {
+            // Convert direction keywords to angles
+            const direction = firstPart.toLowerCase();
+            if (direction.includes("right") && direction.includes("bottom"))
+                angle = 135;
+            else if (direction.includes("right") && direction.includes("top"))
+                angle = 45;
+            else if (direction.includes("left") && direction.includes("bottom"))
+                angle = 225;
+            else if (direction.includes("left") && direction.includes("top"))
+                angle = 315;
+            else if (direction.includes("right"))
+                angle = 90;
+            else if (direction.includes("left"))
+                angle = 270;
+            else if (direction.includes("bottom"))
+                angle = 180;
+            else if (direction.includes("top"))
+                angle = 0;
+            colorStartIndex = 1;
+        }
+    }
+    // Extract color stops
+    const colorParts = parts.slice(colorStartIndex);
+    if (colorParts.length === 0)
+        return undefined;
+    const stops = [];
+    const colorPattern = /^(#[0-9a-fA-F]{3,8}|rgba?\s*\([^)]+\)|hsla?\s*\([^)]+\)|[a-zA-Z]+)(?:\s+(\d+)%)?$/i;
+    for (let i = 0; i < colorParts.length; i++) {
+        const part = colorParts[i];
+        const match = part.match(colorPattern);
+        if (match) {
+            let color = match[1];
+            // Convert color to hex without #
+            color = normalizeColorToHex(color);
+            // Get position (default: evenly distributed)
+            let position;
+            if (match[2]) {
+                position = parseInt(match[2], 10);
+            }
+            else {
+                // Evenly distribute if no position specified
+                position = colorParts.length === 1 ? 0 : (i / (colorParts.length - 1)) * 100;
+            }
+            stops.push({ color, position: Math.round(position) });
+        }
+    }
+    if (stops.length < 2)
+        return undefined;
+    return { angle, stops };
+}
+/**
+ * Normalize a CSS color value to hex format (without #).
+ * Handles hex (#RGB, #RRGGBB), rgb(), rgba(), and named colors.
+ */
+function normalizeColorToHex(color) {
+    color = color.trim();
+    // Already hex
+    if (color.startsWith("#")) {
+        let hex = color.slice(1).toUpperCase();
+        // Expand shorthand (#RGB -> #RRGGBB)
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        // Strip alpha if present (#RRGGBBAA -> #RRGGBB)
+        if (hex.length === 8) {
+            hex = hex.slice(0, 6);
+        }
+        return hex;
+    }
+    // RGB/RGBA
+    const rgbMatch = color.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1], 10).toString(16).padStart(2, "0");
+        const g = parseInt(rgbMatch[2], 10).toString(16).padStart(2, "0");
+        const b = parseInt(rgbMatch[3], 10).toString(16).padStart(2, "0");
+        return (r + g + b).toUpperCase();
+    }
+    // Named colors (common ones)
+    const namedColors = {
+        red: "FF0000", green: "008000", blue: "0000FF", white: "FFFFFF", black: "000000",
+        yellow: "FFFF00", cyan: "00FFFF", magenta: "FF00FF", orange: "FFA500", purple: "800080",
+        pink: "FFC0CB", gray: "808080", grey: "808080", navy: "000080", teal: "008080",
+        maroon: "800000", olive: "808000", lime: "00FF00", aqua: "00FFFF", silver: "C0C0C0",
+        fuchsia: "FF00FF", transparent: "FFFFFF",
+    };
+    const lowerColor = color.toLowerCase();
+    if (namedColors[lowerColor]) {
+        return namedColors[lowerColor];
+    }
+    // Fallback: return as-is (uppercase)
+    return color.toUpperCase().replace("#", "");
+}
+/**
+ * Extract the primary (first) font name from a CSS font-family value.
+ * Handles font stacks like "'Source Sans Pro', -apple-system, sans-serif"
+ * Returns the first non-generic font name, cleaned of quotes.
+ *
+ * Generic fonts (sans-serif, serif, monospace, cursive, fantasy, system-ui) are skipped
+ * unless they're the only option.
+ */
+function extractPrimaryFont(fontFamily) {
+    if (!fontFamily)
+        return undefined;
+    // Split by comma, handling quoted font names
+    const fonts = [];
+    let current = "";
+    let inQuote = false;
+    let quoteChar = "";
+    for (let i = 0; i < fontFamily.length; i++) {
+        const char = fontFamily[i];
+        if ((char === '"' || char === "'") && !inQuote) {
+            inQuote = true;
+            quoteChar = char;
+        }
+        else if (char === quoteChar && inQuote) {
+            inQuote = false;
+            quoteChar = "";
+        }
+        else if (char === "," && !inQuote) {
+            const trimmed = current.trim().replace(/^['"]|['"]$/g, "");
+            if (trimmed)
+                fonts.push(trimmed);
+            current = "";
+        }
+        else {
+            current += char;
+        }
+    }
+    // Add last font
+    const trimmed = current.trim().replace(/^['"]|['"]$/g, "");
+    if (trimmed)
+        fonts.push(trimmed);
+    // Generic font families to skip
+    const genericFonts = new Set([
+        "sans-serif", "serif", "monospace", "cursive", "fantasy", "system-ui",
+        "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue",
+        "Arial", "Helvetica", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Noto Sans", "sans-serif", "Oxygen", "Open Sans",
+    ]);
+    // Find first non-generic font
+    for (const font of fonts) {
+        if (!genericFonts.has(font) && !font.startsWith("-")) {
+            return font;
+        }
+    }
+    // If all fonts are generic, return the first one
+    return fonts[0];
+}
+/**
+ * Parse CSS variables and class color rules from a style element.
+ */
+function parseCssContext(doc) {
+    const variables = new Map();
+    const classColors = new Map();
+    const calloutStyles = new Map();
+    const classStyles = new Map();
+    const elementStyles = new Map();
+    const nestedStyles = new Map();
+    // Helper to resolve CSS variable or return value as-is
+    // Handles multiple var() references in a single value (e.g., "var(--a) var(--b)")
+    const resolveValue = (value) => {
+        // Replace all var() references with their resolved values
+        return value.replace(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/g, (match, varName) => {
+            const resolved = variables.get(varName);
+            return resolved || match; // Keep original if not found
+        });
+    };
+    // Find all style elements
+    const styleElements = doc.querySelectorAll("style");
+    for (const styleEl of styleElements) {
+        let cssText = styleEl.textContent || "";
+        // Remove media queries to avoid mobile-specific styles overriding desktop defaults
+        // Use a function-based approach to correctly handle nested braces
+        cssText = removeMediaQueries(cssText);
+        // Extract CSS variables from :root { --name: value; }
+        const rootMatch = cssText.match(/:root\s*\{([^}]+)\}/);
+        if (rootMatch) {
+            const rootContent = rootMatch[1];
+            const varMatches = rootContent.matchAll(/--([a-zA-Z0-9-]+)\s*:\s*([^;]+)/g);
+            for (const match of varMatches) {
+                const varName = `--${match[1]}`;
+                const varValue = match[2].trim();
+                variables.set(varName, varValue);
+            }
+        }
+        // Also extract CSS variables from theme classes (e.g., .theme-professional)
+        // These are commonly used to scope CSS variables to body elements
+        const themeClassMatches = cssText.matchAll(/\.theme-[a-zA-Z0-9_-]+\s*\{([^}]+)\}/g);
+        for (const themeMatch of themeClassMatches) {
+            const themeContent = themeMatch[1];
+            const varMatches = themeContent.matchAll(/--([a-zA-Z0-9-]+)\s*:\s*([^;]+)/g);
+            for (const match of varMatches) {
+                const varName = `--${match[1]}`;
+                const varValue = match[2].trim();
+                // Only set if not already defined (prefer :root values)
+                if (!variables.has(varName)) {
+                    variables.set(varName, varValue);
+                }
+            }
+        }
+        // Extract class color rules: .classname { color: value; }
+        // NOTE: Use negative lookbehind to exclude nested selectors like ".parent .child { ... }"
+        // The (?<!\S\s+) ensures we only match top-level class selectors
+        const classRuleMatches = cssText.matchAll(/(?:^|[;\n}])\s*\.([a-zA-Z0-9_-]+)\s*\{([^}]+)\}/gm);
+        for (const match of classRuleMatches) {
+            const fullMatch = match[0];
+            const className = match[1];
+            const ruleContent = match[2];
+            // Skip if this looks like a nested selector (has another class before it)
+            // Check if the match is preceded by another class selector on the same line
+            const precedingText = cssText.substring(0, match.index).split('\n').pop() || '';
+            if (precedingText.match(/\.[a-zA-Z0-9_-]+\s*$/)) {
+                // This is a nested selector like ".parent .child { ... }" - skip it here
+                // Nested selectors will be handled by storing parent-child relationships
+                continue;
+            }
+            // Extract ALL style properties for this class (generalized approach)
+            const style = {};
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                const colorValue = resolveValue(colorMatch[1].trim());
+                classColors.set(className, colorValue);
+                style.color = colorValue;
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds (not text gradients)
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Gradient text detection: when background-clip: text is used with a gradient background,
+            // extract the first color from the gradient as fallback and also store full gradient
+            const hasBackgroundClipText = ruleContent.match(/(?:-webkit-)?background-clip\s*:\s*text/i);
+            if (hasBackgroundClipText && bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // Parse full gradient
+                const gradient = parseGradient(bgValue);
+                if (gradient) {
+                    style.gradient = gradient;
+                    // Also set fallback color from first stop
+                    if (!style.color) {
+                        style.color = gradient.stops[0]?.color;
+                        if (style.color) {
+                            classColors.set(className, style.color);
+                        }
+                    }
+                }
+                else {
+                    // Fallback: extract first color if gradient parsing fails
+                    const gradientColor = extractFirstGradientColor(bgValue);
+                    if (gradientColor && !style.color) {
+                        style.color = gradientColor;
+                        classColors.set(className, gradientColor);
+                    }
+                }
+            }
+            // Border color
+            const borderColorMatch = ruleContent.match(/border-color\s*:\s*([^;]+)/i);
+            if (borderColorMatch) {
+                style.borderColor = resolveValue(borderColorMatch[1].trim());
+            }
+            // Border shorthand (e.g., "1px solid #e5e7eb")
+            const borderMatch = ruleContent.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+            if (borderMatch) {
+                style.border = resolveValue(borderMatch[1].trim());
+            }
+            // Border-left (used by callouts: "4px solid #2563eb")
+            const borderLeftMatch = ruleContent.match(/border-left\s*:\s*([^;]+)/i);
+            if (borderLeftMatch) {
+                const borderLeftValue = resolveValue(borderLeftMatch[1].trim());
+                // If it contains a color, extract it as borderColor
+                const colorInBorder = borderLeftValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+                // Store the full border-left value
+                style.borderLeft = borderLeftValue;
+                style.border = style.border || borderLeftValue;
+            }
+            // Border-right (used by sidebar dividers, etc.)
+            const borderRightMatch = ruleContent.match(/border-right\s*:\s*([^;]+)/i);
+            if (borderRightMatch) {
+                style.borderRight = resolveValue(borderRightMatch[1].trim());
+            }
+            // Border-bottom (used by title blocks with divider lines)
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch) {
+                style.borderBottom = resolveValue(borderBottomMatch[1].trim());
+            }
+            // Border-top (used by footer sections with top divider lines)
+            const borderTopMatch = ruleContent.match(/border-top\s*:\s*([^;]+)/i);
+            if (borderTopMatch) {
+                style.borderTop = resolveValue(borderTopMatch[1].trim());
+            }
+            // Display property (grid, flex, block, etc.)
+            const displayMatch = ruleContent.match(/display\s*:\s*([^;]+)/i);
+            if (displayMatch) {
+                style.display = resolveValue(displayMatch[1].trim());
+            }
+            // Flex property (for flex item sizing like "flex: 1")
+            const flexMatch = ruleContent.match(/(?:^|;)\s*flex\s*:\s*([^;]+)/i);
+            if (flexMatch) {
+                style.flex = resolveValue(flexMatch[1].trim());
+            }
+            // Flex-direction property (for horizontal vs vertical flex containers)
+            const flexDirectionMatch = ruleContent.match(/flex-direction\s*:\s*([^;]+)/i);
+            if (flexDirectionMatch) {
+                style.flexDirection = resolveValue(flexDirectionMatch[1].trim());
+            }
+            // Flex-wrap property (for wrapping behavior)
+            const flexWrapMatch = ruleContent.match(/flex-wrap\s*:\s*([^;]+)/i);
+            if (flexWrapMatch) {
+                style.flexWrap = resolveValue(flexWrapMatch[1].trim());
+            }
+            // Gap property (for flex/grid spacing)
+            const gapMatch = ruleContent.match(/(?:^|;)\s*gap\s*:\s*([^;]+)/i);
+            if (gapMatch) {
+                style.gap = resolveValue(gapMatch[1].trim());
+            }
+            // Grid template columns (for two-column layout detection)
+            const gridColsMatch = ruleContent.match(/grid-template-columns\s*:\s*([^;]+)/i);
+            if (gridColsMatch) {
+                style.gridTemplateColumns = resolveValue(gridColsMatch[1].trim());
+            }
+            // Text alignment
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Font size
+            const fontSizeMatch = ruleContent.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch) {
+                style.fontSize = resolveValue(fontSizeMatch[1].trim());
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Padding
+            const paddingMatch = ruleContent.match(/padding\s*:\s*([^;]+)/i);
+            if (paddingMatch) {
+                style.padding = resolveValue(paddingMatch[1].trim());
+            }
+            // Font style (italic, normal)
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack)
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Text indent (e.g., "2rem", "-2rem" for hanging indents)
+            const textIndentMatch = ruleContent.match(/text-indent\s*:\s*([^;]+)/i);
+            if (textIndentMatch) {
+                style.textIndent = resolveValue(textIndentMatch[1].trim());
+            }
+            // Text transform (uppercase, lowercase, capitalize)
+            const textTransformMatch = ruleContent.match(/text-transform\s*:\s*([^;]+)/i);
+            if (textTransformMatch) {
+                style.textTransform = resolveValue(textTransformMatch[1].trim());
+            }
+            // GENERALIZED: Margin-bottom (for paragraph spacing)
+            const marginBottomMatch = ruleContent.match(/margin-bottom\s*:\s*([^;]+)/i);
+            if (marginBottomMatch) {
+                style.marginBottom = resolveValue(marginBottomMatch[1].trim());
+            }
+            // GENERALIZED: Line-height (for vertical spacing within text)
+            const lineHeightMatch = ruleContent.match(/line-height\s*:\s*([^;]+)/i);
+            if (lineHeightMatch) {
+                style.lineHeight = resolveValue(lineHeightMatch[1].trim());
+            }
+            // Store if we found any properties
+            // MERGE with existing styles (later rules can add properties without overwriting)
+            if (Object.keys(style).length > 0) {
+                const existing = classStyles.get(className) || {};
+                classStyles.set(className, { ...existing, ...style });
+            }
+        }
+        // Parse element.class combined selectors like "dd.dish-description { font-style: italic; }"
+        // These are more specific than just .class, but we store under the class name
+        // since getElementStyles already verifies element type separately
+        const elementClassMatches = cssText.matchAll(/(?:^|[;\n}])\s*([a-zA-Z][a-zA-Z0-9]*)\s*\.\s*([a-zA-Z0-9_-]+)\s*\{([^}]+)\}/gm);
+        for (const match of elementClassMatches) {
+            const elementName = match[1].toLowerCase();
+            const className = match[2];
+            const ruleContent = match[3];
+            // Extract style properties (same as class rules above)
+            const style = {};
+            // Font style (italic, normal)
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                const colorValue = resolveValue(colorMatch[1].trim());
+                style.color = colorValue;
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Text alignment
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack)
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Store under the class name (merge with existing)
+            if (Object.keys(style).length > 0) {
+                const existing = classStyles.get(className) || {};
+                classStyles.set(className, { ...existing, ...style });
+            }
+        }
+        // Parse nested CSS selectors like ".parent .child { color: ... }" or ".parent element { color: ... }"
+        // Also handles "element.parent .child { ... }" like "figure.menu-image .image-placeholder { ... }"
+        // Store the parent-child relationship so we can look up styles based on context
+        // Supports: .works-cited p { text-indent: -2rem; } or .callout .callout-label { color: ... }
+        // Extended pattern to match:
+        // - .parentClass .child { ... }
+        // - element.parentClass .child { ... }
+        const nestedSelectorMatches = cssText.matchAll(/(?:[a-zA-Z0-9_-]*)?\.([a-zA-Z0-9_-]+)\s+(\.?[a-zA-Z0-9_-]+)\s*\{([^}]+)\}/g);
+        for (const match of nestedSelectorMatches) {
+            const parentClass = match[1];
+            let childSelector = match[2];
+            // Remove leading dot if present (for .class selectors)
+            if (childSelector.startsWith('.')) {
+                childSelector = childSelector.slice(1);
+            }
+            const ruleContent = match[3];
+            // Extract style properties for the child when inside this parent
+            const style = {};
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                style.color = resolveValue(colorMatch[1].trim());
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Gradient text detection: when background-clip: text is used with a gradient background,
+            // extract the first color from the gradient as fallback and also store full gradient
+            const hasBackgroundClipText = ruleContent.match(/(?:-webkit-)?background-clip\s*:\s*text/i);
+            if (hasBackgroundClipText && bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // Parse full gradient
+                const gradient = parseGradient(bgValue);
+                if (gradient) {
+                    style.gradient = gradient;
+                    // Also set fallback color from first stop
+                    if (!style.color) {
+                        style.color = gradient.stops[0]?.color;
+                    }
+                }
+                else {
+                    // Fallback: extract first color if gradient parsing fails
+                    const gradientColor = extractFirstGradientColor(bgValue);
+                    if (gradientColor && !style.color) {
+                        style.color = gradientColor;
+                    }
+                }
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Text indent (for nested hanging indents like .works-cited p)
+            const textIndentMatch = ruleContent.match(/text-indent\s*:\s*([^;]+)/i);
+            if (textIndentMatch) {
+                style.textIndent = resolveValue(textIndentMatch[1].trim());
+            }
+            // Font style
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack)
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Border (full shorthand, e.g., "1px solid #e5e7eb")
+            const borderMatch = ruleContent.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+            if (borderMatch) {
+                style.border = resolveValue(borderMatch[1].trim());
+            }
+            // Border-left (callout styling)
+            const borderLeftMatch = ruleContent.match(/border-left\s*:\s*([^;]+)/i);
+            if (borderLeftMatch) {
+                const borderLeftValue = resolveValue(borderLeftMatch[1].trim());
+                style.borderLeft = borderLeftValue;
+                style.border = style.border || borderLeftValue;
+                // Extract color from border value
+                const colorInBorder = borderLeftValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+            }
+            // Border-bottom (heading underline styling, e.g., h2 { border-bottom: 3px solid #7c3aed; })
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch) {
+                const borderBottomValue = resolveValue(borderBottomMatch[1].trim());
+                style.borderBottom = borderBottomValue;
+                // Extract color from border value
+                const colorInBorder = borderBottomValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+            }
+            // Text-transform (uppercase, lowercase, capitalize for headings, labels, etc.)
+            const textTransformMatch = ruleContent.match(/text-transform\s*:\s*([^;]+)/i);
+            if (textTransformMatch) {
+                style.textTransform = resolveValue(textTransformMatch[1].trim());
+            }
+            // Store in nestedStyles: parentClass -> (childSelector -> style)
+            if (Object.keys(style).length > 0) {
+                if (!nestedStyles.has(parentClass)) {
+                    nestedStyles.set(parentClass, new Map());
+                }
+                const existing = nestedStyles.get(parentClass).get(childSelector) || {};
+                nestedStyles.get(parentClass).set(childSelector, { ...existing, ...style });
+            }
+        }
+        // Parse element type selectors (body, p, h1, h2, h3, h4, h5, h6, etc.)
+        // These are rules like: body { color: var(--color-text); }
+        // or grouped rules like: h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }
+        // IMPORTANT: Only match STANDALONE element selectors, not selectors like ".class p" or "#id p"
+        // The (?:^|[,\s]) lookbehind ensures we're not part of a complex selector
+        // We need to be careful to not match ".timeline-content p" as just "p"
+        const elementSelectorPattern = /(?:^|[\n\r])(\s*(?:body|p|h[1-6]|span|div|ul|ol|li|table|th|td|blockquote|section|article|aside|nav|header|footer|figure|figcaption|address|abbr)(?:\s*,\s*(?:body|p|h[1-6]|span|div|ul|ol|li|table|th|td|blockquote|section|article|aside|nav|header|footer|figure|figcaption|address|abbr))*)\s*\{([^}]+)\}/gi;
+        const elementMatches = cssText.matchAll(elementSelectorPattern);
+        for (const match of elementMatches) {
+            const selectorList = match[1];
+            const ruleContent = match[2];
+            // Split comma-separated selectors
+            const selectors = selectorList.split(/\s*,\s*/).map(s => s.trim().toLowerCase());
+            // Extract style properties
+            const style = {};
+            // Text color
+            const colorMatch = ruleContent.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                style.color = resolveValue(colorMatch[1].trim());
+            }
+            // Background color
+            const bgMatch = ruleContent.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const bgValue = resolveValue(bgMatch[1].trim());
+                // For gradient backgrounds, extract the first color as fallback for DOCX
+                // Also store the full gradient for containers that support gradient rendering
+                const gradientColor = extractFirstGradientColor(bgValue);
+                if (gradientColor) {
+                    style.backgroundColor = gradientColor;
+                    // Parse full gradient for container backgrounds
+                    const gradient = parseGradient(bgValue);
+                    if (gradient) {
+                        style.backgroundGradient = gradient;
+                    }
+                }
+                else {
+                    style.backgroundColor = bgValue;
+                }
+            }
+            // Font size
+            const fontSizeMatch = ruleContent.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch) {
+                style.fontSize = resolveValue(fontSizeMatch[1].trim());
+            }
+            // Font weight
+            const fontWeightMatch = ruleContent.match(/font-weight\s*:\s*([^;]+)/i);
+            if (fontWeightMatch) {
+                style.fontWeight = resolveValue(fontWeightMatch[1].trim());
+            }
+            // Padding (for table cells th, td)
+            const paddingMatch = ruleContent.match(/padding\s*:\s*([^;]+)/i);
+            if (paddingMatch) {
+                style.padding = resolveValue(paddingMatch[1].trim());
+            }
+            // Font style (italic, normal) - for blockquotes
+            const fontStyleMatch = ruleContent.match(/font-style\s*:\s*([^;]+)/i);
+            if (fontStyleMatch) {
+                style.fontStyle = resolveValue(fontStyleMatch[1].trim());
+            }
+            // Font family (extract primary font from font stack) - for body, headings, etc.
+            const fontFamilyMatch = ruleContent.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const resolved = resolveValue(fontFamilyMatch[1].trim());
+                const primaryFont = extractPrimaryFont(resolved);
+                if (primaryFont) {
+                    style.fontFamily = primaryFont;
+                }
+            }
+            // Text indent (for paragraph first-line indentation)
+            const textIndentMatch = ruleContent.match(/text-indent\s*:\s*([^;]+)/i);
+            if (textIndentMatch) {
+                style.textIndent = resolveValue(textIndentMatch[1].trim());
+            }
+            // Text transform (uppercase, lowercase, capitalize)
+            const textTransformMatch = ruleContent.match(/text-transform\s*:\s*([^;]+)/i);
+            if (textTransformMatch) {
+                style.textTransform = resolveValue(textTransformMatch[1].trim());
+            }
+            // GENERALIZED: Margin-bottom (for paragraph spacing)
+            const marginBottomMatch = ruleContent.match(/margin-bottom\s*:\s*([^;]+)/i);
+            if (marginBottomMatch) {
+                style.marginBottom = resolveValue(marginBottomMatch[1].trim());
+            }
+            // GENERALIZED: Line-height (for vertical spacing within text)
+            const lineHeightMatch = ruleContent.match(/line-height\s*:\s*([^;]+)/i);
+            if (lineHeightMatch) {
+                style.lineHeight = resolveValue(lineHeightMatch[1].trim());
+            }
+            // Text alignment (left, center, right, justify)
+            const textAlignMatch = ruleContent.match(/text-align\s*:\s*([^;]+)/i);
+            if (textAlignMatch) {
+                style.textAlign = resolveValue(textAlignMatch[1].trim());
+            }
+            // Border shorthand (e.g., "1px solid #e5e7eb")
+            const borderMatch = ruleContent.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+            if (borderMatch) {
+                style.border = resolveValue(borderMatch[1].trim());
+            }
+            // Border-left (used by blockquotes/callouts: "4px solid #8b4513")
+            const borderLeftMatch = ruleContent.match(/border-left\s*:\s*([^;]+)/i);
+            if (borderLeftMatch) {
+                const borderLeftValue = resolveValue(borderLeftMatch[1].trim());
+                // If it contains a color, extract it as borderColor
+                const colorInBorder = borderLeftValue.match(/#([0-9a-fA-F]{3,6})/);
+                if (colorInBorder && !style.borderColor) {
+                    style.borderColor = `#${colorInBorder[1]}`;
+                }
+                // Store the full border-left value
+                style.borderLeft = borderLeftValue;
+                style.border = style.border || borderLeftValue;
+            }
+            // Border-right (used by sidebar dividers, etc.)
+            const borderRightMatch = ruleContent.match(/border-right\s*:\s*([^;]+)/i);
+            if (borderRightMatch) {
+                style.borderRight = resolveValue(borderRightMatch[1].trim());
+            }
+            // Border color (direct property)
+            const borderColorMatch = ruleContent.match(/border-color\s*:\s*([^;]+)/i);
+            if (borderColorMatch) {
+                style.borderColor = resolveValue(borderColorMatch[1].trim());
+            }
+            // GENERALIZED: Border-bottom (used by h2 underlines, title blocks, etc.)
+            // Any element can have border-bottom - extract from element selectors
+            const borderBottomMatch = ruleContent.match(/border-bottom\s*:\s*([^;]+)/i);
+            if (borderBottomMatch) {
+                style.borderBottom = resolveValue(borderBottomMatch[1].trim());
+            }
+            // GENERALIZED: Border-top (used by footer sections with top divider lines)
+            // Any element can have border-top - extract from element selectors
+            const borderTopMatch = ruleContent.match(/border-top\s*:\s*([^;]+)/i);
+            if (borderTopMatch) {
+                style.borderTop = resolveValue(borderTopMatch[1].trim());
+            }
+            // Apply style to each selector
+            if (Object.keys(style).length > 0) {
+                for (const selector of selectors) {
+                    // Merge with existing styles (later rules override)
+                    const existing = elementStyles.get(selector) || {};
+                    elementStyles.set(selector, { ...existing, ...style });
+                }
+            }
+        }
+    }
+    return { variables, classColors, calloutStyles, classStyles, elementStyles, nestedStyles };
+}
+/**
+ * Get merged styles for an element by combining all its class styles.
+ * Later classes override earlier ones.
+ * Also checks element type selectors as a base layer.
+ *
+ * @param element The element to get styles for
+ * @param cssContext The CSS context
+ * @param parentElement Optional parent element for nested style lookups
+ */
+function getElementStyles(element, cssContext, parentElement) {
+    const result = {};
+    // First, apply element type selector styles (lowest priority)
+    const tagName = element.tagName.toLowerCase();
+    const elementTypeStyle = cssContext.elementStyles.get(tagName);
+    if (elementTypeStyle) {
+        Object.assign(result, elementTypeStyle);
+    }
+    // Then apply class styles (higher priority)
+    const classAttr = element.getAttribute("class");
+    const elementClasses = classAttr ? classAttr.split(/\s+/).filter(c => c.length > 0) : [];
+    for (const className of elementClasses) {
+        const classStyle = cssContext.classStyles.get(className);
+        if (classStyle) {
+            Object.assign(result, classStyle);
+        }
+    }
+    // Apply nested styles if parent is provided (highest CSS priority for nested selectors)
+    // This handles rules like ".parent .child { color: ... }" and ".parent element { color: ... }"
+    if (parentElement) {
+        const parentClassAttr = parentElement.getAttribute("class");
+        const parentClasses = parentClassAttr ? parentClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+        // First, inherit text color from parent's class styles (CSS color inheritance)
+        // This handles cases like ".cta { color: white; }" where children should inherit the color
+        if (!result.color) {
+            for (const parentClass of parentClasses) {
+                const parentClassStyle = cssContext.classStyles.get(parentClass);
+                if (parentClassStyle?.color) {
+                    result.color = parentClassStyle.color;
+                    break;
+                }
+            }
+        }
+        // For each parent class, check if there are nested styles for our element's classes OR tag name
+        for (const parentClass of parentClasses) {
+            const nestedMap = cssContext.nestedStyles.get(parentClass);
+            if (nestedMap) {
+                // Check for element tag name (e.g., .works-cited p { ... })
+                const nestedTagStyle = nestedMap.get(tagName);
+                if (nestedTagStyle) {
+                    Object.assign(result, nestedTagStyle);
+                }
+                // Check for element's classes
+                for (const childClass of elementClasses) {
+                    const nestedStyle = nestedMap.get(childClass);
+                    if (nestedStyle) {
+                        Object.assign(result, nestedStyle);
+                    }
+                }
+            }
+        }
+    }
+    // Also walk up the DOM tree to find ancestor containers with nested styles
+    // This handles cases where the parent element isn't passed explicitly
+    if (!parentElement) {
+        let ancestor = element.parentElement;
+        while (ancestor) {
+            const ancestorClassAttr = ancestor.getAttribute("class");
+            const ancestorClasses = ancestorClassAttr ? ancestorClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+            for (const ancestorClass of ancestorClasses) {
+                const nestedMap = cssContext.nestedStyles.get(ancestorClass);
+                if (nestedMap) {
+                    // Check for element tag name
+                    const nestedTagStyle = nestedMap.get(tagName);
+                    if (nestedTagStyle) {
+                        Object.assign(result, nestedTagStyle);
+                    }
+                    // Check for element's classes
+                    for (const childClass of elementClasses) {
+                        const nestedStyle = nestedMap.get(childClass);
+                        if (nestedStyle) {
+                            Object.assign(result, nestedStyle);
+                        }
+                    }
+                }
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    // Inherit font-family from ancestor elements if not set on this element
+    // CSS font-family is an inherited property, so we need to walk up the DOM tree
+    if (!result.fontFamily) {
+        let ancestor = element.parentElement;
+        while (ancestor && !result.fontFamily) {
+            const ancestorTagName = ancestor.tagName?.toLowerCase();
+            if (ancestorTagName) {
+                // Check element type selector for ancestor (e.g., body { font-family: ... })
+                const ancestorTypeStyle = cssContext.elementStyles.get(ancestorTagName);
+                if (ancestorTypeStyle?.fontFamily) {
+                    result.fontFamily = ancestorTypeStyle.fontFamily;
+                    break;
+                }
+                // Check ancestor's class styles
+                const ancestorClassAttr = ancestor.getAttribute("class");
+                const ancestorClasses = ancestorClassAttr ? ancestorClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+                for (const ancestorClass of ancestorClasses) {
+                    const classStyle = cssContext.classStyles.get(ancestorClass);
+                    if (classStyle?.fontFamily) {
+                        result.fontFamily = classStyle.fontFamily;
+                        break;
+                    }
+                }
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    // Also check inline styles, which override CSS classes
+    const inlineStyle = element.getAttribute("style") || "";
+    if (inlineStyle) {
+        const bgMatch = inlineStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+        if (bgMatch)
+            result.backgroundColor = bgMatch[1].trim();
+        const colorMatch = inlineStyle.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+        if (colorMatch)
+            result.color = colorMatch[1].trim();
+        const borderMatch = inlineStyle.match(/(?:^|;)\s*border\s*:\s*([^;]+)/i);
+        if (borderMatch)
+            result.border = borderMatch[1].trim();
+        const borderColorMatch = inlineStyle.match(/border-color\s*:\s*([^;]+)/i);
+        if (borderColorMatch)
+            result.borderColor = borderColorMatch[1].trim();
+        const borderBottomMatch = inlineStyle.match(/border-bottom\s*:\s*([^;]+)/i);
+        if (borderBottomMatch)
+            result.borderBottom = borderBottomMatch[1].trim();
+        const displayMatch = inlineStyle.match(/display\s*:\s*([^;]+)/i);
+        if (displayMatch)
+            result.display = displayMatch[1].trim();
+        const flexMatch = inlineStyle.match(/(?:^|;)\s*flex\s*:\s*([^;]+)/i);
+        if (flexMatch)
+            result.flex = flexMatch[1].trim();
+        const gridColsMatch = inlineStyle.match(/grid-template-columns\s*:\s*([^;]+)/i);
+        if (gridColsMatch)
+            result.gridTemplateColumns = gridColsMatch[1].trim();
+        const textAlignMatch = inlineStyle.match(/text-align\s*:\s*([^;]+)/i);
+        if (textAlignMatch)
+            result.textAlign = textAlignMatch[1].trim();
+        // Inline font-family (highest priority)
+        const fontFamilyMatch = inlineStyle.match(/font-family\s*:\s*([^;]+)/i);
+        if (fontFamilyMatch) {
+            const primaryFont = extractPrimaryFont(fontFamilyMatch[1].trim());
+            if (primaryFont)
+                result.fontFamily = primaryFont;
+        }
+        // Inline line-height
+        const lineHeightMatch = inlineStyle.match(/line-height\s*:\s*([^;]+)/i);
+        if (lineHeightMatch) {
+            result.lineHeight = lineHeightMatch[1].trim();
+        }
+    }
+    // GENERALIZED: Use getComputedStyle as fallback for font-family and line-height
+    // This ensures we get the ACTUAL computed values from Playwright's browser context,
+    // including all CSS variable resolution and inheritance
+    if (typeof window !== "undefined" && window.getComputedStyle) {
+        try {
+            const computed = window.getComputedStyle(element);
+            // Font-family: Use computed style if not already set from CSS parsing
+            if (!result.fontFamily && computed.fontFamily) {
+                const primaryFont = extractPrimaryFont(computed.fontFamily);
+                if (primaryFont) {
+                    result.fontFamily = primaryFont;
+                }
+            }
+            // Line-height: Use computed style if not already set from CSS parsing
+            if (!result.lineHeight && computed.lineHeight) {
+                // Convert computed lineHeight (e.g., "27.2px") to a ratio or keep as-is
+                result.lineHeight = computed.lineHeight;
+            }
+        }
+        catch {
+            // getComputedStyle may fail in some environments
+        }
+    }
+    return result;
+}
+/**
+ * Extract border color from a border shorthand or border-color property.
+ * Also handles borderLeft, borderRight, borderTop, borderBottom.
+ */
+function extractBorderColorFromStyle(style) {
+    if (style.borderColor) {
+        return extractHexColor(style.borderColor);
+    }
+    // Check border shorthand
+    if (style.border) {
+        // Parse "1px solid #e5e7eb" or similar
+        const colorMatch = style.border.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+    }
+    // Check individual border properties (borderLeft, borderRight, borderTop, borderBottom)
+    const borderProps = [style.borderLeft, style.borderRight, style.borderTop, style.borderBottom];
+    for (const borderValue of borderProps) {
+        if (borderValue) {
+            // Parse "4px solid #7c3aed" or similar
+            const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+            if (colorMatch) {
+                let hex = colorMatch[1];
+                if (hex.length === 3) {
+                    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+                }
+                return hex.toUpperCase();
+            }
+        }
+    }
+    return undefined;
+}
+/**
+ * Check if an element is a grid or flex container based on its CSS.
+ */
+function isGridOrFlexContainer(element, cssContext) {
+    const styles = getElementStyles(element, cssContext);
+    return styles.display === "grid" || styles.display === "flex";
+}
+/**
+ * GENERALIZED: Check if an element is a horizontal flex container.
+ * A horizontal flex container has display: flex with flex-direction: row (or unset, since row is default).
+ * This is used to detect containers where flex items should be visually separated
+ * with a separator character (like " • ") to represent the CSS gap.
+ *
+ * @param element - The element to check
+ * @param cssContext - CSS context for style resolution
+ * @returns true if this is a horizontal flex container, false otherwise
+ */
+function isHorizontalFlexContainer(element, cssContext) {
+    const styles = getElementStyles(element, cssContext);
+    // Must be a flex container
+    if (styles.display !== "flex") {
+        return false;
+    }
+    // Check flex-direction - horizontal if "row" or "row-reverse" or not set (default is row)
+    // Vertical (column) containers should NOT have separators between items
+    const direction = styles.flexDirection?.toLowerCase();
+    if (direction === "column" || direction === "column-reverse") {
+        return false;
+    }
+    // Also check inline styles for flex-direction override
+    const inlineStyle = element.getAttribute("style") || "";
+    const directionMatch = inlineStyle.match(/flex-direction\s*:\s*([^;]+)/i);
+    if (directionMatch) {
+        const inlineDirection = directionMatch[1].trim().toLowerCase();
+        if (inlineDirection === "column" || inlineDirection === "column-reverse") {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Check if an SVG element is purely decorative (background pattern, decoration, etc).
+ * Decorative SVGs should NOT be converted to chart placeholders.
+ *
+ * Detection criteria (style-based, not class-name-based per skill rules):
+ * 1. Fixed/absolute positioning (background elements)
+ * 2. Very low opacity (< 0.5)
+ * 3. Contains only pattern definitions (<defs>, <pattern>, <linearGradient>)
+ * 4. Is a background overlay (pointer-events: none)
+ * 5. Very small viewBox (icons < 50x50)
+ */
+function isDecorativeSvg(svgElement, parentElement, cssContext) {
+    // Check parent container styles
+    const parentStyles = getElementStyles(parentElement, cssContext);
+    const parentInlineStyle = parentElement.getAttribute("style") || "";
+    // Check SVG's own styles
+    const svgInlineStyle = svgElement.getAttribute("style") || "";
+    // 1. Check for fixed/absolute positioning (typically background elements)
+    const positionMatch = parentInlineStyle.match(/position\s*:\s*(fixed|absolute)/i) ||
+        svgInlineStyle.match(/position\s*:\s*(fixed|absolute)/i);
+    if (positionMatch) {
+        return true;
+    }
+    // 2. Check for low opacity (decorative overlays)
+    const parentOpacityMatch = parentInlineStyle.match(/opacity\s*:\s*([0-9.]+)/i);
+    const svgOpacityMatch = svgInlineStyle.match(/opacity\s*:\s*([0-9.]+)/i);
+    const opacityAttr = svgElement.getAttribute("opacity");
+    const opacity = parseFloat(parentOpacityMatch?.[1] || svgOpacityMatch?.[1] || opacityAttr || "1");
+    if (opacity < 0.5) {
+        return true;
+    }
+    // 3. Check for pointer-events: none (non-interactive background)
+    if (parentInlineStyle.includes("pointer-events: none") ||
+        svgInlineStyle.includes("pointer-events: none") ||
+        parentStyles.display === "none") {
+        return true;
+    }
+    // 4. Check if SVG contains only definitions (patterns, gradients) - no actual shapes
+    const hasOnlyDefs = svgElement.children.length > 0 &&
+        Array.from(svgElement.children).every((child) => ["defs", "style", "title", "desc"].includes(child.tagName.toLowerCase()));
+    if (hasOnlyDefs) {
+        return true;
+    }
+    // 5. Check for very small viewBox (likely an icon, not a chart)
+    // Charts must be at least 100x50 to match export.ts isChartSvg()
+    const viewBox = svgElement.getAttribute("viewBox");
+    if (viewBox) {
+        const parts = viewBox.split(/\s+/).map(Number);
+        if (parts.length >= 4) {
+            const width = parts[2] || 0;
+            const height = parts[3] || 0;
+            // Charts must be at least 100x50 - anything smaller is decorative
+            if (width > 0 && height > 0 && (width < 100 || height < 50)) {
+                return true;
+            }
+        }
+    }
+    else {
+        // No viewBox - check width/height attributes
+        const widthAttr = svgElement.getAttribute("width");
+        const heightAttr = svgElement.getAttribute("height");
+        if (widthAttr && heightAttr) {
+            const width = parseFloat(widthAttr) || 0;
+            const height = parseFloat(heightAttr) || 0;
+            // Charts must be at least 100x50
+            if (width > 0 && height > 0 && (width < 100 || height < 50)) {
+                return true;
+            }
+        }
+    }
+    // 6. Check if SVG is purely a pattern/gradient container
+    // These typically have <rect> with fill="url(#pattern)" or only <circle>/<path> with very low complexity
+    const shapes = svgElement.querySelectorAll("rect, circle, ellipse, path, polygon, polyline, line");
+    if (shapes.length > 0) {
+        // Count shapes that use pattern/gradient fills (decorative)
+        let decorativeShapeCount = 0;
+        for (const shape of shapes) {
+            const fill = shape.getAttribute("fill") || "";
+            const stroke = shape.getAttribute("stroke") || "";
+            if (fill.includes("url(#") || stroke.includes("url(#")) {
+                decorativeShapeCount++;
+            }
+        }
+        // If all shapes use pattern/gradient fills, it's likely decorative
+        if (decorativeShapeCount === shapes.length && shapes.length <= 5) {
+            return true;
+        }
+    }
+    // 7. Check if this appears to be a progress circle (small circular skills indicator)
+    // These have circle elements with stroke-dasharray for progress
+    const circles = svgElement.querySelectorAll("circle");
+    if (circles.length > 0 && circles.length <= 2) {
+        const hasStrokeDasharray = Array.from(circles).some((c) => c.getAttribute("stroke-dasharray"));
+        if (hasStrokeDasharray) {
+            // This is a progress indicator, not a chart - treat as decorative for now
+            // In the future, we could extract the percentage
+            return true;
+        }
+    }
+    // 8. Check if parent is a centered flex container (typical hero image pattern)
+    // Hero images typically have: display: flex; align-items: center; justify-content: center
+    // These contain illustrative SVGs which should be included as images, not filtered
+    // We no longer filter these - they are legitimate content images
+    // (Previously we filtered centered flex containers, but hero images should be included)
+    // 9. SVGs with sufficient size should be included as images
+    // We only filter out truly decorative elements (icons, patterns, progress circles)
+    // Large SVGs (illustrations, charts, diagrams) should all be included
+    return false;
+}
+/**
+ * Check if an element is a two-column CSS grid layout.
+ * Detects patterns like: display: grid; grid-template-columns: Xpx 1fr
+ * Returns the sidebar width percentage if it's a two-column layout, undefined otherwise.
+ */
+function isTwoColumnGridLayout(element, cssContext) {
+    const styles = getElementStyles(element, cssContext);
+    // Must be a grid container
+    if (styles.display !== "grid") {
+        return undefined;
+    }
+    // Check for two-column pattern (e.g., "280px 1fr", "300px auto", "25% 75%")
+    const gridCols = styles.gridTemplateColumns;
+    if (!gridCols) {
+        return undefined;
+    }
+    // Parse grid-template-columns to detect two-column sidebar layout
+    // Common patterns:
+    // - "280px 1fr" (fixed sidebar + fluid main)
+    // - "300px auto" (fixed sidebar + auto main)
+    // - "25% 1fr" (percentage sidebar + fluid main)
+    const parts = gridCols.trim().split(/\s+/);
+    if (parts.length !== 2) {
+        return undefined;
+    }
+    const [first, second] = parts;
+    // Check if first column is a fixed width or small percentage (sidebar)
+    // and second column is flexible (1fr, auto, or larger percentage)
+    const firstIsSidebar = (first.endsWith("px") && parseInt(first, 10) <= 400) ||
+        (first.endsWith("%") && parseFloat(first) <= 35);
+    const secondIsMain = second === "1fr" ||
+        second === "auto" ||
+        (second.endsWith("%") && parseFloat(second) >= 50) ||
+        (second.endsWith("fr") && parseFloat(second) >= 1);
+    if (firstIsSidebar && secondIsMain) {
+        // Calculate sidebar width percentage
+        if (first.endsWith("px")) {
+            // Assume ~1100px total width for typical documents
+            const pxWidth = parseInt(first, 10);
+            return Math.round((pxWidth / 1100) * 100);
+        }
+        else if (first.endsWith("%")) {
+            return parseFloat(first);
+        }
+        return 25; // Default 25% for other cases
+    }
+    return undefined;
+}
+/**
+ * Find the sidebar and main content elements in a two-column grid container.
+ * Returns the first two direct children as [sidebar, main] or undefined.
+ */
+function findTwoColumnChildren(container) {
+    const children = Array.from(container.children).filter((child) => child.nodeType === Node.ELEMENT_NODE);
+    if (children.length < 2) {
+        return undefined;
+    }
+    // First child is sidebar (aside, div, etc.), second is main content
+    return [children[0], children[1]];
+}
+/**
+ * GENERALIZED: Detect if an element is a flex container with equal-width columns.
+ * This handles layouts like:
+ *   display: flex; with children having flex: 1 (equal width)
+ *
+ * Returns the column children if detected, undefined otherwise.
+ * Each child will become a column in a DOCX table.
+ */
+function detectFlexEqualColumns(element, cssContext) {
+    const styles = getElementStyles(element, cssContext);
+    // Must be a flex container
+    if (styles.display !== "flex") {
+        return undefined;
+    }
+    // Get direct children
+    const children = Array.from(element.children).filter((child) => child.nodeType === Node.ELEMENT_NODE);
+    // Need at least 2 children for multi-column layout
+    if (children.length < 2 || children.length > 4) {
+        return undefined;
+    }
+    // Check if children have flex: 1 or similar equal-width pattern
+    // Also check inline styles since class-based flex: 1 is common
+    let hasEqualFlexChildren = true;
+    for (const child of children) {
+        const childStyles = getElementStyles(child, cssContext);
+        const inlineStyle = child.getAttribute("style") || "";
+        // Check for flex: 1 in CSS or inline styles
+        const hasFlex1 = childStyles.flex === "1" ||
+            inlineStyle.includes("flex:") ||
+            inlineStyle.includes("flex: 1");
+        // Also detect if class has flex: 1 (we can't directly read this, but
+        // children in a flex container with no explicit width typically share space)
+        // For now, assume if parent is flex and has 2+ children, they share space
+        // If any child has explicit width that's not equal, skip
+        // (We're being permissive here - assuming equal columns if parent is flex)
+    }
+    // Return children as columns if this looks like an equal-column flex layout
+    return children;
+}
+/**
+ * Detect if an element is a "skill item" by its structure.
+ * Pattern: The element has a direct child that contains exactly 2 text elements (name + percentage).
+ * The element should have exactly 1-2 direct children (header + optional progress bar).
+ *
+ * Returns { name, percentage } if detected, undefined otherwise.
+ */
+function detectSkillItem(element) {
+    const children = Array.from(element.children);
+    // Skill items typically have 1-2 direct children:
+    // - A header div with name + percentage
+    // - Optionally a progress bar container
+    if (children.length === 0 || children.length > 3)
+        return undefined;
+    // Look for the header child that contains name + percentage
+    for (const child of children) {
+        // Skip if this child has too many children (not a header)
+        if (child.children.length !== 2)
+            continue;
+        const directChildren = Array.from(child.children).filter((c) => c.children.length === 0 && c.textContent?.trim());
+        // Must have exactly 2 leaf text elements
+        if (directChildren.length !== 2)
+            continue;
+        const text1 = directChildren[0].textContent?.trim() || "";
+        const text2 = directChildren[1].textContent?.trim() || "";
+        // Check if one is a percentage (number followed by %)
+        if (text2.match(/^\d+%$/)) {
+            return { name: text1, percentage: text2 };
+        }
+        if (text1.match(/^\d+%$/)) {
+            return { name: text2, percentage: text1 };
+        }
+    }
+    return undefined;
+}
+/**
+ * Detect if an element is a "language item" with proficiency dots/indicators.
+ * Pattern: container with text (language name) and a child with multiple small indicators.
+ *
+ * Returns { name, filledCount, totalCount } if detected, undefined otherwise.
+ */
+function detectLanguageItem(element, cssContext) {
+    const children = Array.from(element.children);
+    if (children.length < 2)
+        return undefined;
+    let languageName = "";
+    let filledCount = 0;
+    let totalCount = 0;
+    for (const child of children) {
+        const childTagName = child.tagName.toLowerCase();
+        // GENERALIZED: Skip headings - they're not language names
+        // This prevents title-block patterns (h1 + metadata div) from being detected
+        if (childTagName.match(/^h[1-6]$/)) {
+            return undefined;
+        }
+        // Check if this is a text element (language name)
+        // Must be a simple span or similar inline element, not a complex structure
+        if (child.children.length === 0 && child.textContent?.trim()) {
+            const text = child.textContent.trim();
+            // GENERALIZED: Language names are typically short (1-3 words)
+            // Skip if the text is too long (like a title or paragraph)
+            if (text.length > 50 || text.split(/\s+/).length > 5) {
+                return undefined;
+            }
+            languageName = text;
+            continue;
+        }
+        // Check if this is a container with multiple similar small children (dots/indicators)
+        const indicators = Array.from(child.children);
+        if (indicators.length >= 3 && indicators.length <= 10) {
+            // Check if they look like indicators (similar structure)
+            const allSpans = indicators.every((ind) => ind.tagName.toLowerCase() === "span");
+            if (allSpans) {
+                totalCount = indicators.length;
+                // Count "filled" indicators by checking for background color or specific styling
+                for (const indicator of indicators) {
+                    const styles = getElementStyles(indicator, cssContext);
+                    const bgColor = styles.backgroundColor;
+                    // A "filled" indicator typically has a non-white/non-transparent background
+                    // or has more than just border styling
+                    if (bgColor && bgColor !== "transparent" && bgColor !== "inherit") {
+                        const hexBg = extractHexColor(bgColor);
+                        // Check if it's a "filled" color (not white/very light)
+                        if (hexBg && hexBg !== "FFFFFF" && !hexBg.startsWith("FF")) {
+                            filledCount++;
+                        }
+                        else if (hexBg) {
+                            // Light color means filled if rgba has low opacity
+                            // For now, count any background as potentially filled
+                            // We'll need to be smarter about this
+                            const alpha = bgColor.match(/rgba.*,\s*([0-9.]+)\s*\)/)?.[1];
+                            if (!alpha || parseFloat(alpha) > 0.15) {
+                                filledCount++;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    if (languageName && totalCount > 0) {
+        return { name: languageName, filledCount, totalCount };
+    }
+    return undefined;
+}
+/**
+ * Parse content from a container element (like sidebar or main content).
+ * Handles headings, paragraphs, lists, and nested containers with color inheritance.
+ */
+function parseContainerContent(element, cssContext, inheritedColor) {
+    const innerElements = [];
+    function processInnerNode(node, color) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent?.trim();
+            if (text) {
+                if (color) {
+                    innerElements.push({ type: "paragraph", text, color });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text });
+                }
+            }
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE || !(node instanceof Element)) {
+            return;
+        }
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        // Extract color from this element
+        const elementColor = extractTextColor(el, cssContext) || color;
+        // Skip decorative SVGs
+        if (tagName === "svg") {
+            const parent = el.parentElement || el;
+            if (isDecorativeSvg(el, parent, cssContext)) {
+                return;
+            }
+        }
+        // Handle headings
+        const headingLevel = parseHeadingLevel(tagName);
+        if (headingLevel !== null) {
+            const text = getTextContent(el).trim();
+            if (text) {
+                innerElements.push({ type: "heading", level: headingLevel, text, color: elementColor });
+            }
+            return;
+        }
+        // Handle paragraphs
+        if (tagName === "p") {
+            const runs = extractInlineRuns(el, cssContext);
+            if (runs.length > 0) {
+                const text = runs.map((r) => r.text).join("");
+                // Apply inherited color to runs that don't have their own color
+                if (elementColor) {
+                    runs.forEach(run => {
+                        if (!run.color) {
+                            run.color = elementColor;
+                        }
+                    });
+                }
+                if (hasInlineFormatting(runs)) {
+                    innerElements.push({ type: "paragraph", text, runs });
+                }
+                else if (elementColor) {
+                    innerElements.push({ type: "paragraph", text, color: elementColor });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text });
+                }
+            }
+            return;
+        }
+        // Handle lists
+        if (tagName === "ul" || tagName === "ol") {
+            const items = [];
+            for (const child of el.children) {
+                if (child.tagName.toLowerCase() === "li") {
+                    const runs = extractInlineRuns(child, cssContext);
+                    if (runs.length > 0) {
+                        // Apply color to runs
+                        if (elementColor) {
+                            runs.forEach(run => {
+                                if (!run.color) {
+                                    run.color = elementColor;
+                                }
+                            });
+                        }
+                        if (hasInlineFormatting(runs)) {
+                            items.push(runs);
+                        }
+                        else {
+                            items.push(runs.map((r) => r.text).join(""));
+                        }
+                    }
+                }
+            }
+            if (items.length > 0) {
+                innerElements.push({ type: "list", ordered: tagName === "ol", items });
+            }
+            return;
+        }
+        // Handle tables
+        if (tagName === "table") {
+            const rows = [];
+            for (const tr of el.querySelectorAll("tr")) {
+                const cells = [];
+                for (const cell of tr.querySelectorAll("td, th")) {
+                    const runs = extractInlineRuns(cell, cssContext);
+                    if (runs.length > 0) {
+                        if (hasInlineFormatting(runs)) {
+                            cells.push(runs);
+                        }
+                        else {
+                            cells.push(runs.map((r) => r.text).join(""));
+                        }
+                    }
+                    else {
+                        cells.push("");
+                    }
+                }
+                if (cells.length > 0) {
+                    rows.push(cells);
+                }
+            }
+            if (rows.length > 0) {
+                // Extract cell padding from CSS (th, td selectors)
+                let cellPadding;
+                if (cssContext) {
+                    // Try td first, then th (they usually have the same padding)
+                    const tdStyle = cssContext.elementStyles.get("td");
+                    const thStyle = cssContext.elementStyles.get("th");
+                    const paddingStr = tdStyle?.padding || thStyle?.padding;
+                    if (paddingStr) {
+                        cellPadding = parseCssPaddingToTwips(paddingStr);
+                    }
+                }
+                innerElements.push({ type: "table", rows, cellPadding });
+            }
+            return;
+        }
+        // Detect skill item pattern: container with name + percentage
+        // This handles divs containing "Skill Name" + "95%" on separate lines
+        if (tagName === "div") {
+            const skillItem = detectSkillItem(el);
+            if (skillItem) {
+                // Output as single line: "Skill Name: 95%"
+                const text = `${skillItem.name}: ${skillItem.percentage}`;
+                if (elementColor) {
+                    innerElements.push({ type: "paragraph", text, color: elementColor });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text });
+                }
+                return;
+            }
+            // Detect language item pattern: language name + proficiency dots
+            const languageItem = detectLanguageItem(el, cssContext);
+            if (languageItem) {
+                // Create visual representation with filled and empty dots
+                // ● = filled, ○ = empty
+                const filledDots = "●".repeat(languageItem.filledCount);
+                const emptyDots = "○".repeat(languageItem.totalCount - languageItem.filledCount);
+                const text = `${languageItem.name}: ${filledDots}${emptyDots}`;
+                if (elementColor) {
+                    innerElements.push({ type: "paragraph", text, color: elementColor });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text });
+                }
+                return;
+            }
+        }
+        // Container tags - recurse into children
+        if (CONTAINER_TAGS.includes(tagName)) {
+            for (const child of el.childNodes) {
+                processInnerNode(child, elementColor);
+            }
+            return;
+        }
+        // Fallback - try to get text
+        const text = getTextContent(el).trim();
+        if (text && el.children.length === 0) {
+            if (elementColor) {
+                innerElements.push({ type: "paragraph", text, color: elementColor });
+            }
+            else {
+                innerElements.push({ type: "paragraph", text });
+            }
+        }
+        else {
+            for (const child of el.childNodes) {
+                processInnerNode(child, elementColor);
+            }
+        }
+    }
+    // Process all direct children
+    for (const child of element.childNodes) {
+        processInnerNode(child, inheritedColor);
+    }
+    return innerElements;
+}
+/**
+ * Get color for an element by checking its classes against parsed CSS rules.
+ */
+function getColorFromClasses(element, cssContext) {
+    const classAttr = element.getAttribute("class");
+    if (!classAttr)
+        return undefined;
+    const classes = classAttr.split(/\s+/).filter(c => c.length > 0);
+    for (const className of classes) {
+        const color = cssContext.classColors.get(className);
+        if (color) {
+            return extractHexColor(color);
+        }
+    }
+    return undefined;
+}
+function isHeadingLevel(level) {
+    return level >= 1 && level <= 6;
+}
+function parseHeadingLevel(tagName) {
+    const match = /^h([1-6])$/.exec(tagName);
+    if (!match || match.length < 2) {
+        return null;
+    }
+    const level = parseInt(match[1], 10);
+    if (isHeadingLevel(level)) {
+        return level;
+    }
+    return null;
+}
+/**
+ * Extract text alignment from element's CSS styles (via cssContext) or inline style.
+ * Does NOT use class names directly - uses CSS style extraction.
+ */
+function getTextAlignment(element, cssContext) {
+    // Get styles from CSS classes (generalized approach)
+    const styles = getElementStyles(element, cssContext);
+    // Check CSS text-align property
+    if (styles.textAlign) {
+        const align = styles.textAlign.toLowerCase();
+        if (align === "left" || align === "center" || align === "right" || align === "justify") {
+            return align;
+        }
+    }
+    // Also check inline style for text-align (overrides CSS)
+    const inlineStyle = element.getAttribute("style") || "";
+    const alignMatch = inlineStyle.match(/text-align:\s*(left|center|right|justify)/i);
+    if (alignMatch) {
+        return alignMatch[1].toLowerCase();
+    }
+    return undefined;
+}
+/**
+ * Safely get text content from an element, returning empty string if null.
+ */
+function getTextContent(element) {
+    // textContent can be null for certain element types (document, doctype)
+    // Use String() to safely convert any value
+    return String(element.textContent || "");
+}
+/**
+ * Inline element tags that should NOT break a container into multiple paragraphs.
+ * These elements can be combined into a single paragraph with multiple runs.
+ */
+const INLINE_TAGS = [
+    "span", "a", "b", "strong", "i", "em", "u", "s", "strike", "del", "ins",
+    "sub", "sup", "small", "mark", "abbr", "cite", "code", "kbd", "samp", "var",
+    "time", "data", "q", "dfn", "ruby", "rt", "rp", "bdi", "bdo", "wbr", "br",
+    "label", "font"
+];
+/**
+ * Check if a container element has ONLY inline content (text nodes, spans, inline formatting).
+ * Returns true if the container should be treated as a single paragraph.
+ * Returns false if the container has block-level children that need separate paragraphs.
+ */
+function isInlineOnlyContainer(element) {
+    // Check all child nodes
+    for (const child of element.childNodes) {
+        // Text nodes are inline - continue checking
+        if (child.nodeType === Node.TEXT_NODE) {
+            continue;
+        }
+        // Skip comments and other non-element nodes
+        if (child.nodeType !== Node.ELEMENT_NODE || !(child instanceof Element)) {
+            continue;
+        }
+        const tagName = child.tagName.toLowerCase();
+        // If child is an inline tag, recursively check its children
+        if (INLINE_TAGS.includes(tagName)) {
+            // Recursively check if this inline element also has only inline content
+            if (!isInlineOnlyContainer(child)) {
+                return false;
+            }
+            continue;
+        }
+        // Any other element tag is considered block-level (div, p, ul, table, h1-h6, etc.)
+        // The container has block-level children, so it should NOT be treated as inline-only
+        return false;
+    }
+    // All children are inline - this container can be a single paragraph
+    return true;
+}
+/**
+ * Check if a tag name indicates bold formatting.
+ */
+function isBoldTag(tagName) {
+    return tagName === "strong" || tagName === "b";
+}
+/**
+ * Check if a tag name indicates italic formatting.
+ */
+function isItalicTag(tagName) {
+    return tagName === "em" || tagName === "i";
+}
+/**
+ * Extract inline runs with formatting from an element.
+ * Walks the DOM tree and collects text with bold/italic state.
+ * Also extracts CSS ::before and ::after pseudo-element content.
+ */
+function extractInlineRuns(element, cssContext, inheritedColor, inheritedFontFamily) {
+    const runs = [];
+    // GENERALIZED: Extract ::before pseudo-element content
+    // This handles CSS rules like "dd.dish-pairings::before { content: 'Suggested Pairing: '; }"
+    if (typeof window !== "undefined" && window.getComputedStyle) {
+        try {
+            const beforeStyles = window.getComputedStyle(element, "::before");
+            const beforeContent = beforeStyles.content;
+            // content property returns "none" or a quoted string like '"Suggested Pairing: "'
+            if (beforeContent && beforeContent !== "none" && beforeContent !== "normal") {
+                // Remove quotes from the content string
+                const cleanContent = beforeContent.replace(/^["']|["']$/g, "");
+                if (cleanContent) {
+                    // Get styling from the pseudo-element
+                    const fontWeight = beforeStyles.fontWeight;
+                    const fontStyle = beforeStyles.fontStyle;
+                    const color = beforeStyles.color ? extractHexColor(beforeStyles.color) : undefined;
+                    runs.push({
+                        text: cleanContent,
+                        bold: fontWeight === "700" || fontWeight === "bold" || fontWeight === "600" || undefined,
+                        italic: fontStyle === "italic" || undefined,
+                        color,
+                    });
+                }
+            }
+        }
+        catch {
+            // getComputedStyle may fail in some environments
+        }
+    }
+    function walkNode(node, bold, italic, color, backgroundColor, superscript, subscript, underline, fontFamily, size) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || "";
+            if (text) {
+                // Normalize whitespace but preserve spaces between words
+                const normalizedText = text.replace(/\s+/g, " ");
+                if (normalizedText.trim() || normalizedText === " ") {
+                    runs.push({ text: normalizedText, bold, italic, color, backgroundColor, superscript, subscript, underline, fontFamily, size });
+                }
+            }
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE || !(node instanceof Element)) {
+            return;
+        }
+        const tagName = node.tagName.toLowerCase();
+        // Handle <br> tags - insert a newline
+        if (tagName === "br") {
+            runs.push({ text: "\n", bold, italic, color, backgroundColor, fontFamily, size });
+            return;
+        }
+        let newBold = bold || isBoldTag(tagName);
+        let newItalic = italic || isItalicTag(tagName);
+        let newSuperscript = superscript || tagName === "sup";
+        let newSubscript = subscript || tagName === "sub";
+        let newUnderline = underline;
+        let newFontFamily = fontFamily;
+        let newSize = size;
+        // Handle underline from <u> tag or <abbr> tag
+        if (tagName === "u") {
+            newUnderline = { type: "single" };
+        }
+        else if (tagName === "abbr") {
+            // abbr elements typically have dotted underlines (border-bottom: dotted)
+            // Check CSS for border-bottom color
+            let underlineColor;
+            if (cssContext) {
+                const styles = getElementStyles(node, cssContext);
+                if (styles.borderBottom) {
+                    // Extract color from border-bottom (e.g., "1px dotted #b8860b")
+                    const colorMatch = styles.borderBottom.match(/#([0-9a-fA-F]{3,6})/i);
+                    if (colorMatch) {
+                        underlineColor = colorMatch[1].toUpperCase();
+                    }
+                }
+            }
+            newUnderline = { type: "dotted", color: underlineColor };
+        }
+        // Extract colors from this element
+        let newColor = color;
+        let newBackgroundColor = backgroundColor;
+        if (cssContext) {
+            const styles = getElementStyles(node, cssContext);
+            if (styles.color) {
+                const hexColor = extractHexColor(styles.color);
+                if (hexColor)
+                    newColor = hexColor;
+            }
+            if (styles.backgroundColor) {
+                const hexBg = extractHexColor(styles.backgroundColor);
+                if (hexBg)
+                    newBackgroundColor = hexBg;
+            }
+            // Check for font-weight: bold/700/600 from CSS classes
+            if (styles.fontWeight === "700" || styles.fontWeight === "bold" || styles.fontWeight === "600") {
+                newBold = true;
+            }
+            // Check for font-style: italic from CSS classes
+            if (styles.fontStyle === "italic") {
+                newItalic = true;
+            }
+            // Check for font-family from CSS classes
+            if (styles.fontFamily) {
+                newFontFamily = styles.fontFamily;
+            }
+            // GENERALIZED: Check for font-size from CSS classes
+            if (styles.fontSize) {
+                const halfPoints = parseFontSizeToHalfPoints(styles.fontSize);
+                if (halfPoints)
+                    newSize = halfPoints;
+            }
+        }
+        // Also check inline styles
+        const inlineStyle = node.getAttribute("style") || "";
+        if (inlineStyle) {
+            const colorMatch = inlineStyle.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+            if (colorMatch) {
+                const hexColor = extractHexColor(colorMatch[1]);
+                if (hexColor)
+                    newColor = hexColor;
+            }
+            const bgMatch = inlineStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+            if (bgMatch) {
+                const hexBg = extractHexColor(bgMatch[1]);
+                if (hexBg)
+                    newBackgroundColor = hexBg;
+            }
+            // Check inline font-weight
+            const weightMatch = inlineStyle.match(/font-weight\s*:\s*([^;]+)/i);
+            if (weightMatch) {
+                const weight = weightMatch[1].trim();
+                if (weight === "700" || weight === "bold" || weight === "600") {
+                    newBold = true;
+                }
+            }
+            // Check inline font-style
+            const styleMatch = inlineStyle.match(/font-style\s*:\s*([^;]+)/i);
+            if (styleMatch) {
+                const style = styleMatch[1].trim();
+                if (style === "italic") {
+                    newItalic = true;
+                }
+            }
+            // Check inline font-family
+            const fontFamilyMatch = inlineStyle.match(/font-family\s*:\s*([^;]+)/i);
+            if (fontFamilyMatch) {
+                const primaryFont = extractPrimaryFont(fontFamilyMatch[1].trim());
+                if (primaryFont) {
+                    newFontFamily = primaryFont;
+                }
+            }
+            // GENERALIZED: Check inline font-size
+            const fontSizeMatch = inlineStyle.match(/font-size\s*:\s*([^;]+)/i);
+            if (fontSizeMatch) {
+                const halfPoints = parseFontSizeToHalfPoints(fontSizeMatch[1].trim());
+                if (halfPoints)
+                    newSize = halfPoints;
+            }
+        }
+        for (const child of node.childNodes) {
+            walkNode(child, newBold, newItalic, newColor, newBackgroundColor, newSuperscript, newSubscript, newUnderline, newFontFamily, newSize);
+        }
+    }
+    // GENERALIZED: Extract styles from the element itself (e.g., <td class="positive">)
+    // These styles should be inherited by all text children
+    let elementBold = false;
+    let elementItalic = false;
+    let elementColor = inheritedColor;
+    let elementBackgroundColor;
+    let elementFontFamily = inheritedFontFamily;
+    let elementSize;
+    if (cssContext) {
+        const styles = getElementStyles(element, cssContext);
+        if (styles.color) {
+            const hexColor = extractHexColor(styles.color);
+            if (hexColor)
+                elementColor = hexColor;
+        }
+        if (styles.backgroundColor) {
+            const hexBg = extractHexColor(styles.backgroundColor);
+            if (hexBg)
+                elementBackgroundColor = hexBg;
+        }
+        if (styles.fontWeight === "700" || styles.fontWeight === "bold" || styles.fontWeight === "600") {
+            elementBold = true;
+        }
+        if (styles.fontStyle === "italic") {
+            elementItalic = true;
+        }
+        if (styles.fontFamily) {
+            elementFontFamily = styles.fontFamily;
+        }
+        // GENERALIZED: Extract font-size from element's CSS classes
+        if (styles.fontSize) {
+            const halfPoints = parseFontSizeToHalfPoints(styles.fontSize);
+            if (halfPoints)
+                elementSize = halfPoints;
+        }
+    }
+    for (const child of element.childNodes) {
+        walkNode(child, elementBold, elementItalic, elementColor, elementBackgroundColor, false, false, undefined, elementFontFamily, elementSize);
+    }
+    // Merge adjacent runs with same formatting and normalize
+    return mergeAndNormalizeRuns(runs);
+}
+/**
+ * Merge adjacent runs with same formatting and normalize whitespace.
+ */
+function mergeAndNormalizeRuns(runs) {
+    if (runs.length === 0)
+        return [];
+    const merged = [];
+    // Helper to compare underline properties
+    const underlineEqual = (a, b) => {
+        if (!a && !b)
+            return true;
+        if (!a || !b)
+            return false;
+        return a.type === b.type && a.color === b.color;
+    };
+    for (const run of runs) {
+        const last = merged[merged.length - 1];
+        // Only merge if all formatting properties match
+        if (last &&
+            last.bold === run.bold &&
+            last.italic === run.italic &&
+            last.color === run.color &&
+            last.backgroundColor === run.backgroundColor &&
+            last.superscript === run.superscript &&
+            last.subscript === run.subscript &&
+            last.fontFamily === run.fontFamily &&
+            last.size === run.size &&
+            underlineEqual(last.underline, run.underline)) {
+            last.text += run.text;
+        }
+        else {
+            merged.push({ ...run });
+        }
+    }
+    // Normalize: trim leading whitespace from first run, trailing from last
+    if (merged.length > 0) {
+        merged[0].text = merged[0].text.trimStart();
+        merged[merged.length - 1].text = merged[merged.length - 1].text.trimEnd();
+    }
+    // Filter out empty runs
+    return merged.filter((r) => r.text.length > 0);
+}
+/**
+ * Check if any inline run has formatting (bold, italic, color, backgroundColor, fontFamily, size, etc.).
+ */
+function hasInlineFormatting(runs) {
+    return runs.some((r) => r.bold || r.italic || r.color || r.backgroundColor || r.fontFamily || r.size || r.superscript || r.subscript || r.underline);
+}
+/**
+ * Block-level HTML elements that indicate complex content inside a list item.
+ * If a <li> contains any of these, it should be processed recursively,
+ * not just as inline text.
+ */
+const BLOCK_LEVEL_TAGS = new Set([
+    "div", "p", "table", "ul", "ol", "blockquote", "pre", "figure",
+    "svg", "h1", "h2", "h3", "h4", "h5", "h6", "section", "article",
+    "aside", "nav", "header", "footer", "main", "form", "fieldset",
+    "dl", "dd", "dt", "address", "hr", "canvas", "video", "audio",
+    "picture", "iframe", "object", "embed", "details", "summary",
+]);
+/**
+ * Check if an element contains any block-level children.
+ * Used to detect complex list items that need recursive processing.
+ */
+function hasBlockLevelChildren(element) {
+    for (const child of element.children) {
+        const tagName = child.tagName.toLowerCase();
+        if (BLOCK_LEVEL_TAGS.has(tagName)) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Check if a list item contains nested lists (ul or ol).
+ */
+function hasNestedLists(element) {
+    return element.querySelector("ul, ol") !== null;
+}
+/**
+ * Recursively extract list items from a ul/ol element, flattening nested lists
+ * while preserving level information for proper indentation in DOCX.
+ *
+ * @param listElement - The ul or ol element to extract items from
+ * @param cssContext - CSS context for style extraction
+ * @param level - Current nesting level (0 = top level)
+ * @param parentOrdered - Whether the parent list is ordered
+ * @returns Array of ListItem objects with level information
+ */
+function extractNestedListItems(listElement, cssContext, level = 0, parentOrdered) {
+    const items = [];
+    const tagName = listElement.tagName.toLowerCase();
+    const isOrdered = parentOrdered !== undefined ? parentOrdered : tagName === "ol";
+    for (const child of listElement.children) {
+        if (child.tagName.toLowerCase() !== "li")
+            continue;
+        // Extract inline content from this li (excluding nested lists)
+        const inlineNodes = [];
+        const nestedLists = [];
+        for (const node of child.childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const childTagName = node.tagName.toLowerCase();
+                if (childTagName === "ul" || childTagName === "ol") {
+                    nestedLists.push(node);
+                }
+                else {
+                    inlineNodes.push(node);
+                }
+            }
+            else if (node.nodeType === Node.TEXT_NODE) {
+                inlineNodes.push(node);
+            }
+        }
+        // Create a temporary container to extract inline runs from inline nodes only
+        // We need to get text content excluding nested lists
+        if (inlineNodes.length > 0) {
+            // Build inline content by extracting runs from the li, but we need to
+            // handle it carefully to exclude nested list content
+            const runs = extractInlineRunsFromNodes(inlineNodes, cssContext);
+            if (runs.length > 0 && runs.some(r => r.text.trim())) {
+                const content = hasInlineFormatting(runs) ? runs : runs.map(r => r.text).join("");
+                items.push({
+                    content,
+                    level,
+                    ordered: isOrdered,
+                });
+            }
+        }
+        // Process nested lists recursively
+        for (const nestedList of nestedLists) {
+            const nestedTagName = nestedList.tagName.toLowerCase();
+            const nestedOrdered = nestedTagName === "ol";
+            const nestedItems = extractNestedListItems(nestedList, cssContext, level + 1, nestedOrdered);
+            items.push(...nestedItems);
+        }
+    }
+    return items;
+}
+/**
+ * Extract inline runs from a collection of nodes (excluding nested lists).
+ * This is similar to extractInlineRuns but works on a subset of nodes.
+ */
+function extractInlineRunsFromNodes(nodes, cssContext) {
+    const runs = [];
+    function walkNode(node, bold, italic, color, backgroundColor, superscript, subscript) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || "";
+            if (text) {
+                runs.push({
+                    text,
+                    bold: bold || undefined,
+                    italic: italic || undefined,
+                    color,
+                    backgroundColor,
+                    superscript: superscript || undefined,
+                    subscript: subscript || undefined,
+                });
+            }
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        // Skip nested lists entirely - they're handled separately
+        if (tagName === "ul" || tagName === "ol")
+            return;
+        // Determine formatting from tag
+        let newBold = bold || tagName === "strong" || tagName === "b";
+        let newItalic = italic || tagName === "em" || tagName === "i";
+        let newSuperscript = superscript || tagName === "sup";
+        let newSubscript = subscript || tagName === "sub";
+        let newColor = color;
+        let newBackgroundColor = backgroundColor;
+        // Get styles from CSS context
+        const styles = getElementStyles(element, cssContext);
+        if (styles.fontWeight === "700" || styles.fontWeight === "bold" || styles.fontWeight === "600") {
+            newBold = true;
+        }
+        if (styles.fontStyle === "italic") {
+            newItalic = true;
+        }
+        if (styles.color) {
+            const extracted = extractHexColor(styles.color);
+            if (extracted)
+                newColor = extracted;
+        }
+        if (styles.backgroundColor) {
+            const extracted = extractHexColor(styles.backgroundColor);
+            if (extracted)
+                newBackgroundColor = extracted;
+        }
+        // Recurse into children
+        for (const child of node.childNodes) {
+            walkNode(child, newBold, newItalic, newColor, newBackgroundColor, newSuperscript, newSubscript);
+        }
+    }
+    for (const node of nodes) {
+        walkNode(node, false, false);
+    }
+    return mergeAndNormalizeRuns(runs);
+}
+/**
+ * Check if an element is a blockquote or callout based on visual styling.
+ * Detects elements with:
+ * - Semantic <blockquote> tag
+ * - OR a div/section/header with both background color AND left border (visual callout pattern)
+ * - OR a div/section/header with background/gradient AND padding (styled content box like CTAs)
+ * - OR a paragraph with left border (intro sections with accent border)
+ */
+function isBlockquoteOrCallout(element, cssContext) {
+    const tagName = element.tagName.toLowerCase();
+    // Semantic blockquote element
+    if (tagName === "blockquote") {
+        return true;
+    }
+    // Get styles for all container-type elements (div, section, article, header, p)
+    const styles = getElementStyles(element, cssContext);
+    const inlineStyle = element.getAttribute("style") || "";
+    // Helper to check for border-left
+    const hasBorderLeft = inlineStyle.includes("border-left") ||
+        styles.border?.includes("solid") ||
+        !!styles.borderColor ||
+        !!styles.borderLeft;
+    // For paragraphs with border-left, treat as blockquote (intro sections, etc.)
+    // This handles patterns like: <p class="intro-section"> with border-left: 4px solid ...
+    if (tagName === "p" && hasBorderLeft) {
+        return true;
+    }
+    // For divs, sections, articles, and headers - detect based on visual styling (NOT class names)
+    if (tagName === "div" || tagName === "section" || tagName === "article" || tagName === "header") {
+        // GENERALIZED: Don't treat as blockquotes if they contain figure > img elements
+        // Figures with external images need special handling via export.ts which fetches them
+        // and they can't be processed inside parseBlockquoteContent
+        const figuresWithImages = element.querySelectorAll("figure img, figure picture");
+        if (figuresWithImages.length > 0) {
+            return false;
+        }
+        // Also check CSS border property
+        const cssBorder = styles.border || "";
+        const hasCssBorder = cssBorder.includes("solid") || cssBorder.includes("px");
+        // Check for background color
+        const hasBackground = !!styles.backgroundColor &&
+            styles.backgroundColor !== "transparent" &&
+            styles.backgroundColor !== "inherit";
+        // If it has both background AND border, it's likely a callout/blockquote styled box
+        if (hasBackground && (hasBorderLeft || hasCssBorder)) {
+            return true;
+        }
+        // Check for styled content boxes (like CTAs, key-takeaways)
+        // These have: background + padding + may have border-radius
+        // But NOT border (which distinguishes them from callouts)
+        if (hasBackground) {
+            // Check for padding (indicates a styled content box, not just a wrapper)
+            const hasPadding = !!styles.padding ||
+                inlineStyle.includes("padding");
+            // Check if element has meaningful content (text nodes or block elements)
+            // This is more general - any non-empty div with styled background and padding
+            const hasContent = element.textContent?.trim().length &&
+                element.textContent.trim().length > 0;
+            // A styled box with background + padding + content = treat as blockquote
+            if (hasPadding && hasContent) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Extract color from CSS color value (hex or rgb).
+ */
+/**
+ * Check if an element has a border-bottom style that should become a horizontal rule.
+ * Returns the border color if found, undefined otherwise.
+ */
+function extractBorderBottomColor(element, cssContext) {
+    // Check inline style for border-bottom
+    const inlineStyle = element.getAttribute("style") || "";
+    const borderMatch = inlineStyle.match(/border-bottom:\s*([^;]+)/i);
+    if (borderMatch) {
+        const borderValue = borderMatch[1];
+        // Parse "1px solid #e5e7eb" or similar
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable in border
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Check CSS styles for border-bottom (generalized approach)
+    const styles = getElementStyles(element, cssContext);
+    // Check border-bottom first (most specific for horizontal rules)
+    if (styles.borderBottom) {
+        const borderValue = styles.borderBottom;
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable reference in border-bottom
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Check if this element has a border-bottom defined in CSS
+    // The border property might be a shorthand like "1px solid #e5e7eb"
+    if (styles.border) {
+        const borderValue = styles.border;
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable reference
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    // Also check borderColor directly
+    if (styles.borderColor) {
+        const hex = extractHexColor(styles.borderColor);
+        if (hex)
+            return hex;
+    }
+    return undefined;
+}
+/**
+ * Extract color from a border-top CSS property on an element.
+ * Checks inline styles and CSS classes, and resolves CSS variables.
+ */
+function extractBorderTopColor(element, cssContext) {
+    // First, check CSS class styles (e.g., .menu-footer { border-top: 2px solid #b8860b; })
+    const styles = getElementStyles(element, cssContext);
+    if (styles.borderTop) {
+        const borderValue = styles.borderTop;
+        // Parse "2px solid #b8860b" or similar
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable in border that was already resolved
+        // (resolveValue in parseCssContext should have resolved it)
+        const resolved = extractHexColor(borderValue);
+        if (resolved)
+            return resolved;
+    }
+    // Then check inline style for border-top (higher specificity)
+    const inlineStyle = element.getAttribute("style") || "";
+    const borderMatch = inlineStyle.match(/border-top:\s*([^;]+)/i);
+    if (borderMatch) {
+        const borderValue = borderMatch[1];
+        // Parse "1px solid #e5e7eb" or similar
+        const colorMatch = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+        if (colorMatch) {
+            let hex = colorMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // Check for CSS variable in border
+        const varMatch = borderValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+        if (varMatch) {
+            const varValue = cssContext.variables.get(varMatch[1]);
+            if (varValue) {
+                const hex = extractHexColor(varValue);
+                if (hex)
+                    return hex;
+            }
+        }
+    }
+    return undefined;
+}
+/**
+ * Parse a CSS length value to twips.
+ * Supports: px, rem, em, pt
+ * Returns undefined if parsing fails.
+ *
+ * Conversions:
+ * - 1 inch = 1440 twips
+ * - 1 point = 20 twips
+ * - 1 rem = 16px (assumed base)
+ * - 1px ≈ 0.75pt ≈ 15 twips
+ */
+function parseCssLengthToTwips(value) {
+    const match = value.trim().match(/^(-?[0-9.]+)(px|rem|em|pt)?$/);
+    if (!match)
+        return undefined;
+    const num = parseFloat(match[1]);
+    const unit = match[2] || 'px';
+    switch (unit) {
+        case 'px':
+            return Math.round(num * 15); // 1px ≈ 15 twips
+        case 'rem':
+        case 'em':
+            return Math.round(num * 16 * 15); // 1rem = 16px = 240 twips
+        case 'pt':
+            return Math.round(num * 20); // 1pt = 20 twips
+        default:
+            return undefined;
+    }
+}
+/**
+ * Parse CSS padding shorthand into individual values in twips.
+ * Supports: "value", "vertical horizontal", "top horizontal bottom", "top right bottom left"
+ * Returns object with top, right, bottom, left in twips.
+ */
+function parseCssPaddingToTwips(padding) {
+    const parts = padding.trim().split(/\s+/);
+    if (parts.length === 0)
+        return undefined;
+    const values = parts.map(p => parseCssLengthToTwips(p)).filter(v => v !== undefined);
+    if (values.length === 0)
+        return undefined;
+    // CSS shorthand rules:
+    // 1 value: all sides
+    // 2 values: vertical horizontal
+    // 3 values: top horizontal bottom
+    // 4 values: top right bottom left
+    switch (values.length) {
+        case 1:
+            return { top: values[0], right: values[0], bottom: values[0], left: values[0] };
+        case 2:
+            return { top: values[0], right: values[1], bottom: values[0], left: values[1] };
+        case 3:
+            return { top: values[0], right: values[1], bottom: values[2], left: values[1] };
+        case 4:
+            return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
+        default:
+            return undefined;
+    }
+}
+/**
+ * GENERALIZED: Convert CSS font-size value to DOCX half-points.
+ * CSS font-size values: "0.875rem", "14px", "12pt", "1.5rem"
+ * DOCX size is in half-points (1pt = 2 half-points)
+ * Default browser font-size is 16px = 12pt = 24 half-points
+ */
+function parseFontSizeToHalfPoints(fontSize) {
+    if (!fontSize)
+        return undefined;
+    const fs = fontSize.trim();
+    if (fs.endsWith("rem")) {
+        // rem relative to 16px base, convert to points then half-points
+        // 1rem = 16px = 12pt = 24 half-points
+        const remValue = parseFloat(fs);
+        if (!isNaN(remValue)) {
+            return Math.round(remValue * 12 * 2);
+        }
+    }
+    else if (fs.endsWith("em")) {
+        // em relative to parent, assume 16px base
+        const emValue = parseFloat(fs);
+        if (!isNaN(emValue)) {
+            return Math.round(emValue * 12 * 2);
+        }
+    }
+    else if (fs.endsWith("px")) {
+        // px to points: 1px = 0.75pt, then to half-points
+        const pxValue = parseFloat(fs);
+        if (!isNaN(pxValue)) {
+            return Math.round(pxValue * 0.75 * 2);
+        }
+    }
+    else if (fs.endsWith("pt")) {
+        const ptValue = parseFloat(fs);
+        if (!isNaN(ptValue)) {
+            return Math.round(ptValue * 2);
+        }
+    }
+    return undefined;
+}
+/**
+ * GENERALIZED: Convert CSS margin/spacing value to DOCX twips.
+ * CSS margin values: "0.5rem", "8px", "6pt", "1rem"
+ * DOCX spacing is in twips (1 inch = 1440 twips, 1pt = 20 twips)
+ * Default browser font-size is 16px = 12pt
+ * 1rem = 16px = 12pt = 240 twips
+ */
+function parseMarginToTwips(margin) {
+    if (!margin)
+        return undefined;
+    const m = margin.trim();
+    if (m.endsWith("rem")) {
+        // rem relative to 16px base
+        // 1rem = 16px = 12pt = 240 twips
+        const remValue = parseFloat(m);
+        if (!isNaN(remValue)) {
+            return Math.round(remValue * 240);
+        }
+    }
+    else if (m.endsWith("em")) {
+        // em relative to parent, assume 16px base
+        const emValue = parseFloat(m);
+        if (!isNaN(emValue)) {
+            return Math.round(emValue * 240);
+        }
+    }
+    else if (m.endsWith("px")) {
+        // px to twips: 1px = 15 twips (1 inch = 96px = 1440 twips)
+        const pxValue = parseFloat(m);
+        if (!isNaN(pxValue)) {
+            return Math.round(pxValue * 15);
+        }
+    }
+    else if (m.endsWith("pt")) {
+        // pt to twips: 1pt = 20 twips
+        const ptValue = parseFloat(m);
+        if (!isNaN(ptValue)) {
+            return Math.round(ptValue * 20);
+        }
+    }
+    return undefined;
+}
+/**
+ * GENERALIZED: Convert CSS line-height value to DOCX line spacing.
+ * CSS line-height: "1.3", "1.7", "24px", "1.5em", "normal"
+ * DOCX line spacing with LineRuleType.AUTO uses "240ths of a line"
+ * where 240 = single spacing (1.0), 360 = 1.5, 480 = double (2.0)
+ * Formula: lineHeight * 240 = DOCX line value
+ *
+ * @param lineHeight CSS line-height value
+ * @param fontSize Optional font size in half-points for px conversion (e.g., 24 = 12pt)
+ */
+function parseLineHeightToDocx(lineHeight, fontSize) {
+    if (!lineHeight)
+        return undefined;
+    const lh = lineHeight.trim();
+    // "normal" typically equals 1.2 in browsers
+    if (lh === "normal") {
+        return Math.round(1.2 * 240);
+    }
+    // Unitless number (e.g., "1.3", "1.7") - most common
+    const unitlessValue = parseFloat(lh);
+    if (!isNaN(unitlessValue) && !lh.match(/[a-z%]/i)) {
+        return Math.round(unitlessValue * 240);
+    }
+    // em units (e.g., "1.5em") - treat as multiplier
+    if (lh.endsWith("em")) {
+        const emValue = parseFloat(lh);
+        if (!isNaN(emValue)) {
+            return Math.round(emValue * 240);
+        }
+    }
+    // px units (e.g., "27.2px" from getComputedStyle)
+    // Convert to ratio using font size if available, otherwise estimate
+    if (lh.endsWith("px")) {
+        const pxValue = parseFloat(lh);
+        if (!isNaN(pxValue)) {
+            // If we have font size (in half-points), convert:
+            // fontSize in half-points / 2 = points
+            // points * 4/3 = px (approx: 1pt ≈ 1.333px)
+            // lineHeight ratio = pxValue / (fontSize/2 * 1.333)
+            if (fontSize && fontSize > 0) {
+                const fontSizePx = (fontSize / 2) * (4 / 3);
+                const ratio = pxValue / fontSizePx;
+                return Math.round(ratio * 240);
+            }
+            // Without font size, estimate using 16px base (common default)
+            // This gives us a rough ratio
+            const estimatedRatio = pxValue / 16;
+            // Only use if the ratio is reasonable (0.8 to 3.0)
+            if (estimatedRatio >= 0.8 && estimatedRatio <= 3.0) {
+                return Math.round(estimatedRatio * 240);
+            }
+        }
+    }
+    // pt units (e.g., "18pt")
+    if (lh.endsWith("pt")) {
+        const ptValue = parseFloat(lh);
+        if (!isNaN(ptValue) && fontSize && fontSize > 0) {
+            // fontSize in half-points / 2 = points
+            const fontSizePt = fontSize / 2;
+            const ratio = ptValue / fontSizePt;
+            return Math.round(ratio * 240);
+        }
+    }
+    // Return undefined to use default line-height
+    return undefined;
+}
+function extractHexColor(value) {
+    // Handle named CSS colors (common ones used in documents)
+    const namedColors = {
+        white: "FFFFFF",
+        black: "000000",
+        red: "FF0000",
+        green: "008000",
+        blue: "0000FF",
+        yellow: "FFFF00",
+        orange: "FFA500",
+        purple: "800080",
+        gray: "808080",
+        grey: "808080",
+        transparent: "", // Return empty for transparent
+    };
+    const lowerValue = value.toLowerCase().trim();
+    if (namedColors[lowerValue] !== undefined) {
+        return namedColors[lowerValue] || undefined;
+    }
+    // Handle hex colors
+    const hexMatch = value.match(/#([0-9a-fA-F]{3,6})/);
+    if (hexMatch) {
+        let hex = hexMatch[1];
+        // Expand 3-digit hex to 6-digit
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        return hex.toUpperCase();
+    }
+    // Handle linear-gradient - extract and blend the first color
+    const gradientMatch = value.match(/linear-gradient\s*\([^)]+\)/i);
+    if (gradientMatch) {
+        // Find all rgba colors in the gradient
+        const rgbaMatches = value.matchAll(/rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/g);
+        for (const match of rgbaMatches) {
+            const alpha = parseFloat(match[4]);
+            // Blend with white based on alpha
+            const r = Math.round(parseInt(match[1], 10) * alpha + 255 * (1 - alpha));
+            const g = Math.round(parseInt(match[2], 10) * alpha + 255 * (1 - alpha));
+            const b = Math.round(parseInt(match[3], 10) * alpha + 255 * (1 - alpha));
+            return (r.toString(16).padStart(2, "0") +
+                g.toString(16).padStart(2, "0") +
+                b.toString(16).padStart(2, "0")).toUpperCase();
+        }
+        // Fallback: try to find a hex color in the gradient
+        const gradientHexMatch = value.match(/#([0-9a-fA-F]{3,6})/);
+        if (gradientHexMatch) {
+            let hex = gradientHexMatch[1];
+            if (hex.length === 3) {
+                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+            }
+            return hex.toUpperCase();
+        }
+        // For gradients without extractable colors, return undefined (no background)
+        return undefined;
+    }
+    // Handle rgb/rgba - check for alpha value
+    const rgbaMatch = value.match(/rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/);
+    if (rgbaMatch) {
+        const alpha = parseFloat(rgbaMatch[4]);
+        // If alpha is very low (< 0.3), the color is mostly transparent
+        // Blend with white to get the effective color
+        if (alpha < 0.3) {
+            const r = Math.round(parseInt(rgbaMatch[1], 10) * alpha + 255 * (1 - alpha));
+            const g = Math.round(parseInt(rgbaMatch[2], 10) * alpha + 255 * (1 - alpha));
+            const b = Math.round(parseInt(rgbaMatch[3], 10) * alpha + 255 * (1 - alpha));
+            return (r.toString(16).padStart(2, "0") +
+                g.toString(16).padStart(2, "0") +
+                b.toString(16).padStart(2, "0")).toUpperCase();
+        }
+        // For higher alpha, just use the RGB values
+        const r = parseInt(rgbaMatch[1], 10).toString(16).padStart(2, "0");
+        const g = parseInt(rgbaMatch[2], 10).toString(16).padStart(2, "0");
+        const b = parseInt(rgbaMatch[3], 10).toString(16).padStart(2, "0");
+        return (r + g + b).toUpperCase();
+    }
+    // Handle rgb (no alpha)
+    const rgbMatch = value.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1], 10).toString(16).padStart(2, "0");
+        const g = parseInt(rgbMatch[2], 10).toString(16).padStart(2, "0");
+        const b = parseInt(rgbMatch[3], 10).toString(16).padStart(2, "0");
+        return (r + g + b).toUpperCase();
+    }
+    return undefined;
+}
+/**
+ * Extract text color from an element.
+ * Checks inline style first, then CSS class rules, then element type rules, then computed style if available.
+ * Returns the actual color from the HTML - does NOT filter out any colors.
+ * Per the skill rules: ALL styling values MUST be extracted from HTML, never filtered.
+ */
+function extractTextColor(element, cssContext) {
+    // Check inline style first (highest priority)
+    const inlineStyle = element.getAttribute("style") || "";
+    const colorMatch = inlineStyle.match(/(?:^|;)\s*color:\s*([^;]+)/i);
+    if (colorMatch) {
+        let colorValue = colorMatch[1].trim();
+        // Resolve CSS variables in inline styles (e.g., var(--color-muted))
+        if (cssContext && colorValue.includes("var(")) {
+            const varMatch = colorValue.match(/var\s*\(\s*(--[a-zA-Z0-9-]+)\s*\)/);
+            if (varMatch) {
+                const resolvedValue = cssContext.variables.get(varMatch[1]);
+                if (resolvedValue) {
+                    colorValue = resolvedValue;
+                }
+            }
+        }
+        const color = extractHexColor(colorValue);
+        if (color) {
+            return color;
+        }
+    }
+    // Check CSS class rules (resolves CSS variables)
+    if (cssContext) {
+        const classColor = getColorFromClasses(element, cssContext);
+        if (classColor) {
+            return classColor;
+        }
+        // Check element type styles (e.g., body { color: ... }, p { color: ... })
+        const elementStyles = getElementStyles(element, cssContext);
+        if (elementStyles.color) {
+            const color = extractHexColor(elementStyles.color);
+            if (color) {
+                return color;
+            }
+        }
+    }
+    // Try computed style if available (browser environment)
+    if (typeof window !== "undefined" && window.getComputedStyle) {
+        try {
+            const computed = window.getComputedStyle(element);
+            const computedColor = computed.color;
+            if (computedColor) {
+                const color = extractHexColor(computedColor);
+                if (color) {
+                    return color;
+                }
+            }
+        }
+        catch {
+            // getComputedStyle may fail in some environments
+        }
+    }
+    return undefined;
+}
+/**
+ * Parse content from a blockquote/callout element.
+ * Directly iterates children instead of re-parsing innerHTML.
+ *
+ * @param element The blockquote/callout element
+ * @param cssContext The CSS context for resolving styles
+ */
+function parseBlockquoteContent(element, cssContext) {
+    const innerElements = [];
+    // GENERALIZED: Extract blockquote's font-style from CSS element selector
+    // This handles rules like "blockquote { font-style: italic; }"
+    const blockquoteStyles = getElementStyles(element, cssContext);
+    const blockquoteIsItalic = blockquoteStyles.fontStyle === "italic";
+    function processInnerNode(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent?.trim();
+            if (text) {
+                // Apply blockquote's italic style to direct text nodes
+                if (blockquoteIsItalic) {
+                    innerElements.push({ type: "paragraph", text, italic: true });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text });
+                }
+            }
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE || !(node instanceof Element)) {
+            return;
+        }
+        const el = node;
+        const tagName = el.tagName.toLowerCase();
+        // Handle headings
+        const headingLevel = parseHeadingLevel(tagName);
+        if (headingLevel !== null) {
+            const text = getTextContent(el).trim();
+            if (text) {
+                // Extract color from the heading element, using the blockquote as parent for nested style lookups
+                // This handles CSS rules like ".key-takeaways h3 { color: #7c3aed; }"
+                const headingStyles = getElementStyles(el, cssContext, element);
+                const color = headingStyles.color ? extractHexColor(headingStyles.color) : undefined;
+                innerElements.push({ type: "heading", level: headingLevel, text, color });
+            }
+            return;
+        }
+        // Handle paragraphs
+        if (tagName === "p") {
+            const runs = extractInlineRuns(el, cssContext);
+            if (runs.length > 0) {
+                const text = runs.map((r) => r.text).join("");
+                // Extract color from the paragraph element, using the blockquote as parent for nested style lookups
+                // This handles CSS rules like ".cta p { color: white; }" or ".cta { color: white; }"
+                const paragraphStyles = getElementStyles(el, cssContext, element);
+                const color = paragraphStyles.color ? extractHexColor(paragraphStyles.color) : undefined;
+                // Apply blockquote's italic style to runs that don't have their own italic setting
+                if (blockquoteIsItalic) {
+                    runs.forEach(run => {
+                        if (run.italic === undefined) {
+                            run.italic = true;
+                        }
+                    });
+                }
+                if (hasInlineFormatting(runs) || blockquoteIsItalic) {
+                    // Apply color to runs that don't have their own color
+                    if (color) {
+                        runs.forEach(run => {
+                            if (!run.color) {
+                                run.color = color;
+                            }
+                        });
+                    }
+                    innerElements.push({ type: "paragraph", text, runs, color, italic: blockquoteIsItalic });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text, color });
+                }
+            }
+            return;
+        }
+        // Handle lists
+        if (tagName === "ul" || tagName === "ol") {
+            const items = [];
+            // Use direct children li, not querySelectorAll to avoid nested lists
+            for (const child of el.children) {
+                if (child.tagName.toLowerCase() === "li") {
+                    const runs = extractInlineRuns(child, cssContext);
+                    if (runs.length > 0) {
+                        // Apply blockquote's italic style to list item runs
+                        if (blockquoteIsItalic) {
+                            runs.forEach(run => {
+                                if (run.italic === undefined) {
+                                    run.italic = true;
+                                }
+                            });
+                        }
+                        if (hasInlineFormatting(runs) || blockquoteIsItalic) {
+                            items.push(runs);
+                        }
+                        else {
+                            items.push(runs.map((r) => r.text).join(""));
+                        }
+                    }
+                }
+            }
+            if (items.length > 0) {
+                innerElements.push({ type: "list", ordered: tagName === "ol", items });
+            }
+            return;
+        }
+        // Handle labels/titles - detect by visual styling (bold/font-weight)
+        // Extract color from the element's own CSS styles (handles nested selectors)
+        // Pass the blockquote element as parent for nested style lookups
+        if (tagName === "div") {
+            const styles = getElementStyles(el, cssContext, element);
+            const isBoldOrLabel = styles.fontWeight === "700" ||
+                styles.fontWeight === "bold" ||
+                styles.fontWeight === "600";
+            if (isBoldOrLabel) {
+                const text = getTextContent(el).trim();
+                if (text) {
+                    // Extract the label's color from its own styles (includes nested CSS rules)
+                    const labelColor = styles.color ? extractHexColor(styles.color) : undefined;
+                    if (labelColor) {
+                        const runs = [{
+                                text,
+                                bold: true,
+                                italic: false,
+                                color: labelColor,
+                            }];
+                        innerElements.push({ type: "paragraph", text, runs });
+                    }
+                    else {
+                        innerElements.push({ type: "paragraph", text, bold: true });
+                    }
+                }
+                return;
+            }
+        }
+        // Container tags - recurse into children
+        // Include definition list elements (dl, dt, dd) for proper menu parsing
+        if (["div", "span", "section", "dl", "dd", "figure", "figcaption"].includes(tagName)) {
+            // GENERALIZED: Check if this container has only inline content (spans, text nodes)
+            // and is a horizontal flex container - if so, render as a table to preserve horizontal layout
+            const hasOnlyInlineContent = isInlineOnlyContainer(el);
+            const isHorizFlex = isHorizontalFlexContainer(el, cssContext);
+            const directChildren = Array.from(el.children);
+            const hasMultipleFlexChildren = isHorizFlex && directChildren.length > 1;
+            if (hasOnlyInlineContent && hasMultipleFlexChildren) {
+                // GENERALIZED: Convert horizontal flexbox to a single-row borderless table
+                // Each flex item becomes a table cell, preserving the horizontal layout
+                const containerStyles = getElementStyles(el, cssContext);
+                const containerFontFamily = containerStyles.fontFamily;
+                const flexChildren = directChildren.filter(child => child.nodeType === Node.ELEMENT_NODE);
+                const tableCells = [];
+                for (const flexChild of flexChildren) {
+                    // Extract runs from this flex child
+                    const childRuns = extractInlineRuns(flexChild, cssContext, undefined, containerFontFamily);
+                    if (childRuns.length > 0) {
+                        // Apply blockquote's italic style if applicable
+                        if (blockquoteIsItalic) {
+                            childRuns.forEach(run => {
+                                if (run.italic === undefined) {
+                                    run.italic = true;
+                                }
+                            });
+                        }
+                        // Use runs as cell content
+                        tableCells.push(childRuns);
+                    }
+                }
+                if (tableCells.length > 0) {
+                    // Create a single-row borderless table to represent horizontal flexbox
+                    innerElements.push({
+                        type: "table",
+                        rows: [tableCells],
+                        hasHeader: false,
+                        noBorders: true,
+                    });
+                }
+                return;
+            }
+            else if (hasOnlyInlineContent) {
+                // Single inline container (not horizontal flex) - extract as one paragraph
+                const containerStyles = getElementStyles(el, cssContext);
+                const containerFontFamily = containerStyles.fontFamily;
+                const runs = extractInlineRuns(el, cssContext, undefined, containerFontFamily);
+                if (runs.length > 0) {
+                    const text = runs.map(r => r.text).join("");
+                    if (blockquoteIsItalic) {
+                        runs.forEach(run => {
+                            if (run.italic === undefined) {
+                                run.italic = true;
+                            }
+                        });
+                    }
+                    if (hasInlineFormatting(runs)) {
+                        innerElements.push({ type: "paragraph", text, runs });
+                    }
+                    else {
+                        innerElements.push({ type: "paragraph", text });
+                    }
+                }
+                return;
+            }
+            // Default: recurse into children
+            for (const child of el.childNodes) {
+                processInnerNode(child);
+            }
+            return;
+        }
+        // Handle dt (definition term) elements - typically have flex layout with name + price
+        // Combine all inline content into a single paragraph
+        if (tagName === "dt") {
+            const runs = extractInlineRuns(el, cssContext);
+            if (runs.length > 0) {
+                const text = runs.map((r) => r.text).join("");
+                if (hasInlineFormatting(runs)) {
+                    innerElements.push({ type: "paragraph", text, runs });
+                }
+                else {
+                    innerElements.push({ type: "paragraph", text });
+                }
+            }
+            return;
+        }
+        // Fallback - try to get text
+        const text = getTextContent(el).trim();
+        if (text && el.children.length === 0) {
+            innerElements.push({ type: "paragraph", text });
+        }
+        else {
+            for (const child of el.childNodes) {
+                processInnerNode(child);
+            }
+        }
+    }
+    // Process all direct children of the blockquote element
+    for (const child of element.childNodes) {
+        processInnerNode(child);
+    }
+    return innerElements;
+}
+/**
+ * Parse HTML string and extract content elements.
+ */
+export function parseHtmlContent(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const elements = [];
+    // Parse CSS context for resolving variables and class-based colors
+    const cssContext = parseCssContext(doc);
+    // Track SVGs that have been processed (to avoid duplicate processing)
+    const processedSvgs = new Set();
+    const { body } = doc;
+    function processNode(node, inheritedAlignment, inheritedColor) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent?.trim();
+            if (text) {
+                elements.push({ type: "paragraph", text, alignment: inheritedAlignment, color: inheritedColor });
+            }
+            return;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+        }
+        // At this point we know it's an Element node by nodeType
+        // Note: We use nodeType check instead of instanceof Element because
+        // linkedom has separate HTMLElement and SVGElement classes, and the
+        // global Element shim only covers HTMLElement. SVG elements have
+        // nodeType 1 but fail instanceof Element check in linkedom.
+        const element = node;
+        if (!element.tagName) {
+            return;
+        }
+        const tagName = element.tagName.toLowerCase();
+        // Skip script, style, noscript, and other non-visual elements
+        if (tagName === "script" || tagName === "style" || tagName === "noscript" ||
+            tagName === "iframe" || tagName === "link" || tagName === "meta" ||
+            tagName === "template" || tagName === "object" || tagName === "embed") {
+            return;
+        }
+        // Get alignment from this element's CSS styles, or use inherited
+        const elementAlignment = getTextAlignment(element, cssContext);
+        const alignment = elementAlignment || inheritedAlignment;
+        // Get color from this element (via CSS classes or inline styles)
+        // Color inheritance rules:
+        // 1. Inline styles on THIS element take precedence
+        // 2. CSS class colors on THIS element take precedence
+        // 3. Inline style colors from PARENT elements ARE inherited (CSS spec)
+        // 4. CSS class colors from parent elements are NOT inherited here (handled by CSS cascade)
+        const elementColor = extractTextColor(element, cssContext);
+        // Use element's own color if set, otherwise use inherited color (from parent inline styles)
+        const effectiveColor = elementColor || inheritedColor;
+        const headingLevel = parseHeadingLevel(tagName);
+        if (headingLevel !== null) {
+            const text = getTextContent(element).trim();
+            if (text) {
+                // Extract text-transform from CSS
+                const hStyles = getElementStyles(element, cssContext);
+                let textTransform;
+                if (hStyles.textTransform === "uppercase" || hStyles.textTransform === "lowercase" || hStyles.textTransform === "capitalize") {
+                    textTransform = hStyles.textTransform;
+                }
+                // Extract font-family for heading (e.g., h1 { font-family: var(--font-heading); })
+                const headingFontFamily = hStyles.fontFamily;
+                // GENERALIZED: Check for border-bottom on heading (e.g., h2 with underline style)
+                // Any element can have borders - extract from CSS/inline styles
+                const headingBorderColor = extractBorderBottomColor(element, cssContext);
+                // When heading has border-bottom, reduce heading after spacing
+                // and add HR with top border to simulate CSS padding-bottom
+                // CSS padding-bottom: 0.5rem ≈ 100 twips (space from text to border)
+                const spacingAfter = headingBorderColor ? 100 : undefined;
+                // GENERALIZED: Extract line-height for vertical spacing
+                // CSS line-height: 1.2 for titles, 1.3 for other headings, etc.
+                const lineSpacing = hStyles.lineHeight ? parseLineHeightToDocx(hStyles.lineHeight) : undefined;
+                // Check for gradient text (CSS background-clip: text)
+                // If gradient exists, create runs array with gradient info
+                let runs;
+                if (hStyles.gradient) {
+                    runs = [{ text, gradient: hStyles.gradient, color: elementColor }];
+                }
+                elements.push({
+                    type: "heading",
+                    level: headingLevel,
+                    text,
+                    alignment,
+                    color: elementColor,
+                    textTransform,
+                    spacingAfter,
+                    fontFamily: headingFontFamily,
+                    runs,
+                    lineSpacing,
+                });
+                // Add horizontal-rule for border-bottom effect
+                // Use top border with minimal before spacing - border appears right at top
+                // CSS margin-bottom: 1rem ≈ 200 twips (space after border to content)
+                if (headingBorderColor) {
+                    elements.push({ type: "horizontal-rule", color: headingBorderColor, spacingBefore: 0, spacingAfter: 200, borderPosition: "top" });
+                }
+            }
+            return;
+        }
+        // Handle <hr> elements
+        if (tagName === "hr") {
+            // Try to extract color from inline style or CSS
+            const hrStyle = element.getAttribute("style") || "";
+            const colorMatch = hrStyle.match(/(?:border-color|background-color|color):\s*([^;]+)/i);
+            let hrColor;
+            if (colorMatch) {
+                hrColor = extractHexColor(colorMatch[1]);
+            }
+            elements.push({ type: "horizontal-rule", color: hrColor });
+            return;
+        }
+        // GENERALIZED: Check if this paragraph is a styled callout (has border-left)
+        // This handles patterns like: <p class="intro-section"> with border-left: 4px solid ...
+        // Must come BEFORE regular paragraph handling
+        if (tagName === "p" && isBlockquoteOrCallout(element, cssContext)) {
+            const content = parseBlockquoteContent(element, cssContext);
+            if (content.length > 0) {
+                const elementStyles = getElementStyles(element, cssContext);
+                let borderColor;
+                let backgroundColor;
+                // Extract background color from element styles
+                if (elementStyles.backgroundColor) {
+                    const hex = extractHexColor(elementStyles.backgroundColor);
+                    if (hex)
+                        backgroundColor = hex;
+                }
+                // Extract border color from borderLeft property
+                if (elementStyles.borderLeft) {
+                    const hex = extractBorderColorFromStyle({ borderLeft: elementStyles.borderLeft });
+                    if (hex)
+                        borderColor = hex;
+                }
+                else if (elementStyles.borderColor) {
+                    const hex = extractHexColor(elementStyles.borderColor);
+                    if (hex)
+                        borderColor = hex;
+                }
+                elements.push({
+                    type: "blockquote",
+                    content,
+                    borderColor,
+                    backgroundColor,
+                    borderStyle: "left",
+                });
+            }
+            return;
+        }
+        if (tagName === "p") {
+            const runs = extractInlineRuns(element, cssContext, effectiveColor);
+            if (runs.length > 0) {
+                const text = runs.map((r) => r.text).join("");
+                // Use effectiveColor which includes inheritance from parent inline styles
+                // Extract text-indent, font-style, text-transform from CSS
+                const pStyles = getElementStyles(element, cssContext);
+                let firstLineIndent;
+                let hangingIndent;
+                let textTransform;
+                let italic = false;
+                // Handle text-indent (can be positive for first-line indent, negative for hanging indent)
+                if (pStyles.textIndent) {
+                    const indentTwips = parseCssLengthToTwips(pStyles.textIndent);
+                    if (indentTwips !== undefined) {
+                        if (indentTwips >= 0) {
+                            firstLineIndent = indentTwips;
+                        }
+                        else {
+                            // Negative text-indent creates a hanging indent
+                            hangingIndent = Math.abs(indentTwips);
+                        }
+                    }
+                }
+                // Handle font-style: italic
+                if (pStyles.fontStyle === "italic") {
+                    italic = true;
+                    // Apply italic to all runs
+                    runs.forEach(run => run.italic = true);
+                }
+                // Handle font-weight: bold/700/600
+                let bold = false;
+                if (pStyles.fontWeight === "700" || pStyles.fontWeight === "bold" || pStyles.fontWeight === "600") {
+                    bold = true;
+                    // Apply bold to all runs
+                    runs.forEach(run => run.bold = true);
+                }
+                // Handle text-transform
+                if (pStyles.textTransform === "uppercase" || pStyles.textTransform === "lowercase" || pStyles.textTransform === "capitalize") {
+                    textTransform = pStyles.textTransform;
+                }
+                // Extract font-family from paragraph styles (will be inherited from body if not set on p)
+                const paragraphFontFamily = pStyles.fontFamily;
+                // Apply fontFamily to runs if present and runs don't have their own fontFamily
+                if (paragraphFontFamily) {
+                    runs.forEach(run => {
+                        if (!run.fontFamily) {
+                            run.fontFamily = paragraphFontFamily;
+                        }
+                    });
+                }
+                if (hasInlineFormatting(runs)) {
+                    // Has mixed formatting - use runs array
+                    // Apply effective color to runs that don't have their own color
+                    if (effectiveColor) {
+                        runs.forEach(run => {
+                            if (!run.color) {
+                                run.color = effectiveColor;
+                            }
+                        });
+                    }
+                    elements.push({ type: "paragraph", text, runs, alignment, firstLineIndent, hangingIndent, textTransform });
+                }
+                else if (effectiveColor || italic || bold || paragraphFontFamily) {
+                    // Has color, italic, bold, or fontFamily - use runs to preserve formatting
+                    // Create runs with the appropriate formatting
+                    const formattedRuns = [{ text, bold, italic, color: effectiveColor, fontFamily: paragraphFontFamily }];
+                    elements.push({ type: "paragraph", text, runs: formattedRuns, alignment, firstLineIndent, hangingIndent, textTransform });
+                }
+                else {
+                    // No formatting - simple paragraph (but may have indent/transform)
+                    elements.push({ type: "paragraph", text, alignment, firstLineIndent, hangingIndent, textTransform });
+                }
+            }
+            return;
+        }
+        if (tagName === "ul" || tagName === "ol") {
+            const items = [];
+            let hasComplexItems = false;
+            let hasOnlyNestedLists = true; // Track if complexity is ONLY from nested lists
+            // First pass: check if any list items contain block-level elements
+            // Use direct children to avoid nested lists
+            const listItems = [];
+            for (const child of element.children) {
+                if (child.tagName.toLowerCase() === "li") {
+                    listItems.push(child);
+                    if (hasBlockLevelChildren(child)) {
+                        hasComplexItems = true;
+                        // Check if the block children are only nested lists
+                        for (const blockChild of child.children) {
+                            const blockTagName = blockChild.tagName.toLowerCase();
+                            if (BLOCK_LEVEL_TAGS.has(blockTagName) && blockTagName !== "ul" && blockTagName !== "ol") {
+                                hasOnlyNestedLists = false;
+                            }
+                        }
+                    }
+                }
+            }
+            if (hasComplexItems && hasOnlyNestedLists) {
+                // List contains nested lists - use the nested list extraction with level tracking
+                const nestedItems = extractNestedListItems(element, cssContext, 0);
+                if (nestedItems.length > 0) {
+                    elements.push({ type: "list", ordered: tagName === "ol", items: nestedItems });
+                }
+            }
+            else if (hasComplexItems) {
+                // Complex list: process each list item recursively to capture block elements
+                // This handles SVGs, tables, nested divs, etc. inside list items
+                for (const li of listItems) {
+                    // For complex list items, we need to:
+                    // 1. Extract inline text that appears directly in the li (not inside block children)
+                    // 2. Process block-level children through processNode
+                    // Check which children are block-level
+                    const blockChildren = [];
+                    const inlineNodes = [];
+                    for (const child of li.childNodes) {
+                        if (child.nodeType === Node.ELEMENT_NODE) {
+                            const childTagName = child.tagName.toLowerCase();
+                            if (BLOCK_LEVEL_TAGS.has(childTagName)) {
+                                blockChildren.push(child);
+                            }
+                            else {
+                                // Inline element like <strong>, <span>, <a>, etc.
+                                inlineNodes.push(child);
+                            }
+                        }
+                        else if (child.nodeType === Node.TEXT_NODE) {
+                            inlineNodes.push(child);
+                        }
+                    }
+                    // Process block-level children (this captures SVGs, tables, divs, etc.)
+                    for (const child of blockChildren) {
+                        processNode(child);
+                    }
+                }
+                // Note: We intentionally don't create list items from inline content in complex lists
+                // because the block children (paragraphs, etc.) already contain all the meaningful content.
+                // The inline content in <li> for complex lists is typically whitespace.
+            }
+            else {
+                // Simple list: all items are inline-only, use efficient path
+                for (const li of listItems) {
+                    const runs = extractInlineRuns(li, cssContext);
+                    if (runs.length > 0) {
+                        if (hasInlineFormatting(runs)) {
+                            items.push(runs);
+                        }
+                        else {
+                            items.push(runs.map((r) => r.text).join(""));
+                        }
+                    }
+                }
+                if (items.length > 0) {
+                    elements.push({ type: "list", ordered: tagName === "ol", items });
+                }
+            }
+            return;
+        }
+        if (tagName === "table") {
+            const rows = [];
+            for (const tr of element.querySelectorAll("tr")) {
+                const cells = [];
+                for (const cell of tr.querySelectorAll("td, th")) {
+                    // Extract inline runs to preserve bold/italic formatting in cells
+                    const runs = extractInlineRuns(cell, cssContext);
+                    if (runs.length > 0) {
+                        if (hasInlineFormatting(runs)) {
+                            // Has formatting - store as runs
+                            cells.push(runs);
+                        }
+                        else {
+                            // Plain text - store as string
+                            cells.push(runs.map((r) => r.text).join(""));
+                        }
+                    }
+                    else {
+                        cells.push("");
+                    }
+                }
+                if (cells.length > 0) {
+                    rows.push(cells);
+                }
+            }
+            if (rows.length > 0) {
+                // Extract cell padding from CSS (th, td selectors)
+                let cellPadding;
+                let headerBackgroundColor;
+                let headerTextColor;
+                let evenRowBackgroundColor;
+                if (cssContext) {
+                    // Try td first, then th (they usually have the same padding)
+                    const tdStyle = cssContext.elementStyles.get("td");
+                    const thStyle = cssContext.elementStyles.get("th");
+                    const paddingStr = tdStyle?.padding || thStyle?.padding;
+                    if (paddingStr) {
+                        cellPadding = parseCssPaddingToTwips(paddingStr);
+                    }
+                    // GENERALIZED: Look for nested header styles from ancestor containers
+                    // Walk up the DOM tree to find containers with nested th styles
+                    let ancestor = element.parentElement;
+                    while (ancestor && !headerBackgroundColor) {
+                        const ancestorClassAttr = ancestor.getAttribute("class");
+                        const ancestorClasses = ancestorClassAttr ? ancestorClassAttr.split(/\s+/).filter(c => c.length > 0) : [];
+                        for (const ancestorClass of ancestorClasses) {
+                            const nestedMap = cssContext.nestedStyles.get(ancestorClass);
+                            if (nestedMap) {
+                                // Check for th nested styles (e.g., .comparison-table-wrapper th { ... })
+                                const thNestedStyle = nestedMap.get("th");
+                                if (thNestedStyle) {
+                                    if (thNestedStyle.backgroundColor) {
+                                        const hex = extractHexColor(thNestedStyle.backgroundColor);
+                                        if (hex)
+                                            headerBackgroundColor = hex;
+                                    }
+                                    if (thNestedStyle.color) {
+                                        const hex = extractHexColor(thNestedStyle.color);
+                                        if (hex)
+                                            headerTextColor = hex;
+                                    }
+                                }
+                                // Check for tr:nth-child(even) or similar for even row styling
+                                const trNestedStyle = nestedMap.get("tr");
+                                if (trNestedStyle && trNestedStyle.backgroundColor) {
+                                    const hex = extractHexColor(trNestedStyle.backgroundColor);
+                                    if (hex)
+                                        evenRowBackgroundColor = hex;
+                                }
+                            }
+                        }
+                        ancestor = ancestor.parentElement;
+                    }
+                    // Also check direct element styles for th (standalone th { ... } rules)
+                    if (!headerBackgroundColor && thStyle?.backgroundColor) {
+                        const hex = extractHexColor(thStyle.backgroundColor);
+                        if (hex)
+                            headerBackgroundColor = hex;
+                    }
+                    if (!headerTextColor && thStyle?.color) {
+                        const hex = extractHexColor(thStyle.color);
+                        if (hex)
+                            headerTextColor = hex;
+                    }
+                }
+                elements.push({ type: "table", rows, cellPadding, headerBackgroundColor, headerTextColor, evenRowBackgroundColor });
+            }
+            return;
+        }
+        if (tagName === "pre" || tagName === "code") {
+            const text = getTextContent(element).trim();
+            if (text) {
+                elements.push({ type: "code", text });
+            }
+            return;
+        }
+        // Check for chart containers (divs with SVG children)
+        if (tagName === "div") {
+            // Check for two-column grid layout (like resume templates with sidebar)
+            const sidebarWidthPercent = isTwoColumnGridLayout(element, cssContext);
+            if (sidebarWidthPercent !== undefined) {
+                const columnChildren = findTwoColumnChildren(element);
+                if (columnChildren) {
+                    const [sidebarEl, mainEl] = columnChildren;
+                    // Extract sidebar styling
+                    const sidebarStyles = getElementStyles(sidebarEl, cssContext);
+                    const sidebarBgColor = sidebarStyles.backgroundColor
+                        ? extractHexColor(sidebarStyles.backgroundColor)
+                        : undefined;
+                    const sidebarTextColor = sidebarStyles.color
+                        ? extractHexColor(sidebarStyles.color)
+                        : undefined;
+                    // Parse sidebar and main content separately
+                    const sidebarContent = parseContainerContent(sidebarEl, cssContext, sidebarTextColor);
+                    const mainContent = parseContainerContent(mainEl, cssContext);
+                    if (sidebarContent.length > 0 || mainContent.length > 0) {
+                        // TODO: Two-column layout is detected but causes DOCX rendering issues.
+                        // For now, just process the children normally instead of creating a two-column element.
+                        // This ensures content is extracted even if layout is not preserved.
+                        // elements.push({ type: "two-column-layout", ... });
+                    }
+                }
+            }
+            // Fall through to normal processing for now since two-column DOCX has issues
+            // GENERALIZED: Check for flex containers with equal-width columns (like signature blocks)
+            // This handles layouts like: display: flex; with children having flex: 1
+            // Render as a DOCX table with each child as a column
+            const flexColumns = detectFlexEqualColumns(element, cssContext);
+            if (flexColumns && flexColumns.length >= 2) {
+                // Check if children have enough content to warrant a table layout
+                // (Skip if children are simple/empty - those are handled by stats-grid or normal processing)
+                const hasComplexChildren = flexColumns.some(col => {
+                    const childCount = col.children.length;
+                    return childCount > 4; // Complex structure like signature blocks
+                });
+                if (hasComplexChildren) {
+                    // Build rows: align content from each column side by side
+                    // First, extract content lines from each column (with styling preserved as InlineRuns)
+                    const columnLines = [];
+                    let maxLines = 0;
+                    for (const col of flexColumns) {
+                        const lines = [];
+                        for (const child of col.children) {
+                            // Handle signature lines (border-bottom divs) as horizontal rules in text
+                            const childStyles = getElementStyles(child, cssContext);
+                            const inlineStyle = child.getAttribute("style") || "";
+                            const hasBorderBottom = inlineStyle.includes("border-bottom") ||
+                                childStyles.borderBottom ||
+                                childStyles.border?.includes("solid");
+                            if (hasBorderBottom && !getTextContent(child).trim()) {
+                                // Empty div with border = signature line
+                                lines.push("________________________");
+                            }
+                            else {
+                                const text = getTextContent(child).trim();
+                                if (text) {
+                                    // Extract styling for this element
+                                    const isBold = childStyles.fontWeight === "700" ||
+                                        childStyles.fontWeight === "bold" ||
+                                        child.querySelector("strong, b") !== null;
+                                    const isItalic = childStyles.fontStyle === "italic" ||
+                                        child.querySelector("em, i") !== null;
+                                    // Extract color - support both CSS class colors and inline styles
+                                    let textColor = childStyles.color;
+                                    if (!textColor) {
+                                        const styleAttr = child.getAttribute("style") || "";
+                                        const colorMatch = styleAttr.match(/color:\s*([^;]+)/);
+                                        if (colorMatch) {
+                                            textColor = colorMatch[1].trim();
+                                        }
+                                    }
+                                    // Convert color to hex without #
+                                    let hexColor;
+                                    if (textColor) {
+                                        if (textColor.startsWith("#")) {
+                                            hexColor = textColor.slice(1);
+                                        }
+                                        else if (textColor.startsWith("rgb")) {
+                                            // Parse rgb(r, g, b) to hex
+                                            const rgbMatch = textColor.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
+                                            if (rgbMatch) {
+                                                const r = parseInt(rgbMatch[1], 10);
+                                                const g = parseInt(rgbMatch[2], 10);
+                                                const b = parseInt(rgbMatch[3], 10);
+                                                hexColor = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+                                            }
+                                        }
+                                        else {
+                                            hexColor = textColor;
+                                        }
+                                    }
+                                    // Extract font size and convert to half-points
+                                    // CSS font-size values: "0.875rem", "14px", "12pt"
+                                    // DOCX size is in half-points (1pt = 2 half-points)
+                                    let fontSize;
+                                    if (childStyles.fontSize) {
+                                        const fs = childStyles.fontSize;
+                                        if (fs.endsWith("rem")) {
+                                            // rem relative to 16px base, convert to points then half-points
+                                            const remValue = parseFloat(fs);
+                                            if (!isNaN(remValue)) {
+                                                // 1rem = 16px = 12pt, so 0.875rem = 10.5pt = 21 half-points
+                                                fontSize = Math.round(remValue * 12 * 2);
+                                            }
+                                        }
+                                        else if (fs.endsWith("px")) {
+                                            // px to points: 1px = 0.75pt
+                                            const pxValue = parseFloat(fs);
+                                            if (!isNaN(pxValue)) {
+                                                fontSize = Math.round(pxValue * 0.75 * 2);
+                                            }
+                                        }
+                                        else if (fs.endsWith("pt")) {
+                                            const ptValue = parseFloat(fs);
+                                            if (!isNaN(ptValue)) {
+                                                fontSize = Math.round(ptValue * 2);
+                                            }
+                                        }
+                                    }
+                                    // If there's any styling, use InlineRun; otherwise plain string
+                                    if (isBold || isItalic || hexColor || fontSize) {
+                                        lines.push([{ text, bold: isBold, italic: isItalic, color: hexColor, size: fontSize }]);
+                                    }
+                                    else {
+                                        lines.push(text);
+                                    }
+                                }
+                            }
+                        }
+                        columnLines.push(lines);
+                        maxLines = Math.max(maxLines, lines.length);
+                    }
+                    // Create rows: each row has one cell per column
+                    const rows = [];
+                    for (let i = 0; i < maxLines; i++) {
+                        const rowCells = [];
+                        for (const lines of columnLines) {
+                            rowCells.push(lines[i] || ""); // Empty string if this column has fewer lines
+                        }
+                        rows.push(rowCells);
+                    }
+                    if (rows.length > 0) {
+                        elements.push({ type: "table", rows, hasHeader: false, noBorders: true });
+                        return;
+                    }
+                }
+            }
+            // GENERALIZED: Check for grid/flex containers with styled card children
+            // This detects any div that:
+            // 1. Uses grid or flex layout
+            // 2. Contains multiple similar child divs
+            // 3. Each child has a "value" (larger/bold text) and "label" (smaller/muted text) pattern
+            if (isGridOrFlexContainer(element, cssContext)) {
+                const childDivs = Array.from(element.children).filter((child) => child.tagName.toLowerCase() === "div");
+                // Check if this looks like a stats/card grid (2+ similar structured children)
+                if (childDivs.length >= 2) {
+                    const cards = [];
+                    for (const card of childDivs) {
+                        // Look for value/label/change pattern in child structure
+                        // Value: element with larger font, bold, or accent color
+                        // Label: element with smaller font or muted color
+                        // Change: element with very small font and positive/negative color (comparison text like "↑ 8% vs Q4 2024")
+                        const cardChildren = Array.from(card.children);
+                        // GENERALIZED VALIDATION: Stats cards should have simple structure (2-4 elements)
+                        // Skip complex structures like signature blocks that have many children
+                        if (cardChildren.length > 6) {
+                            continue;
+                        }
+                        let valueEl = null;
+                        let labelEl = null;
+                        let changeEl = null;
+                        for (const child of cardChildren) {
+                            const childStyles = getElementStyles(child, cssContext);
+                            const fontSize = childStyles.fontSize || "";
+                            const fontWeight = childStyles.fontWeight || "";
+                            const color = childStyles.color || "";
+                            // Detect value element: larger font, bold, or accent color
+                            const isLargerFont = fontSize.includes("1.75rem") || fontSize.includes("1.5rem") ||
+                                fontSize.includes("2rem") || parseFloat(fontSize) > 1;
+                            const isBold = fontWeight === "700" || fontWeight === "bold";
+                            const isAccentColor = color.includes("accent") || color.includes("#2563eb") ||
+                                color.includes("--color-accent");
+                            // Detect label element: smaller font or muted color
+                            const isSmallerFont = fontSize.includes("0.875rem") || fontSize.includes("0.75rem");
+                            const isMutedColor = color.includes("muted") || color.includes("#6b7280") ||
+                                color.includes("--color-muted");
+                            // Detect change element: very small font (0.75rem) with semantic colors (green/red for positive/negative)
+                            const isVerySmallFont = fontSize.includes("0.75rem") || fontSize.includes("0.7rem");
+                            const isPositiveColor = color.includes("#10b981") || color.includes("10b981") || color.includes("green");
+                            const isNegativeColor = color.includes("#ef4444") || color.includes("ef4444") || color.includes("red");
+                            const isChangeColor = isPositiveColor || isNegativeColor;
+                            if ((isLargerFont || isBold || isAccentColor) && !valueEl) {
+                                valueEl = child;
+                            }
+                            else if ((isSmallerFont || isMutedColor) && !labelEl) {
+                                labelEl = child;
+                            }
+                            else if ((isVerySmallFont || isChangeColor) && !changeEl) {
+                                // Change element: usually the third child with very small font and trend indicator
+                                changeEl = child;
+                            }
+                        }
+                        // If we couldn't detect by styles, fall back to position (first = value, second = label, third = change)
+                        if (!valueEl && cardChildren.length >= 1) {
+                            valueEl = cardChildren[0];
+                        }
+                        if (!labelEl && cardChildren.length >= 2) {
+                            labelEl = cardChildren[1];
+                        }
+                        if (!changeEl && cardChildren.length >= 3) {
+                            changeEl = cardChildren[2];
+                        }
+                        if (valueEl && labelEl) {
+                            const value = getTextContent(valueEl).trim();
+                            const label = getTextContent(labelEl).trim();
+                            const change = changeEl ? getTextContent(changeEl).trim() : undefined;
+                            // GENERALIZED VALIDATION: Stats cards should have short, distinct content
+                            // Skip if value or label are too long (indicates paragraph content, not stats)
+                            // Skip if they contain multiple sentences or newlines
+                            const MAX_VALUE_LENGTH = 50; // e.g., "$4,500.00", "127%", "2.5M"
+                            const MAX_LABEL_LENGTH = 100; // e.g., "Total Revenue", "Active Users"
+                            const isValueLike = value.length > 0 && value.length <= MAX_VALUE_LENGTH &&
+                                !value.includes('\n') && !value.includes('.');
+                            const isLabelLike = label.length > 0 && label.length <= MAX_LABEL_LENGTH &&
+                                !label.includes('\n');
+                            // GENERALIZED: Values that end with ':' are labels, not stats values
+                            // This prevents press-meta patterns like "Date:" / "February 12, 2026" from matching
+                            const isFieldLabel = value.endsWith(':');
+                            // Skip this card if it doesn't look like stats content
+                            if (!isValueLike || !isLabelLike || isFieldLabel) {
+                                continue;
+                            }
+                            // Extract colors from elements
+                            const valueColor = extractTextColor(valueEl, cssContext);
+                            const labelColor = extractTextColor(labelEl, cssContext);
+                            const changeColor = changeEl ? extractTextColor(changeEl, cssContext) : undefined;
+                            // Extract card background and border using generalized style extraction
+                            const cardStyles = getElementStyles(card, cssContext);
+                            const backgroundColor = cardStyles.backgroundColor
+                                ? extractHexColor(cardStyles.backgroundColor)
+                                : undefined;
+                            const borderColor = extractBorderColorFromStyle(cardStyles);
+                            cards.push({
+                                value,
+                                label,
+                                change,
+                                valueColor,
+                                labelColor,
+                                changeColor,
+                                backgroundColor,
+                                borderColor,
+                            });
+                        }
+                    }
+                    if (cards.length >= 2) {
+                        elements.push({ type: "stats-grid", cards });
+                        return;
+                    }
+                }
+            }
+            // GENERALIZED: Check for flex containers with inline key-value metadata items
+            // Pattern: flex container with child divs, each containing label:value pairs
+            // Example: .press-meta with "Date: Feb 12" and "Location: San Francisco"
+            // These should render as a single inline paragraph, not separate lines
+            if (isGridOrFlexContainer(element, cssContext)) {
+                const childDivs = Array.from(element.children).filter((child) => child.tagName.toLowerCase() === "div");
+                if (childDivs.length >= 2) {
+                    // Check if each child looks like a key-value pair (label ending with ":" + value)
+                    const metaItems = [];
+                    let isMetadataPattern = true;
+                    for (const child of childDivs) {
+                        // Get all text-containing children
+                        const textElements = Array.from(child.querySelectorAll("span, strong, em, b, i"));
+                        if (textElements.length >= 2) {
+                            const labelEl = textElements[0];
+                            const valueEl = textElements[1];
+                            if (labelEl && valueEl) {
+                                const label = getTextContent(labelEl).trim();
+                                const value = getTextContent(valueEl).trim();
+                                // Check if label ends with ":"
+                                if (label.endsWith(":") && value.length > 0) {
+                                    metaItems.push({ label, value });
+                                    continue;
+                                }
+                            }
+                        }
+                        // If any child doesn't match the pattern, break
+                        isMetadataPattern = false;
+                        break;
+                    }
+                    // If all children are key-value pairs, render as inline paragraph
+                    if (isMetadataPattern && metaItems.length >= 2) {
+                        // Build inline runs with spacing between items
+                        const runs = [];
+                        const elementStyles = getElementStyles(element, cssContext);
+                        const elementColor = elementStyles.color ? extractHexColor(elementStyles.color) : undefined;
+                        for (let i = 0; i < metaItems.length; i++) {
+                            const item = metaItems[i];
+                            // Add label (bold)
+                            runs.push({ text: item.label, bold: true, color: elementColor });
+                            // Add value with space
+                            runs.push({ text: ` ${item.value}`, color: elementColor });
+                            // Add separator between items (except last)
+                            if (i < metaItems.length - 1) {
+                                runs.push({ text: "    ", color: elementColor }); // Tab-like spacing
+                            }
+                        }
+                        const text = runs.map(r => r.text).join("");
+                        elements.push({ type: "paragraph", text, runs });
+                        return;
+                    }
+                }
+            }
+            // GENERALIZED: Check for div that contains an SVG chart
+            // If div has ONLY an SVG (no text), treat entire div as chart wrapper
+            // If div has BOTH SVG and text content, extract SVG as chart AND process text separately
+            const svgElement = element.querySelector(":scope > svg, :scope > div > svg");
+            // Recursively check if element has meaningful text content (direct or in nested containers)
+            // This determines if the div is a dedicated SVG wrapper or a mixed content container
+            const checkForTextContent = (el) => {
+                for (const node of Array.from(el.childNodes)) {
+                    if (node.nodeType === 3) { // Text node
+                        if ((node.textContent || "").trim().length > 0)
+                            return true;
+                    }
+                    if (node.nodeType === 1) { // Element node
+                        const childEl = node;
+                        const tagLower = childEl.tagName?.toLowerCase();
+                        // Skip SVG elements - we're looking for text, not the chart itself
+                        if (tagLower === "svg")
+                            continue;
+                        // Check text-containing elements directly
+                        if (tagLower === "h1" || tagLower === "h2" || tagLower === "h3" ||
+                            tagLower === "h4" || tagLower === "h5" || tagLower === "h6" ||
+                            tagLower === "p" || tagLower === "span") {
+                            if ((getTextContent(childEl) || "").trim().length > 0)
+                                return true;
+                        }
+                        // Recursively check nested div/section/article containers for text content
+                        if (tagLower === "div" || tagLower === "section" || tagLower === "article" ||
+                            tagLower === "aside" || tagLower === "main" || tagLower === "nav" ||
+                            tagLower === "header" || tagLower === "footer") {
+                            if (checkForTextContent(childEl))
+                                return true;
+                        }
+                    }
+                }
+                return false;
+            };
+            const hasTextContent = checkForTextContent(element);
+            // Process SVG if present, not decorative, and not already processed
+            if (svgElement && !processedSvgs.has(svgElement) && !isDecorativeSvg(svgElement, element, cssContext)) {
+                // Extract SVG content and dimensions
+                const svgContent = svgElement.outerHTML;
+                const viewBox = svgElement.getAttribute("viewBox");
+                let width = 700;
+                let height = 320;
+                if (viewBox) {
+                    const parts = viewBox.split(/\s+/).map(Number);
+                    if (parts.length >= 4) {
+                        width = parts[2] || width;
+                        height = parts[3] || height;
+                    }
+                }
+                else {
+                    // Try width/height attributes
+                    const widthAttr = svgElement.getAttribute("width");
+                    const heightAttr = svgElement.getAttribute("height");
+                    if (widthAttr && !widthAttr.includes("%")) {
+                        width = parseInt(widthAttr, 10) || width;
+                    }
+                    if (heightAttr && !heightAttr.includes("%")) {
+                        height = parseInt(heightAttr, 10) || height;
+                    }
+                }
+                // Look for title - but ONLY for dedicated SVG wrappers (no mixed text content)
+                // For mixed content containers, the heading will be processed separately as DOM content
+                let title;
+                if (!hasTextContent) {
+                    const titleEl = element.querySelector("h4, h3, h5, h6");
+                    if (titleEl) {
+                        title = getTextContent(titleEl).trim();
+                    }
+                    if (!title) {
+                        const prevSibling = element.previousElementSibling;
+                        if (prevSibling && /^h[1-6]$/i.test(prevSibling.tagName)) {
+                            title = getTextContent(prevSibling).trim();
+                        }
+                    }
+                }
+                // GENERALIZED: Extract background color from parent container for SVG rendering
+                // This handles cases like .hero-image { background: linear-gradient(...) }
+                // where the SVG needs to be rendered with the container's background color
+                const containerStyles = getElementStyles(element, cssContext);
+                let backgroundColor;
+                if (containerStyles.backgroundColor) {
+                    backgroundColor = extractHexColor(containerStyles.backgroundColor);
+                }
+                elements.push({ type: "svg-chart", svgContent, width, height, title, backgroundColor });
+                // Mark this SVG as processed to avoid duplicate processing when iterating children
+                processedSvgs.add(svgElement);
+                // If no text content, we're done (dedicated SVG wrapper)
+                if (!hasTextContent) {
+                    return;
+                }
+                // Otherwise, continue to process remaining children (mixed content)
+                // Fall through to CONTAINER_TAGS processing - SVG children will be skipped there
+            }
+        }
+        // Check for SVG elements (standalone charts)
+        // Filter out decorative SVGs (backgrounds, patterns, icons)
+        if (tagName === "svg") {
+            // Skip if this SVG was already processed by a parent container's mixed content handler
+            if (processedSvgs.has(element)) {
+                return;
+            }
+            // For standalone SVGs, use the SVG's parent as context for decorative detection
+            // If no parent or parent is body, check SVG itself for decorative patterns
+            const parent = element.parentElement || element;
+            if (isDecorativeSvg(element, parent, cssContext)) {
+                // Skip decorative SVGs - don't convert to chart
+                return;
+            }
+            // Extract SVG content and dimensions
+            const svgContent = element.outerHTML;
+            const viewBox = element.getAttribute("viewBox");
+            let width = 700;
+            let height = 320;
+            if (viewBox) {
+                const parts = viewBox.split(/\s+/).map(Number);
+                if (parts.length >= 4) {
+                    width = parts[2] || width;
+                    height = parts[3] || height;
+                }
+            }
+            else {
+                const widthAttr = element.getAttribute("width");
+                const heightAttr = element.getAttribute("height");
+                if (widthAttr && !widthAttr.includes("%")) {
+                    width = parseInt(widthAttr, 10) || width;
+                }
+                if (heightAttr && !heightAttr.includes("%")) {
+                    height = parseInt(heightAttr, 10) || height;
+                }
+            }
+            // Try to find a title
+            const titleEl = element.querySelector("title");
+            const title = titleEl ? getTextContent(titleEl).trim() : undefined;
+            // GENERALIZED: Extract background color from parent container for SVG rendering
+            // This handles cases where an SVG is placed inside a styled container
+            let backgroundColor;
+            if (parent && parent !== element) {
+                const parentStyles = getElementStyles(parent, cssContext);
+                if (parentStyles.backgroundColor) {
+                    backgroundColor = extractHexColor(parentStyles.backgroundColor);
+                }
+            }
+            elements.push({ type: "svg-chart", svgContent, width, height, title, backgroundColor });
+            return;
+        }
+        // Handle <img> elements - external images that need to be fetched
+        if (tagName === "img") {
+            const src = element.getAttribute("src");
+            if (src) {
+                const alt = element.getAttribute("alt") || undefined;
+                // Extract width and height from attributes only
+                // Computed styles are not available in linkedom (Node.js)
+                // Actual dimensions will be obtained when the image is fetched
+                let width;
+                let height;
+                const widthAttr = element.getAttribute("width");
+                const heightAttr = element.getAttribute("height");
+                if (widthAttr && !widthAttr.includes("%")) {
+                    width = parseInt(widthAttr, 10) || undefined;
+                }
+                if (heightAttr && !heightAttr.includes("%")) {
+                    height = parseInt(heightAttr, 10) || undefined;
+                }
+                // Check if img is inside a figure with figcaption
+                let caption;
+                const parentFigure = element.closest("figure");
+                if (parentFigure) {
+                    const figcaption = parentFigure.querySelector("figcaption");
+                    if (figcaption) {
+                        caption = getTextContent(figcaption).trim() || undefined;
+                    }
+                }
+                elements.push({ type: "image", src, alt, width, height, caption });
+            }
+            return;
+        }
+        // Handle <picture> elements - get the best source or fallback img
+        if (tagName === "picture") {
+            // Find the fallback img inside picture
+            const imgEl = element.querySelector("img");
+            if (imgEl) {
+                const src = imgEl.getAttribute("src");
+                if (src) {
+                    const alt = imgEl.getAttribute("alt") || undefined;
+                    // Extract width and height
+                    let width;
+                    let height;
+                    const widthAttr = imgEl.getAttribute("width");
+                    const heightAttr = imgEl.getAttribute("height");
+                    if (widthAttr && !widthAttr.includes("%")) {
+                        width = parseInt(widthAttr, 10) || undefined;
+                    }
+                    if (heightAttr && !heightAttr.includes("%")) {
+                        height = parseInt(heightAttr, 10) || undefined;
+                    }
+                    // Check for figcaption
+                    let caption;
+                    const parentFigure = element.closest("figure");
+                    if (parentFigure) {
+                        const figcaption = parentFigure.querySelector("figcaption");
+                        if (figcaption) {
+                            caption = getTextContent(figcaption).trim() || undefined;
+                        }
+                    }
+                    elements.push({ type: "image", src, alt, width, height, caption });
+                }
+            }
+            return;
+        }
+        // Handle <figure> elements containing images - extract img and caption together
+        if (tagName === "figure") {
+            const imgEl = element.querySelector("img") || element.querySelector("picture img");
+            if (imgEl) {
+                const src = imgEl.getAttribute("src");
+                if (src) {
+                    const alt = imgEl.getAttribute("alt") || undefined;
+                    // Extract width and height from attributes only
+                    // Computed styles are not available in linkedom (Node.js)
+                    // Actual dimensions will be obtained when the image is fetched
+                    let width;
+                    let height;
+                    const widthAttr = imgEl.getAttribute("width");
+                    const heightAttr = imgEl.getAttribute("height");
+                    if (widthAttr && !widthAttr.includes("%")) {
+                        width = parseInt(widthAttr, 10) || undefined;
+                    }
+                    if (heightAttr && !heightAttr.includes("%")) {
+                        height = parseInt(heightAttr, 10) || undefined;
+                    }
+                    // Extract caption from figcaption
+                    let caption;
+                    const figcaption = element.querySelector("figcaption");
+                    if (figcaption) {
+                        caption = getTextContent(figcaption).trim() || undefined;
+                    }
+                    elements.push({ type: "image", src, alt, width, height, caption });
+                    return;
+                }
+            }
+            // If no img found, fall through to container handling
+        }
+        // Check for blockquote/callout before generic container handling
+        // Uses style-based detection, NOT class names
+        if (isBlockquoteOrCallout(element, cssContext)) {
+            const content = parseBlockquoteContent(element, cssContext);
+            if (content.length > 0) {
+                // Extract styling from CSS classes and inline styles (generalized approach)
+                const elementStyles = getElementStyles(element, cssContext);
+                let borderColor;
+                let backgroundColor;
+                // Extract background color from element styles
+                if (elementStyles.backgroundColor) {
+                    const hex = extractHexColor(elementStyles.backgroundColor);
+                    if (hex)
+                        backgroundColor = hex;
+                }
+                // Extract border color from element styles
+                if (elementStyles.borderColor) {
+                    const hex = extractHexColor(elementStyles.borderColor);
+                    if (hex)
+                        borderColor = hex;
+                }
+                else if (elementStyles.border) {
+                    // Try to extract color from border shorthand (e.g., "4px solid #2563eb")
+                    const hex = extractBorderColorFromStyle(elementStyles);
+                    if (hex)
+                        borderColor = hex;
+                }
+                // Also check inline styles (overrides CSS)
+                const inlineStyle = element.getAttribute("style") || "";
+                const bgMatch = inlineStyle.match(/background(?:-color)?:\s*([^;]+)/i);
+                if (bgMatch) {
+                    const extracted = extractHexColor(bgMatch[1]);
+                    if (extracted)
+                        backgroundColor = extracted;
+                }
+                const borderMatch = inlineStyle.match(/border(?:-left)?(?:-color)?:\s*([^;]+)/i);
+                if (borderMatch) {
+                    // Parse border value which could be shorthand or just color
+                    const borderValue = borderMatch[1];
+                    const colorInBorder = borderValue.match(/#([0-9a-fA-F]{3,6})/);
+                    if (colorInBorder) {
+                        let hex = colorInBorder[1];
+                        if (hex.length === 3) {
+                            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+                        }
+                        borderColor = hex.toUpperCase();
+                    }
+                }
+                // Determine variant based on styling characteristics (NOT class names)
+                // - "executive-summary": typically uses accent blue border with light background
+                // - "callout": typically has themed background (yellow, blue, red, green)
+                let variant;
+                // If it's a semantic blockquote, treat as generic
+                if (element.tagName.toLowerCase() === "blockquote") {
+                    variant = undefined;
+                }
+                else {
+                    // For styled divs, default to callout variant
+                    variant = "callout";
+                }
+                // GENERALIZED: Determine border style - "full" (all sides), "left" (left accent), or "none" (no border)
+                // If CSS has `border:` shorthand (all sides), use full border
+                // If CSS has only `border-left:`, use left accent border (callout style)
+                // If NO border is specified but has background, use no border (hero sections, title blocks)
+                let borderStyle;
+                // Check if element has any border styling
+                const hasBorderStyling = !!borderColor ||
+                    !!elementStyles.border ||
+                    !!elementStyles.borderLeft ||
+                    !!elementStyles.borderColor;
+                if (!hasBorderStyling && backgroundColor) {
+                    // Has background but no border - use "none" style (title blocks, hero sections)
+                    borderStyle = "none";
+                }
+                else if (elementStyles.border && !elementStyles.border.includes("none")) {
+                    // Has full border shorthand (e.g., "1px solid #e5e7eb")
+                    // Check it's not just inherited from border-left
+                    if (!elementStyles.borderLeft || elementStyles.border !== elementStyles.borderLeft) {
+                        borderStyle = "full";
+                    }
+                }
+                // Otherwise borderStyle remains undefined, which defaults to "left" in convert.ts
+                // GENERALIZED: Extract background gradient for container gradient rendering
+                const backgroundGradient = elementStyles.backgroundGradient;
+                elements.push({
+                    type: "blockquote",
+                    content,
+                    borderColor,
+                    backgroundColor,
+                    backgroundGradient,
+                    variant,
+                    borderStyle,
+                });
+            }
+            return;
+        }
+        // Handle span elements specially - they're often inline styled elements
+        // When a span is a direct child being processed, it should be part of a paragraph
+        // but the parent div handling below should catch most cases
+        if (tagName === "span") {
+            const text = getTextContent(element).trim();
+            if (text) {
+                // Extract styling from the span
+                const styles = getElementStyles(element, cssContext);
+                const backgroundColor = styles.backgroundColor ? extractHexColor(styles.backgroundColor) : undefined;
+                const spanColor = styles.color ? extractHexColor(styles.color) : undefined;
+                if (backgroundColor || spanColor) {
+                    // Has styling - use runs to preserve it
+                    const runs = [{
+                            text,
+                            bold: false,
+                            italic: false,
+                            color: spanColor,
+                            backgroundColor,
+                        }];
+                    elements.push({ type: "paragraph", text, runs, alignment });
+                }
+                else {
+                    elements.push({ type: "paragraph", text, alignment, color: elementColor });
+                }
+            }
+            return;
+        }
+        // Detect skill item pattern in main processNode too (for resumes without two-column DOCX support)
+        if (tagName === "div") {
+            const skillItem = detectSkillItem(element);
+            if (skillItem) {
+                // Output as single line: "Skill Name: 95%"
+                const text = `${skillItem.name}: ${skillItem.percentage}`;
+                elements.push({ type: "paragraph", text, color: elementColor });
+                return;
+            }
+            // Detect language item pattern: language name + proficiency dots
+            const languageItem = detectLanguageItem(element, cssContext);
+            if (languageItem) {
+                // Create visual representation with filled and empty dots
+                const filledDots = "●".repeat(languageItem.filledCount);
+                const emptyDots = "○".repeat(languageItem.totalCount - languageItem.filledCount);
+                const text = `${languageItem.name}: ${filledDots}${emptyDots}`;
+                elements.push({ type: "paragraph", text, color: elementColor });
+                return;
+            }
+        }
+        if (CONTAINER_TAGS.includes(tagName)) {
+            // Before processing content, check if this element has border-top
+            // (like footer sections which have a horizontal rule before the content)
+            const borderTopColor = extractBorderTopColor(element, cssContext);
+            if (borderTopColor) {
+                elements.push({ type: "horizontal-rule", color: borderTopColor });
+            }
+            // Check if this container has ONLY inline content (spans, text nodes, inline formatting)
+            // If so, treat the entire container as a single paragraph instead of separate elements
+            const hasOnlyInlineContent = isInlineOnlyContainer(element);
+            if (hasOnlyInlineContent) {
+                // Get container's styling (italic, bold, color, font-family, text-transform) from CSS
+                const containerStyles = getElementStyles(element, cssContext);
+                const containerItalic = containerStyles.fontStyle === "italic";
+                const containerBold = containerStyles.fontWeight === "700" || containerStyles.fontWeight === "bold" || containerStyles.fontWeight === "600";
+                const containerColor = containerStyles.color ? extractHexColor(containerStyles.color) : undefined;
+                // GENERALIZED: Extract font-family for inheritance to runs
+                const containerFontFamily = containerStyles.fontFamily;
+                // GENERALIZED: Extract text-transform (uppercase, lowercase, capitalize)
+                let textTransform;
+                if (containerStyles.textTransform === "uppercase" || containerStyles.textTransform === "lowercase" || containerStyles.textTransform === "capitalize") {
+                    textTransform = containerStyles.textTransform;
+                }
+                // GENERALIZED: Extract margin-bottom for paragraph spacing
+                const spacingAfter = containerStyles.marginBottom ? parseMarginToTwips(containerStyles.marginBottom) : undefined;
+                // GENERALIZED: Extract line-height for vertical spacing
+                const lineSpacing = containerStyles.lineHeight ? parseLineHeightToDocx(containerStyles.lineHeight) : undefined;
+                // GENERALIZED: Check if this is a horizontal flex container with multiple children
+                // If so, we need to render as a horizontal table to represent the CSS gap
+                const isHorizFlex = isHorizontalFlexContainer(element, cssContext);
+                const directChildren = Array.from(element.children);
+                const hasMultipleFlexChildren = isHorizFlex && directChildren.length > 1;
+                if (hasMultipleFlexChildren) {
+                    // GENERALIZED: Convert horizontal flexbox to a single-row borderless table
+                    // Each flex item becomes a table cell, preserving the horizontal layout
+                    const flexChildren = directChildren.filter(child => child.nodeType === Node.ELEMENT_NODE);
+                    const tableCells = [];
+                    for (const flexChild of flexChildren) {
+                        // Extract runs from this flex child
+                        const childRuns = extractInlineRuns(flexChild, cssContext, undefined, containerFontFamily);
+                        if (childRuns.length > 0) {
+                            // Apply container's styles to runs that don't have their own
+                            childRuns.forEach(run => {
+                                if (!run.color && (elementColor || containerColor)) {
+                                    run.color = elementColor || containerColor;
+                                }
+                                if (!run.italic && containerItalic) {
+                                    run.italic = true;
+                                }
+                                if (!run.bold && containerBold) {
+                                    run.bold = true;
+                                }
+                                if (!run.fontFamily && containerFontFamily) {
+                                    run.fontFamily = containerFontFamily;
+                                }
+                            });
+                            // Use runs as cell content
+                            tableCells.push(childRuns);
+                        }
+                    }
+                    if (tableCells.length > 0) {
+                        // Create a single-row borderless table to represent horizontal flexbox
+                        elements.push({
+                            type: "table",
+                            rows: [tableCells],
+                            hasHeader: false,
+                            noBorders: true,
+                        });
+                    }
+                }
+                else {
+                    // Normal inline extraction - not a horizontal flex container
+                    const runs = extractInlineRuns(element, cssContext, undefined, containerFontFamily);
+                    if (runs.length > 0) {
+                        const text = runs.map(r => r.text).join("");
+                        // Apply container's styles to runs that don't have their own
+                        runs.forEach(run => {
+                            if (!run.color && (elementColor || containerColor)) {
+                                run.color = elementColor || containerColor;
+                            }
+                            if (!run.italic && containerItalic) {
+                                run.italic = true;
+                            }
+                            if (!run.bold && containerBold) {
+                                run.bold = true;
+                            }
+                            // GENERALIZED: Apply container's font-family to runs that don't have their own
+                            if (!run.fontFamily && containerFontFamily) {
+                                run.fontFamily = containerFontFamily;
+                            }
+                        });
+                        // Build paragraph with all extracted styles
+                        const hasStyling = hasInlineFormatting(runs) || elementColor || containerColor || spacingAfter !== undefined || lineSpacing !== undefined || textTransform !== undefined;
+                        if (hasStyling) {
+                            elements.push({
+                                type: "paragraph",
+                                text,
+                                runs: hasInlineFormatting(runs) ? runs : undefined,
+                                color: !hasInlineFormatting(runs) ? (elementColor || containerColor) : undefined,
+                                alignment,
+                                spacingAfter,
+                                lineSpacing,
+                                textTransform,
+                            });
+                        }
+                        else {
+                            elements.push({ type: "paragraph", text, alignment });
+                        }
+                    }
+                }
+            }
+            else {
+                // Process children individually (block-level content)
+                // Pass elementColor only if this container explicitly sets a color (for special containers)
+                for (const child of element.childNodes) {
+                    processNode(child, alignment, elementColor);
+                }
+            }
+            // After processing children, check if this element has border-bottom
+            // (like .title-block which should have a horizontal rule after the heading)
+            const borderBottomColor = extractBorderBottomColor(element, cssContext);
+            if (borderBottomColor) {
+                elements.push({ type: "horizontal-rule", color: borderBottomColor });
+            }
+            return;
+        }
+        const text = getTextContent(element).trim();
+        if (text && element.children.length === 0) {
+            // Check for styling from CSS (background color, italic, etc.)
+            const styles = getElementStyles(element, cssContext);
+            const backgroundColor = styles.backgroundColor ? extractHexColor(styles.backgroundColor) : undefined;
+            const isItalic = styles.fontStyle === "italic";
+            const isBold = styles.fontWeight === "700" || styles.fontWeight === "bold" || styles.fontWeight === "600";
+            if (backgroundColor || elementColor || isItalic || isBold) {
+                // Has styling - use runs to preserve formatting
+                const runs = [{
+                        text,
+                        bold: isBold,
+                        italic: isItalic,
+                        color: elementColor,
+                        backgroundColor,
+                    }];
+                elements.push({ type: "paragraph", text, runs, alignment });
+            }
+            else {
+                elements.push({ type: "paragraph", text, alignment });
+            }
+        }
+        else {
+            for (const child of element.childNodes) {
+                processNode(child, alignment, elementColor);
+            }
+        }
+    }
+    for (const node of body.childNodes) {
+        processNode(node);
+    }
+    return elements;
+}
+//# sourceMappingURL=parse.js.map