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

# 1. Replace the [href*="index.html"], etc with nth-of-type or nth-child
# The nav-links structure:
# a (Home), a (Tools), a (Blog), a (About), a (Contact), a.btn-ghost
# So Home is nth-child(1), Tools is nth-child(2), Blog is nth-child(3).

$css = $css -replace '\.nav-links\s+a\[href\*="index\.html"\]', '.nav-links a:nth-child(1)'
$css = $css -replace '\.nav-links\s+a\[href\*="tools\.html"\]', '.nav-links a:nth-child(2)'
$css = $css -replace '\.nav-links\s+a\[href\*="blog"\]', '.nav-links a:nth-child(3)'

# 2. Add an animation and better highlight to the active state for the mobile bottom bar
# The current active state is:
# .nav-links a.is-active { color: var(--violet-700) !important; }

$activeStateReplacement = @"
.nav-links a.is-active {
      color: var(--violet-700) !important;
      position: relative;
      animation: activePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .nav-links a.is-active::before {
      background-color: var(--violet-700) !important;
      transform: scale(1.15);
      transition: transform 0.2s ease;
    }
    .nav-links a.is-active::after {
      content: "";
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--violet-600);
      animation: dotPop 0.3s ease-out;
    }
    @keyframes activePop {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    @keyframes dotPop {
      0% { opacity: 0; transform: translate(-50%, 6px) scale(0); }
      100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
"@

# The regex replaces the specific mobile block (might be inside @media or not)
# Let's target the exact text
$css = $css -replace '\.nav-links\s+a\.is-active\s*\{\s*color:\s*var\(--violet-700\)\s*!important;\s*\}', $activeStateReplacement

Set-Content -Path $cssPath -Value $css -Encoding UTF8
Write-Host "Updated style.css with nth-child icon matching and active state animations."
