/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    COLLAPSIBLE CONTENT
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* Neutralize the SV collapsible style */

.env-collapse>:first-child {
    padding-top: 0;
}


/* Margin after a collapsible content */

.sv-collapsible-content {
    margin-bottom: 2rem;
}


/* However, margin between two or more collapsible contents should be less */

.sv-collapsible-content+.sv-collapsible-content {
    margin-top: -1rem;
}

:is([class*="toggle-section"]) {
    background: #fff;
    border: 1px solid #00000020;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: none;
    margin-top: 0;
    max-width: 600px;
    padding: 1.25rem;
}


/* Add space between image, media and text modules in collapsible content when the decoration is applied on a layout */

.sv-collapsible-content .sv-layout .sv-text-portlet:not(:first-child),
.sv-collapsible-content .sv-layout .sv-image-portlet:not(:first-child),
.sv-collapsible-content .sv-layout .sv-embeddedmedia-portlet:not(:first-child) {
    margin-top: var(--space-medium);
}

/* Adjust margins for headings that are the first child in a layout (hence the double .sv-layout
   in the selector) within collapsible content, the decreased margin-bottom should only be applied
   if the heading is the last child in the layout */

.sv-collapsible-content .sv-layout .sv-layout .sv-text-portlet-content h3:first-child {
    margin-top: 2rem;
}

.sv-collapsible-content .sv-layout .sv-layout .sv-text-portlet-content h3:first-child:last-child {
    margin-bottom: -0.8rem;
}

/* Full width image or media as first child in collapsible content */

.sv-collapsible-content :is([class*="toggle-section"]) .sv-image-portlet.card-remove-horizontal-margin:first-child,
.sv-collapsible-content :is([class*="toggle-section"]) .sv-embeddedmedia-portlet.card-remove-horizontal-margin:first-child {
    margin-bottom: 0;
    margin-top: var(--space-medium-negative);
}


/* Full width image or media as last child in collapsible content */

.sv-collapsible-content :is([class*="toggle-section"]) .sv-image-portlet.card-remove-horizontal-margin:last-child,
.sv-collapsible-content :is([class*="toggle-section"]) .sv-embeddedmedia-portlet.card-remove-horizontal-margin:last-child {
    margin-bottom: var(--space-medium-negative);
}


/* Image, media and text as last child in collapsible content */

.sv-collapsible-content .sv-text-portlet:last-child,
.sv-collapsible-content .sv-image-portlet:last-child,
.sv-collapsible-content .sv-embeddedmedia-portlet:last-child {
    margin-bottom: 0;
}


/* Remove padding from collapsible content if it contains a sv-channel to avoid double padding */

.toggle-section:has(.sv-channel) {
    padding: 0;
}


/* Margin after last child of a collapsible content */

:is([class*="toggle-section"]) *:last-child {
    margin-bottom: 0;
}


/* Toggle button */
a.env-collapse-header {
    background: var(--color-grey-light);
    border: 1px solid #00000020;
    border-radius: 0;
    color: var(--color-text);
    font-size: 1.3rem;
    justify-content: flex-start;
    max-width: 600px;
    padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
    text-decoration: none;
}

h4 a.env-collapse-header {
    font-size: 1rem;
    font-weight: normal;
}

a.env-collapse-header.env-collapse--expanded,
a.env-collapse-header:hover {
    background: var(--color-grey-light);
}

a.env-collapse-header[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

a.env-collapse-header:focus-visible {
    box-shadow: none;
    outline: 3px solid var(--color-focus);
}


/* Icon */

a.env-collapse-header::before {
    background-size: 24px;
    content: ' ';
    display: inline-block;
    filter: invert(1);
    height: 24px;
    margin-right: 8px;
    vertical-align: bottom;
    min-width: 24px;
}


/* Expanded */

a.env-collapse-header[aria-expanded="true"]::before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xMiw4bC02LDZsMS40LDEuNGw0LjYtNC42bDQuNiw0LjZMMTgsMTRMMTIsOHoiLz4NCjwvc3ZnPg0K);
}


/* Collapsed */

a.env-collapse-header[aria-expanded="false"]::before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGFnZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7fQ0KCS5zdDF7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjQsMjRIMFYwaDI0VjI0eiIvPg0KPHBhdGggY2xhc3M9InN0MSIgZD0iTTE2LjYsOC42TDEyLDEzLjJMNy40LDguNkw2LDEwbDYsNmw2LTZMMTYuNiw4LjZ6Ii8+DQo8L3N2Zz4NCg==);
}


/* Width in different column sizes */

.sv-column-12 :is([class*="toggle-section"]),
.sv-column-12 .env-collapse-header,
.sv-column-12 .env-collapse {
    max-width: 100%;
}

@media print {
    a.env-collapse-header {
        max-width: 100%;
    }

    .env-collapse {
        display: block !important;
        max-width: 100%;
    }

    .sv-collapsible-content {
        page-break-inside: avoid;
    }
}