/* Fundamental Rights clickable SVG
 --------------------------------------------------------------------------------------- */

.rights {
    position: relative;
    font-family: TheSans, Arial, sans-serif !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rights__svg {
    width: 100%;
    height: auto;
}

/* Popup toggle
 ------------------------------------------------------------------ */

.rights__toggle {
    display: inline-block;
    pointer-events: none;
    font-size: 3rem;
}

@media screen and (min-width: 640px) {
    .rights__toggle {
        pointer-events: all;
        font-size: 3rem;
    }

    .rights__toggle:focus {
        outline: none;
    }
}

/* Label text
 ------------------------------------------------------------------ */

.rights__label {
    fill: #fff;
    font-size: 3rem;
    filter: drop-shadow(0 0 0.25em rgb(0 0 0 / 0.01));
    transition: filter 0.2s ease;
}

.rights__label--large {
    font-size: 3.5rem;
    font-weight: 700;
}

.rights__toggle:hover .rights__label,
.rights__toggle:focus .rights__label {
    filter: drop-shadow(0 0 0.25em rgb(0 0 0 / 0.5));
    outline: none;
}

/* Blob
 ------------------------------------------------------------------ */

.rights__blob {
    opacity: 0.65;
    transition: opacity 0.2s ease;
    stroke: transparent;
    stroke-width: 0.75rem;
}

.rights__item--challenges .rights__blob {
    fill: #f20000;
}

.rights__item--law .rights__blob {
    fill: #576670;
}

.rights__item--courts .rights__blob {
    fill: #9cd0cc;
}

.rights__item--authoritarianism .rights__blob {
    fill: #dbc9a3;
}

.rights__item--climate .rights__blob {
    fill: #ce806b;
}

.rights__item--migration .rights__blob {
    fill: #948b83;
}

.rights__item--organisations .rights__blob {
    fill: #5ea3b5;
}

.rights__item--technologies .rights__blob {
    fill: #cdd2d8;
}

/* Remove transparency when interacting with toggle */

@media screen and (min-width: 640px) {
    .rights__toggle[aria-expanded='true'] .rights__blob,
    .rights__toggle:hover .rights__blob,
    .rights__toggle:focus .rights__blob {
        opacity: 1;
        outline: none;
    }

    .rights__toggle:focus-visible .rights__blob {
        stroke: #000;
    }
}
/* Meaningful supportive illustration
 ------------------------------------------------------------------ */

.rights__skyline {
    fill: #576670;
    pointer-events: none;
}

/* Popup wrapper
 ------------------------------------------------------------------ */

@media screen and (min-width: 640px) {
    .rights__popups {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: none !important;
    }
}

ul.rights__popups {
    list-style-type: none !important;
    padding: 1rem 0 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Popup */

.rights__popup {
    display: flex;
    flex-direction: column;

    font-size: 1.4rem;
    color: #222;
    background-color: #fff;
}

@media screen and (min-width: 640px) {
    .rights__popup {
        position: absolute;
        top: 33.333%;
        left: 50%;
        max-width: calc(100vw - 2rem);
        min-width: 15rem;
        transform: translate(-50%, -50%);
        box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        transition: opacity 0.2s, visibility 0.2s;
        opacity: 0;
        visibility: hidden;
    }
}

/* Necessary to trump specificity of existing styling */
ul li.rights__popup {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Active */
.rights__popup[aria-expanded='true'] {
    opacity: 1;
    visibility: visible;
}

.rights__popup-list {
    display: flex;
    flex-direction: column;
    padding: 0.5em 0;
}

/* Necessary to trump specificity of existing styling */
ul.rights__popup-list {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rights__popup-title {
    padding: 0.5em 1em;
    text-align: left;
    font-weight: 700;
    color: #5b6770;
    background-color: #eef0f0;
}

/* Necessary to trump specificity of existing styling */
ul li.rights__popup-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Link inside popup  */

.rights__link {
    display: block;
    padding: 0.5em 1em;
    text-align: left;
    pointer-events: all;
}

.rights__link:hover,
.rights__link:focus {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 0.125em;
    text-underline-offset: 0.125em;
}

/* Overrides & Quick Fixes */

/* .rights__blob, */
/* .rights__svg text  */
/* .rights__svg ellipse, */
.rights__skyline,
.rights__popups,
.rights__svg g,
.rights__svg tspan,
.rights__svg {
    pointer-events: none;
}