/* X-Small (less than 576px) */
@media (max-width: 1199.98px) {
    /* Header Styles */
    header {
        background-color: var(--tdl-yellow);
        padding: var(--margin-padding-medium) 0;
        position: relative;
        & .container-fluid{
            padding: 0 var(--margin-padding-medium) !important;
        }
        & .logo {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            /* margin-bottom: var(--margin-padding-small); */ /*Removed Extra Margin*/
            & img { 
                width: 174px; /*Auto to 174px as per design*/
                cursor: pointer;
                &#menu-toggle{
                    width: 27px; /*28px to 174px as per design*/
                }
            }
            & > a { /*Centered to eliminate extra space below logo*/
                display: flex;
            }
            & .btn-holder .btn{
                border: none;
                border-radius: 0;
                & img{
                    width: 37px; /*28px to 174px as per design*/
                }
            }
        } 
        & .main-menu-wrapper {
            text-align: left;
            display: none;
            & .main-menu{
                position: absolute;
                left: 0;
                background-color: var(--tdl-white);
                width: var(--base-width);
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: calc(var(--margin-padding-medium) + 8px);
                padding: var(--margin-padding-large); /*Removed 0 for left and right padding to match design for 1. dropdown first child*/
                z-index: 999;
                margin-top: var(--margin-padding-medium); /*Added Margin top to tackle open state for dropdown*/
                & li{
                    position: relative;
                    display: inline-flex;
                    align-items: left;
                    width: var(--base-width);
                    flex-direction: column;
                    & a {
                        /* padding: 0 calc(var(--margin-padding-large) + 6px); */ /*Removed padding to match design for 2. dropdown first child*/
                        display: block;
                        text-transform: uppercase;
                        font-size: calc(var(--base-font-size) * 1.125);
                        font-family: var(--font-impact);
                        order: 1;
                    }
                    &.has-dropdown a::after {
                        content: "";
                        width: var(--base-font-size);
                        height: var(--base-font-size);
                        background-image: url('../../images/menu-arrow-mobile.png');
                        background-position: center;
                        background-size: contain;
                        position: absolute;
                        order: 2;
                        transform: translate(5px, 1px) rotate(180deg);
                    }
                    &.btn-holder{
                        display: flex;
                        justify-content: center;
                        & .btn{
                            font-family: var(--font-roboto-condensed);
                            padding: var(--margin-padding-small) var(--margin-padding-xlarge);
                            position: relative;
                            margin-bottom: var(--margin-padding-large);
                            width: var(--base-width);
                            text-align: var(--text-align-center);
                            &::after{
                                content: "*Open 24/7. Just 5 Minutes to Start!";
                                position: absolute;
                                width: var(--base-width);
                                text-align: center;
                                left: 0;
                                bottom: 0;
                                transform: translateY(125%);
                                color: var(--tdl-black);
                                font-size: var(--base-font-size);
                                font-weight: var(--font-weight-400);
                                text-transform: capitalize;
                            }
                        }
                    }
                    & ul.sub-menu{
                        order: 3;
                        display: none;
                        flex-direction: column;
                        position: static;
                        width: var(--base-width);
                        text-align: var(--text-align-left);
                        background-color: var(--tdl-white);
                        margin-top: var(--margin-padding-small);
                        & li{
                            border-radius: 0;
                            padding: 0 var(--margin-padding-small);
                            & a{
                                font-family: var(--font-roboto-condensed);
                                text-transform: capitalize;
                                line-height: 36px;
                                &:hover{
                                    text-decoration: underline;
                                }
                                &::after{
                                    display: none;
                                }
                            }
                            &:hover,
                            &:active{
                                background-color: var(--tdl-yellow-transparent-50);
                            }

                        }
                        &::before{
                            content: "";
                            position: absolute;
                            top: -8px; /* move above menu */
                            left: 50%;
                            transform: translateX(-50%);
                            border-left: 8px solid transparent;
                            border-right: 8px solid transparent;
                            border-bottom: 8px solid white; /* same color as dropdown background */
                        }
                    }
                    &:hover > ul.sub-menu{
                        display: flex;
                    }
                }
            }
        }
    }
}
/* Extra Extra Large (≥1200px) - Actual Desktop Styles */
@media only screen and (min-width: 1200px){
    /* Header Styles */
    header {
        background-color: var(--tdl-yellow);
        padding: var(--margin-padding-medium) 0;
        & .logo img {
            width: 174px;
        }
        & .main-menu-wrapper {
            text-align: right;
            & .main-menu{
                width: var(--base-width);
                justify-content: space-between;
                gap: var(--margin-padding-medium);
                & li{
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    & a {
                        text-transform: uppercase;
                        font-size: calc(var(--base-font-size) * 1.125);
                        font-family: var(--font-impact);
                        &.btn{
                            font-family: var(--font-roboto-condensed);
                        }
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    &.has-dropdown{
                        & > a::after { /*Added this inside anchor to get make arrow clickable*/
                            display: inline-block;
                            content: "";
                            width: 5px;
                            height: 5px;
                            margin-left: 6px;
                            border-right: var(--base-border-4px);
                            border-bottom: var(--base-border-4px);
                            transform: rotate(45deg) translateY(-5px);
                            transition: transform 0.3s ease;
                        }
                    }
                    /* Show submenu when parent has .active */
                    &.has-dropdown.active {
                        & > a::after {
                            transform: rotate(225deg) translateY(2px);
                            transition: transform 0.25s ease;
                        }
                        & ul.sub-menu {
                            opacity: 1;
                            transform: translate(-50%, 0);
                            pointer-events: auto;
                        }
                    }
                    & ul.sub-menu{
                        display: flex;
                        flex-direction: column;
                        position: absolute;
                        top: calc(var(--base-width) + 20px);
                        left: 50%;
                        transform: translate(-50%, -10px);
                        opacity: 0;
                        width: max-content;
                        min-width: calc(var(--base-width) * 1.30);
                        max-width: 300px;
                        text-align: var(--text-align-left);
                        background-color: var(--tdl-white);
                        border: var(--base-border);
                        border-color: var(--tdl-yellow);
                        border-radius: calc(var(--base-radius) / 2);
                        padding: var(--margin-padding-medium);
                        z-index: 1000;
                        pointer-events: none;
                        transition:
                            opacity 0.25s ease,
                            transform 0.25s ease;
                        & li{
                            border-radius: calc(var(--base-radius) * 0.2181);
                            padding: 0 var(--margin-padding-small);
                            & a{
                                font-family: var(--font-roboto-condensed);
                                text-transform: capitalize;
                                line-height: 36px;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                            &:hover{
                                background-color: var(--tdl-yellow-transparent-50);
                            }

                        }
                        &::before{
                            content: "";
                            width: fit-content;
                            position: absolute;
                            top: -8px; /* move above menu */
                            left: 50%;
                            transform: translateX(-50%);
                            border-left: 8px solid transparent;
                            border-right: 8px solid transparent;
                            border-bottom: 8px solid white; /* same color as dropdown background */
                        }
                    }
                    &:hover > ul.sub-menu{
                        display: flex;
                        opacity: 0;
                        pointer-events: none;
                    }
                }
            }
        }
    }
}