@use '../../styles/tools/functions';
@use '../../styles/settings/colours';

.SiteMainMenuBar {
    > .MenuItem {
        position: relative;

        > .MenuItemLink {
            display: inline-block;
            padding: calc(0.5em + functions.pxRem(2)) 0.5em 0.5em 0.5em;
            line-height: 1; 
            font-weight: 700;
        
            @media all and (min-width: functions.em(1024)) {
                padding-left: 0.5em;
                padding-right: 0.5em;
            }
        
            @media all and (min-width: functions.em(1200)) {
                padding-left: 1em;
                padding-right: 1em;
            }
        
            @media all and (min-width: functions.em(1440)) {
                padding-left: 1.5em;
                padding-right: 1.5em;
            }
       
            &--Active {
                .MenuItemTitle:after {
                    width: calc(100% - 0em);
                    opacity: 1;
                    transition: width 0.3s, opacity 0.3s, background-color 0.3s;
                }
            }
        }
    }

    &--White {
        color: #FFF;

        .menu-item a:after {
            background-color: #FFF;
        }
    }
}

.Outer {
    display: none;

    @media all and (min-width: functions.em(960)) {
        display: flex;
        align-items: center;
        row-gap: 0.25em;
    }
}

.MenuItemTitle {
    display: inline-block;

    &:after {
        content: '';
        width: calc(100% - 1em);
        display: block;
        margin-left: auto;
        margin-right: auto;
        opacity: 0;
        border-bottom: functions.pxRem(2) solid;
        transition: width 0s 0.3s, opacity 0.3s;

        @media (prefers-reduced-motion) {
            width: calc(100% - 0em);
        }
    }
}

.SubMenuDropdown {
    width: var(--body-width);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    margin-top: functions.pxRem(20);
    visibility: hidden;
    display: flex;
    text-align: center;
    color: colours.$green;
    font-family: 'Modern Era', sans-serif;
    font-size: 0;
    transition: opacity 0.3s, visibility 0s 0.3s;

    &--Active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s;
    }
}

.SubMenuDropdownNotch {
    width: functions.pxRem(14);
    height: functions.pxRem(14);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: colours.$orange-light;
}

.SubMenuDropdownInner {
    max-width: var(--body-width);
    position: relative;
    background-color: colours.$orange-light;
    box-shadow: 0 0 functions.pxRem(30) rgba(0,0,0,0.2);
    pointer-events: auto;
    padding: functions.pxRem(40);
    border-radius: functions.pxRem(20);
    transform: translateX(-50%);

    .MenuItem {
        margin-bottom: functions.pxRem(14);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .MenuItemTitle {
        margin-bottom: 0.2em;
        line-height: 1.2;
        font-size: functions.pxRem(18);
        font-weight: 700;

        @media all and (min-width: functions.em(1200)) {
            font-size: functions.pxRem(20);
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    &--Columns {
        display: flex;
        padding: functions.pxRem(40) functions.pxRem(20);
        border-radius: 0;
        transform: none;
        text-align: left;

        @media all and (min-width: functions.em(1440)) {
            padding: functions.pxRem(50) functions.pxRem(20);
        }

        > .MenuItem {
            max-width: functions.pxRem(360);
            padding-left: functions.pxRem(20);
            padding-right: functions.pxRem(20);
            border-right: functions.pxRem(1) solid #F8E2E2;

            @media all and (min-width: functions.em(1440)) {
                max-width: functions.pxRem(400);
                padding-left: functions.pxRem(40);
                padding-right: functions.pxRem(40);
            }

            &:last-child {
                border-right: none;
            }

            .MenuItem, .MenuItemHeading {
                margin-bottom: functions.pxRem(20);

                @media all and (min-width: functions.em(1440)) {
                    margin-bottom: functions.pxRem(30);
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .MenuItemTitle {
            &:after {
                margin-left: 0;
            }
        }
    }
}

.MenuItemLink {
    display: inline-flex;
    text-decoration: none;
    gap: functions.pxRem(20);
       
    &:hover {
        .MenuItemTitle:after {
            width: calc(100% - 0em);
            opacity: 1;
            transition: width 0.3s, opacity 0.3s, background-color 0.3s;
        }
    }
}

.MenuItemIcon {
    width: functions.pxRem(45);
    fill: colours.$orange;
}

.MenuItemDescription {
    font-size: functions.pxRem(14);
    font-weight: 500;

    @media all and (min-width: functions.em(1200)) {
        font-size: functions.pxRem(16);
    }
}