import os
import re

mobile_header_logo_css = """
/* ============================================================
   MOBILE HEADER: Centered Small Logo Emblem + Right-Aligned Title
   ============================================================ */
@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-header-actions {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        z-index: 105 !important;
    }
    .fs-logo {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        position: static !important;
        margin: 0 !important;
        text-decoration: none !important;
        width: 100% !important;
    }
    .fs-logo img {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        height: 32px !important;
        width: auto !important;
        max-width: 44px !important;
        z-index: 104 !important;
        margin: 0 !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) !important;
    }
    .fs-logo-text {
        display: flex !important;
        flex-direction: column !important;
        text-align: right !important;
        align-items: flex-end !important;
        justify-content: center !important;
        margin-left: auto !important;
        padding-right: 0.2rem !important;
        z-index: 104 !important;
        max-width: 46% !important;
    }
    .fs-logo-name {
        font-family: 'Instrument Sans', sans-serif !important;
        font-size: 0.52rem !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .fs-logo-sub {
        font-family: 'Instrument Sans', sans-serif !important;
        font-size: 0.40rem !important;
        font-weight: 400 !important;
        line-height: 1.15 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
}
@media (max-width: 380px) {
    .fs-logo img {
        height: 28px !important;
    }
    .fs-logo-name {
        font-size: 0.46rem !important;
    }
    .fs-logo-sub {
        font-size: 0.36rem !important;
    }
}
"""

def update_css_files():
    for css_path in [os.path.join('css', 'styles.css'), os.path.join('css', 'design-system.css')]:
        if os.path.exists(css_path):
            with open(css_path, 'r', encoding='utf-8') as f:
                content = f.read()
            content += "\n" + mobile_header_logo_css
            with open(css_path, 'w', encoding='utf-8') as f:
                f.write(content)
            print(f"Updated {css_path}")

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 Emblem + Right-Aligned Logo Title */
        @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-header-actions {
                order: 1 !important;
                display: flex !important;
                align-items: center !important;
                z-index: 105 !important;
            }
            .fs-logo {
                order: 2 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-end !important;
                position: static !important;
                margin: 0 !important;
                text-decoration: none !important;
                width: 100% !important;
            }
            .fs-logo img {
                display: block !important;
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                height: 32px !important;
                width: auto !important;
                max-width: 44px !important;
                z-index: 104 !important;
                margin: 0 !important;
                object-fit: contain !important;
                filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) !important;
            }
            .fs-logo-text {
                display: flex !important;
                flex-direction: column !important;
                text-align: right !important;
                align-items: flex-end !important;
                justify-content: center !important;
                margin-left: auto !important;
                padding-right: 0.2rem !important;
                z-index: 104 !important;
                max-width: 46% !important;
            }
            .fs-logo-name {
                font-family: 'Instrument Sans', sans-serif !important;
                font-size: 0.52rem !important;
                font-weight: 600 !important;
                line-height: 1.15 !important;
                color: #ffffff !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                display: block !important;
            }
            .fs-logo-sub {
                font-family: 'Instrument Sans', sans-serif !important;
                font-size: 0.40rem !important;
                font-weight: 400 !important;
                line-height: 1.15 !important;
                color: rgba(255, 255, 255, 0.85) !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                display: block !important;
            }
        }
        @media (max-width: 380px) {
            .fs-logo img {
                height: 28px !important;
            }
            .fs-logo-name {
                font-size: 0.46rem !important;
            }
            .fs-logo-sub {
                font-size: 0.36rem !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__':
    update_css_files()
    update_all_html_files()