import os
import re

mobile_header_css = """
/* ============================================================
   MOBILE HEADER: Left Ham + Dead-Center Logo + Far-Right Text
   ============================================================ */
@media (max-width: 991px) {
    .fs-header {
        padding: 0.4rem 0 !important;
    }
    .fs-header-inner {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    .fs-header-actions {
        position: absolute !important;
        left: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        z-index: 110 !important;
        margin: 0 !important;
    }
    .fs-logo {
        position: static !important;
        display: block !important;
        text-decoration: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .fs-logo img {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        height: 38px !important;
        width: auto !important;
        max-width: 50px !important;
        z-index: 106 !important;
        margin: 0 !important;
        object-fit: contain !important;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)) !important;
    }
    .fs-logo-text {
        position: absolute !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: right !important;
        align-items: flex-end !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 106 !important;
        max-width: 40% !important;
    }
    .fs-logo-name {
        font-family: 'Instrument Sans', sans-serif !important;
        font-size: 0.54rem !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.42rem !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-header-inner {
        height: 48px !important;
        min-height: 48px !important;
    }
    .fs-header-actions {
        left: 0.75rem !important;
    }
    .fs-logo-text {
        right: 0.75rem !important;
        max-width: 38% !important;
    }
    .fs-logo img {
        height: 32px !important;
    }
    .fs-logo-name {
        font-size: 0.48rem !important;
    }
    .fs-logo-sub {
        font-size: 0.38rem !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_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')]

    # Replace inline lower mobile header block
    old_block_pattern = re.compile(
        r'\.fs-header-actions\s*\{\s*order:\s*1\s*!important;[\s\S]*?\.fs-logo-sub\s*\{\s*font-family:[^}]*\}',
        re.MULTILINE
    )

    clean_inner_block = """    .fs-header-inner {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      height: 52px !important;
      min-height: 52px !important;
      padding: 0 !important;
    }
    .fs-header-actions {
      position: absolute !important;
      left: 1rem !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      align-items: center !important;
      z-index: 110 !important;
    }
    .fs-logo {
      position: static !important;
      display: block !important;
      text-decoration: none !important;
    }
    .fs-logo img {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      display: block !important;
      height: 38px !important;
      width: auto !important;
      max-width: 50px !important;
      z-index: 106 !important;
      object-fit: contain !important;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)) !important;
    }
    .fs-logo-text {
      position: absolute !important;
      right: 1rem !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      flex-direction: column !important;
      text-align: right !important;
      align-items: flex-end !important;
      justify-content: center !important;
      z-index: 106 !important;
      max-width: 40% !important;
    }
    .fs-logo-name {
      font-family: 'Instrument Sans', sans-serif !important;
      font-size: 0.54rem !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.42rem !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;
    }"""

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

        if old_block_pattern.search(c):
            c = old_block_pattern.sub(clean_inner_block, c)

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

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

if __name__ == '__main__':
    update_css_files()
    update_all_html_files()