/* ==========================================================================
   Tabbed accordion page
   Tabs + parent/child accordions + filter menu + export menu.
   Replaces every {% css %} block in the page template and its includes.
   ========================================================================== */


/* Tab nav
   ========================================================================== */
.tab-intro-copy {
    background-color: var(--background-gray);
    padding: 65vw 0 2rem 0;
    position: relative;
    z-index: 1;
}
.intro-tab-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.intro-tab {
    align-items: center;
    background-color: var(--background-teal);
    display: flex;
    flex-direction: row;
    padding: 1rem;
}
.intro-tab.active,
.intro-tab:hover {
    background-color: #e3fffc;
}
.intro-tab.active .tab-img,
.intro-tab:hover .tab-img {
    filter: hue-rotate(65deg) brightness(1.7);
}
.intro-tab .tab-heading {
    color: var(--heading-violet);
    margin-bottom: .15rem;
}
.intro-tab .tab-copy {
    color: #000;
    font-size: .9rem;
    margin: 0;
}
.intro-tab .tab-copy-wrapper {
    align-self: center;
}
.intro-tab .tab-img {
    height: auto;
    margin-right: 1rem;
    max-width: 50px;
}


/* Parent accordions
   Note the child combinators throughout: .accordion-child lives inside
   .accordion-parent, so descendant selectors leak from one level to the other.
   ========================================================================== */
.accordion-parent {
    background-color: var(--background-teal);
    padding: 1rem;
    margin-bottom: 1rem;
}
.accordion-parent > .accordion-collapse {
    padding: .5rem 0 0 0;
}
.accordion-parent > .accordion-header {
    align-items: center;
    color: var(--heading-violet);
    display: flex;
    gap: .75rem;
}
.accordion-parent > .accordion-header > .accordion-button {
    flex: 1 1 auto;
    font-size: 1.2rem;
    font-weight: 700;
}
/* Parent arrow is the standalone .accordion-chevron span, not the button. */
.accordion-parent > .accordion-header > .accordion-button::after {
    display: none;
}
.accordion-chevron {
    color: var(--heading-violet);
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
}
.accordion-chevron::after {
    content: '\f107';
    display: inline-block;
    font: var(--fa-font-solid);
    font-size: 1.4rem;
    text-rendering: auto;
    transition: all .3s;
    -webkit-font-smoothing: antialiased;
}
.accordion-chevron:not(.collapsed)::after {
    rotate: 180deg;
}


/* Child accordions
   ========================================================================== */
.accordion-child {
    background-color: #ffffff8a;
    border: 1px solid #CECECE;
    margin-top: .5rem;
    padding: 1rem;
}
.accordion-child:not(:first-of-type) {
    border-top: 1px solid #CECECE;
}
.accordion-child .accordion-body {
    padding-top: 1rem;
}
.accordion-child .accordion-body p:last-child {
    margin-bottom: 0;
}
.accordion-child > .accordion-header > .accordion-button {
    font-size: 1.1rem;
}
.accordion-child > .accordion-header > .accordion-button::after {
    content: '\f107';
    display: inline-block;
    font: var(--fa-font-solid);
    text-rendering: auto;
    transition: all .3s;
    -webkit-font-smoothing: antialiased;
}
.accordion-child > .accordion-header > .accordion-button:not(.collapsed)::after {
    rotate: 180deg;
}
.sub-acc-header-icon {
    height: 30px;
    margin-right: .5rem;
}


/* Filter menu additions
   Base .filter-menu styling stays in main.css.
   ========================================================================== */
.accordion-parent.filter-hidden {
    display: none !important;
}
/* Secondary treatment for Clear — doubled selector to outrank global .btn. */
.filter-menu-reset.btn {
    background-color: transparent;
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
}
.filter-menu-reset.btn:hover {
    background-color: var(--brand-blue);
    color: var(--white);
    filter: none;
}


/* Accordion toolbar
   ========================================================================== */
.accordion-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
}
.accordion-toolbar-bottom {
    margin-bottom: 0;
    margin-top: 1rem;
}
.accordion-toolbar-btn {
    background: none;
    border: 1px solid var(--brand-blue);
    border-radius: 100px;
    color: var(--brand-blue);
    font-size: .9rem;
    padding: .3rem 1.2rem;
    transition: all .3s;
}
.accordion-toolbar-btn:hover {
    background-color: var(--brand-blue);
    color: var(--white);
}


/* Export selection checkbox
   ========================================================================== */
.accordion-select {
    flex: 0 0 auto;
    line-height: 0;
}
.accordion-select .form-check-input {
    border-color: var(--brand-purple);
    border-radius: 0;
    height: 1.4rem;
    margin: 0;
    width: 1.4rem;
}
.accordion-select .form-check-input:checked {
    background-color: var(--white);
    border-color: var(--brand-purple);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23C800A1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.accordion-select .form-check-input:focus {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 .2rem rgba(200, 0, 161, .25);
}


/* Export menu card
   ========================================================================== */
.export-menu {
    background-color: var(--background-gray);
    border-top: 8px solid var(--brand-yellow);
    padding: 1rem;
}
.export-menu-heading {
    color: var(--text-black);
    font-size: 1.15rem;
    font-weight: 400;
    margin: 0 0 .5rem 0;
}
.export-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.export-list:empty {
    display: none;
}
.export-item {
    align-items: center;
    background-color: #dfe5ec;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    margin-bottom: .35rem;
    padding: .35rem .5rem;
}
.export-item-label {
    color: var(--text-black);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
}
.export-item-remove {
    background: none;
    border: none;
    color: var(--brand-purple);
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .15rem;
    transition: all .3s;
}
.export-item-remove:hover {
    filter: brightness(1.3);
}
.export-empty {
    color: #555;
    font-size: .85rem;
    font-style: italic;
    margin: 0;
}
.export-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}
.export-menu-btn {
    font-size: .9rem;
}
.export-menu-btn:disabled {
    opacity: .5;
}
.export-clear-btn {
    background: none;
    border: none;
    color: var(--brand-blue);
    font-size: .85rem;
    padding: 0;
    transition: all .3s;
}
.export-clear-btn:hover {
    filter: brightness(1.2);
}


/* Breakpoints
   ========================================================================== */
@media (min-width: 576px) {
    .tab-intro-copy {
        padding: 1.5rem 0;
    }
}

@media (min-width: 768px) {
    .tab-intro-copy {
        padding: 0;
    }
    .tab-intro-copy .intro-copy {
        padding: 2rem 0;
    }
    .intro-tab {
        align-items: start;
        flex-direction: column;
        flex: 1;
    }
    .intro-tab .tab-img {
        height: unset;
        margin-bottom: 1rem;
        margin-right: unset;
        max-height: 50px;
        max-width: unset;
        width: auto;
    }
    .intro-tab-wrapper {
        flex-direction: row;
        position: relative;
    }
    .intro-tab-wrapper::after {
        background-color: #fff;
        bottom: 0;
        content: '';
        left: -1000px;
        position: absolute;
        right: -1000px;
        top: 50%;
        z-index: -1;
    }
}

@media (min-width: 992px) {
    .tab-intro-copy .intro-copy {
        padding: 2.5rem 0;
    }
    .intro-tab .tab-img {
        max-height: 60px;
    }
    .accordion-parent {
        padding: 1.5rem;
    }
    .accordion-parent > .accordion-collapse {
        padding: 1rem 0 0 0;
    }
    .accordion-parent > .accordion-header > .accordion-button {
        font-size: 1.4rem;
    }
    .accordion-child {
        margin-top: .75rem;
    }
    .accordion-child > .accordion-header > .accordion-button {
        font-size: 1.15rem;
    }
    .export-menu-heading {
        font-size: 1.25rem;
    }
    .export-menu-btn {
        font-size: 1rem;
        padding: .3rem 1.8rem;
    }
    .export-item-label {
        font-size: .95rem;
    }
}

@media (min-width: 1200px) {
    .tab-intro-copy .intro-copy {
        padding: 3rem 0;
    }
    .intro-tab {
        padding: 1.25rem;
    }
    .accordion-parent {
        padding: 1.75rem;
    }
    .accordion-parent > .accordion-header > .accordion-button {
        font-size: 1.5rem;
    }
    .accordion-child > .accordion-header > .accordion-button {
        font-size: 1.2rem;
    }
}

@media (min-width: 1400px) {
    .tab-intro-copy .intro-copy {
        padding: 3.5rem 0;
    }
}
/* ==========================================================================
   Inline callouts, inline case studies, case study modal
   Re-scoped from the toolkit's .subchap-copy-block to the child accordion
   body in the tabbed page template.

   Append to accordion-tabs.css, or load as its own file after main.css.
   ========================================================================== */


/* Contain the floats
   Without this, a floated callout/case study escapes the accordion body and
   overlaps whatever follows. The toolkit got this from .subchap-wrapper.
   ========================================================================== */
.accordion-child .accordion-body {
    display: flow-root;
}


/* ==========================================================================
   Inline callout
   ========================================================================== */

.accordion-child .accordion-body .inline-callout {
    background-color: var(--heading-violet);
    color: var(--white);
    margin-bottom: 1rem;
    padding: .75rem;
    position: relative;
}
.accordion-child .accordion-body .inline-callout *,
.accordion-child .accordion-body .inline-callout h1,
.accordion-child .accordion-body .inline-callout h2,
.accordion-child .accordion-body .inline-callout h3,
.accordion-child .accordion-body .inline-callout h4,
.accordion-child .accordion-body .inline-callout h5,
.accordion-child .accordion-body .inline-callout h6 {
    color: var(--white);
}
.accordion-child .accordion-body .inline-callout a {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
}
.accordion-child .accordion-body .inline-callout a:hover {
    filter: brightness(1.2);
}
.accordion-child .accordion-body .inline-callout p:last-of-type {
    margin-bottom: 0;
}

/* Solid variants. See note about .bg-yellow contrast. */
.accordion-child .accordion-body .inline-callout.bg-brightPurple {
    background-color: var(--brand-purple);
}
.accordion-child .accordion-body .inline-callout.bg-blue {
    background-color: var(--brand-blue);
}
.accordion-child .accordion-body .inline-callout.bg-yellow {
    background-color: var(--brand-yellow);
}


/* ==========================================================================
   Inline case study
   Same shell as the callout, plus the icon well.
   ========================================================================== */

.accordion-child .accordion-body .inline-case-study {
    background-color: var(--heading-violet);
    color: var(--white);
    margin-bottom: 1rem;
    padding: .75rem .75rem .75rem 3.5rem;
    position: relative;
}
.accordion-child .accordion-body .inline-case-study * {
    color: var(--white);
}
.accordion-child .accordion-body .inline-case-study a {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
}
.accordion-child .accordion-body .inline-case-study a:hover {
    filter: brightness(1.2);
}
.accordion-child .accordion-body .inline-case-study p:last-of-type {
    margin-bottom: 0;
}
.accordion-child .accordion-body .inline-case-study img {
    left: .75rem;
    position: absolute;
    top: .75rem;
    width: 2.25rem;
}
.accordion-child .accordion-body .inline-case-study h1,
.accordion-child .accordion-body .inline-case-study h2,
.accordion-child .accordion-body .inline-case-study h3,
.accordion-child .accordion-body .inline-case-study h4,
.accordion-child .accordion-body .inline-case-study h5,
.accordion-child .accordion-body .inline-case-study h6 {
    font-size: 1.05rem;
    margin-bottom: .35rem;
}


/* ==========================================================================
   Float behaviour — shared
   Full width and unfloated on phones; the accordion column is too narrow for
   a 50% float to read as anything but a sliver.
   ========================================================================== */

@media (min-width: 768px) {
    .accordion-child .accordion-body .inline-callout.halfWidthRight,
    .accordion-child .accordion-body .inline-callout.thirdWidthRight,
    .accordion-child .accordion-body .inline-case-study {
        float: right;
        margin: 0 0 1rem 1.5rem;
        width: 50%;
    }
    .accordion-child .accordion-body .inline-callout.thirdWidthRight {
        width: 32%;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthLeft,
    .accordion-child .accordion-body .inline-callout.thirdWidthLeft {
        float: left;
        margin: 0 1.5rem 1rem 0;
        width: 50%;
    }
    .accordion-child .accordion-body .inline-callout.thirdWidthLeft {
        width: 32%;
    }
}

/* From lg up the right-floated blocks bleed out past the accordion panel,
   as they did in the toolkit. Left-floated variants keep positive margins —
   a negative left margin would run under the filter/export sidebar. */
@media (min-width: 992px) {
    .accordion-child .accordion-body .inline-callout,
    .accordion-child .accordion-body .inline-case-study {
        padding: 1rem;
    }
    .accordion-child .accordion-body .inline-case-study {
        padding-left: 4rem;
    }
    .accordion-child .accordion-body .inline-case-study img {
        left: 1rem;
        top: 1rem;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthRight,
    .accordion-child .accordion-body .inline-callout.halfWidthLeft,
    .accordion-child .accordion-body .inline-case-study {
        width: 50%;
    }
    .accordion-child .accordion-body .inline-callout.thirdWidthRight,
    .accordion-child .accordion-body .inline-callout.thirdWidthLeft {
        width: 35%;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthRight,
    .accordion-child .accordion-body .inline-callout.thirdWidthRight,
    .accordion-child .accordion-body .inline-case-study {
        margin: 0 0 2rem 2rem;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthLeft,
    .accordion-child .accordion-body .inline-callout.thirdWidthLeft {
        margin: 0 2rem 2rem 0;
    }
}

@media (min-width: 1200px) {
    .accordion-child .accordion-body .inline-callout,
    .accordion-child .accordion-body .inline-case-study {
        padding: 1.25rem;
    }
    .accordion-child .accordion-body .inline-case-study {
        padding-left: 4.75rem;
    }
    .accordion-child .accordion-body .inline-case-study img {
        left: 1.25rem;
        top: 1.25rem;
        width: 2.5rem;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthRight,
    .accordion-child .accordion-body .inline-case-study {
        margin: 0 0 2rem 2rem;
        width: 60%;
    }
    .accordion-child .accordion-body .inline-callout.thirdWidthRight {
        margin: 0 0 2rem 2rem;
        width: 38%;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthLeft {
        margin: 0 2rem 2rem 0;
        width: 55%;
    }
    .accordion-child .accordion-body .inline-callout.thirdWidthLeft {
        margin: 0 2rem 2rem 0;
        width: 38%;
    }
}

@media (min-width: 1400px) {
    .accordion-child .accordion-body .inline-callout,
    .accordion-child .accordion-body .inline-case-study {
        padding: 1.5rem;
    }
    .accordion-child .accordion-body .inline-case-study {
        padding-left: 6rem;
    }
    .accordion-child .accordion-body .inline-case-study img {
        left: 1.5rem;
        top: 1.5rem;
        width: 3.5rem;
    }
    .accordion-child .accordion-body .inline-callout.halfWidthRight,
    .accordion-child .accordion-body .inline-case-study {
        margin: 0 0 2rem 2rem;
        width: 65%;
    }
    .accordion-child .accordion-body .inline-callout.thirdWidthRight {
        margin: 0 0 2rem 2rem;
        width: 40%;
    }
}


/* ==========================================================================
   Case study card (teaser link)
   Unscoped in the toolkit and unchanged here, minus the assumption that it
   sits in a wide column.
   ========================================================================== */

.case-study-link {
    text-decoration: none;
}
.case-study-card {
    display: flex;
    margin-bottom: 1.5rem;
    padding: 1rem;
    transition: all .3s;
}
.case-study-card h3 {
    color: var(--heading-violet);
    transition: all .3s;
}
.case-study-copy {
    flex: 1;
}
.case-study-copy p:last-child {
    margin-bottom: 0;
}
.case-study-img {
    flex: 0 0 40%;
    margin-left: 1rem;
}
.case-study-img img {
    height: 100%;
    object-fit: cover;
    transition: all .3s;
    width: 100%;
}
.case-study-link:hover .case-study-card {
    filter: brightness(1.1);
}
.case-study-link:hover .case-study-card .case-study-img img {
    transform: scale(1.05);
}

@media (max-width: 576px) {
    .case-study-card {
        flex-direction: column;
    }
    .case-study-img {
        flex: none;
        margin-left: 0;
        margin-top: 1rem;
    }
}

@media (min-width: 992px) {
    .case-study-card {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    .case-study-img {
        flex: 0 0 35%;
        margin-left: 1.5rem;
    }
}


/* ==========================================================================
   Case study modal
   Toolkit gradient swapped for this site's hero gradient, following the
   .webp / .no-webp pattern in main.css.
   ========================================================================== */

.case-study-modal .modal-content {
    background-color: var(--background-teal);
    border-radius: 0;
    position: relative;
}
.case-study-modal .modal-content::after {
    background-position: center;
    background-size: cover;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -10;
}
.case-study-modal .modal-content::before {
    background-color: #fff;
    bottom: 0;
    content: '';
    left: 0;
    opacity: .3;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -5;
}
.case-study-modal .modal-header {
    border: none;
}
.case-study-modal .modal-title {
    color: var(--heading-violet);
}
.case-study-modal .modal-body a {
    font-weight: 700;
}
.case-study-modal .modal-body a:hover {
    filter: brightness(1.2);
}
.case-study-modal .modal-body h1,
.case-study-modal .modal-body h2,
.case-study-modal .modal-body h3,
.case-study-modal .modal-body h4,
.case-study-modal .modal-body h5,
.case-study-modal .modal-body h6 {
    color: var(--heading-violet);
}

/* Inline button — brand blue here rather than the toolkit's purple, so it
   matches the .btn treatment in main.css. */
.case-study-modal .modal-body .inline-btn {
    display: block;
    margin: 1rem 0;
    width: fit-content;
}

/* Inline image + caption */
.case-study-modal .modal-body .inline-image {
    position: relative;
}
.case-study-modal .modal-body .inline-image img {
    width: 100%;
}
.case-study-modal .modal-body .inline-image .caption {
    font-size: .8rem;
    line-height: 1.2;
    padding: .5rem;
    position: relative;
}
.case-study-modal .modal-body .inline-image .caption::after {
    content: '';
    height: 100%;
    left: 0;
    opacity: .75;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.case-study-modal .modal-body .inline-image .caption.blue,
.case-study-modal .modal-body .inline-image .caption.purple {
    color: #fff;
}
.case-study-modal .modal-body .inline-image .caption.blue::after {
    background-color: var(--brand-blue);
}
.case-study-modal .modal-body .inline-image .caption.purple::after {
    background-color: var(--brand-purple);
}
.case-study-modal .modal-body .inline-image .caption.yellow::after {
    background-color: var(--brand-yellow);
}
.case-study-modal .modal-body .inline-image.fullWidth {
    margin: 1.25rem 0;
    width: 100%;
}
.case-study-modal .modal-body .inline-image.halfWidthLeft,
.case-study-modal .modal-body .inline-image.thirdWidthLeft {
    float: left;
    margin: 0 1.5rem 1rem 0;
    width: 50%;
}
.case-study-modal .modal-body .inline-image.halfWidthRight,
.case-study-modal .modal-body .inline-image.thirdWidthRight {
    float: right;
    margin: 0 0 1rem 1.5rem;
    width: 50%;
}

/* Inline video */
.case-study-modal .modal-body .inline-video {
    margin: 1.25rem 0;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
}
.case-study-modal .modal-body .inline-video iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media (min-width: 767px) {
    .case-study-modal .modal-body .inline-btn {
        margin: 1.5rem 0;
    }
    .case-study-modal .modal-body .inline-image .caption {
        bottom: 0;
        font-size: .8rem;
        font-style: italic;
        left: 0;
        right: 0;
        z-index: 10;
    }
    .case-study-modal .modal-body .inline-image .caption:not(.under) {
        position: absolute;
    }
    .case-study-modal .modal-body .inline-image.halfWidthLeft {
        margin: 0 1.5rem 1rem 0;
        width: 45%;
    }
    .case-study-modal .modal-body .inline-image.halfWidthRight {
        margin: 0 0 1rem 1.5rem;
        width: 45%;
    }
    .case-study-modal .modal-body .inline-image.thirdWidthLeft {
        margin: 0 1.5rem 1rem 0;
        width: 32%;
    }
    .case-study-modal .modal-body .inline-image.thirdWidthRight {
        margin: 0 0 1rem 1.5rem;
        width: 32%;
    }
}

@media (min-width: 992px) {
    .case-study-modal .modal-content {
        padding: 1rem;
    }
    .case-study-modal .modal-body .inline-image .caption {
        font-size: .9rem;
    }
    .case-study-modal .modal-body .inline-image.fullWidth {
        margin: 1.5rem 0;
    }
    .case-study-modal .modal-body .inline-image.halfWidthLeft {
        margin: 0 2rem 2rem 0;
        width: 50%;
    }
    .case-study-modal .modal-body .inline-image.halfWidthRight {
        margin: 0 0 2rem 2rem;
        width: 50%;
    }
    .case-study-modal .modal-body .inline-image.thirdWidthLeft {
        margin: 0 2rem 2rem 0;
        width: 35%;
    }
    .case-study-modal .modal-body .inline-image.thirdWidthRight {
        margin: 0 0 2rem 2rem;
        width: 35%;
    }
}

@media (min-width: 1200px) {
    .case-study-modal .modal-body .inline-image .caption {
        line-height: 1.3rem;
    }
}
.accordion-child .accordion-body .inline-case-study img {
    filter: brightness(0) invert(1);
}

/* Accordion Headings */
.accordion-section-heading {
    color: var(--heading-violet);
    font-size: 1.5rem;
    margin: 2rem 0 .75rem 0;
}
.accordion-wrapper > .accordion-section-heading:first-child {
    margin-top: 0;
}
.accordion-section-heading.filter-hidden {
    display: none !important;
}
@media (min-width: 992px) {
    .accordion-section-heading {
        font-size: 1.8rem;
        margin: 2.5rem 0 1rem 0;
    }
}
/* /Accordion Headings */


/* To Do Lists */
.accordion-item.accordion-child .todo-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}
.accordion-item.accordion-child .todo-list > li,
.accordion-item.accordion-child .todo-list__label {
    align-items: flex-start;
    display: flex;
    gap: .6rem;
}
.accordion-item.accordion-child .todo-list > li {
    margin-bottom: .5rem;
    position: relative;
}
.accordion-item.accordion-child .todo-list > li:last-child {
    margin-bottom: 0;
}
.accordion-item.accordion-child .todo-list .todo-list {
    margin: .5rem 0 0 1.75rem;
}
.accordion-item.accordion-child .todo-list > li > input[type="checkbox"] {
    cursor: pointer;
    height: 1.35rem;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 1.35rem;
    z-index: 2;
}
.accordion-item.accordion-child .todo-list > li > input[type="checkbox"]:disabled {
    cursor: default;
}
.accordion-item.accordion-child .todo-list > li::before {
    content: '\f0c8';
    font: var(--fa-font-regular);
    font-size: 1.2rem;
    color: var(--heading-violet);
    flex: 0 0 auto;
    margin-top: .05em;
    text-rendering: auto;
    transition: color .2s;
    -webkit-font-smoothing: antialiased;
}
.accordion-item.accordion-child .todo-list > li:has(> input[type="checkbox"]:checked)::before {
    content: '\f14a';
}
.accordion-item.accordion-child .todo-list > li:has(> input[type="checkbox"]:enabled:hover)::before {
    color: var(--brand-blue);
}
.accordion-item.accordion-child .todo-list > li:has(> input[type="checkbox"]:focus-visible)::before {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
.accordion-item.accordion-child .todo-list > li > .todo-list__label__description,
.accordion-item.accordion-child .todo-list > li > p,
.accordion-item.accordion-child .todo-list > li > span {
    flex: 1 1 auto;
    line-height: 1.4;
    margin: 0 !important;
}
/* /To Do Lists */

/* Accordion Inline Images */
.accordion-child .accordion-body .inline-image {
    margin: 0 0 1.25rem 0;
    position: relative;
    width: 100%;
}
.accordion-child .accordion-body .inline-image picture {
    display: block;
}
.accordion-child .accordion-body .inline-image img,
.accordion-child .accordion-body .inline-image .inline-image-img {
    display: block;
    height: auto;
    width: 100%;
}
.accordion-child .accordion-body .inline-image .caption {
    font-size: .8rem;
    line-height: 1.2;
    padding: .5rem;
    position: relative;
}
.accordion-child .accordion-body .inline-image .caption p:last-child {
    margin-bottom: 0;
}
.accordion-child .accordion-body .inline-image .caption.blue {
    background-color: var(--brand-blue);
    background-color: color-mix(in srgb, var(--brand-blue) 78%, transparent);
    color: var(--white);
}
.accordion-child .accordion-body .inline-image .caption.purple {
    background-color: var(--brand-purple);
    background-color: color-mix(in srgb, var(--brand-purple) 78%, transparent);
    color: var(--white);
}
.accordion-child .accordion-body .inline-image .caption.yellow {
    background-color: var(--brand-yellow);
    background-color: color-mix(in srgb, var(--brand-yellow) 85%, transparent);
    color: var(--text-black);
}
.accordion-child .accordion-body .inline-image .caption:not(.blue):not(.purple):not(.yellow) {
    background-color: var(--background-gray);
    color: var(--text-black);
}
.accordion-child .accordion-body .inline-image .caption.under {
    position: relative;
}
@media (min-width: 768px) {
    .accordion-child .accordion-body .inline-image.fullWidth {
        margin: 1.25rem 0;
        width: 100%;
    }
    .accordion-child .accordion-body .inline-image.halfWidthRight,
    .accordion-child .accordion-body .inline-image.thirdWidthRight {
        float: right;
        margin: 0 0 1rem 1.5rem;
        width: 50%;
    }
    .accordion-child .accordion-body .inline-image.thirdWidthRight {
        width: 32%;
    }

    .accordion-child .accordion-body .inline-image .caption {
        font-style: italic;
    }
    .accordion-child .accordion-body .inline-image .caption.over {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        z-index: 10;
    }
}

@media (min-width: 992px) {
    .accordion-child .accordion-body .inline-image.fullWidth {
        margin: 1.5rem 0;
    }
    .accordion-child .accordion-body .inline-image.halfWidthRight,
    .accordion-child .accordion-body .inline-image.thirdWidthRight {
        margin: 0 0 2rem 2rem;
        width: 50%;
    }
    .accordion-child .accordion-body .inline-image.thirdWidthRight {
        width: 35%;
    }
    .accordion-child .accordion-body .inline-image .caption {
        font-size: .9rem;
    }
}

@media (min-width: 1200px) {
    .accordion-child .accordion-body .inline-image.halfWidthRight {
        width: 60%;
    }
    .accordion-child .accordion-body .inline-image.thirdWidthRight {
        width: 38%;
    }
    .accordion-child .accordion-body .inline-image .caption {
        line-height: 1.3;
    }
}

@media (min-width: 1400px) {
    .accordion-child .accordion-body .inline-image.halfWidthRight {
        width: 65%;
    }
    .accordion-child .accordion-body .inline-image.thirdWidthRight {
        width: 40%;
    }
}
/* /Accordion Inline Images */

/* Accordion Inline Tables */
.accordion-child .accordion-body figure.table {
    margin: 0 0 1.5rem 0;
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
}
.accordion-child .accordion-body figure.table:last-child {
    margin-bottom: 0;
}
.accordion-child .accordion-body table {
    border-collapse: collapse;
    width: 100% !important;
}
.accordion-child .accordion-body table th,
.accordion-child .accordion-body table td {
    border: 1px solid #CECECE;
    font-size: .9rem;
    line-height: 1.35;
    padding: .5rem .6rem;
    vertical-align: top;
    width: auto !important;
    min-width: 7rem;
}
.accordion-child .accordion-body table thead th {
    background-color: var(--background-blue) !important;
    border-bottom: 2px solid var(--brand-blue);
    color: var(--heading-violet);
    font-weight: 700;
    text-align: left;
}
.accordion-child .accordion-body table tbody td {
    background-color: var(--white) !important;
}
.accordion-child .accordion-body table tbody tr:nth-child(even) td {
    background-color: var(--showcase-gray) !important;
}
.accordion-child .accordion-body table tbody td strong {
    color: var(--heading-violet);
}
.accordion-child .accordion-body table p {
    margin: 0;
}
.accordion-child .accordion-body table p + p {
    margin-top: .5rem;
}
.accordion-child .accordion-body table p:empty {
    display: none;
}

.accordion-child .accordion-body table a {
    text-decoration: underline;
}

@media (min-width: 992px) {
    .accordion-child .accordion-body table th,
    .accordion-child .accordion-body table td {
        font-size: .95rem;
        padding: .6rem .75rem;
    }
}
/* /Accordion Inline Tables */