refactor: organize hyperscript code and implement mobile button layout

This commit includes two major improvements:

1. Hyperscript Code Organization:
   - Extracted all hyperscript blocks >3 lines into reusable functions
   - Created 6 new functions in functions._hs:
     * toggleCVLength(isLong) - CV length toggle sync
     * toggleIcons(showIcons) - Icons toggle sync
     * toggleTheme(isClean) - Theme toggle sync
     * syncPdfHover(show) - PDF button synchronized hover
     * syncPrintHover(show) - Print button synchronized hover
     * highlightZoomControl(show) - Zoom control highlight effect
   - Reduced inline hyperscript from 11+ lines to 1-2 lines per element
   - Updated 8 template files to use function calls:
     * hamburger-menu.html
     * view-controls.html
     * action-buttons.html
     * download-button.html
     * print-friendly-button.html
     * zoom-toggle-button.html

2. Mobile Button Layout (max-width: 900px):
   - Repositioned three fixed buttons (PDF, Print, Info) horizontally at bottom center
   - Print button perfectly centered in viewport
   - Download button on left, Info button on right
   - Hidden zoom and shortcuts buttons on mobile (available in hamburger menu)
   - Removed conflicting old mobile styles that were hiding print button
   - Smooth hover transitions maintained with proper transform calculations

Technical details:
- Used CSS transform with calc() for precise horizontal positioning
- Maintained hover effects with combined translateX/translateY transforms
- Ensured accessibility with proper ARIA labels and spacing
- All functions check element existence before manipulation
- LocalStorage sync maintained across desktop/mobile toggles

static/css/main.css

@@ -2863,14 +2863,57 @@ html {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
 }
 
-/* Mobile adjustments */
-@media (max-width: 768px) {
-    .info-button {
-        bottom: 1.5rem;
-        left: 1.5rem;
+/* Mobile adjustments - Horizontal button layout at bottom center */
+@media (max-width: 900px) {
+    /* Hide zoom and shortcuts buttons on mobile - only show PDF, Print, Info */
+    .zoom-toggle-btn,
+    .shortcuts-btn {
+        display: none !important;
+    }
+
+    /* Position buttons horizontally at bottom center */
+    .download-btn {
+        bottom: 1.5rem !important;
+        left: 50% !important;
+        transform: translateX(calc(-50% - 70px)) !important; /* Left button: center - 70px */
         width: 45px;
         height: 45px;
     }
+
+    .download-btn:hover,
+    .download-btn.pdf-hover-sync {
+        transform: translateX(calc(-50% - 70px)) translateY(-3px) !important;
+    }
+
+    .print-friendly-btn {
+        bottom: 1.5rem !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important; /* Center button */
+        width: 45px;
+        height: 45px;
+    }
+
+    .print-friendly-btn:hover,
+    .print-friendly-btn.print-hover-sync {
+        transform: translateX(-50%) translateY(-3px) !important;
+    }
+
+    .info-button {
+        bottom: 1.5rem !important;
+        left: 50% !important;
+        transform: translateX(calc(-50% + 70px)) !important; /* Right button: center + 70px */
+        width: 45px;
+        height: 45px;
+    }
+
+    .info-button:hover,
+    .info-button.at-bottom {
+        transform: translateX(calc(-50% + 70px)) translateY(-3px) !important;
+    }
+
+    .info-button.at-bottom {
+        transform: translateX(calc(-50% + 70px)) !important; /* No Y offset for at-bottom state */
+    }
 }
 
 /* ========================================
@@ -3913,23 +3956,8 @@ html {
     outline-offset: 2px;
 }
 
-/* Mobile Responsive - Hide most buttons, keep only download and info */
-@media (max-width: 768px) {
-    .zoom-control,
-    .zoom-toggle-btn,
-    .shortcuts-btn,
-    .print-friendly-btn,
-    .back-to-top {
-        display: none !important; /* Hide these buttons on mobile */
-    }
-
-    /* Reposition download button to be above info button (right side) */
-    .download-btn {
-        bottom: 6rem; /* Above info button */
-        left: auto;
-        right: 2rem; /* Right side like info button */
-    }
-}
+/* Mobile Responsive - Horizontal button layout defined below (around line 2867) */
+/* Old mobile styles removed - now using horizontal layout with all three buttons */
 
 /* Very Small Screens - Ultra Compact */
 @media (max-width: 480px) {