/*  
---------------------------------------------------
Header - Small Breakpoint
---------------------------------------------------  
*/

header#site-header {
    height: var(--small-header);
    overflow: hidden;
}

html:not(.reveal-out) body.transparent-header-sm header#site-header {
    position: fixed;
    width: calc(100% - var(--site-spacing_sm) - var(--site-spacing_sm));
}

html:not(.reveal-out) body.max-width.transparent-header-sm header#site-header {
    max-width: calc(var(--site-max-width) - var(--site-spacing_sm) - var(--site-spacing_sm));
}

html.reveal-out header#site-header::after {
    display: none;
}

header#site-header .container {
    width: 100% !important;
    max-width: var(--header-max-width) !important;
}

header#site-header .row {
    flex: 1;
    flex-direction: column;
}


/*  
---------------------------------------------------
Header

- Burger Navigation Open
---------------------------------------------------  
*/

/* This removes the vertical scrollbar when buger navigation is open */
html.reveal-out {
    overflow: hidden;
}
    /* END */

    html.reveal-out header#site-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: calc(100% - var(--site-spacing_sm) - var(--site-spacing_sm));
        height: 100%;
        max-height: 100%;
        overflow: auto;
    }

        html.reveal-out header#site-header .row {
            padding-bottom: var(--small-header);
        }

    html.reveal-out body.max-width header#site-header {
        max-width: calc(var(--site-max-width) - var(--site-spacing_sm) - var(--site-spacing_sm));
    }

    html.reveal-out #site {
        max-height: 100%;
    }

    /* iOS 13 issues with html, body overflow */
    html.reveal-out body {
        overflow-y: hidden;
        height: 100%;
        max-height: 100%;
    }

    html.reveal-out header#site-header {
        bottom: 0;
        overflow-x: hidden;
    }

    html.reveal-out header#site-header {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
/* iOS 13 issues with html, body overflow --- END */

/* Display none of internal header items before expanded */
html:not(.reveal-out) header#site-header nav.main,
html:not(.reveal-out) header#site-header nav.cta-links,
html:not(.reveal-out) header#site-header .site-search,
html:not(.reveal-out) header#site-header nav.secondary {
    display: none;
}


/*  
---------------------------------------------------
Header

- Transparent header
---------------------------------------------------  
*/

body.transparent-header-sm header#site-header {
    background: transparent;
}

html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header,
html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-solid,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-solid {
    background: rgba(var(--header-bg-color1), 1);
}

    html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-linear,
    html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-linear {
        background: linear-gradient(var(--header-bg-angle), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%);
    }

    html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-radial,
    html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header.header-bg-radial {
        background: radial-gradient(farthest-side at var(--header-bg-start-perc) var(--header-bg-stop-perc), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%);
    }

body.transparent-header-sm header#site-header::after {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out 0s;
    transition: opacity 0.4s ease-in-out 0s;
}

html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header::after,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header::after {
    opacity: 1;
}

html.reveal-out body.transparent-header-sm header#site-header,
html.reveal-out body.transparent-header-sm header#site-header.header-bg-solid {
    background: rgba(var(--header-bg-color1), 1);
}

    html.reveal-out body.transparent-header-sm header#site-header.header-bg-linear {
        background: linear-gradient(var(--header-bg-angle), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%);
    }

    html.reveal-out body.transparent-header-sm header#site-header.header-bg-radial {
        background: radial-gradient(farthest-side at var(--header-bg-start-perc) var(--header-bg-stop-perc), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%);
    }


/*  
---------------------------------------------------
Header

- On scroll
---------------------------------------------------  
*/

html.nav-down:not(.reached-top) body.transparent-header-sm header#site-header::after,
html.nav-up:not(.reached-top) body.transparent-header-sm header#site-header::after {
    opacity: 1;
}

/* Header */
html.nav-up body:not(.show_header-on-scroll-sm) header#site-header {
    top: calc((var(--small-header) + 5px) * -1);
}


/*  
---------------------------------------------------
Header

- Modal open, not mega menu
---------------------------------------------------  
*/

body.show_header-on-scroll-sm.modal-open:not(.no-header) header#site-header,
html:not(.nav-up) body.hide_header-on-scroll-sm.modal-open:not(.no-header) header#site-header {
    position: fixed;
}

body.show_header-on-scroll-sm.modal-open:not(.no-header) #site,
html:not(.nav-up) body.hide_header-on-scroll-sm.modal-open:not(.no-header) #site {
    padding-top: var(--small-header);
}


/*  
---------------------------------------------------
Header

- Mega nav - Modal links inside Main Navigation 
---------------------------------------------------  
*/

html:has(body.main-nav_mega-modal.mega-menu-modal),
body.main-nav_mega-modal.mega-menu-modal,
body.main-nav_mega-modal.mega-menu-modal .modal.show {
    padding: 0 !important;
}

html:has(body.main-nav_mega-modal.mega-menu-modal),
body.main-nav_mega-modal.mega-menu-modal {
    overflow: hidden !important;
}

    body.main-nav_mega-modal.mega-menu-modal #site {
        padding-top: var(--small-header);
    }

    body.main-nav_mega-modal.mega-menu-modal header#site-header {
        position: fixed;
        z-index: 1054;
    }

    body.main-nav_mega-modal.mega-menu-modal .modal-backdrop,
    body.main-nav_mega-modal.mega-menu-modal .modal {
        padding-top: 0;
        top: var(--small-header);
        height: calc(100% - var(--small-header));
    }

        body.main-nav_mega-modal.mega-menu-modal .modal .modal-dialog {
            padding: 0;
            width: 100vw;
            max-width: 100vw;
        }

/* Max width */
body.main-nav_mega-modal.max-width.mega-menu-modal header#site-header,
body.main-nav_mega-modal.max-width.mega-menu-modal .modal .modal-dialog {
    max-width: calc(var(--site-max-width) - var(--site-spacing_sm) - var(--site-spacing_sm));
}

body.main-nav_mega-modal.mega-menu-modal .modal .modal-dialog.modal-dialog-centered {
    align-items: start;
}

/* Close mega menu */
body.main-nav_mega-modal.mega-menu-modal .modal::before,
body.main-nav_mega-modal.mega-menu-modal .modal .close {
    width: var(--small-header);
    height: var(--small-header);
    line-height: var(--small-header);
}

header#site-header .row .sticky-button {
    position: absolute;
    right: 4em;
    bottom: 1em;
    font-size: 14px;
    padding: 8px 16px;
}

.reveal-out header#site-header .row .sticky-button {
    display: none;
}