/* the header */
/* added tagline, remove upper margin for better spacing */
/* #logo-container {
    margin-top: 5px;
} */
/* 25 yr logo specific rule */
/* see media queries as well */
#header-logo {
    max-width: 90%;
    margin-top:10px;
}
/* showhorn the tagline in for now, using the margin */
/* see also media queries */
#tagline {
    font-size: 1.1em;
    margin: -3px 0 1px 3px;
    font-family: Arial;
}
#top-nav {
    border-bottom: 1px dotted #808080;
    border-top: 1px dotted #808080;
    margin: 12px 0 20px;
    width: 100%; /* Make sure it uses the full width of the container */
}
/* dropdowns */
ul#menu {
    display: inline-block;
    line-height: 1.5;
    /* max-width: 960px; */
    text-align: center;
}
/* Important: Parent <li>s should be relatively positioned */
ul#menu li {
    display: inline-block;
    list-style-type: none;
    position: relative; 
}
ul#menu li a {
    background-color: transparent;
    color: #666;
    display: block;
    font-family: 'Archivo Narrow', arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    padding: 20px 25px;
    transition: transform 0.3s;
    line-height: 1;
}
/* a checkmark icon for after a selected item */
.option-selected::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    margin-left: 5px;
}
/* keep the user options in the top right */
ul#menu.user-options-menu li a {
    padding: 15px 10px;
}
/* user items are a little narrower than typical items in nav */
/* specify width? */

#icon-container .user-options-menu li .submenu li a {
  min-width: 175px;
}
ul#menu li a:hover {
    transform: scale(1.1);
}
ul#menu li a:hover span i {
    color: #fff;
}
ul#menu li a span i {
    transition: color 0.2s;
}
ul#menu li a#selected {
    color: #fff;
    background-color: #d9001e;
    border-color: transparent;
    height: 26px;
    font-weight: bold;
}
ul#menu li a#selected span {
    color: #fff;
}
/* Submenu styling with roll down effect */
ul#menu li .submenu {
    display: block; /* Keep display block for transition */
    visibility: hidden; /* Initially hide the submenu */
    opacity: 0; 
    position: absolute; 
    top: 100%; /* Position below the parent */
    left: 0; /* Align submenu directly under the parent item */
    background-color: #fff;
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    z-index: 1000; 
    transform: scaleY(0); /* Initially collapse vertically */
    transform-origin: top; /* Expand from the top down */
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease; /* Smooth transition */
    max-height: 0; /* Ensure the submenu starts fully collapsed */
    overflow: hidden; 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
}

ul#menu li.has-submenu > a::after {
    content: "\f107";
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    margin-left: 5px;
}

/* Adjust the arrow icon for nested submenus */
ul#menu li .submenu li.has-submenu > a::after {
    content: "\f105"; 
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    margin-left: 5px;
}
ul#menu li .submenu li {
    width: 100%; /* Ensure submenu items take full width of the submenu */
}
ul#menu li .submenu li a {
    padding: 10px;
    display: block;
    text-decoration: none;
    color: #000;
    /* background-color: #f4f4f4; */
    font-weight: normal;
    text-align: left;
    min-width: 175px;
}
ul#menu li .submenu li a:hover {
    background-color: #ddd; /* Highlight on hover */
}
/* Show submenu on hover with correct roll down effect */
ul#menu li:hover .submenu {
    visibility: visible; /* Make the submenu visible */
    opacity: 1; /* Make the submenu fully opaque */
    transform: scaleY(1); /* Expand the submenu vertically */
    transform-origin: top;  /* Ensure it expands from the top down */
    max-height: 500px; /* Ensure it expands to fit all items */
    overflow: visible; /* Allow overflow when expanded */
}
/* Additional styles specific to the user-options-menu */
#icon-container .user-options-menu li .submenu {
    right: 0; /* Align the submenu to the right edge of the parent item */
    left: auto; /* Override any left alignment */
    text-align: right; /* Ensure submenu items are right-aligned */
}
#icon-container .user-options-menu li .submenu li a {
    min-width: 150px;
}
/* Full-header container setup */
#full-header-container-inner {
    display: flex;
    justify-content: space-between; /* Space between logo and upper options */
    align-items: center; /* Vertically center logo and upper options */
    flex-wrap: nowrap; /* Prevent wrapping */
}
#upper-options {
    flex: 1; /* Allow the upper options to take up the remaining space */
    text-align: right; /* Ensure the options are aligned to the right */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Adjust menu items inside upper options */
#upper-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#icon-container {
    display: flex;
    flex-direction: column;
    align-items: right;
}
#icon-container .username {
    /* margin: 0 10px; */
    font-size: 1em;
    color: #333; 
    white-space: nowrap;
}
/* dont uppercase the user's email address */
#icon-container .username a {
    text-transform: unset;
}
#icon-container .username.impersonation {
    color: #d9001e;
}
/* Styles for the search input */
input.top-nav-search {
    border: 1px solid #999; 
    color: #333333;
    font-family: 'Archivo Narrow', Arial, sans-serif; 
    font-size: 1em;
    margin: 0; /* Remove default margin */
    padding: 8px; /* Padding inside the input */
    width: 100%; /* Fill the width of the container */
    display: block; 
    box-sizing: border-box; 
    flex-grow: 1; /* Allow input to expand to fill available space */
    position: static;
    text-align: unset;
    float: none; /* Override any floating */
    border-radius: 4px 0 0 4px; 
    outline: none; 
    height: 40px; /* Set height to match the button */
    min-width: unset; /* Make sure that the default form value is not applied */
}
/* Styles for the search button within the top navigation */
button.top-nav-search-button {
    color: white;
    background-color: #555; 
    border: 1px solid #999; 
    border-radius: 0 4px 4px 0; 
    padding: 8px 16px; /* Button padding to match input */
    cursor: pointer; 
    flex-shrink: 0; /* Prevent button from shrinking */
    margin-left: -1px; /* Overlap the input border */
    display: flex; /* Make the button a flex container */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    width: auto; 
    box-sizing: border-box; 
    height: 40px; /* Match the input height */
    float: none; /* Ensure no floating */
}
button.top-nav-search-button:hover {
    background-color: #666; 
    color: #fff;
}
/* Styles for the search form container */
form#search-aec-topnav {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; 
    align-items: center; 
    width: 100%;
}
/* Styles for the search container */
.search-container {
    display: flex;
    justify-content: flex-end; /* Align the search container to the right */
    align-items: center;
    width: 100%; /* Make sure it uses the full width of the column */
    margin-top: 10px;
}
/* Styles for the parts inside the search container */
.search-parts {
    display: flex;
    width: 100%; /* Ensure the search parts take full width */
    align-items: center; 
}
/* Styles for the LL dashboard  action button menu
/* Styles specific to the action menu button */
.action-dropdown-button {
    background-color: #333; 
    color: white;
    border: 1px solid #333;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase; /* To match the navigation text style */
    font-weight: bold; 
    width: 100px;
    font-size: 1em;
}
.action-dropdown-button i {
    margin-left: 8px; /* Space between text and caret */
    font-size: 1em
}
.action-dropdown-button:hover {
    background-color: #fff;
    border-color: #333;
    color: #333;
    
}
.action-submenu {
    padding: 0;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    position: absolute; 
    right: 0; /* Align the submenu with the right side of the parent <li> */
    top: 100%; /* Position the submenu below the parent <li> */
    z-index: 1;
}
ul#menu li .submenu.action-submenu {
    left: unset; 
}
.action-submenu li {
    padding: 1px 0; 
    margin: 0; 
    list-style: none;
}
.action-submenu li a {
    display: flex; 
    align-items: center;
    padding: 10px 15px; 
    color: #333;
    text-decoration: none;
    background-color: #f8f9fa; 
    border-bottom: 1px solid #e7e7e7; 
    font-size: 12px !important;
    line-height: 1.5;
}
.action-submenu li a:hover {
    background-color: #e2e6ea; /* Slightly darker background on hover */
}
.action-submenu li:last-child a {
    border-bottom: none; /* Remove the border from the last item */
    margin-bottom: 0; /* Ensure no margin at the bottom */
    padding-bottom: 10px; /* Adjust padding to fit the design */
}
.button-disabled {
    background-color: #ccc !important; /* Gray background to indicate disabled state */
    color: #999 !important; /* Lighter text color */
    cursor: not-allowed; /* Change cursor to indicate it's not clickable */
    pointer-events: none; /* Disable all pointer events */
    opacity: 0.6; /* Slightly transparent to enhance disabled appearance */
}
.submenu-separator {
    border-top: 1px solid #f0f0f0; 
    margin: 4px 0; 
    background-color: transparent !important; /* Forcefully remove any background */
    padding: 0 !important; 
    width: 100%; /* Ensure the line spans the full width */
    height: 1px; /* Keep the line thin */
}
/* base style for small screen menu for site tabs */
.menu-toggle {
    display: none; /* Always hide the checkbox */
}

.dropdown-btn {
    display: none; /* Hide the menu button on larger screens */
}

h4.active-tab-name {
    display: none; /* A label to indicate current active tab pn small screens */
}

/* ul#menu li a padding needds to be adjusted at different screen sizes to look pretty with multi line labels */ 
@media only screen and (min-width: 960px) and (max-width: 1160px) {
    ul#menu li a {
        padding: 20px 14px;
    }
    #tagline {
    font-size: .9em;
    }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    ul#menu li a {
        padding: 10px 20px;
    }
    /* specific for the 25 yr logo */
    #header-logo {
        margin-top: 15px;
    }
    #tagline {
        font-size: .7em;
        margin-left: 2px;
    }
}
@media only screen and (max-width: 767px) {
    /* A bunch of header stuff for the smallest screen layout */ 
    #header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    #logo-container {
        width: auto; /* Allow it to shrink */
        flex: 1; /* Take as much space as possible */
        margin-top: 0;
    }
    /* specific for the 25 yr logo */
    #header-logo {
        max-width: 80%;
        margin-top:10px;
    }
    #tagline {
        font-size: .9em;
    margin: -3px 0 4px 3px;
    }
    .search-container {
        order: 3; /* Push search below in mobile */
        width: 100%; /* Full width */
        margin: 0 !important; /* override a 1140 css thing */
    }
    #upper-options {
        width: auto;
        flex: 0 0 auto; /* Only take as much space as needed */
        display: flex;
        justify-content: flex-end;
    }
    ul#menu.user-options-menu li a {
        padding: 0px 5px;
    }
    #icon-container {
        display: flex;
        gap: 5px; /* Spacing between icons */
    }
    ul#menu {
        margin-bottom: 0;
    }
    ul#menu li a {
        padding: 10px 7px;
    }
    #upper-options ul {
        margin-top: 10px;
    }

    /* header stuff mostly ends here */
   /* learning center sections menu for small screen sizes */
    nav {
        display: flex;
        flex-direction: column;
        align-items: start;
        /* margin-bottom: 10px; */
        position: relative;
        clear: both;
    }

    /* learning center dropdown button */
    .dropdown-btn {
        display: block;
        padding: 13px 8px;
        background-color: #333;
        color: white;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.9em;
        text-align: center;
        width: auto;
        max-width: 100%;
        z-index: 100;
        margin: 0;
        border-radius: 5px 5px 0 0;
        text-transform: uppercase;
    }

    /* learning center dropdown menu */
    ul#site-tabs {
        visibility: hidden;
        flex-direction: column;
        background-color: rgba(51, 51, 51, 0.9);
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: calc(100%);
        left: 0;
        z-index: 999;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.5s ease, max-height 0.5s ease, visibility 0.5s;
    }

    ul#site-tabs li a {
        display: block; 
        padding: 15px 20px;
        background-color: transparent;
        color: #fff;
        font-family: 'Archivo Narrow', Arial, sans-serif;
        font-size: 1.1em;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        transition: background-color 0.3s ease;
        width: 100%;
        box-sizing: border-box;
    }

    ul#site-tabs li {
        display: block;
        margin: 0;
        border-bottom: 1px solid #555;
        cursor: pointer;
    }

    ul#site-tabs li a:hover {
        background-color: #666;
    }

    /* Show menu on hover */
    .mobile-menu-wrapper:hover ul#site-tabs {
        visibility: visible;
        opacity: 1;
        max-height: 400px;
        overflow-y: auto;
        transition: opacity 0.5s ease, max-height 0.5s ease, visibility 0.5s ease;
        padding: 1px 0;
    }

    /* Active tab styling */
    ul#site-tabs li a.tab-selected {
        background-color: #666 !important;
        border-radius: 0px;
    }

    /* 'Currently viewing' indicator */
    ul#site-tabs li a.tab-selected:after {
        content: " ( currently viewing )";
        font-size: 0.8em;
        color: #fff;
        font-style: italic;
        margin-left: 5px;
    }

    ul#site-tabs li a.tab-selected:before {
        content: "\f105";
        font-family: 'Font Awesome 5 Pro';
        font-size: 0.8em;
        color: #fff;
        margin: 0 5px 0;
    }

    /* Currently viewing label */
    h4.active-tab-name {
        display: block;
        margin-left: 0px !important;
    }

    /* No border radiusing for inactive items */
    .tab-disabled {
        border-radius: none;
    }
}
/* could use screen height to guess when a menu might expand off screen...*/
/* Media query to adjust when near the bottom */
/* @media only screen and (max-height: 600px) {
    ul#menu li .submenu {
        top: auto;
        bottom: 100%;
        transform-origin: bottom;
    }
    ul#menu li:hover .submenu {
        transform-origin: bottom;
    }
} */

/* ...let's try expanding the last...4 menus upward, not downward. */
table#results-table tbody tr:nth-last-of-type(-n+4) ul#menu li .submenu {
    top: auto;   /* Cancel the downward positioning */
    bottom: 100%; /* Position the submenu above the parent */
    transform-origin: bottom; /* Expand upwards from the bottom */
}

/* Ensure the submenu expands upwards on hover */
table#results-table tbody tr:nth-last-of-type(-n+4) ul#menu li:hover .submenu {
    transform-origin: bottom; /* Ensure the expansion goes upwards */
}