/* Drop-down menus in page header */

/* Universal components */
nav#header_menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: Verdana, 'Open Sans', Helvetica, Arial, sans-serif;
    background-image: url('../images/');
    background-color: #ffffff;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex; /* Enables Flexbox layout */
    justify-content: space-between; /* Distributes space between items */
    align-items: center; /* Centers items vertically */
}

/* Right button styling */
#rightButton {
    margin-left: auto; /* Pushes the button to the far right */
    margin-right: 20px; /* Adds margin to the right side */
    padding: 10px 20px; /* Adds padding inside the button */
    background-color: #336699; /* Button background color */
    color: white; /* Text color */
    border: none; /* Removes default border */
    border-radius: 4px; /* Rounds the corners */
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: transform 0.3s ease; /* Adds a smooth transition for the transform property */
}

#rightButton:hover {
    background-color: #336699; /* Darker background on hover */
    transform: translateY(-3px); /* Moves the button 3px upwards on hover */
}

/* Phone Version */
@media only screen and (max-width: 768px) {
    /* Hidden elements in phone version */
    div#phonebutton,
    div#homebutton a {
        display: none;
    }

    a#atoclink {
        display: none;
    }
    a#phonemenulink {
        display: none !important;
    }

    nav#header_menu {
        position: fixed;
        display: none;
        top: 7rem;
        font-size: calc(0.832rem * 1.2);
        z-index: 1000;
        width: 100%;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }

    /* Adjustments for header titles */
    #header_titles {
        text-align: center;
        color: #013c73;
        font-weight: bold;
    }

    /* Style for individual titles */
    #header_titles > div {
        margin-bottom: 5px; /* Add space between the titles */
    }
} /* @media */

/* Desktop version */
@media only screen and (min-width: 769px) {
    a#phonemenulink {
        display: none !important;
    }

    /* Company Logo */
    div#homebutton {
        width: 80px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 903;
    }
    div#homebutton a {
        display: block;
        width: 100%;
        height: 100%;
        background: url(../images/logo-image-mobile.png) left center no-repeat;
        background-size: contain;
        text-decoration: none;
    }

    /* Center the header title */
    #header_titles {
        text-align: left;
        flex: 1; /* This will make the title take up the remaining space */
        color: #336699; /* Font color */
        font-weight: bold; /* Make the font bold */
    }
} /* @media */