:root {
    /* assuming logo is tallest element, then use: header padding * 2 + logo height */
    --site-header--height: calc(var(--wp--preset--spacing--medium) * 2 + 4em);
    --site-header--height-pinned: calc(1em + 2.4em);
    --site-header--height-mobile: calc(var(--wp--preset--spacing--small) * 2 + 3em);
}

body:not(.wp-admin) {
    padding-top: var(--site-header--height);
}

body.body--starts-block-core-cover {
    padding-top: 0;
}

body:is(.logged-in) .wp-block-site-header {
    top: 32px;
}

@media screen and (max-width: 1000px) {
    body:not(.wp-admin) {
        padding-top: var(--site-header--height-mobile);
    }

    body:is(.logged-in) .wp-block-site-header {
        top: 46px;
    }
}

body:is(.logged-in) .wp-block-site-header--is-pinned {
    top: 0;
}

.wp-block-site-header {
    background-color: var(--wp--preset--color--border-light);
    margin: 0 auto;
    padding: var(--wp--preset--spacing--medium);
    position: fixed;
    top: 0;
    transition: padding 0.15s ease-in-out;
    width: 100%;
    z-index: 9999;
}

@media screen and (max-width: 1000px) {
   .wp-block-site-header {
        padding: var(--wp--preset--spacing--small);
   }
}

.home .wp-block-site-header {
    background-color: transparent;
}

.site-header__container {
    align-items: center;
    column-gap: 3.2em; /* 60 / 18.64 */
    display: flex;
    max-width: 1360px !important;
}

.site-header__logo img,
.site-header__logo-pinned img {
    display: block;
    height: 4em;
    transition: all 0.15s ease-in-out;
    width: auto;
}

.site-header__logo-pinned {
    display: none;
    position: relative;
    z-index: 3;
}

.home .site-header__logo-pinned {
    display: block;
}

.home .site-header__logo {
    display: none;
}

.site-header__mobile-nav-status {
    display: none;
}

/* Account for fixed site header in content padding
--------------------------------------------- */

/* Set default minimum height for hero area, max of 789px which is the height of the globe bg */
/* .page-template-page-no-title .entry-content > :first-child.wp-block-cover.alignfull {
    min-height: min(100dvh, 789px);
} */

/* Set default minimum padding for hero content */
.page-template-page-no-title .entry-content > :first-child.wp-block-cover.alignfull > .wp-block-cover__inner-container {
    padding-top: calc(var(--site-header--height) + var(--wp--preset--spacing--x-large));
    padding-bottom: var(--wp--preset--spacing--medium);
}

@media screen and (max-width: 1000px) {
    .page-template-page-no-title .entry-content > :first-child.wp-block-cover.alignfull > .wp-block-cover__inner-container {
        padding-top: calc(var(--site-header--height-mobile) + var(--wp--preset--spacing--small));
        padding-bottom: var(--wp--preset--spacing--small);
    }
}

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

.wp-block-site-header--is-pinned,
.home .wp-block-site-header--is-pinned {
    background-color: var(--wp--preset--color--main);
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.wp-block-site-header--is-pinned .site-header__logo {
    display: none;
}

.wp-block-site-header--is-pinned .site-header__logo-pinned {
    display: unset;
}

.wp-block-site-header--is-pinned .site-header__logo-pinned img {
    display: block !important;
    height: 2.4em;
    width: auto;
    animation-direction: reverse;
    transition: all 0.15s ease-in-out;
}

.wp-block-site-header--is-pinned .site-nav-links > .menu-item > a {
        color: var(--wp--preset--color--base);
    }

/* Desktop Navigation
--------------------------------------------- */

@media (min-width: 1001px) {
    .site-header__mobile-nav-trigger {
        display: none;
    }

    /* Desktop Nav Links
    --------------------------------------------- */

    .site-header__nav {
        align-items: center;
        display: flex;
        gap: var(--wp--preset--spacing--medium);
        margin-left: auto;
    }

    .site-nav-links {
        align-items: center;
        display: flex;
        gap: var(--wp--preset--spacing--medium);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav-links > .menu-item {
        font-size: var(--wp--preset--font-size--base);
        margin: 0;
        position: relative;
    }

    .site-nav-links > .menu-item > a {
        color: var(--wp--preset--color--main);
        font-weight: 700;
        text-decoration: none;
    }

    .home .site-nav-links > .menu-item > a,
    .site-nav-links > .menu-item.wp-element-button > a {
        color: var(--wp--preset--color--base);
    }

    .site-nav-links > .menu-item.wp-element-button > a:hover {
        color: var(--wp--preset--color--main) !important;
    }

    .site-nav-links .wp-element-button {
        text-transform: uppercase;
    }

    /* Desktop Dropdowns
    --------------------------------------------- */

    .site-nav-links .sub-menu {
        display: none;
        left: 0;
        list-style: none;
        min-width: 100%;
        padding: 0;
        position: absolute;
        top: 100%;
    }

    .site-nav-links .sub-menu > .menu-item {
        font-size: var(--wp--preset--font-size--x-small);
        margin: 0;
        white-space: nowrap;
    }

    .site-nav-links .sub-menu > .menu-item a {
        background-color: var(--wp--preset--color--base);
        border-bottom: 2px solid var(--wp--preset--color--border-light);
        color: var(--wp--preset--color--main);
        display: block;
        padding: 0.5em 1em;
        text-decoration: none;
    }

    .site-nav-links .sub-menu > .menu-item a:hover {
        color: var(--wp--preset--color--main-accent);
    }

    .site-nav-links > .menu-item:hover .sub-menu {
        display: block;
    }
}

/* Mobile Navigation
--------------------------------------------- */

@media (max-width: 1000px) {
    /* Mobile Menu Trigger
    --------------------------------------------- */

    .site-header__logo img,
    .site-header__logo-pinned img {
        height: 3em;
    }

    .site-header__logo-pinned {
        display: block;
        position: relative;
        z-index: 1000;
    }

    .site-header__logo {
        display: none;
    }

    .site-header__mobile-nav-trigger {
        align-items: center;
        cursor: pointer;
        gap: var(--wp--preset--spacing--20);
        margin-left: auto;
        text-transform: uppercase;
        width: auto;
    }

    .site-header__mobile-nav-trigger-text {
        color: var(--wp--preset--color--base);
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }

    .site-header__mobile-nav-burger {
        background: var(--wp--preset--color--base);
        display: block;
        height: 2px;
        position: relative;
        top: 0;
        width: 14px;
    }

    .site-header__mobile-nav-burger::before,
    .site-header__mobile-nav-burger::after {
        background: var(--wp--preset--color--base);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 5px;
        transition: all 0.15s ease-in-out;
        width: 100%;
    }

    .site-header__mobile-nav-burger::after {
        top: -5px;
    }

    .site-header__mobile-nav-status:checked ~ .site-header__mobile-nav-trigger .site-header__mobile-nav-burger {
        background: transparent;
    }

    .site-header__mobile-nav-status:checked ~ .site-header__mobile-nav-trigger .site-header__mobile-nav-burger::before,
    .site-header__mobile-nav-status:checked ~ .site-header__mobile-nav-trigger .site-header__mobile-nav-burger::after {
        top: 0;
    }

    .site-header__mobile-nav-status:checked ~ .site-header__mobile-nav-trigger .site-header__mobile-nav-burger::before {
        transform: rotate(-45deg);
    }

    .site-header__mobile-nav-status:checked ~ .site-header__mobile-nav-trigger .site-header__mobile-nav-burger::after {
        transform: rotate(45deg);
    }

    .site-header__mobile-nav-trigger {
        display: flex;
    }

    /* Mobile Flyout Menu 
    --------------------------------------------- */

    .site-header__logo,
    .site-header__mobile-nav-trigger {
        z-index: 3;
    }

    .wp-block-site-header::before {
        background-color: var(--wp--preset--color--primary);
        content: "";
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        z-index: 2;
    }

    .site-header__nav {
        background: var(--wp--preset--color--primary);
        border-bottom: 5px solid var(--wp--preset--color--main-accent);
        display: block;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 100%;
        transform: translateY(calc(-100% - 5px));
        transition: transform 0.15s ease-in-out;
        width: 100%;
        z-index: 1;
    }

    .site-header__mobile-nav-status:checked ~ .site-header__nav {
        transform: translateY(0);
    }

    .site-header__nav-links {
        font-size: var(--wp--preset--font-size--x-large);
        list-style: none;
        margin: 0;
        padding: 2em;
        text-align: center;
    }

    .site-header__nav-links > .menu-item:not(.wp-element-button) {
        font-family: var(--wp--preset--font-family--meno-display);
        font-size: var(--wp--preset--font-size--3-xl);
        font-style: italic;
        line-height: 1;
        padding: 0;
    }

    .site-header__nav-links > .menu-item.wp-element-button {
        font-size: var(--wp--preset--font-size--2-xl);
        font-weight: 700;
        margin-top: var(--wp--preset--spacing--medium);
        line-height: 1;
        text-transform: uppercase;
    }

    .site-header__nav-links > .menu-item > a:link,
    .site-header__nav-links > .menu-item > a:visited {
        color: var(--wp--preset--color--base);
    }

    .site-header__nav-links > .menu-item > a {
        display: block;
        padding: 0.5em 0;
    }

    .site-header__nav-links .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-header__nav-links .sub-menu > .menu-item {
        font-size: var(--wp--preset--font-size--medium);
    }
}
