.menuBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    background: var(--bgColor);
    border: var(--borderWidth) solid var(--borderColor);
    box-shadow: 6px 6px 0px 0px var(--shadowColor);
    color: var(--textColor);
    padding: 0px 0px 12px;
    user-select: none;
    transition: 0.2s;
    /* generic variables */
    --white: #f2f2f2;
    --black: #000000;
    /* card variables */
    --bgColor: var(--color1);
    --borderColor: var(--color2);
    --borderWidth: 3px;
    --shadowColor: var(--color4);
    --shadowColorHover: var(--color4);
    /* text variables */
    --iconColor: var(--color1);
    --headingColor: var(--white);
    --headingShadowColor: none;
    --textColor: var(--white);
    /* banner variables */
    --bannerColor: var(--color3);
    --bannerEdgeColor: var(--color2);
    --bannerEdgeWidth: 3px;
    --bannerDropShadow: var(--color4);
    --foldColor: var(--color4);


}

.menuBox:hover {
    box-shadow: 8px 8px 0px 0px var(--shadowColorHover);
}

/* Unviversal Color Testing. * /
.menuBox.green, .menuBox.red, .menuBox.orange, .menuBox.purple, .menuBox.coffee{
    --colorTest1:#f2f2f2;
    --colorTest2: #a5a5a5;
    --colorTest3: #656565;
    --bgColor: var(--colorTest1);
    --borderColor: var(--colorTest2);
    --shadowColor: var(--colorTest3);

}
/**/

.menuBox.green {
    /* ACCESSIBILITY PALETTE */
    --color1: #edfaf4;
    --color2: #7dbd94;
    --color3: #3c6e4e;
    --color4: #36503f;
}

.menuBox.red {
    /* ACCESSIBILITY PALETTE */
    --color1: #f8eae9;
    --color2: #e78f87;
    --color3: #A32E2E;
    --color4: #5A1A1A;
}

.menuBox.orange {
    /* ACCESSIBILITY PALETTE */
    --color1: #fcf3eb;
    --color2: #e7a76c;
    --color3: #A65407;
    --color4: #854c17;
}

.menuBox.purple {
    /* ACCESSIBILITY PALETTE */
    --color1: #f5effa;
    --color2: #b79dcf;
    --color3: #7746a5;
    --color4: #483a55;
}

.menuBox.blue {
    /* ACCESSIBILITY PALETTE */
    --color1: #e3f5f8;
    --color2: #3993a5;
    --color3: #274f64;
    --color4: #181935;
}

.menuBox.coffee {
    /* Coffee Specific */
    --foldColor: #843633;
    --bannerColor: #ad5451;
    --bannerEdgeColor: #e78c88;
    /* ACCESSIBILITY PALETTE */
    --color1: #f7eee4;
    --color2: #dbc1ac;
    --color3: #967259;
    --color4: #6d5645;
}


.menuBox .heading {
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 24px;
    text-transform: uppercase;
    color: var(--headingColor);
    white-space: nowrap;
    background: var(--bannerColor);
    border-bottom: var(--borderWidth) solid var(--borderColor);
    filter: drop-shadow(1px 1px 2px var(--headingShadowColor));
    line-height: 24px;
    width: 100%;
    height: fit-content;
    padding-left: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    z-index: 0;
}

.menuBox .heading i {
    font-size: 24px;
    line-height: 24px;
    height: 32px;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--iconColor);
}

.menuBox .arrowButton {
    --foldWidth: 6px;
    --foldHeight: 8px;
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 18px;
    line-height: 20px;
    color: var(--textColor);
    max-width: 65%;
    min-width: fit-content;
    padding: 4px 24px 4px calc(24px + var(--foldWidth));
    left: calc(0.5px - var(--foldWidth) - var(--borderWidth));
    position: relative;
    transition: 0.2s;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    font-variant: small-caps;
    z-index: 1;
}

.menuBox .arrowButton.disabled {
    filter: brightness(0.75) saturate(0.75);
    pointer-events: none;
}

.menuBox .arrowButton::first-letter {
    font-size: 20px;
    line-height: 20px;
}


.menuBox .arrowButton .bg {
    position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 1px var(--bannerDropShadow));
    z-index: -1;
}

.menuBox .arrowButton:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--textColor);
}

.menuBox .arrowButton .bg::before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--bannerColor);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
    border-top: var(--bannerEdgeWidth) solid var(--bannerEdgeColor);
    border-bottom: var(--bannerEdgeWidth) solid var(--bannerEdgeColor);
    box-sizing: border-box;
    z-index: 10;
    transition: 0.2s;
}

.menuBox .arrowButton::before {
    position: absolute;
    display: block;
    content: "";
    left: 0.1px;
    bottom: calc(0.1px - var(--foldHeight));
    width: var(--foldWidth);
    height: var(--foldHeight);
    background: var(--foldColor);
    clip-path: polygon(0 0, var(--foldWidth) 0, 100% 100%);
}


.menuBox .arrowButton.big {
    height: fit-content;
    max-width: 80%;
    white-space: wrap;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 24px 8px calc(24px + var(--foldWidth));
}

.menuBox .arrowButton.big .toptext {
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 18px;
    line-height: 20px;
    color: var(--white);
    font-variant: small-caps;
}

.menuBox .arrowButton.big .toptext::first-letter {
    font-size: 20px;
    line-height: 20px;
}

.menuBox .arrowButton.big .bottomtext {
    font-family: "Roboto Condensed";
    font-weight: 500;
    font-size: 18px;
    color: var(--white);
    font-variant: none;
}

.menuBox .arrowButton:hover .bg::before {
    width: calc(100% + 5px);
}

.menuBox .arrowButton.big:hover {
    text-decoration: none;
}

.menuBox .arrowButton.big:hover .toptext {
    text-decoration: underline var(--textColor);
}

/*
.menuBox .arrowButton:hover {
    max-width: calc(65% + 8px);
    padding-right: calc(8px + 8px);
}
*/


.menuBox .iconFlex {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none;
    z-index: 0;
}

.menuBox.hero .iconFlex {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
    z-index: 0;
}

.menuBox .iconFlex .icon {
    --iconDropShadow: var(--bgColor);
    height: calc(100% - 35px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
    filter: drop-shadow(0px 0px 6px var(--borderColor));
    transition: 0.2s;
    transform-origin: bottom right;
}

.menuBox:hover .iconFlex .icon {
    transform: scale(1.02);
}

.menuBox.hero .iconFlex .icon {
    height: 65%;
    transform-origin: bottom center;
}