@import url("https://use.typekit.net/ojb3orm.css");

@keyframes fadeInOut{
    0%{opacity: 0;}
    25%{opacity: 1;}
    75%{opacity: 1;}
    100%{opacity: 0;}
}

/* For mobile layout only*/
@media screen and (max-width: 767px){
    #winter25-hero .block--hero__content .content-wrapper{width: 100%;}
}
.theme-class--2,
.winter25,
#winter25-hero{
    /* Laying some vars for use throughout this container, setting basic styles */
    --bg-color: oklch(0.8824 0.0549 9.82);
    --icon-color: oklch(0.7059 0.1587 27.74);
    --cream: oklch(0.9875 0.0654 107.54);
    --stroke-color: oklch(0.6818 0.176 27.16);
    --tohGreen: #479961;

    .winter25-font{
        --fontColor: var(--tohGreen);
        color: var(--fontColor);
        font-family: "scrapbooker-sans", sans-serif;
    }
    .tag{
        --shadow: 0 3px 6px rgba(0,0,0,.75), 0 6px 12px rgba(0,0,0,.3);
        background-color: var(--cream);
        border-radius: 1rem;
        border: 3px solid var(--stroke-color);
        box-shadow: var(--shadow);
        corner-shape: scoop;
        outline: 4px solid var(--cream);
        padding: 1rem;
        position: relative;
    }
    @media screen and (width < 768px){
        .nav--tabs{
            --fontSize: 130%;
            gap: 0;
        }
    }
    @media screen and (width > 767px){
        .nav--tabs{
            --fontSize: 150%;
            gap: 1rem
        }
    }
    .nav--tabs{
        .nav__item + .nav__item{margin: 0;}
        .nav__link{
            border-bottom-width: 4px;
            color: var(--tohGreen);
            font-family: "scrapbooker-sans", sans-serif;
            font-size: var(--fontSize);

            &.active{border-bottom-color: red;}
            &::before{
                background-color: transparent;
                background-repeat: no-repeat;
                height: 20px;
            }
        }
        .nav__item:nth-child(1),.nav__item:nth-child(4){
            .nav__link::before{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.59 89.66"><path style="fill:red" d="M10.79,0C2.29,0,0,16.31,0,22.26c0,5.34,6.17,8.96,6.17,8.96,1.54.9,2.72,3.1,2.62,4.89,0,0-2.52,44.77-2.52,47.32,0,3.45,2.03,6.23,4.52,6.23s4.52-2.78,4.52-6.23c0-2.55-2.51-47.32-2.51-47.32-.1-1.79,1.08-3.99,2.62-4.9,0,0,6.17-3.62,6.17-8.95-.01-5.96-2.31-22.26-10.8-22.26Z"/></svg>');}
        }
        /*.nav__item:nth-child(3) .nav__link::before{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.6 89"><path style="fill:red" d="M10.8 0C2.3 0 0 16.3 0 22.3s6.2 9 6.2 9c1.5.9 2.7 3.1 2.6 4.9 0 0 2.5 44.1 2.5 46.7s2 6.2 4.5 6.2 4.5-2.8 4.5-6.2-7.5-46.7-7.5-46.7c-.1-1.8 1.1-4 2.6-4.9 0 0 6.2-3.6 6.2-9 0-6-2.3-22.3-10.8-22.3"/></svg>');}*/
        .nav__item:nth-child(2) .nav__link::before{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.9 89"><path style="fill:red" d="M15.9 0C7.2 0 .6 16 0 22.1c-.8 5.4 5.1 9 5.1 9 1.5.9 2.5 3.1 2.3 4.9 0 0-.2 11.2 1.7 22.6 1.5 11.4 5.1 23.1 5.5 24.3.9 3.4 3.8 6.1 6.3 6.1s3.7-2.7 2.8-6.1c-.4-1.2-5.2-12.8-8-24.3-3.1-11.4-4.2-22.7-4.2-22.6 0-1.8 1.3-4 3-4.9 0 0 6.4-3.7 7.2-9C22.2 16 24.1 0 15.9 0"/></svg>');}
        .nav__item:nth-child(3) .nav__link::before{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.3 89"><path style="fill:red" d="M24.5 0C15.4-.3 2 14.5.5 21c-2.1 5.5 3.4 9.3 3.3 9.3 1.3 1 2 3.3 1.7 5.2 0-.3-1.5 12.2 2.4 24 3 12 11.5 23.3 12.5 24.1 2.3 3.1 6.6 5.4 9.1 5.4s2.3-2.3 0-5.4c-1-.8-10.7-12.1-15-24.1-5.1-11.8-4.9-24.3-4.9-24 .2-1.9 1.8-4.3 3.6-5.2 0 0 4.9-2.5 9-9.3S32.4-.3 24.5 0"/></svg>');}
        .magical{
            position: relative;
            p{margin-bottom:0;}
            a{
                position: relative;
                z-index: 2;
                &:hover{
                    background-color: transparent;
                }
            }
            .spark-box{
                --mySize: 5px;
                display: block;
                font-family: inherit;
                position: absolute;
                pointer-events: none;
                top: 0;
                width: 100%;
                z-index: 1;
                .spark{
                    aspect-ratio: 1/1;
                    color: var(--tohGreen);
                    display: block;
                    font-family: inherit;
                    font-size:;
                    position: absolute;
                    top: 5px;
                    left: 50%;
                    width: var(--mySize);
                    opacity: 0;
                    transform: translateX(0) translateY(0) rotate(0);
                    transition-delay: 1s;
                    transition: opacity .25s ease, transform .25s ease-out;
                }
            }
            &:has(.nav__link.active){
                .spark{
                    animation: fadeInOut 1.5s forwards 1s ease-out;

                    &:nth-child(1){transform: translateX(2rem) translateY(-.75rem) rotate(120deg);}
                    &:nth-child(2){transform: translateX(-2rem) translateY(-.5rem) rotate(120deg);}
                    &:nth-child(3){transform: translateX(-1.5rem) translateY(.5rem) rotate(120deg);}
                    &:nth-child(4){transform: translateX(1.25rem) translateY(.75rem) rotate(120deg);}
                    &:nth-child(5){transform: translateX(-.5rem) translateY(1rem) rotate(120deg);}
                }
            }
        }
    }
}

#winter25-hero{
    --converter: calc(var(--offset) * .5px);
    --scroller: calc(50% + var(--converter, 1px));
    background-color: var(--bg-color);
    background: 	url('https://www.roswellpark.org/sites/default/files/2025-11/share-winter25-forest.png') bottom repeat-x,
    url('https://www.roswellpark.org/sites/default/files/2025-11/toh25-background-anim-2.gif') repeat 50% var(--scroller);
    overflow: hidden;

    /* Clean up the nested Drupal block so it fits the way we need */
    .block--hero__content{
        align-self: stretch;
        grid-column: 1/-1;

        .content-wrapper,
        .block--hero__content__text{
            height: 100%;

        }
    }

    /* Make sure the hero links dont ever show up even if they get populated in the block */
    .block--hero__content__links{display: none;}

    /* Set up a grid display for the block body so we can then stack the content and icon grid */
    .block--body{
        container: headerContainer / inline-size;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        height: 100%;

        #toh-header-content{
            grid-column: 1/2;
            grid-row: 1/2;
            position: relative;
        }

    }

}

/* Arrange content in the header, TOH logo above/left and tree below/right */
#winter25-header-content{
    /* Create a grid for the contnet within */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;


    #winter25-logo{
        display: flex;
        justify-content: center;
        z-index: 1;
        @container headerContainer (width < 768px){}
        @container headerContainer (width > 767px){
        }

        .tag{
            h1{
                margin-bottom:0;
                line-height: initial;
            }

            @container headerContainer (width < 768px){
                --shadow: 0 2px 4px rgba(0,0,0,.25);
                z-index: 1;
            }
            @container headerContainer (width > 767px){
                --shadow: 0 3px 6px rgba(0,0,0,.5), -2px 10px 16px rgba(0,0,0,.25);
                z-index: 5;
            }
        }
    }
    #winter25-video{
        box-shadow: 0 3px 6px rgba(0,0,0,.5), -2px 10px 16px rgba(0,0,0,.25);
        overflow: hidden;
        border-radius: 1rem;
        corner-shape: scoop;
        position: relative;
        z-index: 2;
        transform: translateY(-1.5rem);
        @container headerContainer (width <= 767px){
            width: 90cqi;

        }
        @container headerContainer (768px <= width <= 1220px){
            width: 75cqi;
        }
        @container headerContainer (width >= 1221px){
            width: 50cqi;
        }

    }
    #Layer_1{
        @property --rotation {
            syntax: "<angle>";
            inherits: true;
            initial-value: 0deg;
        }
        #tree,
        #mid,
        #top{
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
        #tree{
            --rotation: 7deg;
            animation-name: sway;
            animation-duration: 5s;
            transform-origin: bottom;
        }
        #mid{
            --rotation: 4deg;
            animation-delay: .25s;
            animation-name: sway2;
            animation-duration: 5s;
            transform-origin: center;
        }
        #top{
            --rotation: 2deg;
            animation-delay: .5s;
            animation-name: sway3;
            animation-duration: 5s;
            transform-origin: center;
        }
        g[id*="burst"],
        g[id*="twinkle"]{
            animation: puff 1s ease-in-out infinite;
            transform-origin: center;
        }
        #stars{
            g:nth-child(2), g:nth-child(9){animation-delay: .25s}
            g:nth-child(3), g:nth-child(8){animation-delay: .5s}
            g:nth-child(4), g:nth-child(7){animation-delay: .75s}
            g:nth-child(5), g:nth-child(6){animation-delay: 1s}
        }


        /* Adobe fills colors */
        .st0 {
            fill: #0055b8;
        }
        .st1 {
            stroke-width: 5px;
        }
        .st1, .st2 {
            fill: none;
            stroke: var(--stroke-color);
        }
        .st2 {
            stroke-width: 3px;
        }
        .st3 {
            fill: var(--cream);
        }
        .st4 {
            fill: #479961;
        }
        .st5 {
            fill: #f2655a;
        }
    }

    #winter25-info{
        --fontScale: 200%;
        --fontColor: var(--tohGreen);
        --lineHeight: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "scrapbooker-sans", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: var(--fontScale);
        grid-area: info;
        line-height: var(--lineheight);
        @container headerContainer  (width > 767px){align-self: flex-start}
        p{
            color: var(--fontColor) !important;
            margin-bottom: 0;
        }
        .tag{
            @container headerContainer (width < 768px){
                width:100cqi;
            }
            @container headerContainer (width > 767px){
                z-index: 4;
            }
        }
    }
}

/* ANIMAIONS */
@keyframes blink {
    0%, 10%, 91%, 100% { opacity: 0.25; }
    11%, 90% { opacity: 1; }
}
@keyframes sway {
    0%, 100% {transform: rotate(0);}
    33%{transform: rotate(3deg);}
    66%{transform: rotate(-3deg);}
}
@keyframes sway2 {
    0%, 100% {transform: rotate(0) translatey(0);}
    33%{transform: rotate(5deg) translatey(2px);}
    66%{transform: rotate(-5deg) translatey(2px);}
}
@keyframes sway3 {
    0%, 100% {transform: rotate(0) translateY(0);}
    33%{transform: rotate(7deg) translatey(4px);}
    66%{transform: rotate(-7deg) translatey(4px);}
}
@keyframes puff {
    0%{ opacity: 0; transform: scale(.5);}
    75%{opacity: 1; transform: scale(1);}
    100%{opacity: 0; transform: scale(1);}
}

.layout.layout--hero #winter25-hero.winter25 .bg-photo-container .embedded-entity{
    /*background: url('https://www.roswellpark.org/sites/default/files/2025-11/toh25-background-anim-2.gif') repeat;*/

    img{display: none;}
}
.theme-class--2{
    background-color: var(--tohGreen);
}
.winter25{
    .card--offset{
        border-radius: .5rem;
        corner-shape: scoop;
    }

    .card--offset.offset--left .card__offset-container{transform: rotate(-2.5deg);}
    .card--offset.offset--right .card__offset-container{transform: rotate(2.5deg);}
    .card__offset-container > *:nth-child(1){
        box-shadow: var(--shadow);
    }
}
#gumbo .embedded-entity img{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);}
p{text-wrap:pretty;}

/** FOR ADMIN SCREEN **/
.layout-builder-block{
    background-color: rgba(255,255,255,.25);
}