import os
import re

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

    # Fix the broken text & scale(0) block
    broken_block = """/* Ensure text and icons sit on top layer z-index 3 */
.btn-fill-animation > *, 
.btn-fill-outline > *, 
.header-cta-btn > *, 
a.btn-chocolate > *, 
/* 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;
}"""

    fixed_block = """/* Ensure text and icons sit on top layer z-index 3 */
.btn-fill-animation > *, 
.btn-fill-outline > *, 
.header-cta-btn > *, 
a.btn-chocolate > *,
a.btn-outline-dark > *,
.btn-fill-animation span,
.btn-fill-outline span {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.4s ease !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !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 {
    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;
}"""

    c = c.replace(broken_block, fixed_block)

    # Clean master rules
    button_recovery = """
/* BUTTON RECOVERY: Explicit text visibility */
.btn-fill-animation,
.btn-fill-outline,
a.btn-chocolate,
.header-cta-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.btn-fill-animation span,
.btn-fill-outline span,
.btn-fill-animation svg,
.btn-fill-outline svg {
    position: relative !important;
    z-index: 4 !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.btn-fill-animation .btn-arrow,
.btn-fill-outline .btn-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
"""
    c += button_recovery

    with open(path, 'w', encoding='utf-8') as f:
        f.write(c)
    print("Fixed 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()

    button_recovery = """
/* BUTTON RECOVERY: Explicit text visibility */
.btn-fill-animation,
.btn-fill-outline,
a.btn-chocolate,
.header-cta-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.btn-fill-animation span,
.btn-fill-outline span,
.btn-fill-animation svg,
.btn-fill-outline svg {
    position: relative !important;
    z-index: 4 !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.btn-fill-animation .btn-arrow,
.btn-fill-outline .btn-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
"""
    c += button_recovery
    with open(path, 'w', encoding='utf-8') as f:
        f.write(c)
    print("Fixed styles.css")

def update_all_html_files():
    html_files = [f for f in os.listdir('.') if f.endswith('.html')]

    custom_style = """    <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;
        }

        /* BUTTON TEXT RECOVERY */
        .btn-fill-animation,
        .btn-fill-outline,
        a.btn-chocolate,
        .header-cta-btn {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            text-decoration: none !important;
            overflow: hidden !important;
        }
        .btn-fill-animation span,
        .btn-fill-outline span,
        .btn-fill-animation svg,
        .btn-fill-outline svg {
            position: relative !important;
            z-index: 4 !important;
            color: inherit !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }
        .btn-fill-animation .btn-arrow,
        .btn-fill-outline .btn-arrow {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* Mobile hamburger toggle */
        .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;
        }

        /* Mobile Header: Centered Logo Image ONLY (Hide long text) */
        @media (max-width: 991px) {
            .fs-header {
                padding: 0.5rem 1rem !important;
            }
            .fs-header-inner {
                position: relative !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                width: 100% !important;
                min-height: 48px !important;
            }
            .fs-logo {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 !important;
                text-align: center !important;
                z-index: 102 !important;
                text-decoration: none !important;
            }
            .fs-logo img {
                display: block !important;
                height: 38px !important;
                width: auto !important;
                max-width: 48px !important;
                margin: 0 auto !important;
                object-fit: contain !important;
                filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) !important;
            }
            .fs-logo-text {
                display: none !important;
            }
            .fs-header-actions {
                display: flex !important;
                align-items: center !important;
                z-index: 103 !important;
            }
        }

        /* Mobile Close Button in Drawer Menu */
        .fs-mobile-close {
            align-self: flex-end !important;
            background: rgba(255, 255, 255, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.35) !important;
            color: #ffffff !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            border-radius: 50% !important;
            font-size: 28px !important;
            line-height: 1 !important;
            font-family: Arial, sans-serif !important;
            font-weight: 300 !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin-bottom: 1.5rem !important;
            flex-shrink: 0 !important;
            padding: 0 !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
            outline: none !important;
        }
        .fs-mobile-close:hover,
        .fs-mobile-close:focus {
            background: #e6c888 !important;
            color: #0c1727 !important;
            transform: rotate(90deg) !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>', custom_style, c)

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

    print(f"Updated all {len(html_files)} HTML files.")

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