/* ------------------------------------------------ */
/* CASE GENERAL */
/* General CSS for a case, and default colors/image */
/* ------------------------------------------------ */

    main{
        width: 65%;
        max-width: 1200px;
    }    

    body.case img:before {
        content: "";
        background-image: url("images/placeholder.png");
        background-position: center;
        background-repeat: no-repeat; 
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #af5050;
    }
    
    body.case nav.secondary_nav a{ /* Slight outline on the MN link */
        text-shadow: -1px -1px 0 #ffffff0c, 1px -1px 0 #ffffff0c, -1px 1px 0 #ffffff0c, 1px 1px 0 #ffffff0c;
    }

    body.case nav.primary_nav .clickable,
    body.case nav.primary_nav.inverted .clickable:hover,
    body.case nav.secondary_nav.inverted .clickable,
    body.case nav.secondary_nav .clickable:hover{
        color: var(--color1);
        fill: var(--color1);
    }

    body.case nav.secondary_nav .clickable,
    body.case nav.secondary_nav.inverted .clickable:hover,
    body.case nav.primary_nav.inverted .clickable,
    body.case nav.primary_nav .clickable:hover{
        color: var(--color2);
        fill: var(--color2);
    }

    body.case nav.primary_nav.third_color .clickable:hover,
    body.case nav.secondary_nav.third_color .clickable:hover{
        color: var(--color3);
        fill: var(--color3);
    }

    body.case nav.primary_nav.fourth_color .clickable:hover,
    body.case nav.secondary_nav.fourth_color .clickable:hover{
        color: var(--color4);
        fill: var(--color4);
    }

    body.case header {
        background-image: url("images/placeholder_large.png");
        background-color: #ffffff;
        height: 53vw;
        max-height: 100vh;
        transition: max-height 2s cubic-bezier(0.34, 0.34, 0.02, 0.97);
    }

    body.case header #summary h4,
    body.case header #summary h1 {
        color: var(--color1);
    }
        body.case header #summary h4::selection,
        body.case header #summary h1::selection {
            color: var(--color2);
            background-color: var(--color1);
        }

    .case_wrapper {
        width: 100%;
        padding: 0 0% 2% 0%;
        background-color: white;
        overflow: hidden;
    }

    .case_intro_container {
        width: 100%;
        padding: 5% 0;
        overflow: hidden;
    }

        main .case_intro_summary {
            width: 50%;
            float: left;
        }

        main .case_intro_client {
            width: 40%;
            float: right;
        }

            main .case_intro_summary p,
            main .case_intro_client p{
                white-space: pre-line;
            }

            main .case_intro_summary a,
            main .case_intro_client a{
                font-family: InterBold, sans-serif;
            }

        main .case_intro_summary ::selection,
        main .case_intro_client ::selection {
            color: var(--color1);
            background-color: var(--color2);
        }

        main .fictive_case{
            text-align: center;
            font-style: italic;
        }

/* ------------------------------------------------ */
/* CASE BLOCKS */
/* General CSS for the different blocks in a case */
/* ------------------------------------------------ */

    .case_wrapper > img, /* Large images and videos */
    .case_wrapper > span img, /* For template */
    .case_wrapper > video,
    .case_wrapper > span video, /* For template */
    .case_wrapper > a img, /* Rare case where image is in a link (futureme -> eastsweden img) */
    .case_wrapper > a video,
    .case_wrapper > .dropdown_wrapper > img, /* Large images and videos */
    .case_wrapper > .dropdown_wrapper > span img, /* For template */
    .case_wrapper > .dropdown_wrapper > video,
    .case_wrapper > .dropdown_wrapper > span video, /* For template */
    .case_wrapper > .dropdown_wrapper > a img, /* Rare case where image is in a link (futureme -> eastsweden img) */
    .case_wrapper > .dropdown_wrapper > a video {
        display: inline-block;/*So the placeholder is visible when missing image */
        min-height: 100px; /*So the placeholder is visible when missing image */
        width: 100%;
        margin: 0 0 2% 0;
        background-color: #af5050;
    }

    .large_text_block{
        width: 100%;
        aspect-ratio: 48/17;
        position: relative;
        text-align: left;
        color: #000000;
        margin: 0 0 2% 0;
        background-color: #fa8665;
        overflow: hidden;
    }

        .large_text_block h3{
            text-align: left;
            top: 5%;
            left: 5%;
            position: absolute;
        }

        .large_text_block p{
            width: 64%;
            position: absolute;
            bottom: 11%;
            left: 5%;
            white-space: pre-line;
        }

    .pair_container {
        width: 100%;
        margin: 0 0 2% 0;
        overflow: hidden;
        position: relative;
        color: black;
    }

        .pair_container .pair_text_block,
        .pair_container img,
        .pair_container video {
            width: 49%;
            aspect-ratio: 1/1;
            position: relative;
            z-index: 1;
            float: left;
            text-align: left;
            background-color: #af5050;
        }

        .pair_container > *:nth-child(2) { /* Second element always to the right */ 
            float: right;
        }

            .pair_container .pair_text_block h3 {
                text-align: left;
                width: 80%;
                top: 4%;
                left: 10%;
                position: absolute;
            }
            .pair_container .pair_text_block p{  /* when P is directly inside the block */
                white-space: pre-line;
                width: 80%;
                position: absolute;
                bottom: 8%;
                left: 10%;
            }

    .triple_container {
        width: 100%;
        margin: 0 0 2% 0;
        overflow: hidden;
        position: relative;
    }

        .triple_container img,
        .triple_container video {
            width: 32%;
            float: left;
            aspect-ratio: 1/1;
            margin: 0;
        }

        .triple_container > *:nth-child(2) { /* Second element always in the center */
            margin: 0 2%;
        }

    body.case .heading_block {
        background-color: #b3dbd3;
        margin: 0 0 2% 0;
        padding: 5% 3%;
        text-align: center;
        background-size: auto 60%;
        background-position: center 35%;
        background-repeat: no-repeat;
        position: relative;
        /*user-select: none; Unsure why this was added?*/
    }

    /* Any Element within the whole body inherits the color pairing that was chosen for that element 
        e.g header with class heading_block and class .v_3 gets --color1 as color and --color3 as background color 
        
        NOTE: cursor also has .v_X versioning and is contained within the body, e.g also gets these same colors
        from this CSS, but further down this is added to, by "body.case #cursor.v_X" as cursor colors are 
        slightly more complex due to shadowing and border*/
    
    body.case .v_0{
        color: var(--color2);
        background-color: var(--color1);
    }
    body.case .v_1 {
        color: var(--color1);
        background-color: var(--color2);
    }
    body.case .v_2 {
        color: var(--color3);
        background-color: var(--color1);
    }
    body.case .v_3 {
        color: var(--color1);
        background-color: var(--color3);
    }
    body.case .v_4 {
        color: var(--color3);
        background-color: var(--color2);
    }
    body.case .v_5 {
        color: var(--color2);
        background-color: var(--color3);
    }
    body.case .v_6 {
        color: var(--color4);
        background-color: var(--color1);
    }
    body.case .v_7 {
        color: var(--color1);
        background-color: var(--color4);
    }
    body.case .v_8 {
        color: var(--color4);
        background-color: var(--color2);
    }
    body.case .v_9 {
        color: var(--color2);
        background-color: var(--color4);
    }
    body.case .v_10 {
        color: var(--color4);
        background-color: var(--color3);
    }
    body.case .v_11 {
        color: var(--color3);
        background-color: var(--color4);
    }

    body.case .v_0::selection,
    body.case .v_0 ::selection {
        color: var(--color1);
        background-color: var(--color2);
    }

    body.case .v_1::selection,
    body.case .v_1 ::selection {
        color: var(--color2);
        background-color: var(--color1);
    }

    body.case .v_2::selection,
    body.case .v_2 ::selection {
        color: var(--color1);
        background-color: var(--color3);
    }

    body.case .v_3::selection,
    body.case .v_3 ::selection {
        color: var(--color3);
        background-color: var(--color1);
    }

    body.case .v_4::selection,
    body.case .v_4 ::selection {
        color: var(--color2);
        background-color: var(--color3);
    }

    body.case .v_5::selection,
    body.case .v_5 ::selection {
        color: var(--color3);
        background-color: var(--color2);
    }

    body.case .v_6::selection,
    body.case .v_6 ::selection {
        color: var(--color1);
        background-color: var(--color4);
    }

    body.case .v_7::selection,
    body.case .v_7 ::selection {
        color: var(--color4);
        background-color: var(--color1);
    }

    body.case .v_8::selection,
    body.case .v_8 ::selection {
        color: var(--color2);
        background-color: var(--color4);
    }

    body.case .v_9::selection,
    body.case .v_9 ::selection {
        color: var(--color4);
        background-color: var(--color2);
    }

    body.case .v_10::selection,
    body.case .v_10 ::selection {
        color: var(--color3);
        background-color: var(--color4);
    }

    body.case .v_11::selection,
    body.case .v_11 ::selection {
        color: var(--color4);
        background-color: var(--color3);
    }
    
    body.case .dropdown_wrapper {
        background-color: #00000000 !important;
        position: relative;
        overflow: hidden;
        transition: margin-bottom 0.5s ease;
    }

            body.case .fade_in_children > *.dropdown_wrapper,
            body.case .fade_in_children > *.dropdown_wrapper.inactive{
                transition: opacity 0.5s ease-in-out, translate 0.5s ease-in-out, margin-bottom 0.5s ease; /*Ugly fix*/
            }

        body.case .dropdown_wrapper.inactive {
            margin-bottom: 2%;
        }

        body.case .dropdown_wrapper > .heading_block {
            transition: background-color 0.2s ease-in-out, margin 0.2s ease-in-out !important;
            white-space: nowrap;
        }

        body.case .dropdown_wrapper.inactive > .heading_block {
            margin: 0 !important; /* let the wrapper handle the margin for correct hover area */
            background-color: var(--dropdown_color_inactive) !important; 
        }

        body.case .dropdown_wrapper.inactive:hover > .heading_block {
            background-color: var(--dropdown_color_inactive_hover) !important; 
        }

        body.case .dropdown_wrapper.inactive>*:not(.heading_block, .choices){
            max-height: 0px !important;
            margin: 0px !important;
            opacity: 0 !important;
        }

        body.case .dropdown_wrapper>*:not(.heading_block) {
            max-height: 1200px;
            transition: max-height 0.5s ease, margin 0.5s ease, opacity 0.5s ease;
        }

        body.case .dropdown_wrapper > .heading_block::after{
            content: "";
            width: 3%;
            height: 6%;
            bottom: 10%;
            left: 50%;
            position: absolute;
            background-image: url("images/arrow.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-color: #00000000 !important;
            transition: transform 0.2s ease;
            transform: translateX(-50%) scaleY(-100%);
        }
        body.case .dropdown_wrapper.inactive > .heading_block::after{
            transform: translateX(-50%);
        }

    /* DROPDOWN 1 */
        body.case .dropdown_wrapper_1.v_0 .heading_block,
        body.case .dropdown_wrapper_1.v_1 .heading_block::selection {
            color: var(--dropdown_color1);
            background-color: var(--dropdown_color2);
        }
        body.case .dropdown_wrapper_1.v_1 .heading_block,
        body.case .dropdown_wrapper_1.v_0 .heading_block::selection {
            color: var(--dropdown_color2);
            background-color: var(--dropdown_color1);
        }
        body.case .dropdown_wrapper_1 .pair_container .pair_text_block.v_0,
        body.case .dropdown_wrapper_1 .large_text_block.v_0,
        body.case .dropdown_wrapper_1 .pair_container .pair_text_block.v_1 ::selection,
        body.case .dropdown_wrapper_1 .large_text_block.v_1 ::selection{
            color: var(--dropdown_color2);
            background-color: var(--dropdown_color1);
        }
        body.case .dropdown_wrapper_1 .pair_container .pair_text_block.v_1,
        body.case .dropdown_wrapper_1 .large_text_block.v_1,
        body.case .dropdown_wrapper_1 .pair_container .pair_text_block.v_0 ::selection,
        body.case .dropdown_wrapper_1 .large_text_block.v_0 ::selection{
            color: var(--dropdown_color1);
            background-color: var(--dropdown_color2);
        }
    /* DROPDOWN 2 */
        body.case .dropdown_wrapper_2 .heading_block,
        body.case .dropdown_wrapper_2.v_1 .heading_block::selection {
            color: var(--dropdown_color3);
            background-color: var(--dropdown_color4);
        }
        body.case .dropdown_wrapper_2.v_1 .heading_block,
        body.case .dropdown_wrapper_2.v_0 .heading_block::selection {
            color: var(--dropdown_color4);
            background-color: var(--dropdown_color3);
        }
        body.case .dropdown_wrapper_2 .pair_container .pair_text_block,
        body.case .dropdown_wrapper_2 .large_text_block,
        body.case .dropdown_wrapper_2 .pair_container .pair_text_block.v_1 ::selection,
        body.case .dropdown_wrapper_2 .large_text_block.v_1 ::selection{
            color: var(--dropdown_color4);
            background-color: var(--dropdown_color3);
        }
        body.case .dropdown_wrapper_2 .pair_container .pair_text_block.v_1,
        body.case .dropdown_wrapper_2 .large_text_block.v_1,
        body.case .dropdown_wrapper_2 .pair_container .pair_text_block.v_0 ::selection,
        body.case .dropdown_wrapper_2 .large_text_block.v_0 ::selection{
            color: var(--dropdown_color3);
            background-color: var(--dropdown_color4);
        }
    /* DROPDOWN 3 */
        body.case .dropdown_wrapper_3 .heading_block,
        body.case .dropdown_wrapper_3.v_1 .heading_block::selection {
            color: var(--dropdown_color5);
            background-color: var(--dropdown_color6);
        }
        body.case .dropdown_wrapper_3.v_1 .heading_block,
        body.case .dropdown_wrapper_3.v_0 .heading_block::selection{
            color: var(--dropdown_color6);
            background-color: var(--dropdown_color5);
        }
        body.case .dropdown_wrapper_3 .pair_container .pair_text_block,
        body.case .dropdown_wrapper_3 .large_text_block,
        body.case .dropdown_wrapper_3 .pair_container .pair_text_block.v_1 ::selection,
        body.case .dropdown_wrapper_3 .large_text_block.v_1 ::selection {
            color: var(--dropdown_color6);
            background-color: var(--dropdown_color5);
        }
        body.case .dropdown_wrapper_3 .pair_container .pair_text_block.v_1,
        body.case .dropdown_wrapper_3 .large_text_block.v_1,
        body.case .dropdown_wrapper_3 .pair_container .pair_text_block.v_0 ::selection,
        body.case .dropdown_wrapper_3 .large_text_block.v_0 ::selection{
            color: var(--dropdown_color5);
            background-color: var(--dropdown_color6);
        }
    /* DROPDOWN 4 */
        body.case .dropdown_wrapper_4 .heading_block,
        body.case .dropdown_wrapper_4.v_1 .heading_block::selection{
            color: var(--dropdown_color7);
            background-color: var(--dropdown_color8);
        }
        body.case .dropdown_wrapper_4.v_1 .heading_block,
        body.case .dropdown_wrapper_4.v_0 .heading_block::selection {
            color: var(--dropdown_color8);
            background-color: var(--dropdown_color7);
        }
        body.case .dropdown_wrapper_4 .pair_container .pair_text_block,
        body.case .dropdown_wrapper_4 .large_text_block,
        body.case .dropdown_wrapper_4 .pair_container .pair_text_block.v_1 ::selection,
        body.case .dropdown_wrapper_4 .large_text_block.v_1 ::selection{
            color: var(--dropdown_color8);
            background-color: var(--dropdown_color7);
        }
        body.case .dropdown_wrapper_4 .pair_container .pair_text_block.v_1,
        body.case .dropdown_wrapper_4 .large_text_block.v_1,
        body.case .dropdown_wrapper_4 .pair_container .pair_text_block.v_0 ::selection,
        body.case .dropdown_wrapper_4 .large_text_block.v_0 ::selection{
            color: var(--dropdown_color7);
            background-color: var(--dropdown_color8);
        }
    /* DROPDOWN 5 */
        body.case .dropdown_wrapper_5 .heading_block,
        body.case .dropdown_wrapper_5.v_1 .heading_block::selection {
            color: var(--dropdown_color9);
            background-color: var(--dropdown_color10);
        }
        body.case .dropdown_wrapper_5.v_1 .heading_block,
        body.case .dropdown_wrapper_5.v_0 .heading_block::selection{
            color: var(--dropdown_color10);
            background-color: var(--dropdown_color9);
        }
        body.case .dropdown_wrapper_5 .pair_container .pair_text_block,
        body.case .dropdown_wrapper_5 .large_text_block,
        body.case .dropdown_wrapper_5 .pair_container .pair_text_block.v_1 ::selection,
        body.case .dropdown_wrapper_5 .large_text_block.v_1 ::selection {
            color: var(--dropdown_color10);
            background-color: var(--dropdown_color9);
        }
        body.case .dropdown_wrapper_5 .pair_container .pair_text_block.v_1,
        body.case .dropdown_wrapper_5 .large_text_block.v_1,
        body.case .dropdown_wrapper_5 .pair_container .pair_text_block.v_0 ::selection,
        body.case .dropdown_wrapper_5 .large_text_block.v_0 ::selection{
            color: var(--dropdown_color9);
            background-color: var(--dropdown_color10);
        }
    /* DROPDOWN 6 */
        body.case .dropdown_wrapper_6 .heading_block,
        body.case .dropdown_wrapper_6.v_1 .heading_block::selection{
            color: var(--dropdown_color11);
            background-color: var(--dropdown_color12);
        }
        body.case .dropdown_wrapper_6.v_1 .heading_block,
        body.case .dropdown_wrapper_6.v_0 .heading_block::selection{
            color: var(--dropdown_color12);
            background-color: var(--dropdown_color11);
        }
        body.case .dropdown_wrapper_6 .pair_container .pair_text_block,
        body.case .dropdown_wrapper_6 .large_text_block,
        body.case .dropdown_wrapper_6 .pair_container .pair_text_block.v_1 ::selection,
        body.case .dropdown_wrapper_6 .large_text_block.v_1 ::selection{
            color: var(--dropdown_color12);
            background-color: var(--dropdown_color11);
        }
        body.case .dropdown_wrapper_6 .pair_container .pair_text_block.v_1,
        body.case .dropdown_wrapper_6 .large_text_block.v_1,
        body.case .dropdown_wrapper_6 .pair_container .pair_text_block.v_0 ::selection,
        body.case .dropdown_wrapper_6 .large_text_block.v_0 ::selection {
            color: var(--dropdown_color11);
            background-color: var(--dropdown_color12);
        }

    /* -------------------------- */
    /* CASE CURSOR */
    /* -------------------------- */

    body.case #cursor{
        background-image: none;
        width: 12px !important; /* To override JS */
        height: 12px !important; /* To override JS */
        border-radius: 50%;
        border-style: solid;
        border-width: 2px;
        transition-property: width, height, border-width, opacity;
        transition-duration: 0.1s, 0.1s, 0.1s, 1s;
        transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
    }
        body.case #cursor.hover {
            width: 0px !important; /* To override JS */
            height: 0px !important; /* To override JS */
            border-width: 6px;
        }

    /* CASE CURSOR COLORS */

        body.case #cursor.v_0{
            border-color: var(--color2);
            box-shadow: 0px 0px 0px 2px var(--color1);
        }
        
        body.case #cursor.v_1 {
            border-color: var(--color1);
            box-shadow: 0px 0px 0px 2px var(--color2);
        }
        
        body.case #cursor.v_2 {
            border-color: var(--color3);
            box-shadow: 0px 0px 0px 2px var(--color1);
        }
        
        body.case #cursor.v_3 {
            border-color: var(--color1);
            box-shadow: 0px 0px 0px 2px var(--color3);
        }
        
        body.case #cursor.v_4 {
            border-color: var(--color3);
            box-shadow: 0px 0px 0px 2px var(--color2);
        }
        
        body.case #cursor.v_5 {
            border-color: var(--color2);
            box-shadow: 0px 0px 0px 2px var(--color3);
        }
        body.case #cursor.v_6 {
            border-color: var(--color4);
            box-shadow: 0px 0px 0px 2px var(--color1);
        }
        
        body.case #cursor.v_7 {
            border-color: var(--color1);
            box-shadow: 0px 0px 0px 2px var(--color4);
        }
        
        body.case #cursor.v_8 {
            border-color: var(--color4);
            box-shadow: 0px 0px 0px 2px var(--color2);
        }
        
        body.case #cursor.v_9 {
            border-color: var(--color2);
            box-shadow: 0px 0px 0px 2px var(--color4);
        }
        
        body.case #cursor.v_10 {
            border-color: var(--color4);
            box-shadow: 0px 0px 0px 2px var(--color3);
        }
        
        body.case #cursor.v_11 {
            border-color: var(--color3);
            box-shadow: 0px 0px 0px 2px var(--color4);
        }


@media only screen and (max-width : 1024px) {

    .case_wrapper {
        width: 95%;
        padding: 0 2.5% 2% 2.5%;
    }

    body.case .pair_container {
        margin: 0;
    }

    body.case .large_text_block,
    body.case .pair_container .pair_text_block,
    body.case .pair_container img, 
    body.case .pair_container video,
    body.case .triple_container {
        width: 100%;
        margin: 0 0 2.5% 0;
        aspect-ratio: auto !important;
        overflow: hidden;
    }

        body.case .pair_text_block p,
        body.case .large_text_block p {
            position: relative !important;
            width: 88% !important;
            line-height: 150%;
            left: 5% !important;
            font-size: 100%;
            margin: 10% 0 5% 0 !important;
        }

        body.case .large_text_block h3,
        body.case .pair_text_block h3 {
            position: relative !important;
            margin-top: 5% !important;
            left: 5% !important;
            width: 90% !important;
        }

    body.case .case_intro_summary,
    body.case .case_intro_client {
        width: 90%;
        float: none;
        margin: 0 0 2% 0;
    }

    body.case .heading_block {
        font-size: 300%;
        line-height: 150%;
        margin: 0 0 2.5% 0;
    }

        body.case .heading_block img.arrow {
            width: 4%;
        }

}