I've updated the header implementation to properly handle heights and scroll margins:

Changed header height to be explicitly set using CSS variable --header-height instead of being determined by padding
Set responsive header heights:
Default: 100px
Mobile (480px): 80px
Small Mobile (320px): 60px
Ensured scroll-margin-top on headings uses the same --header-height variable
Main content padding-top uses the same --header-height variable
These changes ensure consistent header heights across all screen sizes and proper scroll positioning for anchor links.

public/css/responsive.css

@@ -5,7 +5,7 @@
     }
 
     header {
-        padding: 1rem;
+        height: var(--header-height);
     }
 
     .logo-text {
@@ -59,11 +59,11 @@
     .nav-menu {
         display: none;
         position: fixed;
-        top: 55px;
+        top: var(--header-height);
         left: 0;
         right: 0;
         background: var(--bg-card);
-        min-height: calc(100vh - 55px);
+        min-height: calc(100vh - var(--header-height));
         flex-direction: column;
         align-items: center;
         border-bottom: 1px solid var(--border-color);
@@ -98,13 +98,16 @@
 
 /* Mobile Devices */
 @media (max-width: 480px) {
+    :root {
+        --header-height: 80px;
+    }
+
     .container {
         padding: 0 1rem;
     }
 
     header {
-        padding: 0.75rem;
-        max-height: 120px;
+        height: var(--header-height);
     }
 
     .logo-text {
@@ -157,18 +160,16 @@
         padding: 1.5rem;
         margin: 0;
     }
-
-    .nav-menu {
-        top: 50px;
-        min-height: calc(100vh - 50px);
-    }
 }
 
 /* Small Mobile Devices */
 @media (max-width: 320px) {
+    :root {
+        --header-height: 60px;
+    }
+
     header {
-        padding: 0.5rem;
-        max-height: 100px;
+        height: var(--header-height);
     }
 
     .logo-text {