/* this is for the accordion css */

.simplecontentcollection-accordion h3 {
    margin: 0;
}

div.basiccontentblock-accordion{
    margin-bottom: 30px;
}

div.basiccontentblock-accordion h2{
    font-size: 1.5em;
}

.accordion-trigger:hover {
    background: var(--brand-color);
    color: var(--lightest);
    /* border-color: var(--lightest) */
}

/* when expanded the accordion */
.accordion-trigger[aria-expanded="true"]{
    background: var(--brand-color);
    color: var(--lightest);
    /* border-color: var(--lightest) */
}

    /* when the trigger button is in focus, then the title will have a border */
    /* .accordion-trigger:focus span.accordion-title{
        border: 2px solid var(--lightest);
    } */

div.title h2 button.accordion-trigger{
    width: 100%;
    text-align: left;
    padding: 0.5em;
}

div.title h2 button.accordion-trigger span.accordion-title{
    display: grid;
    grid-template-columns: 11fr 1fr;
}

div.title h2 button.accordion-trigger{
    /* display: grid;
    grid-template-columns: 11fr 1fr; */
    border-style: solid none solid none;
    border-width: 1px;
}
    div.title h2 button.accordion-trigger span.svg{
        justify-self: end;
        height: 34px;
        width: 34px;
    }

    /* When not expanded, show the first SVG and hide the second */
    button.accordion-trigger[aria-expanded="false"] span.svg svg:nth-child(1){
        display: block;
    }

    button.accordion-trigger[aria-expanded="false"] span.svg svg:nth-child(2) {
        display: none;
    }

    /* When expanded, show the second SVG and hide the first */
    button.accordion-trigger[aria-expanded="true"] span.svg svg:nth-child(1){
        display: none;
    }

    button.accordion-trigger[aria-expanded="true"] span.svg svg:nth-child(2) {
        display: block;
    }


.accordion-panel{
    padding: 0.5em;
    display: none;
    opacity: 0;
    animation: fade-out 0.5s ease-out forwards;
    border-style: none solid solid solid;
    border-color: var(--dark);
    border-width: 1px;
}


/* when panel is shown */
.accordion-panel.show {
  animation: fade-in 0.5s ease-in forwards;
  display: block;
  opacity: 1;
}



/* Animation keyframes */
@keyframes fade-in {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}


/* the list of items right under the panel , removing margin */
.accordion-panel > ul{
    margin: 0;
}