/* Open Studio Page Overlay */

html.has-open-studio-page-overlay {
    overflow: hidden;
}

.open-studio-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3000;

    width: 100%;
    height: 100dvh;

    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--color-secondary, #fafafa);

    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.open-studio-page-overlay.is-open {
    transform: translateX(0);
}

/* Directly visited overlay pages use the same visual state without
   waiting for JavaScript to animate them in. */
body.is-open-studio-overlay-page > :not(.open-studio-page-overlay) {
    visibility: hidden;
}

body.is-open-studio-overlay-page > .open-studio-page-overlay {
    transform: translateX(0);
}

.open-studio-page-overlay:not(.open-studio-page-overlay--slideshow) .open-studio-page-overlay__content {
    min-height: 100%;
    background: var(--open-studio-overlay-color, #fafafa);
}

.open-studio-page-overlay__header {
    position: sticky;
    top: 0;
    z-index: 1;

    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    padding-top: 60px;
    padding-inline: var(--block-padding-large);

    background: var(--open-studio-overlay-color, #fafafa);
}

.open-studio-page-overlay__close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;

    appearance: none;
    background: none;
    color: inherit;
    cursor: pointer;
}

.open-studio-page-overlay__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.open-studio-page-overlay__close line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

@media (min-width: 992px) {
    .open-studio-page-overlay {
        width: 50vw;
    }
}

/* Overlay backgrounds are independent from the underlying page/header. */
.open-studio-page-overlay[data-open-studio-overlay-background="animated"] .open-studio-page-overlay__header,
.open-studio-page-overlay[data-open-studio-overlay-background="animated"]:not(.open-studio-page-overlay--slideshow) .open-studio-page-overlay__content {
    transition: background-color 4000ms ease-in-out;
}

.open-studio-page-overlay[data-open-studio-overlay-background="animated"] {
    transition: transform 0.3s ease;
}

/* On palette/animated pages the body remains the only colored surface.
   Overlays are transparent and the underlying page content is hidden,
   mirroring the fullscreen menu architecture. */
body.has-open-studio-palette-background > .open-studio-page-overlay {
    background: transparent;
}

body.has-open-studio-palette-background > .open-studio-page-overlay .open-studio-page-overlay__header,
body.has-open-studio-palette-background > .open-studio-page-overlay:not(.open-studio-page-overlay--slideshow) .open-studio-page-overlay__content {
    background: transparent;
}

html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay) body.has-open-studio-palette-background > main,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay) body.has-open-studio-palette-background > .open-studio-micro-site-footer-navigation-wrapper {
    opacity: 0;
    pointer-events: none;
}




/* While an overlay is open on a palette/Manifesto page, hide only the
   underlying page-level footer elements. Footers inside the injected overlay
   are nested inside .open-studio-page-overlay__content and are untouched. */
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body.has-open-studio-palette-background > .open-studio-page-footer,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body.has-open-studio-palette-background > .open-studio-micro-site-footer-navigation-wrapper,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body.has-open-studio-palette-background > .open-studio-site-footer {
    opacity: 0;
    pointer-events: none;
}

/* Overlay close:
   reveal the underlying page in parallel with the 0.3s slide-out instead of
   waiting until the overlay has been removed. */
body > main,
body > .open-studio-page-footer,
body > .open-studio-micro-site-footer-navigation-wrapper,
body > .open-studio-site-footer {
    transition: opacity 0.3s ease;
}

html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body > main,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body > .open-studio-page-footer,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body > .open-studio-micro-site-footer-navigation-wrapper,
html.has-open-studio-page-overlay:not(.is-closing-open-studio-page-overlay)
body > .open-studio-site-footer {
    opacity: 0;
    pointer-events: none;
}