@gurupanguji

Implementation Plan: Heading Hierarchy Audit & Breadcrumbs (Issue #212)

1. Setup Phase

• Pull latest from main.
• Create feature branch feat/issue-212-heading-breadcrumbs.
• Create technical specification.
• Create implementation plan.

2. Heading Regressions Fix

• Open reviews/camera/leica/m11-p/index.html.
• Find all 12 <div class="hotspot-popup"> blocks inside the <section id="explorer-section">.
• Replace <h4> tags with <h3> tags to restore heading order hierarchy (h2 -> h3).

3. Breadcrumbs Implementation

• Append .breadcrumbs styling to assets/css/style.css (using .breadcrumbs ol, .breadcrumbs li, and separator content //).
• In reviews/index.html, inject <nav aria-label="Breadcrumb" class="breadcrumbs">... immediately after the <main> tag and before <h1 class="page-title">.
• In reviews/camera/leica/m11-p/index.html, inject the breadcrumb <nav> inside <main> right before or inside <article class="container">.
• In reviews/camera/fujifilm/x100vi/index.html, inject the breadcrumb <nav> inside <main> right before or inside <article class="container">.

4. Verification

• Run bundle exec jekyll build.
• Run .github/workflows/validate_html.yml checks (if executable locally) or ensure no raw Markdown in HTML.
• Check for exact single h1 matches in modified files.
• Ensure no h4 tags exist in reviews/camera/leica/m11-p/index.html.

5. Deployment

• Stage and commit changes (e.g., feat: add semantic breadcrumbs and fix heading order in reviews (#212)).
• Push branch to remote.
• Create Pull Request against main.