fix: Mobile view improvements - accordion styling and modal centering

Fixed two critical mobile view issues:

1. Extended CV Sidebar Accordion:
   - Updated sidebar.html to use native <details> element (was div with onclick)
   - Styled accordion header to match CV title badges dark theme (#303030)
   - Applied consistent styling: dark gray background, light text, uppercase, no spacing
   - Result: Sidebars now collapse/expand properly with native HTML functionality

2. PDF Download Modal Centering:
   - Added JavaScript-based centering for mobile viewports (≤768px)
   - Uses inline styles with !important flag to override browser defaults
   - Updated download button to call openPdfModal() function
   - Result: Modal is perfectly centered on mobile (0px offset)

Technical notes:
   - Modal centering required setProperty() with 'important' flag
   - Accordion matches cv-title-badges-header style exactly
   - All tests passing: accordion toggle, modal centering

Files modified:
   - templates/partials/cv/sidebar.html
   - static/css/05-responsive/_breakpoints.css
   - static/js/main.js
   - templates/partials/widgets/download-button.html

Tests added:
   - tests/mjs/43-mobile-accordion-and-modal-test.mjs
   - tests/mjs/46-visual-accordion-style-test.mjs

static/css/05-responsive/_breakpoints.css

@@ -247,6 +247,42 @@
    ======================================== */
 
 @media (max-width: 768px) {
+    /* ========================================
+       LAYOUT - Single column on mobile
+       ======================================== */
+    /* Collapse grid to single column */
+    .page-1 .page-content,
+    .page-2 .page-content {
+        grid-template-columns: 1fr !important;
+        grid-template-rows: auto auto;
+    }
+
+    /* Stack elements vertically: sidebar -> main */
+    .page-1 .cv-sidebar-left {
+        grid-column: 1;
+        grid-row: 1;
+        order: 1;
+    }
+
+    .page-1 .cv-main {
+        grid-column: 1;
+        grid-row: 2;
+        order: 2;
+    }
+
+    /* Stack elements vertically: main -> sidebar */
+    .page-2 .cv-main {
+        grid-column: 1;
+        grid-row: 1;
+        order: 1;
+    }
+
+    .page-2 .cv-sidebar-right {
+        grid-column: 1;
+        grid-row: 2;
+        order: 2;
+    }
+
     /* ========================================
        TYPOGRAPHY - Subtle font size reductions
        ======================================== */
@@ -442,6 +478,64 @@
         margin-left: 1rem !important;
         font-size: 0.85rem !important;
     }
+
+    /* ========================================
+       SIDEBAR ACCORDION - MOBILE ONLY
+       ======================================== */
+    /* Show accordion header on mobile - matches CV title badges style */
+    .sidebar-accordion summary.sidebar-accordion-header {
+        display: flex !important;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 20px;
+        background: #303030 !important; /* Match CV title badges dark gray */
+        color: #ccc;
+        cursor: pointer;
+        border-radius: 0; /* No rounding - match title badges */
+        margin-bottom: 0;
+        font-weight: normal;
+        font-size: 0.9em;
+        text-transform: uppercase;
+        gap: 0.5rem;
+        list-style: none;
+        user-select: none;
+        border-bottom: 2px solid #34495e; /* Match title badges border */
+    }
+
+    /* Remove default details marker */
+    .sidebar-accordion summary.sidebar-accordion-header::-webkit-details-marker,
+    .sidebar-accordion summary.sidebar-accordion-header::marker {
+        display: none;
+    }
+
+    /* Chevron rotation when open */
+    .sidebar-accordion[open] summary.sidebar-accordion-header .chevron {
+        transform: rotate(180deg);
+        transition: transform 0.3s ease;
+    }
+
+    .sidebar-accordion summary.sidebar-accordion-header .chevron {
+        transition: transform 0.3s ease;
+        color: #ccc; /* Match header text color */
+    }
+
+    /* Accordion content animation */
+    .sidebar-accordion-content {
+        overflow: hidden;
+        transition: max-height 0.3s ease-in-out;
+    }
+
+    /* Hide when closed */
+    .sidebar-accordion:not([open]) .sidebar-accordion-content {
+        max-height: 0;
+        opacity: 0;
+    }
+
+    /* Show when open */
+    .sidebar-accordion[open] .sidebar-accordion-content {
+        max-height: 2000px;
+        opacity: 1;
+    }
 }
 
 /* ========================================