.ropme-strategic-directions-infographic {
    --cyan-dark: #006078;
    --cyan: #00A2C6;
    --cyan-light: #6DE3FF;
    --green-dark: #297A50;
    --green: #3EB778;
    --green-light: #7CDF88;
    --bronze-dark: #B6842D;
    --bronze: #D19E43;
    --bronze-light: #ECD6AF;

    --shrink-factor: 1;
    --language-direction-factor: 1;

    --border-radius-small: 4px;
    --border-radius: 12px;
    --gap: 4px;
    --root-font-size: 32px;
    --root-padding-top: 80px;
    --root-padding-sides: 28%;
    --featured-image-size: 52px;
    --arrow-image-size: 22px;
    --expand-btn-size: 70px;
    --expand-btn-image-size: 24px;
    --goals-padding: 16px;
    --goals-title-font-size: 20px;
    --goals-excerpt-font-size: 14px;
    --programs-padding: 16px;
    --programs-gap: 16px;
    --programs-title-font-size: 16px;
    --priority-areas-padding: 7px;
    --priority-areas-gap: 8px;
    --priority-areas-font-size: 14px;
}
.ropme-strategic-directions-infographic.shrink {
    --shrink-factor: 0.5;
}
html[dir="rtl"] .ropme-strategic-directions-infographic {
    --language-direction-factor: -1;
}
@media (max-width: 500px) {
    .ropme-strategic-directions-infographic {
        --shrink-factor: 0.75;
    }
}
@media (max-width: 375px) {
    .ropme-strategic-directions-infographic {
        --shrink-factor: 0.6;
    }
}

.ropme-strategic-directions-infographic-container:has(.ropme-strategic-directions-infographic.shrink) * {
    transition: all .35s ease;
}
.ropme-strategic-directions-infographic-container * {
    /* transition: all 1s linear(
        0.0034 0.36%, 0.0122 27.37%, 0.0215 39.64%, 0.0335 50.09%, 0.0449 56.79%,
        0.0604 63.01%, 0.0772 66.99%, 0.0964 69.48%, 0.1068 70.51%, 0.1409 72.86%,
        0.175 74.53%, 0.2282 76.55%, 0.2878 78.23%, 0.4257 81.12%, 0.7563 86.51%,
        0.8282 88.06%, 0.8851 89.68%, 0.9351 91.71%, 0.9694 93.98%, 0.9888 96.52%,
        0.993 97.91%, 0.9935 99.37%
    ); */
    transition: all .35s ease;
}

.ropme-strategic-directions-infographic-container .ropme-strategic-directions-infographic-backdrop.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 999;
}
.ropme-strategic-directions-infographic-container .ropme-strategic-directions-infographic-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: -1;
}

.ropme-strategic-directions-infographic {
    width: 75vw;
    position: relative;
    transform: translateX(calc(var(--language-direction-factor) * -50%));
    z-index: 10000;
}
.ropme-strategic-directions-infographic.shrink {
    width: 100%;
    position: relative;
    transform: translateX(0);
}
@media (max-width: 767px) {
    .ropme-strategic-directions-infographic {
        width: 100%;
        position: relative;
        transform: translateX(0);
    }
}

.ropme-strategic-directions-infographic li {
    list-style-type: none;
}

.ropme-strategic-directions-infographic a {
    text-decoration: none;
    color: inherit;
    display: block;
}

ul.ropme-strategic-directions-infographic, .ropme-strategic-directions-infographic ul {
    padding: 0;
}

.ropme-strategic-directions-infographic p {
    margin: 0;
}

.ropme-strategic-directions-infographic .node {
    display: grid;
    gap: calc(var(--gap) * var(--shrink-factor));
    grid-template-columns: auto min-content min-content;
    align-items: center;
}

.ropme-strategic-directions-infographic .node .featured-image {
    grid-column: 2 / span 1;
    width: calc(var(--featured-image-size) * var(--shrink-factor));
    height: auto;
}
@container (width < 334px) {
    .ropme-strategic-directions-infographic .node .featured-image {
        display: none;
    }
    .ropme-strategic-directions-infographic.shrink .node .featured-image {
        display: block;
    }
}
@container (width < 167px) {
    .ropme-strategic-directions-infographic.shrink .node .featured-image {
        display: none;
    }
}

.ropme-strategic-directions-infographic .node .arrow-image {
    grid-column: 3 / span 1;
    width: calc(var(--arrow-image-size) * var(--shrink-factor));
    height: auto;
    transform: scaleX(var(--language-direction-factor));
}
@container (width < 290px) {
    .ropme-strategic-directions-infographic .node .arrow-image {
        display: none;
    }
    .ropme-strategic-directions-infographic.shrink .node .arrow-image {
        display: block;
    }
}
@container (width < 145px) {
    .ropme-strategic-directions-infographic.shrink .node .arrow-image {
        display: none;
    }
}

.ropme-strategic-directions-infographic .ropme-strategic-directions-expand-btn {
    display: none;
    width: calc(var(--expand-btn-size) * var(--shrink-factor));
    height: calc(var(--expand-btn-size) * var(--shrink-factor));
    border: none;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    padding: 0;
    margin-inline-start: auto;
    cursor: pointer;
}
@media (width < 500px), (any-pointer:coarse) {
    .ropme-strategic-directions-infographic .ropme-strategic-directions-expand-btn {
        display: block;
    }
}

.ropme-strategic-directions-infographic .ropme-strategic-directions-expand-btn img {
    display: block;
    margin: auto;
    width: calc(var(--expand-btn-image-size) * var(--shrink-factor));
    height: auto;
}

/* Root */
/* Root */
/* Root */
.ropme-strategic-directions-infographic > .depth0.item0 > .node .title {
    font-size: calc(var(--root-font-size) * var(--shrink-factor));
    font-weight: bold;
}

.ropme-strategic-directions-infographic > .depth0.item0 > .node {
    background-color: var(--wp--preset--color--primary);
    color: white;
    margin-bottom: calc(var(--gap) * var(--shrink-factor));
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    text-align: center;
    padding-top: calc(var(--root-padding-top) * var(--shrink-factor));
    padding-left: var(--root-padding-sides);
    padding-right: var(--root-padding-sides);
}

/* Goals */
/* Goals */
/* Goals */
.ropme-strategic-directions-infographic > .depth0 > .children {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));

}
/* .ropme-strategic-directions-infographic.shrink > .depth0 > .children { */
/*     grid-template-columns: repeat(auto-fit, minmax(calc(250px * var(--shrink-factor)), 1fr)); */
/* } */

.ropme-strategic-directions-infographic > .depth0 > .children {
    gap: calc(var(--gap) * var(--shrink-factor));
}

.ropme-strategic-directions-infographic .depth1 {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * var(--shrink-factor));
}

.ropme-strategic-directions-infographic .depth1 > .node {
    color: white;
    padding: calc(var(--goals-padding) * var(--shrink-factor));
    border-radius: calc(var(--border-radius-small) * var(--shrink-factor));
    /* display: flex; */
    /* gap: 5px; */
    /* flex-direction: column; */
}

.ropme-strategic-directions-infographic .depth1 > .node .title {
    font-weight: bold;
    font-size: calc(var(--goals-title-font-size) * var(--shrink-factor));
}

.ropme-strategic-directions-infographic .depth1 > .node .excerpt {
    font-weight: lighter;
    font-size: calc(var(--goals-excerpt-font-size) * var(--shrink-factor));
}

/* Programs */
/* Programs */
/* Programs */
.ropme-strategic-directions-infographic .depth1 > .children {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * var(--shrink-factor));
}

.ropme-strategic-directions-infographic .depth2 {
    padding: calc(var(--programs-padding) * var(--shrink-factor));
    border-radius: calc(var(--border-radius-small) * var(--shrink-factor));
    gap: calc(var(--programs-gap) * var(--shrink-factor));
    color: white;
    display: flex;
    flex-direction: column;
}

.ropme-strategic-directions-infographic .depth2 > .node .title {
    font-weight: bold;
    font-size: calc(var(--programs-title-font-size) * var(--shrink-factor));
}

/* Priority Areas */
/* Priority Areas */
/* Priority Areas */
.ropme-strategic-directions-infographic .depth2 > .children {
    display: flex;
    flex-direction: column;
    gap: calc(var(--priority-areas-gap) * var(--shrink-factor));
}

.ropme-strategic-directions-infographic .depth3 > .node {
    padding: calc(var(--priority-areas-padding) * var(--shrink-factor));
    border-radius: calc(var(--border-radius) * var(--shrink-factor));
    color: black;
}

.ropme-strategic-directions-infographic .depth3 > .node .title {
    font-size: calc(var(--priority-areas-font-size) * var(--shrink-factor));
}

/* Goal I */
/* Goal I */
/* Goal I */
.ropme-strategic-directions-infographic .depth1.item0 > .node {
    background-color: var(--cyan-dark);
}

.ropme-strategic-directions-infographic .depth1.item0 > .children > li {
    background-color: var(--cyan);
}

.ropme-strategic-directions-infographic .depth1.item0 .depth3 > .node {
    background-color: var(--cyan-light);
}

/* Goal II */
/* Goal II */
/* Goal II */
.ropme-strategic-directions-infographic .depth1.item1 > .node {
    background-color: var(--green-dark);
}

.ropme-strategic-directions-infographic .depth1.item1 > .children > li {
    background-color: var(--green);
}

.ropme-strategic-directions-infographic .depth1.item1 .depth3 > .node {
    background-color: var(--green-light);
}

/* Goal III */
/* Goal III */
/* Goal III */
.ropme-strategic-directions-infographic .depth1.item2 > .node {
    background-color: var(--bronze-dark);
}

.ropme-strategic-directions-infographic .depth1.item2 > .children > li {
    background-color: var(--bronze);
}

.ropme-strategic-directions-infographic .depth1.item2 .depth3 > .node {
    background-color: var(--bronze-light);
}