/* Header Styles */
        .main-header {
            background-color: var(--d-bg); /* White background for the header */
            /*box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
            box-shadow: 0 2px 4px rgb(0 0 0 / 66%);
            padding-top: 8px;
            padding-bottom: 8px;
            /*position: sticky; /* Make header sticky */
            top: 0;
            z-index: 1000; /* Ensure header stays on top */
        }

        /* Navigation Styles */
        .main-nav {
            display: flex;
            align-items: center;
            justify-content: space-between; /* Key for desktop layout */
            min-height: 60px; /* Ensure consistent height */
        }

        /* Logo Styles */
        /*.logo a {
            text-decoration: none;
            color: var(--d-color);
            font-weight: bold;
            font-size: 24px;
            display: flex;
            align-items: center;
        }*/
        /*.logo svg {
            width: 40px;
            height: 40px;
            margin-right: 8px;
            fill: var(--link);
        }*/


        /* Desktop Navigation Links */
        .nav-links {
            display: flex; /* Show on desktop by default */
            list-style: none;
            gap: 24px; /* Spacing between links */
            margin: 0; /* Reset margin */
            padding: 0; /* Reset padding */
        }

        .nav-links a {
            text-decoration: none;
            color: var(--d-color2);
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative; /* Needed for the pseudo-element positioning */
            padding: 0 12px;
            padding-bottom: 29px; /* Add space for the underline */
        }

        .nav-links a:hover,
        .nav-links a:focus {
            color: var(--link);
        }

        /* Search Bar Styles */
        .search-bar {
            display: flex; /* Show on desktop */
            align-items: center;
        }

        .search-bar input[type="search"] {
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 20px; /* Rounded search bar */
            font-size: 14px;
            min-width: 200px; /* Give it some base width */
        }

        /* Right Aligned Items (Desktop) */
        .nav-right {
            display: flex;
            align-items: center;
            gap: 16px; /* Space between search and theme button */
        }

        /* Theme Toggle Button Placeholder */
        .theme-toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex; /* Use flex to center icon */
            align-items: center;
            justify-content: center;
        }
        .theme-toggle-btn svg {
            width: 24px;
            height: 24px;
            fill: var(--d-color); /* Default icon color */
            transition: fill 0.3s ease;
        }
        /*.theme-toggle-btn:hover svg,
        .theme-toggle-btn:focus svg {
             fill: var(--link);
        }*/


        /* Hamburger Menu Button (Hidden on Desktop) */
        .hamburger-btn {
            display: none; /* Hidden by default */
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 20; /* Ensure it's clickable above mobile menu */
        }
        .hamburger-btn svg {
            width: 28px;
            height: 28px;
            fill: var(--d-color);
        }


        /* Mobile Menu Container (Hidden on Desktop) */
        .mobile-menu-content {
            /* display: none; // Controlled by JS/open class now */
            position: absolute;
            /*top: 100%; /* Position below the header */
            left: 0;
            width: 100%;
            background-color: var(--d-bg);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            padding: 16px 0; /* Vertical padding */
            transform: translateY(-10px); /* Start slightly up */
            opacity: 0;
            visibility: hidden;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0.3s; /* Delay hiding visibility */
            z-index: 999; /* Below header but above content */
        }

        /* Styles for links inside mobile menu - initially hidden by media query */
        .mobile-menu-content .nav-links {
            /* display: none; // Will be overridden by the .mobile-menu-open rule */
            flex-direction: column; /* Stack links vertically */
            align-items: center; /* Center links */
            gap: 16px; /* Space between links */
            margin-bottom: 16px; /* Space below links */
        }
         .mobile-menu-content .nav-links li {
            width: 100%;
            text-align: center;
         }
         .mobile-menu-content .nav-links a {
            display: block; /* Make links take full width */
            padding: 8px 16px;
            color: var(--d-color);
         }
         .mobile-menu-content .nav-links a:hover,
         .mobile-menu-content .nav-links a:focus {
            color: var(--link);
         }

        .mobile-menu-content .search-bar {
            display: flex; /* Ensure search is flex for centering */
            justify-content: center; /* Center search bar */
            padding: 16px; /* Add horizontal padding */
        }
         .mobile-menu-content .search-bar input[type="search"] {
            width: 90%; /* Make search bar wider on mobile dropdown */
            max-width: 300px;
         }


        /* -- Mobile Styles (using 992px breakpoint from grid system) -- */
        @media (max-width: 991.98px) {
            .main-nav {
                /* Adjust flex for mobile */
            }

            /* Hide desktop-only elements */
            .main-nav > .nav-links { /* Target only direct child nav-links */
                display: none; /* Hide desktop nav links container */
            }
            .nav-right > .search-bar { /* Target only direct child search-bar */
                 display: none; /* Hide desktop search */
            }

            /* Show mobile-only elements */
            .hamburger-btn {
                display: block; /* Show hamburger */
            }
            .nav-right {
                 gap: 8px; /* Reduce gap on mobile */
            }
        }

        /* -- Mobile Menu Open State -- */
        .main-header.mobile-menu-open .mobile-menu-content {
            /* display: block; // Not needed, visibility/opacity handles it */
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0s; /* Show visibility immediately */
        }

        /* --- FIX: Show nav links inside the mobile menu when open --- */
        .main-header.mobile-menu-open .mobile-menu-content .nav-links {
             display: flex; /* Override the display:none rule */
        }
        /* --- END FIX --- */


        /* Change Hamburger to X when open */
        .main-header.mobile-menu-open .hamburger-icon {
            display: none; /* Hide hamburger */
        }
        /* Hide X icon initially */
        .close-icon {
             display: none;
        }
        .main-header.mobile-menu-open .close-icon {
             display: block; /* Show X */
        }


        /* --- Placeholder Content for Demo --- */
        .content-placeholder {
            padding: 32px 16px;
            height: 150vh; /* Make page scrollable */
        }
        .content-placeholder h2 {
            margin-bottom: 16px;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0; /* Position at the bottom */
            left: 0;
            width: 100%;
            height: 2px; /* Thickness of the underline */
            background-color: var(--link); /* Color of the underline */
            transform: scaleX(0); /* Start hidden (zero width) */
            transform-origin: left; /* Animate from left to right */
            transition: transform 0.3s ease-out; /* Smooth transition */
        }

        .nav-links a:hover::after,
        .nav-links a:focus::after {
            transform: scaleX(1); /* Scale to full width on hover/focus */
        }