/* ptaa-theme/secondary-header.css */
.custom-logo {
    max-width: 310px; /* Adjust to your preference */
    height: auto;
    display: inline-block; /* Changed from block to inline-block */
    margin-top: 20px; /* Adjust space above the logo */
    margin-left: 0px; /* Adjust space to the left of the logo */
}

.nav-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
    flex-grow: 1; /* Allows the nav to fill the remaining header space */
}

/* Style for the unordered list in the navigation */
.nav-main ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Keeps menu items in a row */
    align-items: center; /* Centers items vertically */
    justify-content: center; /* Centers items horizontally within the nav */
}

/* Style for each list item */
.nav-main ul li {
    margin: 0 8px; /* Adjust spacing between items */
}

/* General link style */
.nav-main ul li a {
    text-decoration: none;
    font-size: 17px;
    color: #007bff; /* Color similar to Bootstrap primary color */
    padding: 10px 15px;
    transition: color 0.3s, text-decoration 0.3s; /* Smooth transition for hover effect */
}

/* Hover effect for general nav links */
.nav-main ul li a:not(.enroll-btn):hover {
    text-decoration: underline;
    color: #0056b3; /* Darker shade on hover */
}

/* Specific style for the 'Enroll' button to keep it looking like a button */
.nav-main ul li.enroll-btn a {
    background-color: #007bff; /* Bootstrap primary button color */
    border-radius: 5px;
    color: white;
}

.nav-main ul li.enroll-btn a:hover {
    background-color: #FFD700;; /* Darker shade on hover */
}

/* Ensure the header uses flexbox to align logo and navigation */
.header .wrapper {
    display: flex;
    padding: 0 20px; /* Adjust padding to preference */
}

/* Add responsive styling if necessary */
@media (max-width: 768px) {
    .nav-main ul {
        flex-direction: column; /* Stack the menu items on smaller screens */
    }

    .nav-main ul li a {
        width: 100%; /* Full width buttons on smaller screens */
        text-align: center; /* Center the text within the buttons */
    }

    .header .wrapper {
        flex-direction: column; /* Stack logo and navigation on smaller screens */
    }

    .custom-logo {
        margin-left: 0; /* Center the logo on smaller screens */
        margin-bottom: 20px; /* Space between logo and menu */
    }
}

.logo-and-text {
    display: flex;
    align-items: center;
}

.logo-text {
    margin-bottom: 8px; /* Reduces space between school name and district text */
    font-size: 29px; 
    font-family: 'Montserrat', sans-serif;
}

.logo-school-district {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
}

.school-district-text {
    display: flex;
    flex-direction: column; /* Stack school name and district text vertically */
    margin-left: 19px; /* Adjust as needed for proper spacing from the logo */
    margin-top: 19px;
    align-items: flex-start; /* Aligns text to the start of the flex container */
}


.district-text {
    font-size: 19px; /* Smaller font size for the district text */
    font-style: italic;
}

/* Media query for viewport width less than 1100px */
@media (max-width: 1100px) {

    /* Center the logo within the header */
    .header .wrapper {
        justify-content: center; /* Centers children (logo) horizontally */
        flex-direction: column; /* Stacks children (logo and nav) vertically */
        padding: 0; /* Adjust padding if needed */
    }

    /* Hide the school name and district text */
    .logo-school-district .school-district-text,
    .logo-text {
        display: none; /* Hide title and district text */
    }

    /* Ensure logo is centered by removing left margin */
    .custom-logo {
        margin: 0 auto; /* Center logo with automatic horizontal margins */
    }

    /* Center the navigation menu if needed */
    .nav-main {
        justify-content: center; /* Center navigation items */
    }
    .logo-school-district {
        display: block;
        text-align: center; /* Aligns items vertically in the center */
    
    }
}