/* the nav bar should be colored to the site section, with white text */
nav {
    background: var(--dark);
    color: #fff;
    width: 100%;
}

/* the nav bar needs to be forced to a certain size and position at the top of the screen, for members who chose to fix it at the top as they scroll */
body {
    padding-top: 48px;
}
nav {
    height: 62px;
    position: fixed;
    top: 0;
}

/* extend the entire nav bar when the nav menu toggle is used */
body.nav-toggled {
    padding-top: 0px;
}
body.nav-toggled nav {
    height: auto;
    position: relative;
}

/* line-wrap each navigation menu link when the nav menu toggle is used */
body.nav-toggled span.nav-link {
    display: block;
}





/* the nav menu toggle should have a white border and a margin, unlike other buttons */
button#nav-menu-toggle {
    border: 1px solid #fff;
    margin-top: 13px;
}

/* hide the nav menu toggle on large screens */
@media (min-width: 1000px) {
    button#nav-menu-toggle {
        display: none;
    }
}





/* hide the navigation menu on small screens */
@media (max-width: 1000px) {
    div#navigation-menu {
        display: none;
    }
}

/* show and wrap the navigation menu when the nav menu toggle is used */
body.nav-toggled div#navigation-menu {
    display: inline;
}





/* the dashboard button in the nav bar should have a white border and a margin, unlike other buttons */
nav a.button {
    border: 1px solid #fff;
    margin-top: 13px;
}





/* nav menu links should be white and not underlined */
span.nav-link,
span.nav-link:hover {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

/* adjust the position and spacing of each main link in the nav */
span.nav-link {
    display: inline-block;
    line-height: 20px;
    margin-right: -4px;
    padding: 20px 15px;
    position: relative;
}

/* nav menu links should use the site section color on hover */
span.nav-link:hover,
span.nav-link.showing {
    background: var(--medium);
}

/* the site name should be in bold in the nav menu, and shifted to the left to match the page text */
span.nav-link.site {
    font-weight: bold;
    margin-left: -15px;
}

/* the nav links should be left-aligned when using the reduced-width screen */
body.nav-toggled span.nav-link {
    margin-left: 0;
}





/* dropdown menus should be hidden by default and floating on the page when shown */
ul.dropdown-menu {
    display: none;
    position: absolute;
}

/* dropdown menus should be styled */
ul.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    list-style-type: none;
    margin: 0;
    padding-bottom: 1em;
    padding-inline: 0;
    padding-top: 1em;
}

/* dropdown menus should use their assigned colors */
ul.dropdown-menu.site {
    background: var(--site-dark);
}
ul.dropdown-menu.goo {
    background: var(--goo-dark);
}
ul.dropdown-menu.tmr {
    background: var(--tmr-dark);
}
ul.dropdown-menu.tc {
    background: var(--tc-dark);
}
ul.dropdown-menu.rb {
    background: var(--rb-dark);
}

/* dropdown menus should push down page content on the reduced-width screen */
body.nav-toggled ul.dropdown-menu {
    position: initial;
}







/* dropdown menu dividers should be empty, drawing their line with a border instead */
ul.dropdown-menu hr {
    height: 0px;
}

/* dropdown menu dividers should use the color of their section of the site */
ul.dropdown-menu.site hr {
    border: 1px solid var(--site-light);
}
ul.dropdown-menu.goo hr {
    border: 1px solid var(--goo-light);
}
ul.dropdown-menu.tmr hr {
    border: 1px solid var(--tmr-light);
}
ul.dropdown-menu.tc hr {
    border: 1px solid var(--tc-light);
}
ul.dropdown-menu.rb hr {
    border: 1px solid var(--rb-light);
}





/* dropdown menu headings should be styled */
ul.dropdown-menu span.dropdown-heading {
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* dropdown menu headings should use the color of their section of the site */
ul.dropdown-menu.site span.dropdown-heading {
    color: var(--site-light);
}
ul.dropdown-menu.goo span.dropdown-heading {
    color: var(--goo-light);
}
ul.dropdown-menu.tmr span.dropdown-heading {
    color: var(--tmr-light);
}
ul.dropdown-menu.tc span.dropdown-heading {
    color: var(--tc-light);
}
ul.dropdown-menu.rb span.dropdown-heading {
    color: var(--rb-light);
}





/* dropdown menu links should be styled */
ul.dropdown-menu a {
    color: #fff;
    cursor: pointer;
    display: block;
    padding: 5px 20px;
    text-decoration: none;
}

/* dropdown menu links should lighten on hover */
ul.dropdown-menu.site a:hover {
    background: var(--site-medium);
}
ul.dropdown-menu.goo a:hover {
    background: var(--goo-medium);
}
ul.dropdown-menu.tmr a:hover {
    background: var(--tmr-medium);
}
ul.dropdown-menu.tc a:hover {
    background: var(--tc-medium);
}
ul.dropdown-menu.rb a:hover {
    background: var(--rb-medium);
}





/* the subnav should be gray with a bottom line */
div#subnav {
    background: var(--header-footer-background);
    border-bottom: solid 1px var(--header-footer-border);
}

/* the subnav text needs extra padding at the top */
div#subnav p {
    padding-top: 15px;
}

/* the search form needs individual positioning */
div#search-form {
    margin-top: 0.5em;
}

/* on small screens, break the subnav into two lines, and pad the top */
@media (max-width: 1000px) {
    div#subnav div.container {
        padding-top: 2em;
    }
    div#subnav p {
        clear: both;
    }
}





/* the page title needs a larger font */
h1 {
    font-size: 3em;
    margin: 0;
}

/* the page title should have additional styling around it */
div#page-header {
    border-bottom: 1px solid #eee;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}