/****************************/
/*  START :: Text & Basics  */
/****************************/
/******************/
/*  START :: FAQ  */
/******************/
    /*****************************/
    /*  START :: ALL ACCORDIONS  */
    /*****************************/
    :root {
        --icon-minus: url(/wp-content/uploads/action-minus.svg);
        --icon-plus: url(/wp-content/uploads/action-plus.svg);
        --accordion-outline: var(--brand-focus);
    }
    .fl-accordion-item {
        border-radius: 10px;
        overflow: initial; /* not hidden, otherwise focus state won't be visible*/
        position: relative;
    }
    .fl-accordion-item > div {
        padding: 26px 36px;
    }
    /* Accordion "Item Spacing" margin default can be overridden individually in BB */
    .fl-accordion > div {
        /* for accessibility, so focus state doesn't cover text 
        & accordion content covers border radius of button
        add back the margin removed from accordion button */
        margin-bottom: calc(16px + 13px);
    }
    .fl-accordion > div:last-of-type {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .fl-accordion-button {
        border-radius: 16px;
        /* for accessibility, so focus state doesn't cover text 
        & accordion content covers border radius of button */
        margin-bottom: -13px;
    }
    body:not(.fl-builder-edit) .fl-accordion-button:focus{
        border-radius: 16px;
        box-shadow:none!important;
        outline-color: var(--accordion-outline);
        outline-offset: -4px;
        outline-style: auto;
        outline-width: 2px;
    }
        /* deactivate accordion outlines */
    .fl-accordion .fl-accordion-button-label,
    .fl-accordion i.fl-accordion-button-icon {
        outline: none;
    }
    .fl-builder-content .fl-accordion-button .fl-accordion-button-label {
        background-color: transparent!important;
        border: none;
        color: var(--black);
        font-family: var(--font-content);
        font-size: 22px;
        font-size: 1.38rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 34px;
        line-height: 2.13rem;
        padding: 0;
        word-break: break-word; 
    }
    .fl-builder-content .white .fl-accordion-button .fl-accordion-button-label{
        color: var(--white);
    }
    .fl-accordion-button-icon {
        margin-inline-end: 0px;
    }
    .fl-builder-content .fl-accordion-button a.fl-accordion-button-icon {
        display: flex;
        align-items: center;
        margin-inline-end: 0;
    }
    .fl-builder-content .fl-accordion-button i.fl-accordion-button-icon {
        align-items: center;
        display: flex;
        opacity: 1;
        padding: 0;
    }
    .fl-builder-content .fl-accordion-button i.fl-accordion-button-icon::before {
        content: "";
        width: 24px;
        height: 24px;
        background-size: cover;
        display: inline-block;
        /* top: 32px;
        position: absolute; */
    }
    .fl-builder-content .fl-accordion-button i.fl-accordion-button-icon.fa-plus::before {
        background: var(--icon-plus) center center / contain no-repeat;
        transform: rotate(180deg);
        transition: all 0.25s ease;
    }
    .fl-builder-content .fl-accordion-button i.fl-accordion-button-icon.fa-minus::before {
        background: var(--icon-minus) center center / contain no-repeat;
        transition: all 0.25s ease;
    }
    /* Pre-Launch QA (Aug 10), BS: "need more space between the plus icons and the text."
       Measured on the Solar Water Solutions FAQ: the icon ended at x=129 and the label
       began at x=129 - they were touching, with no gap at all. The `padding: 0` and
       `margin-inline-end: 0` above are what removed BB's own spacing.
       Scoped to -icon-left, since that is the only arrangement where icon-to-text spacing
       exists; seven accordions site-wide use it and all but Solar Water Solutions are
       templates or a draft. Must stay after the `padding: 0` rule to win on order, as the
       specificity is identical. 16px is the theme's existing small-gap step. */
    .fl-builder-content .fl-accordion-button i.fl-accordion-button-icon-left {
        padding-right: 16px;
    }
    .fl-accordion-content {
        position:relative;
        padding-top: 14px !important;
        
        /* can't be edited via BB, overflow hidden turns off accessibility focus state */
        border-bottom-left-radius: 16px; 
        
        /* can't be edited via BB, overflow hidden turns off accessibility focus state */
        border-bottom-right-radius: 16px; 
    }
    .fl-accordion-content img {
        border-radius: 24px;
        margin: 0;
    }
    .accordion-bg-white .fl-accordion-item:after {background-color: var(--white);}
    .accordion-round .fl-accordion-item:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px;
        width: 100%;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    /*****************************/
    /*  END   :: ALL ACCORDIONS  */
    /*****************************/

.row--text-faq-2column .fl-accordion-item {
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
}
.row--text-faq-2column .fl-accordion-button {
    display: flex;
    flex-direction: row;
    padding: 26px 36px;
    gap: var(--Sizing-Units-L);
    position: relative;
    z-index: 10;
}
/* margin default can be overridden individually in BB */
.column--faq > div {
    /* margin-top: 44px; */
}
.row--text-faq-2column .fl-accordion-large .fl-accordion-content {
    padding: 0 36px 26px calc(36px + 66px + 24px); /* 0 36px 26px (36px + gap + width of icon) */
}
.row--text-faq-2column .breakout--img {
    position: absolute;
    bottom: 66px;
    left: 0;
}
.row--text-faq-2column .breakout--img img {
    width: auto;
    height: 185px;
}
/* Tablet */
@media only screen and (max-width: 992px) {
    .fl-builder-content .row--text-faq-2column .fl-accordion-button .fl-accordion-button-label {
        font-size: 21px;
        font-size: 1.31rem;
        line-height: 33px;
        line-height: 2.06rem;
    }
    .fl-builder-content .row--text-faq-2column .fl-accordion-large .fl-accordion-content {
        padding: 0 44px 26px 104px;
    }
    .fl-builder-content .fl-accordion-button {
        gap: var(--Sizing-Units-M);
    }
    .fl-builder-content .centered .fl-accordion-button i.fl-accordion-button-icon {
        /* padding-right: 62px; */
    }
}
/* Mobile */
@media only screen and (max-width: 768px) {
    /* all accordions, site-wide */
    /* .fl-accordion-button {
        border-radius: 8px;
    } */
    .fl-accordion-content {
        border-bottom-left-radius: 16px; /* can't be edited via BB, overflow hidden turns off accessibility focus state */
        border-bottom-right-radius: 16px; /* can't be edited via BB, overflow hidden turns off accessibility focus state */
    }
    .fl-builder-content .fl-accordion-button {
        gap: var(--Sizing-Units-XS);
    }
    /* .fl-accordion-button {
        border-radius: 20px;
    } */
    .fl-builder-content .row--text-faq-2column .fl-accordion-button .fl-accordion-button-label {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 30px;
        line-height: 1.88rem;
    }
    .fl-builder-content .row--text-faq-2column .fl-accordion-large .fl-accordion-content {
        padding: 0 26px 26px 66px;
    }
    /* .fl-builder-content .fl-accordion-button .fl-accordion-button-icon {
        padding-right: 34px;
    } */
    /* .fl-builder-content .fl-module:not(.centered) .fl-accordion-content {
        padding-left: 47px;
    } */
    /* .fl-builder-content .fl-accordion-button .fl-accordion-button-icon::before {
        width: 14px;
        height: 14px;
        top: 18px;
    } */
     .row--text-faq-2column .fl-module-accordion .fl-accordion-button {
        padding: 8px 16px;
    }
    .fl-accordion-content img {
        border-radius: 16px;
    }   
}
/******************/
/*  END   :: FAQ  */
/******************/

/*************************************/
/*  START :: Mobile text alignment   */
/*************************************/
/* BugHerd 479, 485, 488, 521, 529

   Below 768px css/style.css centres every heading and rich text module on the
   page. Most sections want that, but three kinds do not: long-form legal copy,
   a bullet list (centring it strands the markers in a column while the text
   floats), and a video card title that has to line up with the button under it.

   row--text-left was already on the legal rows but had no rule behind it, so it
   did nothing. text-left--mobile is the same idea for a column or box inside a
   row, for the cases where the whole row should not change.

   Both selectors weigh the same as the rule they override, (0,3,0), so they win
   on source order alone: text-basics.css is enqueued after css/style.css. Keep
   these declarations in this file. Moving them anywhere that loads earlier, or
   into the middle of style.css, silently stops them working. */
@media only screen and (max-width: 768px) {
    .fl-row.row--text-left .fl-module-heading,
    .fl-row.row--text-left .fl-module-rich-text,
    .fl-row.text-left--mobile .fl-module-heading,
    .fl-row.text-left--mobile .fl-module-rich-text,
    .fl-row .text-left--mobile .fl-module-heading,
    .fl-row .text-left--mobile .fl-module-rich-text {
        text-align: left;
        justify-content: flex-start;
    }
}
/*************************************/
/*  END   :: Mobile text alignment   */
/*************************************/

/****************************/
/*  END   :: Text & Basics  */
/****************************/