/* ------ MENU STUFF ----- */
.mod-menu {
    /* Overall menu item, includes the outer padding */
    list-style-type: none;
    width: 100%;
    margin: 0;
    font-size: 1.0em;
    font-weight: bold;
    font-family: var(--main-font-family);
    padding: 0;

}

.mod-menu a:any-link{
    /* All links in the L1 menu*/
    color: white;
    text-decoration: none;
}

.mod-menu > li:has(.menuRight) {
    margin-left: auto;
}

.mod-menu > .nav-item {
    /* L1 Menu items - The red bit*/
    position: relative;
    display: inline-block;
    color: var(--por-white);
    text-align: center;
    margin: 0;
    padding: 10px 2.5%;
}

.mod-menu > .nav-item:hover {
    background: linear-gradient(180deg, var(--por-dark-red) 85%, var(--por-not-black) 100%);
    box-shadow: inset 0 -5px 3px -2px #ffbf00, inset 0 0 10px 0 #250000;
}


.parent > a::after {
    /* Adds the dropdown arrown from google icons to L1 parent items */
    font-family: Material Symbols Rounded;
    position: absolute;
    content: "\E5C5";
    color: white;
    font-size: 18px;
}

.mod-menu__heading::after {
    /* Adds dropdown to menu headings */
    font-family: Material Symbols Rounded;
    position: absolute;
    content: "\E5C5";
    color: white;
    font-size: 18px;
}

.mod-menu__toggle-sub {
    /* This inherits from the default button in user agent style, so override to match mod-menu parent*/
    font-family: var(--main-font-family);
    font-size: 1em;
    font-weight: bold;
    color: var(--por-white);

    /* Remove some of the base button effects */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;

    cursor: pointer;
}


/* ----- MENU LEVEL 2 ----- */

.parent:hover > .mod-menu__sub {
    /* Make L2 display */
    display: block;
}

.mod-menu__sub {
    /* Universal subcontainer for drop downs */
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 2px 2px 5px 1px var(--por-shadow-color);
    margin-top: 10px;
    z-index: 5;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px;
    left: 0;
}


.mod-menu__sub a:any-link {
    /* Recolors links in all sub-menu*/
    color: black;
}


.mod-menu__sub > .nav-item:hover {
    /* Style child menu when hovered*/
    background-color: var(--por-flame-red);
    color: var(--por-white);
    border-radius:5px;


}

.mod-menu__sub > .nav-item:hover > a:any-link {
    color: var(--por-white);
}


.mod-menu__sub > li {
    /* Menu Level 2 & 3 - Child items - dropdown content */
    color: var(--por-not-black);
    padding: 10px 15px;
    margin: 0 0 5px 0;
    text-decoration: none;
    display: block;
    text-align: left;
}

.mod-menu__sub > li:last-child{
    /* Remove margin from last sub-menu item so there's not a weird gap*/
    margin: 0;
}


.mod-menu__sub .nav-item.parent .mod-menu__heading::after {
    /* Adds the dropdown arrow from google L2 icons to parent items */
    font-family: Material Symbols Rounded;
    position: absolute;
    content: "\E5C5";
    color: var(--por-not-black);
    font-size: 18px;
}

.mod-menu__sub > .nav-item:hover .mod-menu__heading::after {
    color: var(--por-white);
}


.mod-menu__sub .nav-item .mod-menu__heading::after {
    /* Keep the arrow off L2 heading only */
    content: none;
}



/* ----- MENU L3 STUFF ----- */

.mod-menu__sub .mod-menu__sub {
    /* L3 menu subcontainer*/

    left: 97%;
    margin-top: -30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.mod-menu__sub > .parent:hover .mod-menu__sub {
    /* Make L3 display */

    display: block;
}

.mod-menu__sub .nav-item .mod-menu__sub .nav-item .mod-menu__heading::after {
    /* Keep the arrow off L3 menu items */
    content: none;
}


.menuRight{
    /* Make the login & account menus go to the screen right*/
    float: right;
}


/* ----- MOBILE MENU STUFF ----- */
.mobi-label {
    display: inline-block;
    position: absolute;
    cursor: pointer;
}

.mobi-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 45px;
    width: 45px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 420;
    background: linear-gradient(180deg, var(--por-flame-red) 85%, var(--por-dark-red) 100%);
}
.checkmark::after {
    width: 50px;
    height: 50px;
    position: absolute;
    font-family: Material Symbols Rounded;
    color: var(--por-not-white);
    content: "\e5d2";
    font-size: 39px;
    text-align: center;
    top: 12.5%
}

.checkmark:hover {
    background-color: var(--por-dark-red);
}

.checkmark.isChecked {
    width: 50px;
    height: 50px;
    background: var(--por-dark-red);
    box-shadow: inset 0 0 10px 0 #250000;
}

.mobiMenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0 2px 5px 1px var(--por-shadow-color);
}

.mobiMenu.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 45px;
}

.mobiMenu > .nav-item {
    text-align: left;
}

.mobiMenu .parent:hover > .mod-menu__sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mobiMenu > .nav-item:hover {
    width: 90%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient(90deg, var(--por-dark-red) 15%, var(--por-flame-red) 100%);
}

.mobiMenu .mod-menu__sub .mod-menu__sub {
    left: unset;
    margin-top: unset;
}

.mobiMenu .mod-menu__sub > li {
    width: calc(100% - 15px);
}

.mobiMenu .mod-menu__sub{
    position:relative;

}