import os
import re

def fix_design_system_css():
    path = os.path.join('css', 'design-system.css')
    with open(path, 'r', encoding='utf-8') as f:
        c = f.read()

    # Block 1 replacement
    old_block_1 = """.btn-fill-animation > *, 
.btn-fill-outline > *, 
.header-cta-btn > *, 
a.btn-chocolate > *, 
button > * {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.4s ease !important;
}

/* Expanding Cream White Circle Pseudo-Element */
.btn-fill-animation::before,
.btn-fill-outline::before,
.header-cta-btn::before,
a.btn-chocolate::before,
a.btn-outline-dark::before,
button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 350% !important;
    height: 350% !important;
    background-color: #FFFFFF !important; /* Cream White */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover State - Scale Cream Circle to 100% and flip text to dark chocolate brown */
.btn-fill-animation:hover::before,
.btn-fill-outline:hover::before,
.header-cta-btn:hover::before,
a.btn-chocolate:hover::before,
a.btn-outline-dark:hover::before,
button:hover::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.btn-fill-animation:hover,
.btn-fill-outline:hover,
.header-cta-btn:hover,
a.btn-chocolate:hover,
a.btn-outline-dark:hover,
button:hover {
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
}

.btn-fill-animation:hover *,
.btn-fill-outline:hover *,
.header-cta-btn:hover *,
a.btn-chocolate:hover *,
button:hover * {
    color: #4A2A18 !important;
}"""

    new_block_1 = """.btn-fill-animation > *, 
.btn-fill-outline > *, 
.header-cta-btn > *, 
a.btn-chocolate > * {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.4s ease !important;
}

/* Expanding Cream White Circle Pseudo-Element */
.btn-fill-animation::before,
.btn-fill-outline::before,
.header-cta-btn::before,
a.btn-chocolate::before,
a.btn-outline-dark::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 350% !important;
    height: 350% !important;
    background-color: #FFFFFF !important; /* Cream White */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover State - Scale Cream Circle to 100% and flip text to dark chocolate brown */
.btn-fill-animation:hover::before,
.btn-fill-outline:hover::before,
.header-cta-btn:hover::before,
a.btn-chocolate:hover::before,
a.btn-outline-dark:hover::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.btn-fill-animation:hover,
.btn-fill-outline:hover,
.header-cta-btn:hover,
a.btn-chocolate:hover,
a.btn-outline-dark:hover {
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
}

.btn-fill-animation:hover *,
.btn-fill-outline:hover *,
.header-cta-btn:hover *,
a.btn-chocolate:hover * {
    color: #4A2A18 !important;
}"""

    # Block 2 replacement
    old_block_2 = """button > * {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.4s ease !important;
}

/* Expanding Cream White Circle */
.btn-fill-animation::before,
.btn-fill-outline::before,
.header-cta-btn::before,
a.btn-chocolate::before,
a.btn-outline-dark::before,
button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 380% !important;
    height: 380% !important;
    background-color: #FFFFFF !important; /* Cream White Fill */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover Animation Trigger */
.btn-fill-animation:hover::before,
.btn-fill-outline:hover::before,
.header-cta-btn:hover::before,
a.btn-chocolate:hover::before,
a.btn-outline-dark:hover::before,
button:hover::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.btn-fill-animation:hover,
.btn-fill-outline:hover,
.header-cta-btn:hover,
a.btn-chocolate:hover,
a.btn-outline-dark:hover,
button:hover {
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.btn-fill-animation:hover *,
.btn-fill-outline:hover *,
.header-cta-btn:hover *,
a.btn-chocolate:hover *,
button:hover * {
    color: #4A2A18 !important;
}"""

    new_block_2 = """/* Expanding Cream White Circle */
.btn-fill-animation::before,
.btn-fill-outline::before,
.header-cta-btn::before,
a.btn-chocolate::before,
a.btn-outline-dark::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 380% !important;
    height: 380% !important;
    background-color: #FFFFFF !important; /* Cream White Fill */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover Animation Trigger */
.btn-fill-animation:hover::before,
.btn-fill-outline:hover::before,
.header-cta-btn:hover::before,
a.btn-chocolate:hover::before,
a.btn-outline-dark:hover::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.btn-fill-animation:hover,
.btn-fill-outline:hover,
.header-cta-btn:hover,
a.btn-chocolate:hover,
a.btn-outline-dark:hover {
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.btn-fill-animation:hover *,
.btn-fill-outline:hover *,
.header-cta-btn:hover *,
a.btn-chocolate:hover * {
    color: #4A2A18 !important;
}"""

    c = c.replace(old_block_1, new_block_1)
    c = c.replace(old_block_2, new_block_2)

    # Add mobile toggle specific styles at the end
    ham_override = """
/* HAMBURGER TOGGLE — No hover color or background animations */
.fs-mobile-toggle,
.fs-mobile-toggle:hover,
.fs-mobile-toggle:focus,
.fs-mobile-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fs-mobile-toggle::before,
.fs-mobile-toggle::after,
.fs-mobile-toggle:hover::before,
.fs-mobile-toggle:hover::after,
.fs-mobile-toggle:active::before,
.fs-mobile-toggle:active::after,
.fs-mobile-toggle:focus::before,
.fs-mobile-toggle:focus::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

.fs-mobile-toggle span span {
    background: #ffffff !important;
}
"""
    c += ham_override

    with open(path, 'w', encoding='utf-8') as f:
        f.write(c)
    print("Updated design-system.css")

def fix_styles_css():
    path = os.path.join('css', 'styles.css')
    with open(path, 'r', encoding='utf-8') as f:
        c = f.read()

    ham_override = """
/* HAMBURGER TOGGLE — No hover color or background animations */
.fs-mobile-toggle,
.fs-mobile-toggle:hover,
.fs-mobile-toggle:focus,
.fs-mobile-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.fs-mobile-toggle::before,
.fs-mobile-toggle::after,
.fs-mobile-toggle:hover::before,
.fs-mobile-toggle:hover::after,
.fs-mobile-toggle:active::before,
.fs-mobile-toggle:active::after,
.fs-mobile-toggle:focus::before,
.fs-mobile-toggle:focus::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

.fs-mobile-toggle span span {
    background: #ffffff !important;
}
"""
    c += ham_override
    with open(path, 'w', encoding='utf-8') as f:
        f.write(c)
    print("Updated styles.css")

def update_all_html_files():
    html_files = [f for f in os.listdir('.') if f.endswith('.html')]
    
    style_replacement = """    <style id="custom-menu-active-styles">
        /* Keep toggle highlighted when mega menu is open and highlight active page */
        .fs-desktop-nav a.active,
        .fs-desktop-nav button.active,
        .fs-desktop-nav button.hover-active {
            color: #e6c888 !important;
            font-weight: 800 !important;
        }
        .fs-desktop-nav button.active::after,
        .fs-desktop-nav button.hover-active::after {
            color: #e6c888 !important;
        }
        /* Mobile hamburger toggle: disable all hover fills and color shifts */
        .fs-mobile-toggle,
        .fs-mobile-toggle:hover,
        .fs-mobile-toggle:focus,
        .fs-mobile-toggle:active {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            transform: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        .fs-mobile-toggle::before,
        .fs-mobile-toggle::after,
        .fs-mobile-toggle:hover::before,
        .fs-mobile-toggle:hover::after,
        .fs-mobile-toggle:active::before,
        .fs-mobile-toggle:active::after,
        .fs-mobile-toggle:focus::before,
        .fs-mobile-toggle:focus::after {
            display: none !important;
            content: none !important;
            opacity: 0 !important;
        }
        .fs-mobile-toggle span span {
            background: #ffffff !important;
        }
    </style>"""

    for fname in html_files:
        with open(fname, 'r', encoding='utf-8') as f:
            c = f.read()

        c = re.sub(r'<style id="custom-menu-active-styles">[\s\S]*?</style>', style_replacement, c)

        with open(fname, 'w', encoding='utf-8') as f:
            f.write(c)

    print("Updated custom-menu-active-styles in all HTML files.")

if __name__ == '__main__':
    fix_design_system_css()
    fix_styles_css()
    update_all_html_files()