$cssPath = "site\assets\style.css"
$css = Get-Content $cssPath -Raw

# Replace the entire existing max-width: 760px block (my previous FAB implementation)
$oldMobileMenuRegex = '(?s)@media \(max-width: 760px\)\{.*?(?=\}\s*/\* --- PREMIUM UI EFFECTS --- \*/)'

$newMobileMenu = @"
@media (max-width: 760px){
  /* Keep logo top left */
  .nav { flex-wrap: nowrap; }
  .nav-bg { 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important; 
    overflow: visible !important; 
  }
  
  /* Hide top buttons/toggles */
  .nav-toggle { display: none !important; }
  .nav .btn-ghost { display: none !important; }
  
  /* Flipkart-style Bottom Tab Bar */
  .nav-links {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 10px) 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
    border: none !important;
    border-top: 1px solid var(--border-strong) !important;
  }
  
  .nav-links a, .nav-links button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--muted-2) !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    border-radius: 0 !important;
    width: auto !important;
  }
  
  .nav-links a.is-active {
    color: var(--violet-700) !important;
  }
  
  /* Hide extra links to keep tab bar clean */
  .nav-links a[href*="about.html"],
  .nav-links a[href*="contact.html"] {
    display: none !important;
  }
  
  /* Icons for Tab Bar */
  .nav-links a::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
  }
  
  /* Home Icon */
  .nav-links a[href*="index.html"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  }
  
  /* Tools Icon */
  .nav-links a[href*="tools.html"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  }
  
  /* Blog Icon */
  .nav-links a[href*="blog"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  }

  /* Grid layout fixes */
  h1{font-size:38px !important;}
  h2{font-size:28px !important;}
  .tool-grid{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .related-articles-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .wrap,.wrap-mid,.wrap-narrow{padding:0 20px;}
  .blog-slide-card{flex-basis:240px;}
"@

$css = $css -replace $oldMobileMenuRegex, $newMobileMenu

Set-Content -Path $cssPath -Value $css -Encoding UTF8
Write-Host "Updated mobile menu to Flipkart style tab bar!"
