/*-------------------------------------------------------------------
MAIN MENU  -  Driving Safety Sites

Plain CSS - no build step. Menu tokens (--menu-link-color and friends)
are defined in variables.css so they follow a palette override.

Note this theme's breakpoint is 1150px, not the 992px the drivingsafety
sites use - the menu is wider here.
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
SHARED
-------------------------------------------------------------------*/

.menu-toggle {
    display: none; /* shown only on mobile */
}
ul.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-large);
    font-weight: 800;
    text-transform: uppercase;
}
ul.main-menu a {
    display: block;
    text-decoration: none;
    color: var(--menu-link-color);
}
ul.main-menu a:hover,
ul.main-menu a:focus {
    color: var(--menu-link-hover);
}
ul.main-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-normal);
    text-transform: none;
}
.submenu-toggle {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/*-------------------------------------------------------------------
DESKTOP  ( >= 1150px )
-------------------------------------------------------------------*/

@media (min-width: 1150px) {
    ul.main-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    ul.main-menu > li {
        position: relative;
    }
    /* keep the top-level item highlighted while the cursor is over it
       OR anywhere inside its open dropdown */
    ul.main-menu > li:hover > a,
    ul.main-menu > li:focus-within > a {
        color: var(--color-reverse);
        background-color: var(--menu-link-hover);
    }
    ul.main-menu a {
        padding: .5rem .75rem;
    }
    /* dropdown panel */
    ul.main-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        background: var(--submenu-bg);
        box-shadow: var(--submenu-shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(.5rem);
        transition: opacity 150ms ease-in-out, transform 150ms ease-in-out, visibility 150ms ease-in-out;
        z-index: 1000;
    }
    ul.main-menu .sub-menu a {
        padding: .625rem .75rem;
        white-space: nowrap;
        color: var(--submenu-link-color);
    }
    ul.main-menu .sub-menu a:hover,
    ul.main-menu .sub-menu a:focus {
        color: var(--submenu-link-hover);
        background-color: var(--submenu-bg-hover);
    }
    /* nested flyout */
    ul.main-menu .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }
    ul.main-menu li:hover > .sub-menu,
    ul.main-menu li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /* caret only used on mobile */
    ul.main-menu .submenu-toggle {
        display: none;
    }
}

/*-------------------------------------------------------------------
MOBILE  ( <= 1149.98px )
-------------------------------------------------------------------*/

@media (max-width: 1149.98px) {
    /* let the drop-down panel align to the full-width <header>,
       and right-align the hamburger inside the nav */
    nav.main-nav {
        position: static;
        display: flex;
        justify-content: flex-end;
    }
    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: .3125rem;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .menu-toggle .menu-toggle-bar {
        display: block;
        width: 1.75rem;
        height: .1875rem;
        background: var(--color-reverse);
        transition: transform 150ms ease, opacity 150ms ease;
    }
    .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
        transform: translateY(.5rem) rotate(45deg);
    }
    .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
        transform: translateY(-0.5rem) rotate(-45deg);
    }
    /* fill from the bottom of the header (6.875rem) to the viewport
       bottom; the page scroll is locked while open (see html.menu-open),
       so this panel owns the only scrollbar - no double scrollbar. */
    .main-menu-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-primary);
        box-shadow: var(--submenu-shadow);
        max-height: 0;
        overflow: hidden;
        transition: max-height 200ms ease-in-out;
        z-index: 1000;
    }
    .main-menu-container.open {
        max-height: calc(100vh - 6.875rem);
        overflow-y: auto;
    }
    /* lock the page scroll while the mobile menu is open */
    html.menu-open,
    html.menu-open body {
        overflow: hidden;
    }
    /* #333333 is a divider against the dark panel, not a palette colour. */
    ul.main-menu li {
        position: relative;
        border-top: .0625rem solid #333333;
    }
    ul.main-menu a {
        padding: .875rem 1.25rem;
    }
    /* submenus collapsed until their parent is opened.
       #00000005 is a translucent scrim, not a palette colour. */
    ul.main-menu .sub-menu {
        display: none;
        background: #00000005;
    }
    ul.main-menu .sub-menu a {
        padding-left: 2.5rem;
    }
    ul.main-menu .sub-menu .sub-menu a {
        padding-left: 3.75rem;
    }
    ul.main-menu .menu-item.open > .sub-menu {
        display: block;
    }
    /* caret toggle (injected by menu.js) */
    ul.main-menu .submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.625rem;
        height: 3.5rem;
    }
    ul.main-menu .submenu-toggle::before {
        content: "";
        width: .5625rem;
        height: .5625rem;
        border-right: .125rem solid var(--color-primary);
        border-bottom: .125rem solid var(--color-primary);
        transform: rotate(45deg) translate(-0.125rem, -0.125rem);
        transition: transform 150ms ease;
    }
    ul.main-menu .menu-item.open > .submenu-toggle::before {
        transform: rotate(-135deg);
    }
}