﻿
/* SITE HEADER STYLES
----------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #80298F;
}


/* Navigation - Secondary Menu */

.secondary-menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

    .secondary-menu-container.js-scrolling {
        justify-content: space-around;
        padding: 0 !important;
    }

@media screen and (max-width: 345px) {
    .secondary-menu-container {
        flex-wrap: nowrap;
    }
    .secondary-menu ul {
        gap: 0 !important;
    }
        .secondary-menu ul:first-of-type button,
        .secondary-menu ul:first-of-type li.icon a,
        .secondary-menu ul:first-of-type li a {
            padding: 0 0.5rem !important;
        }
}


.secondary-menu {}

    .secondary-menu ul {
        display: flex;
        margin: 0;
        padding-left: 0;
        justify-content: center;
        align-items: center;
        list-style-type: none;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
    }

        .secondary-menu ul li a,
        .secondary-menu ul li button {}
        .secondary-menu ul:first-of-type button,
        .secondary-menu ul:first-of-type li.icon a {
            padding: 0 0.75rem;
        }
        .secondary-menu ul:first-of-type button img {
            padding-bottom: 2px;
        }
            .secondary-menu ul:first-of-type li.icon a img {
/*                padding-bottom: 2px;*/
            }
        .secondary-menu ul:first-of-type li a {
            padding: 1.25rem 0.75rem;
        }
            .secondary-menu ul:first-of-type li a .fa-bars:before {
                content: "\f0c9";
                font-size: 1.25rem;
            }
        .secondary-menu ul:first-of-type li.item-search {
            padding: 0;
        }

        .secondary-menu ul li > a {
            color: #fff;
            text-transform: uppercase;
            text-decoration: none;
            letter-spacing: 0.05rem;
        }

            .secondary-menu ul li > a:hover,
            .secondary-menu ul li > button:hover {
                opacity: 0.75;
            }

        .secondary-menu ul.sub-menu {
            margin-top: 0.5rem;
                margin-top: 1.25rem;
            margin-left: -0.25rem;
            background-color: rgb(128 41 143 / 0.95);
            border: 0;
            color: #fff;
            text-transform: unset;
            text-decoration: none;
            box-shadow: 0 5px 5px rgb(0 0 0 / 0.25);
        }
            .secondary-menu ul.sub-menu li {
                padding: 0;
                border-bottom: 1px solid rgb(255 255 255 / 0.25);
                width: auto;
            }
            .secondary-menu ul.sub-menu li:last-child {
                border-bottom: 0;
            }
                .secondary-menu ul.sub-menu li a {
                    display: block;
                    min-width: 225px;
                    padding: 0.5rem 1rem;
                    text-transform: unset;
                }
                .secondary-menu ul.sub-menu li a:hover {
                    background-color: #000;
                    color: #fff;
                    opacity: 1;
                }

/* Sub Menu */
    .secondary-menu ul.sub-menu ul.sub-menu {
        margin-top: -37px;
        margin-left: 100%;
        box-shadow: none;
        background-color: rgb(128 41 143 / 0.95);
        border: 0;
        border-bottom: 1px solid rgb(255 255 255 / 0.25);
    }



    .secondary-menu .item-search button {
        padding: 0;
        background-color: transparent;
        border: 0;
    }

    .secondary-menu .item-membership,
    .secondary-menu .item-login,
    .secondary-menu .item-search {
        display: none;
    }
    .secondary-menu.sticky {
        display: none;
    }

    /*recursive navigation*/
.primary-menu .nav-secondary-child-link + .sub-menu {
    width: 100%;
    min-width: fit-content;
    margin-left: 100%;
    margin-top: -52px;
    box-shadow: none;
}

.hours-bar {
    width: 100%;
    background-color: #000;
    border-bottom: 1px solid #666;
}
    .hours-bar p {
        margin-bottom: 0;
        padding: 5px;
        color: #fff;
        font-size: 1rem;
        text-align: center;
    }
    .hours-bar p a {
        color: #fff;
    }

@media screen and (min-width: 768px) {
    .mobile-only.hours-bar,
    .mobile-only.hours-bar.js-scrolling {
        display: none;
    }
}

/* add some margin before logo on mobile to match the right margin on the toggle */
.secondary-menu-container .mobile-only a {
    margin-left: 0.75rem;
    font-size: 1rem;
}


@media screen and (min-width: 992px) {
    .secondary-menu-container {
        justify-content: flex-end;
        padding: 1.25rem 0;
    }

    .secondary-menu ul {
    }

    .secondary-menu .item-membership,
    .secondary-menu .item-login,
    .secondary-menu .item-search {
        display: unset;
    }

    .secondary-menu .item-membership-icon,
    .secondary-menu .item-login-icon,
    .secondary-menu .nav-toggle {
        display: none;
    }

    .mobile-only {
        display: none;
    }

        .mobile-only.js-scrolling {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

    .secondary-menu.sticky {
        display: none;
    }

        .secondary-menu.sticky.js-scrolling {
            display: flex;
        }

            .secondary-menu.sticky.js-scrolling .chevron.right {
                position: absolute;
                right: 1rem;
            }

}

@media screen and (min-width: 992px) {
    .secondary-menu-container.js-scrolling-top {
        justify-content: space-between;
        padding: 0.5rem 0;
    }
    .secondary-menu.sticky.js-scrolling .btn-buy-tickets {
        display: none;
    }
    .js-scrolling-top .secondary-menu .item-login-icon {
        display: unset !important;
    }
    .js-scrolling-top .secondary-menu .item-login {
        display: none !important;
    }
    /* end Navigation - Secondary Menu */
}


@media screen and (max-width: 992px) {
    .primary-menu-container {
        display: none;
    }
}

    @media screen and (min-width: 992px) {
        .primary-menu-bg {
            background-color: #fff;
        }

        .primary-menu-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .primary-menu-container a.logo img {
                /* rendered size 233 x 149px */
                /* width: 95%;*/
                object-fit: contain;
            }

            .primary-menu-container .chevron.right {
                position: absolute;
                right: 1rem;
            }

            .primary-menu-container.js-scrolling {
                display: none;
            }

        .primary-menu ul {
            display: flex;
            align-items: center;
            list-style-type: none;
            margin-bottom: 0;
            gap: 1rem;
        }

            .primary-menu ul li {
                text-transform: uppercase;
            }

                .primary-menu ul li a {
                    display: inline-block;
                    text-decoration: none;
                    width: 100%;
                    padding: .75rem;
                    color: #000;
                    border-bottom: solid 1px rgba(255,255,255,.5);
                    transition: 0.14s ease-in-out;
                    letter-spacing: 0.05rem;
                    font-size: 1.15rem;
                }

                    .primary-menu ul li a:hover,
                    .primary-menu ul li a:focus-within {
                        background-color: #eee;
                    }

                    .primary-menu ul li a.btn {
                        color: #fff;
                    }

                    .primary-menu ul li a:hover.btn {
                        background-color: #000000;
                    }

        li:focus-within a {
            outline: none;
        }

        ul li ul.sub-menu {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            transition: all 0.5s ease;
            display: none;
            list-style: none;
            text-align: left;
            border: 1px solid rgb(0 0 0 / .125);
            box-shadow: 0 5px 5px rgb(0 0 0 / 0.25);
        }
        /*
            Important we preface with nav here or unexpected
            things will happen in nested lists in RTE 🙃🙃🙃
        */
        nav ul li:hover > ul,
        nav ul li:focus-within > ul,
        nav ul li ul:hover {
            visibility: visible;
            opacity: 1;
            display: block;
            padding: 0;
            background-color: #fff;
        }

        .primary-menu ul li ul.sub-menu li {
            font-weight: normal;
            text-transform: none;
            border-bottom: 1px solid rgb(0 0 0 / .125);
        }

        ul li ul li {
            clear: both;
            width: 100%;
        }

        .primary-menu-container .sub-menu .chevron.right {
            display: contents;
            margin-left: 1rem;
        }
    }
    /* end Navigation - Primary Menu (Desktop) */



    /* Navigation - Mobile Menu  */
    .mobile-menu {
        background-color: rgb(128 41 143 / 0.95);
        color: #fff;
        text-transform: unset;
        text-decoration: none;
        box-shadow: 0 5px 5px rgb(0 0 0 / 0.25);
        transform-origin: top;
        transform: scale(1, 0.1);
        opacity: 0;
    }

        .mobile-menu a {
            color: #fff;
            text-decoration: none;
        }

            .mobile-menu a:hover {
                background-color: #000;
                color: #fff;
            }

        .mobile-menu a {
            display: block;
            width: 100%;
            padding: 0.5rem 1rem;
            border-top: 1px solid rgb(255 255 255 / 0.25);
        }

        .mobile-menu ul {
            display: none;
        }

        .mobile-menu.visible {
            transform: scale(1, 1);
            opacity: 1;
            transition: all 0.7s ease 0s;
            border-top: 1px solid white;
        }

            .mobile-menu.visible ul {
                display: block;
                margin: 0;
                padding: 0;
                list-style: none;
            }

                .mobile-menu.visible ul li a.nav-secondary-child-link {
                    padding-left: 2rem;
                }

                    .mobile-menu.visible ul li a.nav-secondary-child-link + ul li a {
                        padding-left: 4rem;
                    }

            .mobile-menu.visible .btn-buy-tickets,
            .mobile-menu.visible .chevron {
                display: none;
            }




    .secondary-menu ul li.mobile-menu-toggle {
        position: relative;
        top: 5px;
    }

    @media screen and (min-width: 992px) {
        .mobile-menu-toggle .icon-toggle {
            display: none;
        }

        .mobile-menu.visible {
            display: none;
        }
    }

    @media screen and (min-width: 1200px) {
        .primary-menu ul li a {
            padding: .75rem 1.25rem;
            font-size: 1.25rem;
        }
    }

    /* end Navigation - Mobile Menu  */





    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    /*@media screen and (max-width: 768px) {

    .mobile-menu-toggle a.icon-toggle {
        float: right;
        display: block;
    }
}*/

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    /*@media screen and (max-width: 600px) {
    .mobile-menu-toggle.visible {
        position: relative;
    }

        .mobile-menu-toggle.visible a.icon-toggle {
            position: absolute;
            right: 0;
            top: 0;
        }
}*/
