import re

with open("current_about_post.html", "r", encoding="utf-8") as f:
    content = f.read()

# Update about-card
content = re.sub(
    r'\.about-card\s*\{[^}]*\}',
    '.about-card { background: #FFFFFF; border-radius: 40px; padding: 64px; box-shadow: 0 4px 24px rgba(0,0,0,0.03); }',
    content
)

# Update about-card-title
content = re.sub(
    r'\.about-card-title\s*\{[^}]*\}',
    '.about-card-title { font-family: \'Cardo\', serif; font-size: 56px; font-weight: 700; margin: 0 0 48px; color: #1C3434; line-height: 1.1; }',
    content
)

# Update about-list
content = re.sub(
    r'\.about-list\s*\{[^}]*\}',
    '.about-list { display: flex; flex-direction: column; gap: 40px; }',
    content
)

# Update about-list-item
content = re.sub(
    r'\.about-list-item\s*\{[^}]*\}',
    '.about-list-item { display: flex; align-items: center; gap: 32px; font-family: \'Inter\', sans-serif; font-size: 22px; font-weight: 700; color: #1C3434; line-height: 1.3; }',
    content
)

# Update about-icon-circle
content = re.sub(
    r'\.about-icon-circle\s*\{[^}]*\}',
    '.about-icon-circle { width: 64px; height: 64px; border-radius: 50%; background-color: #90F1AE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }',
    content
)

# Update about-icon-circle svg
content = re.sub(
    r'\.about-icon-circle\s*svg\s*\{[^}]*\}',
    '.about-icon-circle svg { width: 32px; height: 32px; fill: none; stroke: #1C3434; stroke-width: 1.5; }',
    content
)

# Update about-connect-card
content = re.sub(
    r'\.about-connect-card\s*\{[^}]*\}',
    '.about-connect-card { display: flex; align-items: center; justify-content: flex-start; gap: 32px; padding: 48px 64px; }',
    content
)

# Add override for connect card title font size if missing
if '.about-connect-card .about-card-title' in content:
    content = re.sub(
        r'\.about-connect-card\s*\.about-card-title\s*\{[^}]*\}',
        '.about-connect-card .about-card-title { margin: 0; font-size: 44px; line-height: 1; }',
        content
    )

# Update about-social-icon
content = re.sub(
    r'\.about-social-icon\s*\{[^}]*\}',
    '.about-social-icon { width: 64px; height: 64px; border-radius: 50%; background-color: #1C3434; display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }',
    content
)

# Update about-social-icon svg
content = re.sub(
    r'\.about-social-icon\s*svg\s*\{[^}]*\}',
    '.about-social-icon svg { width: 28px; height: 28px; fill: #FFFFFF; }',
    content
)

# Update about-middle-image
content = re.sub(
    r'\.about-middle-image\s*\{[^}]*\}',
    '.about-middle-image { width: 100%; height: 100%; object-fit: cover; border-radius: 40px; min-height: 400px; }',
    content
)

# Check the star icon. Change it to a filled/standard star if it was spark-like.
old_star_path = '<path d="M12 4l1.5 3.5 3.5 1.5-3.5 1.5L12 14l-1.5-3.5-3.5-1.5 3.5-1.5z"/>'
new_star_path = '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" stroke-linecap="round" stroke-linejoin="round" />'
content = content.replace(old_star_path, new_star_path)

with open("current_about_post.html", "w", encoding="utf-8") as f:
    f.write(content)

print("Updated HTML.")