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/js/footer-buttons-interaction.js

@@ -0,0 +1,46 @@
+/**
+ * Footer and Button Bar Interaction
+ * Makes button bar semi-transparent when hovering over footer area
+ * so footer content remains visible
+ */
+
+(function() {
+    'use strict';
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    function init() {
+        const footer = document.querySelector('footer.no-print');
+        if (!footer) return;
+
+        // Get all fixed buttons
+        const buttons = document.querySelectorAll(
+            '.download-btn, .print-friendly-btn, .shortcuts-btn, ' +
+            '.info-button, .back-to-top, .color-theme-switcher'
+        );
+
+        // Add hover listeners to footer
+        footer.addEventListener('mouseenter', () => {
+            // Add class to footer itself for text enlargement
+            footer.classList.add('footer-hovered');
+            // Add class to buttons for transparency
+            buttons.forEach(btn => {
+                btn.classList.add('footer-hovered');
+            });
+        });
+
+        footer.addEventListener('mouseleave', () => {
+            // Remove class from footer
+            footer.classList.remove('footer-hovered');
+            // Remove class from buttons
+            buttons.forEach(btn => {
+                btn.classList.remove('footer-hovered');
+            });
+        });
+    }
+})();

static/js/main.js

@@ -607,6 +607,19 @@
     window.openPdfModal = function() {
         const pdfModal = document.querySelector('#pdf-modal');
         if (pdfModal) {
+            // Apply mobile centering via inline styles with !important (overrides CSS !important)
+            if (window.innerWidth <= 768) {
+                // Reset inset FIRST (before setting top/left)
+                pdfModal.style.setProperty('inset', 'auto', 'important');
+                pdfModal.style.setProperty('margin', '0', 'important');
+                // Now set positioning with !important (after inset reset)
+                pdfModal.style.setProperty('position', 'fixed', 'important');
+                pdfModal.style.setProperty('top', '50%', 'important');
+                pdfModal.style.setProperty('left', '50%', 'important');
+                pdfModal.style.setProperty('right', 'auto', 'important');
+                pdfModal.style.setProperty('bottom', 'auto', 'important');
+                pdfModal.style.setProperty('transform', 'translate(-50%, -50%)', 'important');
+            }
             pdfModal.showModal();
         }
     };

static/js/scroll-at-bottom-handler.js

@@ -0,0 +1,73 @@
+/**
+ * Scroll At-Bottom Handler
+ * Adds 'at-bottom' class to buttons and footer when user scrolls to page bottom
+ */
+
+(function() {
+    'use strict';
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    function init() {
+        const footer = document.querySelector('footer.no-print');
+        if (!footer) return;
+
+        // Get all fixed buttons that need 'at-bottom' state
+        const buttons = document.querySelectorAll(
+            '.download-btn, .print-friendly-btn, .shortcuts-btn, ' +
+            '.info-button, .back-to-top, .color-theme-switcher'
+        );
+
+        if (buttons.length === 0) return;
+
+        // Throttle scroll events for better performance
+        let ticking = false;
+
+        function checkIfAtBottom() {
+            // Calculate if we're at the bottom of the page
+            // Allow 50px tolerance for smoother experience
+            const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+            const windowHeight = window.innerHeight;
+            const documentHeight = document.documentElement.scrollHeight;
+            const distanceFromBottom = documentHeight - (scrollPosition + windowHeight);
+
+            const isAtBottom = distanceFromBottom <= 50;
+
+            if (isAtBottom) {
+                // Add 'at-bottom' class to all buttons and footer
+                buttons.forEach(btn => btn.classList.add('at-bottom'));
+                footer.classList.add('at-bottom');
+            } else {
+                // Remove 'at-bottom' class from all buttons and footer
+                buttons.forEach(btn => btn.classList.remove('at-bottom'));
+                footer.classList.remove('at-bottom');
+            }
+        }
+
+        function onScroll() {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    checkIfAtBottom();
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        }
+
+        // Check initial state
+        checkIfAtBottom();
+
+        // Listen to scroll events
+        window.addEventListener('scroll', onScroll, { passive: true });
+
+        // Also check on resize (mobile orientation changes, etc.)
+        window.addEventListener('resize', () => {
+            setTimeout(checkIfAtBottom, 100);
+        });
+    }
+})();