/* ==========================================================
   ELR PAGE STABILITY + SILKY NAVIGATION V4
   ========================================================== */


/* ==========================================================
   1. BASIC GEOMETRY
   ========================================================== */

html{
    width:100%;
    max-width:100%;

    overflow-y:scroll;
    overflow-x:hidden;

    scrollbar-gutter:stable;

    background:#ffffff;

    scroll-behavior:auto !important;
}


body{
    width:100%;
    max-width:100%;

    min-height:0;

    margin:0;

    overflow-x:hidden;

    background:#ffffff;
}


/* ==========================================================
   2. CROSS-DOCUMENT VIEW TRANSITION
   ========================================================== */

/*
 * IMPORTANT:
 *
 * Previous version used:
 *
 *     navigation:none;
 *
 * which disabled the browser's smooth document transition.
 *
 * We now explicitly ENABLE it.
 */

@view-transition{
    navigation:auto;
}


/*
 * Keep the transition quick.
 *
 * This is an academic journal site, so the effect should
 * feel nearly invisible rather than like an app animation.
 */

::view-transition-group(root){
    animation-duration:180ms;

    animation-timing-function:
        cubic-bezier(.22,.61,.36,1);
}


/*
 * The old page remains visible while the new document
 * is being prepared.
 */

::view-transition-old(root){
    animation:
        110ms
        cubic-bezier(.4,0,1,1)
        both
        elr-page-out;

    mix-blend-mode:normal;
}


/*
 * New page fades in gently.
 */

::view-transition-new(root){
    animation:
        180ms
        cubic-bezier(.22,.61,.36,1)
        both
        elr-page-in;

    mix-blend-mode:normal;
}


@keyframes elr-page-out{

    from{
        opacity:1;
    }

    to{
        opacity:.94;
    }

}


@keyframes elr-page-in{

    from{
        opacity:.92;
    }

    to{
        opacity:1;
    }

}


/* ==========================================================
   3. REDUCE WHITE FLASH
   ========================================================== */

/*
 * Browser transition canvas and document have the same
 * background, preventing a white/transparent flicker
 * between documents.
 */

html,
body,
::view-transition-image-pair(root){
    background:#ffffff;
}


/* ==========================================================
   4. HEADER STABILITY
   ========================================================== */

.elr-sticky-head,
.elr-topbar,
.elr-nav{
    overflow-anchor:none;

    transform:translateZ(0);

    backface-visibility:hidden;
}


/*
 * Prevent accidental animation rules from themes.
 */

.elr-topbar,
.elr-nav{
    transition:
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease !important;
}


/* ==========================================================
   5. ELR PUBLIC PAGE GEOMETRY
   ========================================================== */

:is(
    .elr-policy-page,
    .elr-ethics-page,
    .elr-rights-page,
    .elr-board-page,
    .elr-about-page,
    .elr-contact-page,
    .elr-reviewer-page,
    .elr-anon-page
){
    min-height:0 !important;

    height:auto !important;

    margin-bottom:0 !important;
}


/* ==========================================================
   6. REMOVE JANEWAY VIEWPORT STRETCH
   ========================================================== */

body:has(
    :is(
        .elr-policy-page,
        .elr-ethics-page,
        .elr-rights-page,
        .elr-board-page,
        .elr-about-page,
        .elr-contact-page,
        .elr-reviewer-page,
        .elr-anon-page
    )
){
    min-height:0 !important;

    height:auto !important;
}


body:has(
    :is(
        .elr-policy-page,
        .elr-ethics-page,
        .elr-rights-page,
        .elr-board-page,
        .elr-about-page,
        .elr-contact-page,
        .elr-reviewer-page,
        .elr-anon-page
    )
)
:is(
    main,
    #main,
    #content,
    .main,
    .content,
    .page-content,
    .site-content
){
    min-height:0 !important;

    height:auto !important;

    flex-grow:0 !important;
    flex-shrink:0 !important;
    flex-basis:auto !important;
}


/* ==========================================================
   7. FOOTER GAP
   ========================================================== */

body:has(
    :is(
        .elr-policy-page,
        .elr-ethics-page,
        .elr-rights-page,
        .elr-board-page,
        .elr-about-page,
        .elr-contact-page,
        .elr-reviewer-page,
        .elr-anon-page
    )
)
.elr-footer-wrap{
    margin-top:0 !important;
}


:is(
    .elr-policy-layout,
    .elr-ethics-layout,
    .elr-rights-layout,
    .elr-board-layout,
    .elr-about-layout,
    .elr-contact-layout,
    .elr-reviewer-layout,
    .elr-anon-layout
){
    min-height:0 !important;

    padding-bottom:38px !important;

    margin-bottom:0 !important;
}


:is(
    .elr-policy-section,
    .elr-ethics-section,
    .elr-rights-section,
    .elr-board-section,
    .elr-about-section,
    .elr-contact-section,
    .elr-reviewer-section,
    .elr-anon-section
):last-child{
    padding-bottom:0 !important;

    margin-bottom:0 !important;
}


/* ==========================================================
   8. PREVENT LAYOUT SHIFT FROM IMAGES
   ========================================================== */

img{
    height:auto;
}


/*
 * Journal logo already has defined dimensions in shell,
 * but make sure navigation never waits for image geometry.
 */

.elr-topbar img,
.elr-sticky-head img{
    flex-shrink:0;
}


/* ==========================================================
   9. MOBILE
   ========================================================== */

@media(max-width:680px){

    ::view-transition-group(root){
        animation-duration:150ms;
    }


    ::view-transition-new(root){
        animation-duration:150ms;
    }


    :is(
        .elr-policy-layout,
        .elr-ethics-layout,
        .elr-rights-layout,
        .elr-board-layout,
        .elr-about-layout,
        .elr-contact-layout,
        .elr-reviewer-layout,
        .elr-anon-layout
    ){
        padding-bottom:28px !important;
    }

}


/* ==========================================================
   10. ACCESSIBILITY
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(root){
        animation-duration:1ms !important;
    }

}



/* ==========================================================
   ELR SUBMISSION SECTION GEOMETRY
   ========================================================== */

:is(
    .elr-aims-page,
    .elr-ag-page,
    .elr-submission-page
){
    min-height:0 !important;
    height:auto !important;

    margin-bottom:0 !important;
}


body:has(
    :is(
        .elr-aims-page,
        .elr-ag-page,
        .elr-submission-page
    )
){
    min-height:0 !important;
    height:auto !important;
}


:is(
    .elr-aims-layout,
    .elr-sub-layout
){
    min-height:0 !important;

    padding-bottom:38px !important;

    margin-bottom:0 !important;
}


body:has(
    :is(
        .elr-aims-page,
        .elr-ag-page,
        .elr-submission-page
    )
)
.elr-footer-wrap{
    margin-top:0 !important;
}