/* Open Studio Navigation */

html.has-open-studio-site-header-navigation {
    overflow: hidden;
}

.open-studio-site-header-navigation-parent--sticky {
    position: sticky;
    top: 0;
    z-index: 4000;
}

/* The header/navigation are layout layers only.
   They must never block interaction with page content underneath. */
.open-studio-site-header-navigation-parent,
.open-studio-site-header-navigation {
    pointer-events: none;
}

.open-studio-site-header-navigation__breadcrumb,
.open-studio-site-header-navigation__toggle,
.open-studio-site-header-navigation__logo {
    pointer-events: auto;
}

.open-studio-site-header-navigation__breadcrumb,
.open-studio-site-header-navigation__toggle,
.open-studio-site-header-navigation__logo,
.open-studio-site-header-navigation__background {
    transition: transform 0.3s ease;
    will-change: transform;
}

.open-studio-site-header-navigation-parent--hide-on-scroll .open-studio-site-header-navigation__breadcrumb.is-hidden,
.open-studio-site-header-navigation-parent--hide-on-scroll .open-studio-site-header-navigation__toggle.is-hidden,
.open-studio-site-header-navigation-parent--hide-on-scroll .open-studio-site-header-navigation__logo.is-hidden,
.open-studio-site-header-navigation__background.is-hidden {
    transform: translateY(calc(-100% - 80px));
}

.open-studio-site-header-navigation-parent--hide-on-scroll .open-studio-site-header-navigation__breadcrumb.is-hidden,
.open-studio-site-header-navigation-parent--hide-on-scroll .open-studio-site-header-navigation__toggle.is-hidden,
.open-studio-site-header-navigation-parent--hide-on-scroll .open-studio-site-header-navigation__logo.is-hidden {
    pointer-events: none;
}

.open-studio-site-header-navigation-parent--hide-on-scroll.has-open-navigation .open-studio-site-header-navigation__breadcrumb,
.open-studio-site-header-navigation-parent--hide-on-scroll.has-open-navigation .open-studio-site-header-navigation__toggle,
.open-studio-site-header-navigation-parent--hide-on-scroll.has-open-navigation .open-studio-site-header-navigation__logo {
    transform: none !important;
    transition: none;
    will-change: auto;
}


/* Header layout — all viewport sizes */

.open-studio-site-header-navigation {
    position: relative;
    z-index: 4000;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "breadcrumb menu logo";
    column-gap: var(--block-padding-large);
    align-items: center;

    width: 100%;

    padding-top: 40px;
    padding-bottom: var(--block-padding-large);

    background: transparent;
}

/* The header background is moved to <body> by JavaScript so it can sit
   below page overlays while the navigation controls remain above them. */
.open-studio-site-header-navigation__background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;

    width: 100%;
    height: var(--open-studio-site-header-navigation-height, 0px);

    background: var(--color-secondary);
    pointer-events: none;
}

/* Overlay header behavior is page-configurable.
   While an overlay is open, persistent header controls are hidden by default.
   The page blueprint explicitly opts Breadcrumb and/or Logo back in.
   Menu/Close is always hidden; the background keeps its current scroll state
   underneath the overlay. */
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay) .open-studio-site-header-navigation__breadcrumb,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay) .open-studio-site-header-navigation__toggle,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay) .open-studio-site-header-navigation__logo {
    transform: translateY(calc(-100% - 80px)) !important;
    pointer-events: none;
}

/* The header background always leaves when a page overlay opens.
   Unlike Breadcrumb/Logo it can never be opted back in by the page. */
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
.open-studio-site-header-navigation__background {
    transform: translateY(calc(-100% - 80px)) !important;
}

html.has-open-studio-page-overlay.open-studio-overlay-reveal-breadcrumb:not(.is-closing-open-studio-page-overlay)
.open-studio-site-header-navigation__breadcrumb {
    transform: none !important;
    pointer-events: auto;
}

html.has-open-studio-page-overlay.open-studio-overlay-reveal-logo:not(.is-closing-open-studio-page-overlay)
.open-studio-site-header-navigation__logo {
    transform: none !important;
    pointer-events: auto;
}

/* A slideshow never keeps the breadcrumb visible. Target the existing site
   header directly so this overrides optional reveal rules. */
html:not(.is-closing-open-studio-page-overlay)
body:has(> .open-studio-page-overlay--slideshow)
#site-header .open-studio-site-header-navigation__breadcrumb {
    transform: translateY(calc(-100% - 80px)) !important;
    pointer-events: none;
}

@media (max-width: 991px) {
    /* Mobile overlays never keep the logo visible. */
    html:not(.is-closing-open-studio-page-overlay)
    body:has(> .open-studio-page-overlay)
    #site-header .open-studio-site-header-navigation__logo {
        transform: translateY(calc(-100% - 80px)) !important;
        pointer-events: none;
    }
}


.open-studio-site-header-navigation__breadcrumb {
    grid-area: breadcrumb;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;

    font-weight: 500;
}

.open-studio-site-header-navigation__toggle {
    position: relative;
    z-index: 1002;

    grid-area: menu;
    justify-self: center;

    margin: 0;
    padding: 0;
    border: 0;

    color: inherit;
    background: none;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.open-studio-site-header-navigation__toggle-open,
.open-studio-site-header-navigation__toggle-close {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.open-studio-site-header-navigation__toggle-close {
    display: none;
}

.open-studio-site-header-navigation--open .open-studio-site-header-navigation__toggle-open {
    display: none;
}

.open-studio-site-header-navigation--open .open-studio-site-header-navigation__toggle-close {
    display: inline;
}

.open-studio-site-header-navigation__logo {
    position: relative;
    z-index: 1002;

    grid-area: logo;
    justify-self: end;
}

.open-studio-site-header-navigation__logo img {
    display: block;
    width: 84px;
    height: auto;
}


/* Fullscreen menu */

.open-studio-site-header-navigation__menu {
    position: fixed;
    inset: 0;
    z-index: 1000;

    width: 100vw;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;

    background: var(--color-secondary);

    transform: translateX(-100%);
    visibility: hidden;
    transition:
        transform 0.3s ease,
        visibility 0s linear 0.3s;
}

.open-studio-site-header-navigation__menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform 0.3s ease,
        visibility 0s;
}

.open-studio-site-header-navigation__menu-content {
    min-height: 100%;
    padding-top: 60px;
}

.open-studio-site-header-navigation__breadcrumb,
.open-studio-site-header-navigation__toggle,
.open-studio-site-header-navigation__logo {
    position: relative;
    z-index: 1002;
}

/* Animated palette pages:
   Keep the menu itself transparent so iOS Safari can continue sampling the
   body's animated background. Fade page-level content out while the menu is
   open, leaving the body as the uninterrupted menu background. */
body.has-open-studio-palette-background > main,
body.has-open-studio-palette-background > .open-studio-page-footer,
body.has-open-studio-palette-background > .open-studio-micro-site-footer-navigation-wrapper,
body.has-open-studio-palette-background > .open-studio-site-footer {
    transition: opacity 0.3s ease;
}

html.has-open-studio-site-header-navigation body.has-open-studio-palette-background > main,
html.has-open-studio-site-header-navigation body.has-open-studio-palette-background > .open-studio-micro-site-footer-navigation-wrapper {
    opacity: 0;
    pointer-events: none;
}



/* Manifesto/palette + slideshow:
   keep an already-open navigation open, but remove its own background surface.
   The animated body remains the single visible background behind both layers. */
html.has-open-studio-page-overlay
body.has-open-studio-palette-background
.open-studio-site-header-navigation__menu {
    background: transparent !important;
}

html.has-open-studio-page-overlay
body.has-open-studio-palette-background
.open-studio-site-header-navigation__background {
    background: transparent !important;
}


/* Manifesto/palette + overlay:
   keep the navigation itself open/transparent, but hide its menu content
   while an overlay is active. */
body.has-open-studio-palette-background
.open-studio-site-header-navigation__menu-content {
    transition: opacity 0.3s ease;
}

html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body.has-open-studio-palette-background
.open-studio-site-header-navigation__menu-content {
    opacity: 0;
    pointer-events: none;
}