/*=================================================================================*/
/*                START OF Top Navigation / Top Menu STYLESHEET                    */
/*=================================================================================*/

/* Top navigation container */
.top-nav {
    background-color: #fff; 				/* Sets background color to white */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); 		/* Adds a subtle shadow below the navbar */
    padding: 0.1rem 0; 					/* Adds padding of 0.1rem to the top and bottom */
    margin-bottom: 0.2rem; 				/* Adds bottom margin of 0.2rem */
}

/* Navigation content container */
.nav-content {
    max-width: 1200px; 					/* Limits the maximum width of the navbar content */
    margin: 0 auto; 					/* Centers the content horizontally */
    padding: 0 1rem; 					/* Adds padding to the left and right of the navbar */
    display: flex; 					/* Uses flexbox for layout */
    flex-wrap: wrap; 			/* Add this to allow wrapping */
    align-items: flex-start; 				/* Vertically aligns items   */
}

/* Primary navigation menu (logo and main menu) */
.logo span {
    display: block; /* Ensures the second line appears below */
}

/* Primary navigation menu (logo and main menu) */
/* Primary navigation menu (logo and main menu) */
.primary-nav {
    display: flex;
    align-items: center; /* Align items to the start (top) */
    width: 100%; /* Ensure it takes full width */
    gap: 1rem; /* Add some gap between elements */
//    flex-wrap: wrap; /* Allow items to wrap onto a new line */
}

/* Logo */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    line-height: 1;
    flex-shrink: 0; /* Prevents the logo from shrinking */
}

/* Second line text under the logo */
.DomainSpecificHeader_text {
    width: 100%; /* Ensures the text takes full width */
    text-align: left; /* Align text to the left */
    margin-top: 0.5rem; /* Adds a little space between the logo and text */
    order: 2; /* Add this to ensure it appears below */
}



/* Main menu container (navigation links) */
.main-menu {
    display: flex; 					/* Uses flexbox for the menu items */
    gap: 1.5rem; 					/* Adds a gap of 1.5rem between links */
    margin-left: auto; /* claude Added this to push menu to the right */
}

/* Main menu link styles */
.main-menu a {
    text-decoration: none; 				/* Removes the underline from the links */
    color: #333; 					/* Sets the link color to dark grey */
}

/* Secondary navigation (search and sign-in) */
.secondary-nav {
    display: flex; 					/* Uses flexbox for the secondary items (search, sign-in) */
    align-items: center; 				/* Vertically centers the items */
    gap: 1rem; 						/* Adds a gap of 1rem between items */
}

/* Search input styling */
.secondary-nav input[type="search"] {
    padding: 0.5rem 1rem; 				/* Adds padding of 0.5rem top/bottom, 1rem left/right */
    border: 1px solid #ddd; 				/* Sets a light grey border around the input */
    border-radius: 4px; 				/* Rounds the corners of the input */
    width: 200px; 					/* Sets a fixed width for the search input */
}

/* Sign-in button styling */
.sign-in {
    padding: 0.05rem 0.1rem; 				/* Adds padding of 0.5rem top/bottom, 1rem left/right */
    background-color: #007bff; 				/* Sets background color to blue */
    color: white; 					/* Sets text color to white */
    border: none; 					/* Removes border from the button */
    border-radius: 4px; 				/* Rounds the corners of the button */
    cursor: pointer; 					/* Changes the cursor to a pointer on hover */
}

/*=================================================================================*/
/*                  END OF Top Navigation / Top Menu STYLESHEET                    */
/*=================================================================================*/




/*================= claude added all the below for nav =======================*/



/* Add this media query for mobile adjustments */
@media (max-width: 768px) {
    .nav-content {
        flex-direction: column;
        gap: 0.5rem;
    }

    .primary-nav {
        flex-wrap: wrap;
    }

    .main-menu {
        /* display: none; */ /* Uncomment this to hide menu */
        width: auto;
        margin-left: auto;
    }

    .DomainSpecificHeader_text {
        margin-top: 0.25rem;