/* Loaded only on desktop */


/* =========================================================
   DESKTOP BANNER
   ========================================================= */

.temple-banner-rotator__photo {
    transition: opacity 1.8s ease-in-out;
}


/* =========================================================
   NORMAL DESKTOP HEADER
   Banner first
   Navigation directly below
   ========================================================= */

.site-header:not(.header-collapsed) {
    height: auto !important;
}


/*
 * Banner remains in normal document flow.
 */
.site-header:not(.header-collapsed) .header-banner {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/*
 * Navigation is below the banner.
 */
.site-header:not(.header-collapsed) .header-banner-nav {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    width: fit-content !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 5px auto 5px auto !important;
    padding: 5px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    z-index: 20 !important;
}


/*
 * Keep Bootstrap collapse area only as wide as menu.
 */
.site-header:not(.header-collapsed)
.header-banner-nav .navbar-collapse {

    display: flex !important;

    width: auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
 * Existing desktop menu styling remains unchanged.
 */
.site-header:not(.header-collapsed)
.header-banner-nav .navbar-nav {

    width: auto !important;

    margin: 0 !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
 * Desktop does not use mobile controls.
 */
.site-header:not(.header-collapsed) .mobile-nav-dropdown {
    display: none !important;
}

.site-header:not(.header-collapsed) .navbar-toggler {
    display: none !important;
}


/* =========================================================
   COMPACT DESKTOP ROTATING BANNER
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Main rotator box.
     */
    .site-header:not(.header-collapsed)
    .temple-banner-rotator {

        position: relative !important;

        width: 100% !important;
        height: 190px !important;

        margin: 0 auto !important;

        overflow: hidden !important;
    }


    /*
     * Link wrapper.
     */
    .site-header:not(.header-collapsed)
    .temple-banner-rotator__link {

        position: relative !important;

        display: block !important;

        width: 100% !important;
        height: 190px !important;

        margin: 0 auto !important;

        overflow: hidden !important;
    }


    /*
     * Stage takes full available banner width.
     */
    .site-header:not(.header-collapsed)
    .temple-banner-rotator__stage {

        position: relative !important;

        width: 100% !important;
        height: 190px !important;

        margin: 0 auto !important;

        overflow: hidden !important;
    }


    /* =====================================================
       ROTATING TEMPLE PHOTO

       The photo itself is centred inside the full banner.
       ===================================================== */

    .site-header:not(.header-collapsed)
    .temple-banner-rotator__photo {

        position: absolute !important;

        top: 0 !important;
        left: 50% !important;

        width: 1080px !important;
        max-width: 100% !important;
        height: 190px !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;

        object-fit: cover !important;
        object-position: center center !important;

        display: block !important;

        transition: opacity 1.8s ease-in-out;
    }


    /* =====================================================
       TEMPLE TO TEMPLE TITLE / OVERLAY

       Independently centred over the banner.
       ===================================================== */

    .site-header:not(.header-collapsed)
    .temple-banner-rotator__overlay {

        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: 1080px !important;
        max-width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        display: block !important;

        z-index: 10 !important;
    }

}


/* =========================================================
   COLLAPSED DESKTOP HEADER
   ========================================================= */

.site-header.header-collapsed {
    height: 68px !important;
}


/*
 * Remove banner completely after scroll/collapse.
 */
.site-header.header-collapsed .temple-banner-rotator,
.site-header.header-collapsed .temple-circle-rotator {

    display: none !important;
}


/*
 * Collapsed navigation fixed to browser window.
 */
.site-header.header-collapsed .header-banner-nav {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100vw !important;
    max-width: none !important;

    height: 68px !important;

    margin: 0 !important;
    padding: 7px 0 !important;

    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: #f3dba5 !important;

    z-index: 2000 !important;

    box-shadow: 0 4px 12px rgba(72, 35, 14, 0.16);
}


/*
 * Collapse area only occupies actual menu width.
 */
.site-header.header-collapsed
.header-banner-nav .navbar-collapse {

    display: flex !important;

    width: 1080px !important;
    flex: none !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
 * Navigation buttons remain centred.
 */
.site-header.header-collapsed
.header-banner-nav .navbar-nav {

    display: flex !important;

    width: 1080px !important;

    margin: 0 !important;
    padding: 6px !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
 * Hide mobile controls in collapsed desktop mode too.
 */
.site-header.header-collapsed .mobile-nav-dropdown {
    display: none !important;
}

.site-header.header-collapsed .navbar-toggler {
    display: none !important;
}

@media (min-width: 992px) {

    .site-header:not(.header-collapsed) .header-banner {
        width: 1080px !important;
        max-width: calc(100vw - 40px) !important;

        margin: 0 auto !important;
        padding: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
    }

    .site-header:not(.header-collapsed) .temple-banner-rotator,
    .site-header:not(.header-collapsed) .temple-banner-rotator__link,
    .site-header:not(.header-collapsed) .temple-banner-rotator__stage {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}