From 4c7086000ba7ffdbd6288e335f7b92b03874e763 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 9 Nov 2025 19:55:01 +0000
Subject: [PATCH] Add centered styling for Expand/Collapse All menu items

- Created semantic class 'menu-item-action' for action controls
- Applied width: calc(100% - 65px) to make items slightly narrower
- Applied text-align: center to center content
- Affects only Expand All and Collapse All menu items
- Preserves all existing functionality and base menu-item styles
- Makes action items visually distinct from navigation items
---
 static/css/main.css  | 8 +++++++-
 templates/index.html | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 897cfa7..0898796 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2076,6 +2076,12 @@ a:focus {
     color: var(--accent-blue);
 }
 
+/* Menu item action controls (Expand All, Collapse All) */
+.menu-item-action {
+    width: calc(100% - 65px);
+    text-align: center;
+}
+
 /* Remove extra padding - all menu items should align consistently */
 
 /* Submenu styles */
@@ -2245,7 +2251,7 @@ html {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     z-index: 99;
     transition: all 0.3s ease;
-    opacity: 0.5;
+    opacity: 0.2;
 }
 
 .info-button:hover {
diff --git a/templates/index.html b/templates/index.html
index 7370dba..ec7fa0f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -194,11 +194,11 @@
     <!-- Navigation Menu (Hidden by default) -->
     <nav id="navigation-menu" class="navigation-menu no-print" role="navigation" aria-label="CV sections">
         <div class="menu-content">
-            <a href="#" class="menu-item" onclick="expandAllSections(event)">
+            <a href="#" class="menu-item menu-item-action" onclick="expandAllSections(event)">
                 <iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
             </a>
-            <a href="#" class="menu-item" onclick="collapseAllSections(event)">
+            <a href="#" class="menu-item menu-item-action" onclick="collapseAllSections(event)">
                 <iconify-icon icon="mdi:arrow-collapse-all" width="20" height="20"></iconify-icon>
                 <span>{{if eq .Lang "es"}}Colapsar Todo{{else}}Collapse All{{end}}</span>
             </a>