docgen-utils 1.0.11 → 1.0.13

package/dist/packages/docs/parse.js

@@ -1,2748 +1,233 @@
 import { CONTAINER_TAGS } from "./common";
+import { parseCssContext, getElementStyles, extractTextColor, extractBorderColorFromStyle, extractBorderBottomColor, extractBorderTopColor } from "./parse-css";
+import { extractHexColor } from "./parse-colors";
+import { parseCssLengthToTwips, parseCssPaddingToTwips, extractPaddingLeft, parseFontSizeToHalfPoints, parseMarginToTwips, parseLetterSpacingToTwips, parseLineHeightToDocx } from "./parse-units";
+import { parseHeadingLevel, getTextAlignment, getTextContent, BLOCK_LEVEL_TAGS, hasBlockLevelChildren, isBlockquoteOrCallout, extractNestedListItems } from "./parse-helpers";
+import { isInlineOnlyContainer, extractInlineRuns, hasInlineFormatting } from "./parse-inline";
+import { isGridOrFlexContainer, isHorizontalFlexContainer, isDecorativeSvg, isTwoColumnGridLayout, findTwoColumnChildren, detectFlexEqualColumns, detectGridEqualColumns } from "./parse-layout";
+import { detectSkillItem, detectLanguageItem, detectProgressBar, detectTimeline } from "./parse-special";
 /**
- * Remove @media blocks from CSS text by tracking brace nesting.
- * This properly handles nested braces within media queries.
+ * Parse content from a container element (like sidebar or main content).
+ * Handles headings, paragraphs, lists, and nested containers with color inheritance.
  */
-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++;
+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 if (cssText[j] === "}") {
-                    depth--;
+                else {
+                    innerElements.push({ type: "paragraph", text });
                 }
-                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;
+            return;
         }
-    }
-    // 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 (node.nodeType !== Node.ELEMENT_NODE || !(node instanceof Element)) {
+            return;
         }
-    }
-    // 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);
+        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;
             }
         }
-        // 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);
-                }
+        // 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;
         }
-        // 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);
+        // 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;
                         }
-                    }
+                    });
                 }
-                else {
-                    // Fallback: extract first color if gradient parsing fails
-                    const gradientColor = extractFirstGradientColor(bgValue);
-                    if (gradientColor && !style.color) {
-                        style.color = gradientColor;
-                        classColors.set(className, gradientColor);
-                    }
+                if (hasInlineFormatting(runs)) {
+                    innerElements.push({ type: "paragraph", text, runs });
                 }
-            }
-            // 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]}`;
+                else if (elementColor) {
+                    innerElements.push({ type: "paragraph", text, color: elementColor });
                 }
-                // 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;
+                else {
+                    innerElements.push({ type: "paragraph", text });
                 }
             }
-            // 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 });
-            }
+            return;
         }
-        // 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;
+        // 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(""));
+                        }
                     }
                 }
-                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 });
+            if (items.length > 0) {
+                innerElements.push({ type: "list", ordered: tagName === "ol", items });
             }
+            return;
         }
-        // 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;
+        // 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("");
                     }
                 }
-                else {
-                    style.backgroundColor = bgValue;
+                if (cells.length > 0) {
+                    rows.push(cells);
                 }
             }
-            // 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 (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);
                     }
-                }
-                else {
-                    // Fallback: extract first color if gradient parsing fails
-                    const gradientColor = extractFirstGradientColor(bgValue);
-                    if (gradientColor && !style.color) {
-                        style.color = gradientColor;
+                    // Also check individual padding properties (padding-top, padding-right, etc.)
+                    // These override the shorthand if set
+                    const paddingSource = tdStyle || thStyle;
+                    if (paddingSource) {
+                        if (!cellPadding)
+                            cellPadding = {};
+                        if (paddingSource.paddingTop) {
+                            const twips = parseMarginToTwips(paddingSource.paddingTop);
+                            if (twips !== undefined)
+                                cellPadding.top = twips;
+                        }
+                        if (paddingSource.paddingRight) {
+                            const twips = parseMarginToTwips(paddingSource.paddingRight);
+                            if (twips !== undefined)
+                                cellPadding.right = twips;
+                        }
+                        if (paddingSource.paddingBottom) {
+                            const twips = parseMarginToTwips(paddingSource.paddingBottom);
+                            if (twips !== undefined)
+                                cellPadding.bottom = twips;
+                        }
+                        if (paddingSource.paddingLeft) {
+                            const twips = parseMarginToTwips(paddingSource.paddingLeft);
+                            if (twips !== undefined)
+                                cellPadding.left = twips;
+                        }
                     }
                 }
+                innerElements.push({ type: "table", rows, cellPadding });
             }
-            // 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;
+            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 });
                 }
-            }
-            // 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]}`;
+                else {
+                    innerElements.push({ type: "paragraph", text });
                 }
+                return;
             }
-            // 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]}`;
+            // 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 });
                 }
-            }
-            // 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());
+                else {
+                    innerElements.push({ type: "paragraph", text });
                 }
-                const existing = nestedStyles.get(parentClass).get(childSelector) || {};
-                nestedStyles.get(parentClass).set(childSelector, { ...existing, ...style });
+                return;
             }
         }
-        // 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());
+        // Container tags - recurse into children
+        if (CONTAINER_TAGS.includes(tagName)) {
+            for (const child of el.childNodes) {
+                processInnerNode(child, elementColor);
             }
-            // 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;
-                }
+        // 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 });
             }
-        }
-        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;
+            else {
+                innerElements.push({ type: "paragraph", text });
             }
         }
-    }
-    // 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;
-                }
+        else {
+            for (const child of el.childNodes) {
+                processInnerNode(child, elementColor);
             }
         }
-        catch {
-            // getComputedStyle may fail in some environments
-        }
     }
-    return undefined;
+    // Process all direct children
+    for (const child of element.childNodes) {
+        processInnerNode(child, inheritedColor);
+    }
+    return innerElements;
 }
 /**
  * Parse content from a blockquote/callout element.
@@ -2781,11 +266,17 @@ function parseBlockquoteContent(element, cssContext) {
         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
+                // Extract styles 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 });
+                const fontSize = headingStyles.fontSize ? parseFontSizeToHalfPoints(headingStyles.fontSize) : undefined;
+                const lineSpacing = headingStyles.lineHeight ? parseLineHeightToDocx(headingStyles.lineHeight) : undefined;
+                const fontFamily = headingStyles.fontFamily?.replace(/['"]/g, "");
+                const alignment = getTextAlignment(el, cssContext) || blockquoteStyles.textAlign;
+                const spacingAfter = headingStyles.marginBottom ? parseCssLengthToTwips(headingStyles.marginBottom) : undefined;
+                const letterSpacing = headingStyles.letterSpacing ? parseCssLengthToTwips(headingStyles.letterSpacing) : undefined;
+                innerElements.push({ type: "heading", level: headingLevel, text, color, fontSize, lineSpacing, fontFamily, alignment, spacingAfter, letterSpacing });
             }
             return;
         }
@@ -2794,10 +285,25 @@ function parseBlockquoteContent(element, cssContext) {
             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
+                // Extract styles 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;
+                const lineSpacing = paragraphStyles.lineHeight ? parseLineHeightToDocx(paragraphStyles.lineHeight) : undefined;
+                const fontFamily = paragraphStyles.fontFamily?.replace(/['"]/g, "");
+                const alignment = getTextAlignment(el, cssContext) || blockquoteStyles.textAlign;
+                const spacingAfter = paragraphStyles.marginBottom ? parseCssLengthToTwips(paragraphStyles.marginBottom) : undefined;
+                // Apply paragraph-level font-size to runs that don't have their own size
+                if (paragraphStyles.fontSize) {
+                    const halfPoints = parseFontSizeToHalfPoints(paragraphStyles.fontSize);
+                    if (halfPoints) {
+                        runs.forEach(run => {
+                            if (!run.size) {
+                                run.size = halfPoints;
+                            }
+                        });
+                    }
+                }
                 // Apply blockquote's italic style to runs that don't have their own italic setting
                 if (blockquoteIsItalic) {
                     runs.forEach(run => {
@@ -2815,10 +321,10 @@ function parseBlockquoteContent(element, cssContext) {
                             }
                         });
                     }
-                    innerElements.push({ type: "paragraph", text, runs, color, italic: blockquoteIsItalic });
+                    innerElements.push({ type: "paragraph", text, runs, color, italic: blockquoteIsItalic, lineSpacing, fontFamily, alignment, spacingAfter });
                 }
                 else {
-                    innerElements.push({ type: "paragraph", text, color });
+                    innerElements.push({ type: "paragraph", text, color, lineSpacing, fontFamily, alignment, spacingAfter });
                 }
             }
             return;
@@ -2858,10 +364,56 @@ function parseBlockquoteContent(element, cssContext) {
         // Pass the blockquote element as parent for nested style lookups
         if (tagName === "div") {
             const styles = getElementStyles(el, cssContext, element);
+            // Handle nested callouts: if this div is itself a styled callout (e.g., .famous-for inside .country-section),
+            // emit it as a nested blockquote to preserve its background color and border styling
+            if (isBlockquoteOrCallout(el, cssContext)) {
+                let nestedBgColor;
+                if (styles.backgroundColor) {
+                    nestedBgColor = extractHexColor(styles.backgroundColor);
+                }
+                const nestedBorderHex = extractBorderColorFromStyle(styles);
+                // Only treat as nested blockquote if it has a visually distinct background or border
+                if (nestedBgColor || nestedBorderHex) {
+                    const nestedContent = parseBlockquoteContent(el, cssContext);
+                    if (nestedContent.length > 0) {
+                        let nestedBorderStyle;
+                        if (styles.borderLeft && !styles.border) {
+                            nestedBorderStyle = "left";
+                        }
+                        else if (styles.border && !styles.border.includes("none")) {
+                            nestedBorderStyle = "full";
+                        }
+                        else if (nestedBgColor && !styles.borderLeft && !styles.border) {
+                            nestedBorderStyle = "none";
+                        }
+                        innerElements.push({
+                            type: "blockquote",
+                            content: nestedContent,
+                            borderColor: nestedBorderHex,
+                            backgroundColor: nestedBgColor,
+                            variant: "callout",
+                            borderStyle: nestedBorderStyle,
+                        });
+                        return;
+                    }
+                }
+            }
             const isBoldOrLabel = styles.fontWeight === "700" ||
                 styles.fontWeight === "bold" ||
                 styles.fontWeight === "600";
             if (isBoldOrLabel) {
+                // Check if this bold div has block-level children — if so, recurse
+                // instead of flattening to a single text paragraph (which loses content)
+                const blockTags = new Set(["p", "div", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "table", "blockquote", "section", "article", "header", "figure"]);
+                const hasBlockChildren = Array.from(el.children).some((child) => blockTags.has(child.tagName?.toLowerCase()));
+                if (hasBlockChildren) {
+                    // Recurse into children — bold will be inherited by inline run extraction
+                    for (const child of el.childNodes) {
+                        processInnerNode(child);
+                    }
+                    return;
+                }
+                // Simple inline-only bold div — flatten to single label paragraph
                 const text = getTextContent(el).trim();
                 if (text) {
                     // Extract the label's color from its own styles (includes nested CSS rules)
@@ -2882,6 +434,34 @@ function parseBlockquoteContent(element, cssContext) {
                 return;
             }
         }
+        // Handle <img> elements inside blockquotes/callouts
+        if (tagName === "img") {
+            const src = el.getAttribute("src");
+            if (src) {
+                const alt = el.getAttribute("alt") || undefined;
+                let width;
+                let height;
+                const widthAttr = el.getAttribute("width");
+                const heightAttr = el.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 = el.closest("figure");
+                if (parentFigure) {
+                    const figcaption = parentFigure.querySelector("figcaption");
+                    if (figcaption) {
+                        caption = getTextContent(figcaption).trim() || undefined;
+                    }
+                }
+                innerElements.push({ type: "image", src, alt, width, height, caption });
+            }
+            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)) {
@@ -2892,36 +472,71 @@ function parseBlockquoteContent(element, 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
+                // Check flex-wrap to determine rendering strategy
                 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;
-                                }
-                            });
+                const flexWrap = containerStyles.flexWrap?.toLowerCase();
+                const justifyContent = containerStyles.justifyContent?.toLowerCase();
+                if (flexWrap === "wrap") {
+                    // For flex-wrap: wrap, merge all children into a single paragraph with separators
+                    const flexChildren = directChildren.filter(child => child.nodeType === Node.ELEMENT_NODE);
+                    const allRuns = [];
+                    // Determine separator based on content
+                    const childTexts = flexChildren.map(c => (c.textContent || "").trim());
+                    const hasPipeSeparators = childTexts.some(t => t === "|");
+                    const separator = hasPipeSeparators ? " " : " · ";
+                    for (let ci = 0; ci < flexChildren.length; ci++) {
+                        const flexChild = flexChildren[ci];
+                        const childRuns = extractInlineRuns(flexChild, cssContext, undefined, containerFontFamily);
+                        if (childRuns.length > 0) {
+                            if (blockquoteIsItalic) {
+                                childRuns.forEach(run => {
+                                    if (run.italic === undefined) {
+                                        run.italic = true;
+                                    }
+                                });
+                            }
+                            if (allRuns.length > 0 && childRuns.length > 0) {
+                                allRuns.push({ text: separator });
+                            }
+                            allRuns.push(...childRuns);
                         }
-                        // Use runs as cell content
-                        tableCells.push(childRuns);
+                    }
+                    if (allRuns.length > 0) {
+                        const text = allRuns.map(r => r.text).join("");
+                        innerElements.push({
+                            type: "paragraph",
+                            text,
+                            runs: hasInlineFormatting(allRuns) ? allRuns : undefined,
+                            alignment: justifyContent === "center" ? "center" : undefined,
+                        });
                     }
                 }
-                if (tableCells.length > 0) {
-                    // Create a single-row borderless table to represent horizontal flexbox
-                    innerElements.push({
-                        type: "table",
-                        rows: [tableCells],
-                        hasHeader: false,
-                        noBorders: true,
-                    });
+                else {
+                    // Non-wrapping flex: Convert to single-row borderless table
+                    const flexChildren = directChildren.filter(child => child.nodeType === Node.ELEMENT_NODE);
+                    const tableCells = [];
+                    for (const flexChild of flexChildren) {
+                        const childRuns = extractInlineRuns(flexChild, cssContext, undefined, containerFontFamily);
+                        if (childRuns.length > 0) {
+                            if (blockquoteIsItalic) {
+                                childRuns.forEach(run => {
+                                    if (run.italic === undefined) {
+                                        run.italic = true;
+                                    }
+                                });
+                            }
+                            tableCells.push(childRuns);
+                        }
+                    }
+                    if (tableCells.length > 0) {
+                        innerElements.push({
+                            type: "table",
+                            rows: [tableCells],
+                            hasHeader: false,
+                            noBorders: true,
+                        });
+                    }
                 }
                 return;
             }
@@ -3052,18 +667,81 @@ export function parseHtmlContent(html) {
                 // 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);
+                // GENERALIZED: Check for border-left on heading (e.g., h2 with left accent bar)
+                // Extract from CSS class styles or inline styles
+                let headingBorderLeft;
+                let headingBorderLeftWidth;
+                if (hStyles.borderLeft) {
+                    const borderLeftColor = extractBorderColorFromStyle({ borderLeft: hStyles.borderLeft });
+                    if (borderLeftColor) {
+                        headingBorderLeft = borderLeftColor;
+                    }
+                    // Extract border-left width in pixels and convert to OOXML eighth-of-a-point
+                    // CSS "4px solid #7c3aed" → 4px → 3pt → 24 eighth-of-a-point
+                    const widthMatch = hStyles.borderLeft.match(/(\d+(?:\.\d+)?)\s*px/);
+                    if (widthMatch) {
+                        const cssPixels = parseFloat(widthMatch[1]);
+                        // 1px CSS ≈ 0.75pt, OOXML border size is in eighth-of-a-point
+                        headingBorderLeftWidth = Math.round(cssPixels * 0.75 * 8);
+                    }
+                }
+                else if (hStyles.borderColor && hStyles.border && !hStyles.border.includes("none")) {
+                    headingBorderLeft = hStyles.borderColor;
+                }
+                // GENERALIZED: Extract background-color for heading (e.g., h2 with highlight background)
+                let headingBackgroundColor;
+                if (hStyles.backgroundColor) {
+                    const hex = extractHexColor(hStyles.backgroundColor);
+                    if (hex) {
+                        headingBackgroundColor = hex;
+                    }
+                }
                 // 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;
+                // Also extract margin-bottom for general heading spacing
+                let spacingAfter;
+                if (headingBorderColor) {
+                    spacingAfter = 100;
+                }
+                else if (hStyles.marginBottom) {
+                    // Apply CSS margin-bottom for heading spacing:
+                    // - For values > 240 twips: use the CSS value
+                    // - For values <= 120 twips: use with 60 twip min (tight layouts)
+                    // - For moderate values: keep DOCX default
+                    const cssSpacing = parseMarginToTwips(hStyles.marginBottom);
+                    if (cssSpacing !== undefined) {
+                        if (cssSpacing > 240) {
+                            spacingAfter = cssSpacing;
+                        }
+                        else if (cssSpacing <= 120) {
+                            spacingAfter = Math.max(cssSpacing, 60);
+                        }
+                    }
+                }
                 // 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;
+                // Extract font-size from CSS for heading (overrides document style defaults)
+                const headingFontSize = hStyles.fontSize ? parseFontSizeToHalfPoints(hStyles.fontSize) : undefined;
+                // Extract margin-top for heading spacing before
+                let spacingBefore;
+                if (hStyles.marginTop) {
+                    const cssBefore = parseMarginToTwips(hStyles.marginTop);
+                    if (cssBefore !== undefined && cssBefore > 0) {
+                        spacingBefore = cssBefore;
+                    }
+                }
+                // Extract letter-spacing for heading
+                const headingLetterSpacing = hStyles.letterSpacing ? parseLetterSpacingToTwips(hStyles.letterSpacing) : undefined;
                 // Check for gradient text (CSS background-clip: text)
                 // If gradient exists, create runs array with gradient info
+                // Always use the first gradient stop color as fallback — the gradient IS the intended
+                // text color, so it should take priority over the element's regular CSS color (e.g. h1 { color: #1a1a1a })
                 let runs;
                 if (hStyles.gradient) {
-                    runs = [{ text, gradient: hStyles.gradient, color: elementColor }];
+                    const gradientFallbackColor = hStyles.gradient.stops[0]?.color || elementColor;
+                    runs = [{ text, gradient: hStyles.gradient, color: gradientFallbackColor }];
                 }
                 elements.push({
                     type: "heading",
@@ -3071,11 +749,17 @@ export function parseHtmlContent(html) {
                     text,
                     alignment,
                     color: elementColor,
+                    backgroundColor: headingBackgroundColor,
                     textTransform,
                     spacingAfter,
+                    spacingBefore,
                     fontFamily: headingFontFamily,
                     runs,
                     lineSpacing,
+                    borderLeft: headingBorderLeft,
+                    borderLeftWidth: headingBorderLeftWidth,
+                    fontSize: headingFontSize,
+                    letterSpacing: headingLetterSpacing,
                 });
                 // Add horizontal-rule for border-bottom effect
                 // Use top border with minimal before spacing - border appears right at top
@@ -3088,13 +772,37 @@ export function parseHtmlContent(html) {
         }
         // Handle <hr> elements
         if (tagName === "hr") {
-            // Try to extract color from inline style or CSS
+            // Try to extract color from inline style first, then CSS classes
             const hrStyle = element.getAttribute("style") || "";
             const colorMatch = hrStyle.match(/(?:border-color|background-color|color):\s*([^;]+)/i);
             let hrColor;
             if (colorMatch) {
                 hrColor = extractHexColor(colorMatch[1]);
             }
+            // Fall back to CSS class styles if no inline color found
+            if (!hrColor) {
+                const hrStyles = getElementStyles(element, cssContext);
+                if (hrStyles.borderColor) {
+                    hrColor = extractHexColor(hrStyles.borderColor);
+                }
+                else if (hrStyles.backgroundColor) {
+                    hrColor = extractHexColor(hrStyles.backgroundColor);
+                }
+                else if (hrStyles.color) {
+                    hrColor = extractHexColor(hrStyles.color);
+                }
+                else if (hrStyles.border) {
+                    hrColor = extractBorderColorFromStyle(hrStyles);
+                }
+                else if (hrStyles.borderBottom) {
+                    // Extract color from border-bottom shorthand (e.g., "2px solid #ff0000")
+                    hrColor = extractBorderColorFromStyle({ border: hrStyles.borderBottom });
+                }
+                else if (hrStyles.borderTop) {
+                    // Extract color from border-top shorthand
+                    hrColor = extractBorderColorFromStyle({ border: hrStyles.borderTop });
+                }
+            }
             elements.push({ type: "horizontal-rule", color: hrColor });
             return;
         }
@@ -3113,23 +821,38 @@ export function parseHtmlContent(html) {
                     if (hex)
                         backgroundColor = hex;
                 }
-                // Extract border color from borderLeft property
-                if (elementStyles.borderLeft) {
-                    const hex = extractBorderColorFromStyle({ borderLeft: elementStyles.borderLeft });
-                    if (hex)
-                        borderColor = hex;
+                // Extract border color - use unified extraction that checks all border properties
+                // in priority order: borderColor > border > borderLeft > borderRight > borderTop > borderBottom
+                const borderHex = extractBorderColorFromStyle(elementStyles);
+                if (borderHex)
+                    borderColor = borderHex;
+                // Determine borderStyle using the same logic as the div/section path
+                // If has background but no border → "none" (full background, no accent bar)
+                // If has border shorthand → "full"
+                // Otherwise → "left" (default accent bar)
+                let borderStyle = "left";
+                const hasBorderStylingP = !!borderColor ||
+                    !!elementStyles.border ||
+                    !!elementStyles.borderLeft ||
+                    !!elementStyles.borderColor;
+                if (!hasBorderStylingP && backgroundColor) {
+                    borderStyle = "none";
                 }
-                else if (elementStyles.borderColor) {
-                    const hex = extractHexColor(elementStyles.borderColor);
-                    if (hex)
-                        borderColor = hex;
+                else if (elementStyles.border && !elementStyles.border.includes("none")) {
+                    if (!elementStyles.borderLeft || elementStyles.border !== elementStyles.borderLeft) {
+                        borderStyle = "full";
+                    }
+                }
+                else if (backgroundColor && !elementStyles.borderLeft && !elementStyles.border) {
+                    // Has background color but only borderColor (from class), no explicit border-left → "none"
+                    borderStyle = "none";
                 }
                 elements.push({
                     type: "blockquote",
                     content,
                     borderColor,
                     backgroundColor,
-                    borderStyle: "left",
+                    borderStyle,
                 });
             }
             return;
@@ -3158,6 +881,16 @@ export function parseHtmlContent(html) {
                         }
                     }
                 }
+                // Handle padding-left as left indent for paragraphs
+                // CSS pattern: .clause { padding-left: 2rem; text-indent: -2rem; } creates hanging indent
+                let leftIndent;
+                const paddingLeftValue = pStyles.paddingLeft || extractPaddingLeft(pStyles.padding);
+                if (paddingLeftValue) {
+                    const leftTwips = parseCssLengthToTwips(paddingLeftValue);
+                    if (leftTwips !== undefined && leftTwips > 0) {
+                        leftIndent = leftTwips;
+                    }
+                }
                 // Handle font-style: italic
                 if (pStyles.fontStyle === "italic") {
                     italic = true;
@@ -3177,6 +910,33 @@ export function parseHtmlContent(html) {
                 }
                 // Extract font-family from paragraph styles (will be inherited from body if not set on p)
                 const paragraphFontFamily = pStyles.fontFamily;
+                // GENERALIZED: Extract line-height and margin-bottom for paragraph spacing
+                const lineSpacing = pStyles.lineHeight ? parseLineHeightToDocx(pStyles.lineHeight) : undefined;
+                // Apply CSS margin-bottom when explicitly set:
+                // - For values > 240 twips (default): use the CSS value (larger spacing)
+                // - For values <= 120 twips (tight): use the CSS value with 60 twip min (respect tight layouts)
+                // - For values 120-240 (moderate): keep DOCX default to avoid margin-collapsing issues
+                const cssParaSpacing = pStyles.marginBottom ? parseMarginToTwips(pStyles.marginBottom) : undefined;
+                let spacingAfter;
+                if (cssParaSpacing !== undefined) {
+                    if (cssParaSpacing > 240) {
+                        spacingAfter = cssParaSpacing;
+                    }
+                    else if (cssParaSpacing <= 120) {
+                        spacingAfter = Math.max(cssParaSpacing, 60);
+                    }
+                }
+                // Extract margin-top for spacingBefore (spacing before paragraph)
+                const cssParaSpacingBefore = pStyles.marginTop ? parseMarginToTwips(pStyles.marginTop) : undefined;
+                let spacingBefore;
+                if (cssParaSpacingBefore !== undefined) {
+                    if (cssParaSpacingBefore > 240) {
+                        spacingBefore = cssParaSpacingBefore;
+                    }
+                    else if (cssParaSpacingBefore <= 120) {
+                        spacingBefore = Math.max(cssParaSpacingBefore, 60);
+                    }
+                }
                 // Apply fontFamily to runs if present and runs don't have their own fontFamily
                 if (paragraphFontFamily) {
                     runs.forEach(run => {
@@ -3185,6 +945,18 @@ export function parseHtmlContent(html) {
                         }
                     });
                 }
+                // Apply paragraph-level font-size to runs that don't have their own size
+                // This handles CSS like ".subtitle { font-size: 1.2rem; }" on <p class="subtitle">
+                if (pStyles.fontSize) {
+                    const halfPoints = parseFontSizeToHalfPoints(pStyles.fontSize);
+                    if (halfPoints) {
+                        runs.forEach(run => {
+                            if (!run.size) {
+                                run.size = halfPoints;
+                            }
+                        });
+                    }
+                }
                 if (hasInlineFormatting(runs)) {
                     // Has mixed formatting - use runs array
                     // Apply effective color to runs that don't have their own color
@@ -3195,17 +967,17 @@ export function parseHtmlContent(html) {
                             }
                         });
                     }
-                    elements.push({ type: "paragraph", text, runs, alignment, firstLineIndent, hangingIndent, textTransform });
+                    elements.push({ type: "paragraph", text, runs, alignment, firstLineIndent, hangingIndent, leftIndent, textTransform, lineSpacing, spacingAfter, spacingBefore });
                 }
                 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 });
+                    elements.push({ type: "paragraph", text, runs: formattedRuns, alignment, firstLineIndent, hangingIndent, leftIndent, textTransform, lineSpacing, spacingAfter, spacingBefore });
                 }
                 else {
                     // No formatting - simple paragraph (but may have indent/transform)
-                    elements.push({ type: "paragraph", text, alignment, firstLineIndent, hangingIndent, textTransform });
+                    elements.push({ type: "paragraph", text, alignment, firstLineIndent, hangingIndent, leftIndent, textTransform, lineSpacing, spacingAfter, spacingBefore });
                 }
             }
             return;
@@ -3331,6 +1103,33 @@ export function parseHtmlContent(html) {
                     if (paddingStr) {
                         cellPadding = parseCssPaddingToTwips(paddingStr);
                     }
+                    // Also check individual padding properties (padding-top, padding-right, etc.)
+                    // These override the shorthand if set
+                    const paddingSource = tdStyle || thStyle;
+                    if (paddingSource) {
+                        if (!cellPadding)
+                            cellPadding = {};
+                        if (paddingSource.paddingTop) {
+                            const twips = parseMarginToTwips(paddingSource.paddingTop);
+                            if (twips !== undefined)
+                                cellPadding.top = twips;
+                        }
+                        if (paddingSource.paddingRight) {
+                            const twips = parseMarginToTwips(paddingSource.paddingRight);
+                            if (twips !== undefined)
+                                cellPadding.right = twips;
+                        }
+                        if (paddingSource.paddingBottom) {
+                            const twips = parseMarginToTwips(paddingSource.paddingBottom);
+                            if (twips !== undefined)
+                                cellPadding.bottom = twips;
+                        }
+                        if (paddingSource.paddingLeft) {
+                            const twips = parseMarginToTwips(paddingSource.paddingLeft);
+                            if (twips !== undefined)
+                                cellPadding.left = twips;
+                        }
+                    }
                     // 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;
@@ -3376,8 +1175,86 @@ export function parseHtmlContent(html) {
                         if (hex)
                             headerTextColor = hex;
                     }
+                    // Check element-to-element nested styles (e.g., "thead th { background: ... }")
+                    // These are stored with "__elem:" prefix keys in nestedStyles
+                    if (!headerBackgroundColor || !headerTextColor) {
+                        const theadThMap = cssContext.nestedStyles.get("__elem:thead");
+                        if (theadThMap) {
+                            const thStyle2 = theadThMap.get("th");
+                            if (thStyle2) {
+                                if (!headerBackgroundColor && thStyle2.backgroundColor) {
+                                    const hex = extractHexColor(thStyle2.backgroundColor);
+                                    if (hex)
+                                        headerBackgroundColor = hex;
+                                }
+                                if (!headerTextColor && thStyle2.color) {
+                                    const hex = extractHexColor(thStyle2.color);
+                                    if (hex)
+                                        headerTextColor = hex;
+                                }
+                            }
+                        }
+                        // Also check "table th { ... }" element-to-element selector
+                        const tableThMap = cssContext.nestedStyles.get("__elem:table");
+                        if (tableThMap) {
+                            const thStyle2 = tableThMap.get("th");
+                            if (thStyle2) {
+                                if (!headerBackgroundColor && thStyle2.backgroundColor) {
+                                    const hex = extractHexColor(thStyle2.backgroundColor);
+                                    if (hex)
+                                        headerBackgroundColor = hex;
+                                }
+                                if (!headerTextColor && thStyle2.color) {
+                                    const hex = extractHexColor(thStyle2.color);
+                                    if (hex)
+                                        headerTextColor = hex;
+                                }
+                            }
+                        }
+                    }
+                }
+                // Also check for even-row patterns parsed from tr:nth-child(even) CSS rules
+                if (!evenRowBackgroundColor && cssContext) {
+                    const evenRowStyle = cssContext.elementStyles.get("__even-row");
+                    if (evenRowStyle?.backgroundColor) {
+                        const hex = extractHexColor(evenRowStyle.backgroundColor);
+                        if (hex)
+                            evenRowBackgroundColor = hex;
+                    }
+                }
+                // GENERALIZED: Detect whether table has a header row
+                // Check for <thead> element or first row containing <th> elements
+                const thead = element.querySelector("thead");
+                const firstRow = element.querySelector("tr");
+                const hasExplicitHeader = !!thead || (firstRow && firstRow.querySelector("th") !== null);
+                // Detect horizontal-only border style
+                // Tables with border-bottom on cells but no border/border-left/border-right
+                // should render with horizontal separators only (no vertical grid lines)
+                let horizontalBordersOnly = false;
+                if (cssContext) {
+                    const tdBorderStyle = cssContext.elementStyles.get("td");
+                    const thBorderStyle = cssContext.elementStyles.get("th");
+                    const borderSource = tdBorderStyle || thBorderStyle;
+                    if (borderSource) {
+                        const hasBorderBottom = !!borderSource.borderBottom;
+                        const hasFullBorder = !!borderSource.border;
+                        const hasBorderLeft = !!borderSource.borderLeft;
+                        const hasBorderRight = !!borderSource.borderRight;
+                        // If cells have border-bottom but no full border or side borders, it's horizontal-only
+                        if (hasBorderBottom && !hasFullBorder && !hasBorderLeft && !hasBorderRight) {
+                            horizontalBordersOnly = true;
+                        }
+                    }
+                    // Also check table element's own styles - if table has no border but cells have border-bottom
+                    const tableStyles = getElementStyles(element, cssContext);
+                    if (tableStyles.border && tableStyles.border.includes("none")) {
+                        // Table explicitly has no border - if cells have bottom borders, it's horizontal-only
+                        if (borderSource?.borderBottom) {
+                            horizontalBordersOnly = true;
+                        }
+                    }
                 }
-                elements.push({ type: "table", rows, cellPadding, headerBackgroundColor, headerTextColor, evenRowBackgroundColor });
+                elements.push({ type: "table", rows, cellPadding, headerBackgroundColor, headerTextColor, evenRowBackgroundColor, hasHeader: hasExplicitHeader ? true : undefined, horizontalBordersOnly: horizontalBordersOnly || undefined });
             }
             return;
         }
@@ -3390,6 +1267,33 @@ export function parseHtmlContent(html) {
         }
         // Check for chart containers (divs with SVG children)
         if (tagName === "div") {
+            // Detect timeline sections — convert to structured paragraphs with visual markers
+            // Pattern: div.timeline or div containing .timeline-item children
+            const timelineItems = detectTimeline(element, cssContext);
+            if (timelineItems && timelineItems.length > 0) {
+                for (let i = 0; i < timelineItems.length; i++) {
+                    const item = timelineItems[i];
+                    // Add separator between items (not before first)
+                    if (i > 0) {
+                        elements.push({ type: "horizontal-rule", color: "D0D0D0", spacingBefore: 60, spacingAfter: 60 });
+                    }
+                    // Date line with bullet marker: "● January 2026"
+                    const dateRuns = [
+                        { text: item.isCurrent ? "◉ " : "● ", bold: true, color: item.accentColor || "4A90D9" },
+                        { text: item.date, bold: true, color: item.accentColor || "4A90D9" },
+                    ];
+                    elements.push({ type: "paragraph", text: `${item.isCurrent ? "◉" : "●"} ${item.date}`, runs: dateRuns });
+                    // Title
+                    if (item.title) {
+                        elements.push({ type: "paragraph", text: item.title, bold: true });
+                    }
+                    // Description with indent (use spaces for visual indentation)
+                    if (item.description) {
+                        elements.push({ type: "paragraph", text: "    " + item.description });
+                    }
+                }
+                return;
+            }
             // Check for two-column grid layout (like resume templates with sidebar)
             const sidebarWidthPercent = isTwoColumnGridLayout(element, cssContext);
             if (sidebarWidthPercent !== undefined) {
@@ -3408,14 +1312,135 @@ export function parseHtmlContent(html) {
                     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", ... });
+                        // Emit two-column layout for documents with sidebar patterns.
+                        // This produces a DOCX table with sidebar + main content columns,
+                        // matching the HTML's grid/flex sidebar layout.
+                        elements.push({
+                            type: "two-column-layout",
+                            sidebar: {
+                                content: sidebarContent,
+                                backgroundColor: sidebarBgColor,
+                                textColor: sidebarTextColor,
+                                widthPercent: sidebarWidthPercent,
+                            },
+                            main: {
+                                content: mainContent,
+                            },
+                        });
+                        return;
+                    }
+                }
+            }
+            // Check for CSS Grid equal-width columns (e.g., pros/cons comparison_table)
+            // Pattern: display: grid; grid-template-columns: 1fr 1fr (or repeat(2, 1fr))
+            const gridColumns = detectGridEqualColumns(element, cssContext);
+            if (gridColumns && gridColumns.length >= 2) {
+                // GENERALIZED: Before converting grid to table, check if children match stats-grid pattern.
+                // Stats-grid: each child has 2-3 short divs (value + label + optional change).
+                // This prevents metric cards from being converted to tables.
+                const gridChildDivs = Array.from(element.children).filter((child) => child.tagName.toLowerCase() === "div");
+                if (gridChildDivs.length >= 2) {
+                    const statsCards = [];
+                    let allMatchStatsPattern = true;
+                    for (const card of gridChildDivs) {
+                        const cardChildren = Array.from(card.children).filter((c) => c.tagName.toLowerCase() !== "script" && c.tagName.toLowerCase() !== "style");
+                        // Stats cards typically have 2-3 child elements (value, label, optional change)
+                        if (cardChildren.length < 2 || cardChildren.length > 4) {
+                            allMatchStatsPattern = false;
+                            break;
+                        }
+                        // Check if children look like value/label (short text, no nested block elements)
+                        const texts = cardChildren.map(c => getTextContent(c).trim());
+                        const allShort = texts.every(t => t.length > 0 && t.length <= 50 && !t.includes('\n'));
+                        if (!allShort) {
+                            allMatchStatsPattern = false;
+                            break;
+                        }
+                        // First child = value, second = label, third = change
+                        const value = texts[0];
+                        const label = texts[1];
+                        const change = texts.length >= 3 ? texts[2] : undefined;
+                        const hasSentenceDot = /\.\s/.test(value) || (value.endsWith('.') && value.length > 10);
+                        const isFieldLabel = value.endsWith(':');
+                        if (hasSentenceDot || isFieldLabel) {
+                            allMatchStatsPattern = false;
+                            break;
+                        }
+                        // Extract colors
+                        const valueColor = extractTextColor(cardChildren[0], cssContext);
+                        const labelColor = extractTextColor(cardChildren[1], cssContext);
+                        const changeColor = cardChildren.length >= 3 ? extractTextColor(cardChildren[2], cssContext) : undefined;
+                        const cardStyles = getElementStyles(card, cssContext);
+                        const backgroundColor = cardStyles.backgroundColor ? extractHexColor(cardStyles.backgroundColor) : undefined;
+                        const borderColor = extractBorderColorFromStyle(cardStyles);
+                        statsCards.push({ value, label, change, valueColor, labelColor, changeColor, backgroundColor, borderColor });
+                    }
+                    if (allMatchStatsPattern && statsCards.length >= 2) {
+                        elements.push({ type: "stats-grid", cards: statsCards });
+                        return;
+                    }
+                }
+                // Parse each column's content
+                const columnContents = [];
+                for (const col of gridColumns) {
+                    const colContent = parseContainerContent(col, cssContext);
+                    columnContents.push(colContent);
+                }
+                // Check if at least one column has content
+                const hasContent = columnContents.some(c => c.length > 0);
+                if (hasContent) {
+                    // Build rows from aligned column content
+                    // Each ParsedElement in a column becomes a row cell
+                    const maxRows = Math.max(...columnContents.map(c => c.length));
+                    const rows = [];
+                    for (let i = 0; i < maxRows; i++) {
+                        const rowCells = [];
+                        for (const colContent of columnContents) {
+                            const elem = colContent[i];
+                            if (!elem) {
+                                rowCells.push("");
+                            }
+                            else if (elem.type === "paragraph") {
+                                // Use runs if available, otherwise plain text
+                                if (elem.runs && elem.runs.length > 0) {
+                                    rowCells.push(elem.runs);
+                                }
+                                else if (elem.bold) {
+                                    rowCells.push([{ text: elem.text, bold: true, color: elem.color }]);
+                                }
+                                else {
+                                    rowCells.push(elem.color ? [{ text: elem.text, color: elem.color }] : elem.text);
+                                }
+                            }
+                            else if (elem.type === "heading") {
+                                rowCells.push([{ text: elem.text, bold: true, size: elem.level <= 3 ? 28 : 24 }]);
+                            }
+                            else if (elem.type === "list") {
+                                // Flatten list items to text
+                                const listText = elem.items.map((item, idx) => {
+                                    const prefix = elem.ordered ? `${idx + 1}. ` : "• ";
+                                    const itemText = typeof item === "string" ? item :
+                                        Array.isArray(item) ? item.map(r => r.text).join("") :
+                                            typeof item.content === "string" ? item.content :
+                                                item.content.map(r => r.text).join("");
+                                    return prefix + itemText;
+                                }).join("\n");
+                                rowCells.push(listText);
+                            }
+                            else {
+                                // Fallback: extract text
+                                const text = "text" in elem ? elem.text : "";
+                                rowCells.push(text);
+                            }
+                        }
+                        rows.push(rowCells);
+                    }
+                    if (rows.length > 0) {
+                        elements.push({ type: "table", rows, hasHeader: false, noBorders: true });
+                        return;
                     }
                 }
             }
-            // 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
@@ -3613,8 +1638,10 @@ export function parseHtmlContent(html) {
                             // 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"
+                            // Allow dots in numeric contexts (e.g., "4.2/5", "$3.50M") but reject sentence-like content
+                            const hasSentenceDot = /\.\s/.test(value) || (value.endsWith('.') && value.length > 10);
                             const isValueLike = value.length > 0 && value.length <= MAX_VALUE_LENGTH &&
-                                !value.includes('\n') && !value.includes('.');
+                                !value.includes('\n') && !hasSentenceDot;
                             const isLabelLike = label.length > 0 && label.length <= MAX_LABEL_LENGTH &&
                                 !label.includes('\n');
                             // GENERALIZED: Values that end with ':' are labels, not stats values
@@ -3948,6 +1975,13 @@ export function parseHtmlContent(html) {
             }
             // If no img found, fall through to container handling
         }
+        // Handle standalone <input type="checkbox"> elements (not inside inline context)
+        if (tagName === "input" && element.getAttribute("type") === "checkbox") {
+            const isChecked = element.hasAttribute("checked");
+            const text = isChecked ? "☑ " : "☐ ";
+            elements.push({ type: "paragraph", text, color: elementColor });
+            return;
+        }
         // Check for blockquote/callout before generic container handling
         // Uses style-based detection, NOT class names
         if (isBlockquoteOrCallout(element, cssContext)) {
@@ -3963,18 +1997,11 @@ export function parseHtmlContent(html) {
                     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;
-                }
+                // Extract border color - use unified extraction that checks all border properties
+                // in priority order: borderColor > border > borderLeft > borderRight > borderTop > borderBottom
+                const borderHex = extractBorderColorFromStyle(elementStyles);
+                if (borderHex)
+                    borderColor = borderHex;
                 // Also check inline styles (overrides CSS)
                 const inlineStyle = element.getAttribute("style") || "";
                 const bgMatch = inlineStyle.match(/background(?:-color)?:\s*([^;]+)/i);
@@ -4029,9 +2056,19 @@ export function parseHtmlContent(html) {
                         borderStyle = "full";
                     }
                 }
+                else if (backgroundColor && !elementStyles.borderLeft && !elementStyles.border) {
+                    // Has background color but only borderColor (from class), no explicit border/border-left
+                    // This is a full-background callout, not a left-accent callout
+                    borderStyle = "none";
+                }
                 // Otherwise borderStyle remains undefined, which defaults to "left" in convert.ts
                 // GENERALIZED: Extract background gradient for container gradient rendering
                 const backgroundGradient = elementStyles.backgroundGradient;
+                // Extract padding from CSS for blockquote cell margins
+                let padding;
+                if (elementStyles.padding) {
+                    padding = parseCssPaddingToTwips(elementStyles.padding);
+                }
                 elements.push({
                     type: "blockquote",
                     content,
@@ -4040,6 +2077,7 @@ export function parseHtmlContent(html) {
                     backgroundGradient,
                     variant,
                     borderStyle,
+                    padding,
                 });
             }
             return;
@@ -4075,8 +2113,13 @@ export function parseHtmlContent(html) {
         if (tagName === "div") {
             const skillItem = detectSkillItem(element);
             if (skillItem) {
-                // Output as single line: "Skill Name: 95%"
-                const text = `${skillItem.name}: ${skillItem.percentage}`;
+                // Output as visual bar: "Skill Name  ██████████ 95%"
+                const pctNum = parseInt(skillItem.percentage, 10);
+                const barLength = 10;
+                const filled = Math.round((pctNum / 100) * barLength);
+                const empty = barLength - filled;
+                const bar = "█".repeat(filled) + "░".repeat(empty);
+                const text = `${skillItem.name}  ${bar} ${skillItem.percentage}`;
                 elements.push({ type: "paragraph", text, color: elementColor });
                 return;
             }
@@ -4090,6 +2133,21 @@ export function parseHtmlContent(html) {
                 elements.push({ type: "paragraph", text, color: elementColor });
                 return;
             }
+            // Detect standalone progress bar containers (e.g., goal tracker progress)
+            // Pattern: div containing a child with .progress-bar or .goal-progress class, or
+            // a child div with width percentage in inline style and background color
+            const progressBarResult = detectProgressBar(element, cssContext);
+            if (progressBarResult) {
+                const barLength = 10;
+                const filled = Math.round((progressBarResult.percentage / 100) * barLength);
+                const empty = barLength - filled;
+                const bar = "█".repeat(filled) + "░".repeat(empty);
+                const label = progressBarResult.label
+                    ? `${progressBarResult.label}  ${bar} ${progressBarResult.percentage}%`
+                    : `${bar} ${progressBarResult.percentage}%`;
+                elements.push({ type: "paragraph", text: label, color: elementColor });
+                return;
+            }
         }
         if (CONTAINER_TAGS.includes(tagName)) {
             // Before processing content, check if this element has border-top
@@ -4115,7 +2173,17 @@ export function parseHtmlContent(html) {
                     textTransform = containerStyles.textTransform;
                 }
                 // GENERALIZED: Extract margin-bottom for paragraph spacing
-                const spacingAfter = containerStyles.marginBottom ? parseMarginToTwips(containerStyles.marginBottom) : undefined;
+                // Apply CSS margin-bottom: > 240 for larger, <= 120 for tight, moderate keeps DOCX default
+                const cssContainerSpacing = containerStyles.marginBottom ? parseMarginToTwips(containerStyles.marginBottom) : undefined;
+                let spacingAfter;
+                if (cssContainerSpacing !== undefined) {
+                    if (cssContainerSpacing > 240) {
+                        spacingAfter = cssContainerSpacing;
+                    }
+                    else if (cssContainerSpacing <= 120) {
+                        spacingAfter = Math.max(cssContainerSpacing, 60);
+                    }
+                }
                 // 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
@@ -4124,41 +2192,98 @@ export function parseHtmlContent(html) {
                 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;
+                    // Check flex-wrap and justify-content to determine rendering strategy
+                    const flexWrap = containerStyles.flexWrap?.toLowerCase();
+                    const justifyContent = containerStyles.justifyContent?.toLowerCase();
+                    // For flex-wrap: wrap containers (e.g., contact info, metadata lines),
+                    // merge all children into a single paragraph with separator characters.
+                    // This produces much better output than a multi-column table which
+                    // causes text to break across columns at awkward points.
+                    if (flexWrap === "wrap") {
+                        const flexChildren = directChildren.filter(child => child.nodeType === Node.ELEMENT_NODE);
+                        const allRuns = [];
+                        // Determine separator based on content - if children already contain "|" separators, use gap only
+                        const childTexts = flexChildren.map(c => (c.textContent || "").trim());
+                        const hasPipeSeparators = childTexts.some(t => t === "|");
+                        const separator = hasPipeSeparators ? " " : " · ";
+                        for (let ci = 0; ci < flexChildren.length; ci++) {
+                            const flexChild = flexChildren[ci];
+                            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;
+                                    }
+                                });
+                                // Add separator between flex children (not before first or after last)
+                                if (allRuns.length > 0 && childRuns.length > 0) {
+                                    allRuns.push({ text: separator, color: containerColor || elementColor });
                                 }
+                                allRuns.push(...childRuns);
+                            }
+                        }
+                        if (allRuns.length > 0) {
+                            const text = allRuns.map(r => r.text).join("");
+                            elements.push({
+                                type: "paragraph",
+                                text,
+                                runs: hasInlineFormatting(allRuns) ? allRuns : undefined,
+                                color: !hasInlineFormatting(allRuns) ? (elementColor || containerColor) : undefined,
+                                alignment: justifyContent === "center" ? "center" : alignment,
+                                spacingAfter,
+                                lineSpacing,
+                                textTransform,
                             });
-                            // 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 {
+                        // For non-wrapping flex (e.g., justify-content: space-between):
+                        // 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 {
@@ -4203,10 +2328,42 @@ export function parseHtmlContent(html) {
                 }
             }
             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);
+                // Has block-level children - check if this is a space-between flex container
+                // Pattern: <div class="job-header" style="display:flex; justify-content:space-between">
+                //   <div>Title • Company</div>
+                //   <span>Date | Location</span>
+                // </div>
+                // This should become a 2-column table with left-aligned and right-aligned content
+                const containerStylesForFlex = getElementStyles(element, cssContext);
+                const isSpaceBetweenFlex = containerStylesForFlex.display === "flex" &&
+                    containerStylesForFlex.justifyContent === "space-between" &&
+                    (!containerStylesForFlex.flexDirection || containerStylesForFlex.flexDirection === "row" || containerStylesForFlex.flexDirection === "row-reverse");
+                if (isSpaceBetweenFlex) {
+                    // Extract runs from each direct child, merging block-level children's inline content
+                    const flexChildren = Array.from(element.children).filter(child => child.nodeType === Node.ELEMENT_NODE);
+                    const tableCells = [];
+                    const containerFontFamilyForFlex = containerStylesForFlex.fontFamily;
+                    for (const flexChild of flexChildren) {
+                        const childRuns = extractInlineRuns(flexChild, cssContext, undefined, containerFontFamilyForFlex);
+                        if (childRuns.length > 0) {
+                            tableCells.push(childRuns);
+                        }
+                    }
+                    if (tableCells.length > 0) {
+                        elements.push({
+                            type: "table",
+                            rows: [tableCells],
+                            hasHeader: false,
+                            noBorders: true,
+                        });
+                    }
+                }
+                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