/*
 * ==========================================
 * JRE SLIDESHOW
 * ==========================================
 */


/*
 * ==========================================
 * SLIDES
 * ==========================================
 */

.jre-slide {
    width: 100%;
}


/*
 * MathML i slides.
 */

.jre-slide math {
    font-size: 1.5em;
    font-weight: 530;

    margin-top: 1.2em;
    margin-bottom: 1.2em;
}


/*
 * ==========================================
 * NORMALVISNING:
 * SLIDE-NUMRE VED SEPARATORER
 * ==========================================
 */

.jre-slide-separator-number {
    display: block;

    width: max-content;

    margin:
        0.25rem auto
        1rem auto;

    padding:
        2px 7px;

    text-align: center;

    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;

    color:
        rgba(
            0,
            0,
            0,
            0.48
        );

    background:
        rgba(
            0,
            0,
            0,
            0.055
        );

    border-radius: 10px;
}


.jre-slide-separator-number[hidden] {
    display: none !important;
}


/*
 * ==========================================
 * INDHOLDSFORTEGNELSE
 * ==========================================
 */

.jre-slideshow-toc {
    box-sizing: border-box;

    width: 100%;

    max-width:
        var(
            --wp--style--global--content-size,
            720px
        );

    margin:
        1.5rem auto
        2rem auto;

    padding:
        14px 18px;

    background:
        rgba(
            0,
            0,
            0,
            0.035
        );

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.07
        );

    border-radius: 8px;
}


.jre-slideshow-toc[hidden] {
    display: none !important;
}


/*
 * Titel.
 */

.jre-slideshow-toc-title {
    margin:
        0 0 8px 0;

    padding: 0;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );
}


/*
 * Nummereret liste.
 */

.jre-slideshow-toc-list {
    margin: 0;

    padding-left: 1.8em;
}


.jre-slideshow-toc-item {
    margin:
        3px 0;

    padding: 0;
}


/*
 * Klikbar overskrift.
 */

.jre-slideshow-toc-link {
    appearance: none;

    -webkit-appearance: none;

    display: inline-block;

    margin: 0;

    padding:
        3px 5px;

    background: transparent;

    color: inherit;

    border: none;

    border-radius: 4px;

    box-shadow: none;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    line-height: inherit;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.18s ease;
}


.jre-slideshow-toc-link:hover {
    background:
        rgba(
            0,
            0,
            0,
            0.06
        );
}


.jre-slideshow-toc-link:focus-visible {
    outline:
        2px solid
        rgba(
            0,
            0,
            0,
            0.4
        );

    outline-offset: 2px;
}


/*
 * ==========================================
 * SLIDESHOW MODE
 * ==========================================
 */

.jre-slide-mode {
    padding-bottom: 90px;

    overflow-x: hidden;
}


/*
 * ==========================================
 * SLIDESHOW STAGE
 * ==========================================
 */

.jre-slideshow-stage {
    display: block;

    box-sizing: border-box;

    width: 100%;

    margin-top: 0 !important;
    margin-block-start: 0 !important;

    padding-top: 0 !important;

    overflow-x: hidden;
}


.jre-slideshow-stage[hidden] {
    display: none !important;
}


/*
 * Fjern eventuelt Gutenberg gap mellem
 * header og stage.
 */

body.jre-slideshow-later-slide
.jre-slideshow-stage-parent {
    gap: 0 !important;
    row-gap: 0 !important;
}


/*
 * ==========================================
 * SLIDE 2+
 * ==========================================
 *
 * Headeren vises.
 * Stage ligger direkte efter header.
 *
 * Andre direkte siblings efter header
 * skjules.
 * ==========================================
 */

body.jre-slideshow-later-slide
header.wp-block-template-part
~ *:not(.jre-slideshow-stage) {
    display: none !important;
}


/*
 * Header skal altid være synlig.
 */

body.jre-slideshow-later-slide
header.wp-block-template-part {
    display: block !important;

    margin-bottom: 0 !important;
    margin-block-end: 0 !important;
}


/*
 * Stage umiddelbart under header.
 */

body.jre-slideshow-later-slide
.jre-slideshow-stage {
    display: block !important;

    margin-top: 0 !important;
    margin-block-start: 0 !important;
}


.jre-slideshow-stage
.jre-slide {
    margin-top: 0;
}


/*
 * ==========================================
 * SLIDE-ANIMATIONER
 * ==========================================
 */


/*
 * Frem:
 * nyt slide kommer op nedefra.
 */

.jre-slide-enter-from-bottom {
    animation:
        jre-slide-from-bottom
        0.50s
        ease-out
        both;
}


@keyframes jre-slide-from-bottom {

    from {
        opacity: 0;

        transform:
            translateY(90px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/*
 * Tilbage:
 * nyt slide kommer ind oppefra.
 */

.jre-slide-enter-from-top {
    animation:
        jre-slide-from-top
        0.50s
        ease-out
        both;
}


@keyframes jre-slide-from-top {

    from {
        opacity: 0;

        transform:
            translateY(-90px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/*
 * ==========================================
 * FLYDENDE NAVIGATION
 * ==========================================
 */

.jre-slideshow-navigation {
    position: fixed !important;

    right: 20px !important;
    bottom: 20px !important;

    top: auto !important;
    left: auto !important;

    z-index: 99999;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 5px;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    padding:
        3px 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.40
        );

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    border-radius: 12px;

    box-shadow:
        0 4px 18px
        rgba(
            0,
            0,
            0,
            0.12
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/*
 * ==========================================
 * FÆLLES NAVIGATIONSKNAPPER
 * ==========================================
 */

.jre-slideshow-navigation button {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    float: none !important;

    display: inline-flex !important;

    flex:
        0 0 auto !important;

    align-items: center !important;

    justify-content: center !important;

    /*
     * OBS:
     * Den tidligere GitHub-version havde
     * width: 100px her.
     */

    width: 34px !important;
    height: 34px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent;

    color:
        rgba(
            0,
            0,
            0,
            0.72
        );

    border: none;

    border-radius: 8px;

    box-shadow: none;

    font-family: inherit;

    font-size: 18px;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}


/*
 * ==========================================
 * HOVER
 * ==========================================
 */

.jre-slideshow-navigation
button:hover:not(:disabled) {
    background:
        rgba(
            0,
            0,
            0,
            0.07
        );

    color:
        rgba(
            0,
            0,
            0,
            0.95
        );

    transform:
        translateY(-1px);
}


/*
 * ==========================================
 * FOKUS
 * ==========================================
 */

.jre-slideshow-navigation
button:focus-visible {
    outline:
        2px solid
        rgba(
            0,
            0,
            0,
            0.45
        );

    outline-offset: 2px;
}


/*
 * ==========================================
 * DEAKTIVERET
 * ==========================================
 */

.jre-slideshow-navigation
button:disabled {
    opacity: 0.22;

    cursor: default;

    transform: none;
}


/*
 * ==========================================
 * FREM / TILBAGE
 * ==========================================
 */

.jre-slideshow-navigation
.jre-slide-prev,

.jre-slideshow-navigation
.jre-slide-next {
    width: 44px !important;
    height: 44px !important;

    font-size: 36px !important;

    font-weight: 300;

    transform:
        translateY(-5px) !important;
}


.jre-slideshow-navigation
.jre-slide-prev:hover:not(:disabled),

.jre-slideshow-navigation
.jre-slide-next:hover:not(:disabled) {
    transform:
        translateY(-6px) !important;
}


.jre-slideshow-navigation
.jre-slide-prev:disabled,

.jre-slideshow-navigation
.jre-slide-next:disabled {
    transform:
        translateY(-5px) !important;
}

/*
 * ==========================================
 * SKJULT SLIDESHOW-NAVIGATION
 * ==========================================
 *
 * Skal ligge efter den almindelige
 * .jre-slideshow-navigation-regel,
 * da navigationen bruger
 * display: flex !important.
 */

.jre-slideshow-navigation[hidden] {

    display:
        none !important;
}

/*
 * ==========================================
 * SLIDE-NUMRE
 * ==========================================
 */

.jre-slide-numbers {
    position: static !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 1px;

    width: auto !important;
    height: auto !important;

    margin:
        0 2px;

    padding: 0 !important;
}


.jre-slideshow-navigation
.jre-slide-number {
    width: 27px !important;
    height: 27px !important;

    border-radius: 50%;

    font-size: 12px;

    font-weight: 500;

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );
}


.jre-slideshow-navigation
.jre-slide-number:hover:not(:disabled) {
    background:
        rgba(
            0,
            0,
            0,
            0.06
        );
}


.jre-slideshow-navigation
.jre-slide-number.is-active {
    background:
        rgba(
            0,
            0,
            0,
            0.13
        );

    color:
        rgba(
            0,
            0,
            0,
            0.9
        );

    font-weight: 700;
}


/*
 * ==========================================
 * TOGGLE
 * ==========================================
 */

.jre-slideshow-navigation
.jre-slide-toggle {
    margin-left:
        4px !important;

    font-size:
        17px !important;

    border-left:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        )
        !important;

    border-radius:
        0 8px 8px 0
        !important;
}


/*
 * ==========================================
 * MOBIL
 * ==========================================
 */

@media (max-width: 600px) {

    .jre-slideshow-navigation {
        right:
            10px !important;

        bottom:
            10px !important;

        max-width:
            calc(100vw - 20px);

        padding:
            6px 7px;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .jre-slideshow-navigation::-webkit-scrollbar {
        display: none;
    }


    .jre-slideshow-navigation button {
        flex:
            0 0 auto !important;

        width:
            32px !important;

        height:
            32px !important;
    }


    .jre-slideshow-navigation
    .jre-slide-prev,

    .jre-slideshow-navigation
    .jre-slide-next {
        width:
            40px !important;

        height:
            40px !important;

        font-size:
            32px !important;

        transform:
            translateY(-4px) !important;
    }


    .jre-slideshow-navigation
    .jre-slide-prev:hover:not(:disabled),

    .jre-slideshow-navigation
    .jre-slide-next:hover:not(:disabled) {
        transform:
            translateY(-5px) !important;
    }


    .jre-slideshow-navigation
    .jre-slide-prev:disabled,

    .jre-slideshow-navigation
    .jre-slide-next:disabled {
        transform:
            translateY(-4px) !important;
    }


    .jre-slideshow-navigation
    .jre-slide-number {
        width:
            25px !important;

        height:
            25px !important;

        font-size:
            11px;
    }


    .jre-slideshow-toc {
        width:
            calc(100% - 24px);

        margin:
            1rem auto
            1.5rem auto;

        padding:
            12px 14px;
    }

}


/*
 * ==========================================
 * REDUCERET BEVÆGELSE
 * ==========================================
 */

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

    .jre-slide-enter-from-bottom,
    .jre-slide-enter-from-top {
        animation: none;
    }


    .jre-slideshow-toc-link {
        scroll-behavior: auto;
    }

}