/* ============================================
   Simple Shortcodes -- Stylesheet
   ============================================ */

/* ============================================
   WP core image alignment classes

   Plain classic-editor images (`<img class="aligncenter">` etc.) rely on
   these being defined *somewhere* -- normally the active theme, but this
   site's theme doesn't ship them, and they used to come from the legacy
   Fusion plugins this plugin replaces. Without them, any centered/floated
   image in ordinary post content (no Fusion shortcode involved at all)
   renders flush left instead. This stylesheet is enqueued on every
   post/page (see enqueue_assets()) specifically so these apply everywhere,
   not just on pages that also happen to use a Fusion shortcode.
   ============================================ */

.alignleft {
    display: inline;
    float: left;
    margin: 0 24px 24px 0;
}

.alignright {
    display: inline;
    float: right;
    margin: 0 0 24px 24px;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignnone {
    display: inline;
}

.stt-tooltip-wrap {
    position: relative;
    display: inline;
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

/* The tooltip bubble */
.stt-tooltip {
    position: absolute;
    z-index: 999999;
    padding: 10px 16px;
    border-radius: 6px;
    background: #3a3a3a;
    color: #f0f0f0;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    max-width: 280px;
    width: max-content;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.stt-tooltip.stt-visible {
    opacity: 1;
}

.stt-tooltip::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

.stt-tooltip[data-placement="top"] {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}
.stt-tooltip[data-placement="top"]::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #3a3a3a;
}

.stt-tooltip[data-placement="bottom"] {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}
.stt-tooltip[data-placement="bottom"]::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #3a3a3a;
}

.stt-tooltip[data-placement="left"] {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}
.stt-tooltip[data-placement="left"]::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #3a3a3a;
}

.stt-tooltip[data-placement="right"] {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}
.stt-tooltip[data-placement="right"]::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #3a3a3a;
}

/* ============================================
   Fusion Checklist (drop-in)

   Reproduces the Fusion-Builder checklist markup classes so existing theme
   CSS keeps applying after the legacy plugin is deactivated. Selectors and
   values mirror fusion-builder/css/fusion-shortcodes.css; the .fusion-li-item
   rules use higher specificity (`ul.fusion-checklist .fusion-li-item`) so the
   theme's universal `* { padding:0; margin:0 }` reset doesn't collapse the
   inter-item gap.
   ============================================ */

.fusion-checklist,
ul.fusion-checklist {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0 40px;
}

.fusion-checklist .fusion-li-item,
ul.fusion-checklist .fusion-li-item {
    list-style: none;
    margin-bottom: 11px;
    margin-left: 0;
    padding: 0;
}

.fusion-checklist .fusion-li-item:last-child,
ul.fusion-checklist .fusion-li-item:last-child {
    margin-bottom: 30px;
}

.fusion-checklist .fusion-li-item::before,
ul.fusion-checklist .fusion-li-item::before,
.fusion-checklist .fusion-li-item::marker,
ul.fusion-checklist .fusion-li-item::marker {
    content: none;
    display: none;
}

.fusion-checklist .fusion-li-item p:last-of-type,
ul.fusion-checklist .fusion-li-item p:last-of-type {
    margin-bottom: 0;
}

.fusion-checklist .fusion-li-item-content,
ul.fusion-checklist .fusion-li-item-content {
    /* Sitewide checklist copy size, 2pt bigger than the page's base body
       copy. Overrides the font-size the list item would otherwise inherit
       from the parent <ul class="fusion-checklist" style="font-size:...">,
       which render_checklist() computes from the shortcode's `size=`
       attribute -- legacy content using a non-numeric value like
       `size="medium"` silently falls back to a tiny 13px there, well
       under the real ~16px body copy elsewhere on the page. !important
       for the same reason as .fusion-li-icon below: the theme's own
       compiled CSS also targets Fusion's original checklist classes. */
    font-size: calc(1rem + 2pt) !important;
    line-height: 1.6 !important;
}

.fusion-checklist .icon-wrapper,
ul.fusion-checklist .icon-wrapper {
    display: table;
    float: left;
}

.fusion-checklist .fusion-li-icon,
ul.fusion-checklist .fusion-li-icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* Sitewide icon size, 2pt bigger than the page's base body copy --
       deliberately ignores whatever px the shortcode's `size=` attribute
       computed. 1rem tracks the theme's actual body font size rather
       than a hardcoded guess, so this keeps working correctly if that
       ever changes. This also papers over `size="medium"` / other
       non-numeric `size=` values in legacy content, which
       render_checklist() silently falls back to a tiny 13px default for.
       !important because the theme's own compiled CSS also targets this
       exact class (this plugin deliberately reuses Fusion Builder's
       original markup/classes so existing theme styles keep applying) --
       without it, the theme's rule can win the cascade depending on
       stylesheet load order and this override silently does nothing. */
    font-size: calc(1rem + 2pt) !important;
}

.fusion-checklist .circle-yes,
ul.fusion-checklist .circle-yes {
    border-radius: 50%;
    background-clip: padding-box;
    color: #fff;
    text-align: center;
}

/* ============================================
   Fusion Content Boxes (drop-in)

   Reproduces the Fusion-Builder content-box markup classes — and the
   same Bootstrap-flex layout (flex-wrap + negative gutters) — so the
   existing theme overrides for `.fusion-content-boxes`, `.fusion-column`,
   etc. keep working after the legacy plugin is deactivated.
   ============================================ */

.fusion-content-boxes {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px 20px;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.fusion-content-boxes *,
.fusion-content-boxes *::before,
.fusion-content-boxes *::after {
    box-sizing: border-box;
}

.fusion-content-boxes .fusion-clearfix {
    width: 100%;
    /* No `flex-basis` here -- .col (this element's flex parent) is
       flex-direction:column, where flex-basis controls the item's
       *height*, not width. `flex-basis: 100%` previously made this
       supposedly-zero-height spacer compete for the column's full
       height, and the flex-shrink algorithm resolved that by giving it
       whatever vertical space wasn't claimed by the heading/body -- i.e.
       exactly the "body text pushed toward the bottom of the box" bug.
       There's nothing here that actually needs clearing (everything in
       this layout is flexbox, not floats); height:0 alone is enough. */
    height: 0;
    clear: both;
}

.fusion-content-boxes .content-box-column {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 1px;
    padding: 0 15px;
    margin-top: -1px;
    margin-bottom: 0;
}

.fusion-content-boxes .content-box-column.col-lg-1  { width: 8.333333%; }
.fusion-content-boxes .content-box-column.col-lg-2  { width: 16.666667%; }
.fusion-content-boxes .content-box-column.col-lg-3  { width: 25%; }
.fusion-content-boxes .content-box-column.col-lg-4  { width: 33.333333%; }
.fusion-content-boxes .content-box-column.col-lg-6  { width: 50%; }
.fusion-content-boxes .content-box-column.col-lg-12 { width: 100%; }

/* 5-column layout: PHP emits col-lg-2 (matching Fusion); override the
   shared col-*-2 width so 5 boxes split the row equally. */
.fusion-content-boxes.fusion-columns-5 .content-box-column.col-lg-2,
.fusion-content-boxes.fusion-columns-5 .content-box-column.col-md-2,
.fusion-content-boxes.fusion-columns-5 .content-box-column.col-sm-2 {
    width: 20%;
}

@media (max-width: 991px) {
    .fusion-content-boxes .content-box-column.col-md-1  { width: 8.333333%; }
    .fusion-content-boxes .content-box-column.col-md-2  { width: 16.666667%; }
    .fusion-content-boxes .content-box-column.col-md-3  { width: 25%; }
    .fusion-content-boxes .content-box-column.col-md-4  { width: 33.333333%; }
    .fusion-content-boxes .content-box-column.col-md-6  { width: 50%; }
    .fusion-content-boxes .content-box-column.col-md-12 { width: 100%; }
}

@media (max-width: 767px) {
    .fusion-content-boxes .content-box-column[class*="col-sm-"],
    .fusion-content-boxes .content-box-column[class*="col-md-"],
    .fusion-content-boxes .content-box-column[class*="col-lg-"] {
        width: 100%;
    }
}

.fusion-content-boxes .content-box-column > .col,
.fusion-content-boxes .content-box-column > .content-wrapper-background {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 40px 30px;
    text-align: center;
    box-sizing: border-box;
    height: 100%;
}

.fusion-content-boxes .content-wrapper-background {
    /* Fallback when no inline backgroundcolor is set. */
    background-color: #f0f0ff;
}

.fusion-content-boxes .heading {
    margin-bottom: 0;
}

.fusion-content-boxes .heading.icon-left { text-align: left; }
.fusion-content-boxes .heading.icon-right { text-align: right; }
.fusion-content-boxes .heading.icon-center { text-align: center; }

.fusion-content-boxes .heading .heading-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.fusion-content-boxes .heading .icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.fusion-content-boxes .heading.icon-left .icon { justify-content: flex-start; }
.fusion-content-boxes .heading.icon-right .icon { justify-content: flex-end; }

.fusion-content-boxes .heading .icon .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fusion-content-boxes .heading .icon .fontawesome-icon {
    font-size: 24px;
    line-height: 1;
}

.fusion-content-boxes .heading .icon .fontawesome-icon.circle-yes {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fusion-content-boxes .heading img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.fusion-content-boxes .heading .content-box-heading {
    margin: 0;
    padding: 0;
}

.fusion-content-boxes .content-container {
    line-height: 1.6;
}

.fusion-content-boxes .content-container > p:first-child {
    margin-top: 0;
}

.fusion-content-boxes .content-container > p:last-child {
    margin-bottom: 0;
}

.fusion-content-boxes .fusion-read-more {
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
    font-weight: 600;
}

/* ============================================
   Fusion Flip Boxes (drop-in)

   Reproduces the Fusion-Builder flip-box markup classes and adds a CSS-only
   hover flip around the center vertical axis. Both faces share a CSS grid
   cell so the wrapper sizes to the taller face — no fixed min-height needed.
   ============================================ */

.fusion-flip-boxes {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px 25px;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.fusion-flip-boxes *,
.fusion-flip-boxes *::before,
.fusion-flip-boxes *::after {
    box-sizing: border-box;
}

.fusion-flip-boxes + .fusion-clearfix {
    clear: both;
    width: 100%;
    height: 0;
}

.fusion-flip-box-wrapper {
    position: relative;
    padding: 0 15px;
    margin-bottom: 30px;
}

.fusion-flip-box-wrapper.col-lg-1  { width: 8.333333%; }
.fusion-flip-box-wrapper.col-lg-2  { width: 16.666667%; }
.fusion-flip-box-wrapper.col-lg-3  { width: 25%; }
.fusion-flip-box-wrapper.col-lg-4  { width: 33.333333%; }
.fusion-flip-box-wrapper.col-lg-6  { width: 50%; }
.fusion-flip-box-wrapper.col-lg-12 { width: 100%; }

.fusion-flip-boxes.fusion-columns-5 .fusion-flip-box-wrapper {
    width: 20%;
}

@media (max-width: 991px) {
    .fusion-flip-box-wrapper.col-md-1  { width: 8.333333%; }
    .fusion-flip-box-wrapper.col-md-2  { width: 16.666667%; }
    .fusion-flip-box-wrapper.col-md-3  { width: 25%; }
    .fusion-flip-box-wrapper.col-md-4  { width: 33.333333%; }
    .fusion-flip-box-wrapper.col-md-6  { width: 50%; }
    .fusion-flip-box-wrapper.col-md-12 { width: 100%; }
}

@media (max-width: 767px) {
    .fusion-flip-box-wrapper[class*="col-sm-"],
    .fusion-flip-box-wrapper[class*="col-md-"],
    .fusion-flip-box-wrapper[class*="col-lg-"] {
        width: 100%;
    }
}

.fusion-flip-box-wrapper .fusion-flip-box {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    -webkit-perspective: 1200px;
    outline: none;
}

.fusion-flip-box-wrapper .fusion-flip-box:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fusion-flip-box-wrapper .flip-box-inner-wrapper {
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* "Flutter" easing — a soft overshoot so the flip settles instead of
       snapping to a stop. */
    transition: transform 0.7s cubic-bezier(0.4, 1.6, 0.5, 1);
}

.fusion-flip-box-wrapper .flip-box-front,
.fusion-flip-box-wrapper .flip-box-back {
    grid-area: stack;
    width: 100%;
    padding: 30px 30px;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Promote to its own layer so Safari renders the flip cleanly. */
    will-change: transform;
}

.fusion-flip-box-wrapper .flip-box-front {
    transform: rotateY(0);
    z-index: 2;
}

.fusion-flip-box-wrapper .flip-box-back {
    transform: rotateY(180deg);
    z-index: 1;
}

.fusion-flip-box-wrapper .fusion-flip-box:hover .flip-box-inner-wrapper,
.fusion-flip-box-wrapper .fusion-flip-box:focus-within .flip-box-inner-wrapper {
    transform: rotateY(180deg);
}

.fusion-flip-box-wrapper .flip-box-front-inner,
.fusion-flip-box-wrapper .flip-box-back-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fusion-flip-box-wrapper .flip-box-heading,
.fusion-flip-box-wrapper .flip-box-heading-back {
    margin: 0 0 14px 0;
    padding: 0;
    line-height: 1.3;
}

.fusion-flip-box-wrapper .flip-box-heading.without-text {
    margin-bottom: 0;
}

.fusion-flip-box-wrapper .flip-box-front-inner > p:last-child,
.fusion-flip-box-wrapper .flip-box-back-inner > p:last-child {
    margin-bottom: 0;
}

.fusion-flip-box-wrapper .flip-box-grafix {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.fusion-flip-box-wrapper .flip-box-grafix.flip-box-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid transparent;
}

.fusion-flip-box-wrapper .flip-box-grafix .image {
    max-width: 100%;
    height: auto;
    display: block;
}

.fusion-flip-box-wrapper .flip-box-grafix i {
    font-size: 28px;
    line-height: 1;
}

/* ============================================
   Simple Accordion / Toggle
   ============================================ */

.sst-accordion {
    margin: 0 0 20px 0;
}

.sst-accordion:last-child {
    margin-bottom: 0;
}

.sst-toggle {
    border-bottom: var(--sst-acc-border-size, 1px) solid var(--sst-acc-border-color, #e0e0e0);
}

.sst-accordion--no-divider .sst-toggle {
    border-bottom: 0;
}

.sst-accordion--boxed .sst-toggle {
    border: var(--sst-acc-border-size, 1px) solid var(--sst-acc-border-color, #cccccc);
    background-color: var(--sst-acc-bg-color, #ffffff);
    margin-bottom: 8px;
}

.sst-accordion--boxed .sst-toggle:hover {
    background-color: var(--sst-acc-hover-color, #f9f9f9);
}

.sst-toggle__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    color: #4b4d96;
    font-weight: 600;
    user-select: none;
}

.sst-toggle__summary,
.sst-toggle__summary * {
    cursor: pointer;
}

.sst-accordion--boxed .sst-toggle__summary {
    padding: 14px 16px;
}

.sst-toggle__summary::-webkit-details-marker {
    display: none;
}

.sst-toggle__summary::marker {
    content: '';
}

.sst-toggle__summary:hover .sst-toggle__title {
    text-decoration: underline;
}

.sst-toggle__icon {
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    /* Filled rounded-square badge with a contrasting plus/minus inside.
       background = badge color, color (currentColor) = plus/minus
       color via the ::before / ::after pseudo-elements below. */
    background-color: #000000;
    border-radius: 4px;
    color: #ffffff;
}

.sst-toggle__icon::before,
.sst-toggle__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.sst-toggle__icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.sst-toggle__icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.sst-toggle[open] .sst-toggle__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.sst-toggle__title {
    flex: 1;
    line-height: 1.4;
}

.sst-toggle__body {
    padding: 0 0 16px 36px;
    line-height: 1.6;
}

.sst-accordion--boxed .sst-toggle__body {
    padding: 0 16px 16px 16px;
}

.sst-toggle__body > p:first-child {
    margin-top: 0;
}

.sst-toggle__body > p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Simple Button (fusion_button drop-in)
   ============================================ */

.sst-button-wrapper {
    display: inline-block;
    margin: 0;
}

.sst-button-wrapper--align-center { display: block; text-align: center; }
.sst-button-wrapper--align-right  { display: block; text-align: right; }
.sst-button-wrapper--align-left   { display: block; text-align: left; }
.sst-button-wrapper--stretch      { display: block; }

.sst-button {
    --sst-btn-bg: #4b4d96;
    --sst-btn-bg-hover: #3d3f7d;
    --sst-btn-color: #ffffff;
    --sst-btn-color-hover: #ffffff;
    --sst-btn-border-color: transparent;
    --sst-btn-border-color-hover: transparent;
    --sst-btn-border-width: 1px;

    display: inline-block;
    box-sizing: border-box;
    background: var(--sst-btn-bg);
    color: var(--sst-btn-color);
    border: var(--sst-btn-border-width) solid var(--sst-btn-border-color);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sst-button:hover,
.sst-button:focus,
.sst-button:active {
    background: var(--sst-btn-bg-hover);
    color: var(--sst-btn-color-hover);
    border-color: var(--sst-btn-border-color-hover);
    text-decoration: none;
}

/* Sizes */
.sst-button--small  { padding: 9px 20px;  font-size: 12px; line-height: 14px; }
.sst-button--medium { padding: 11px 23px; font-size: 13px; line-height: 16px; }
.sst-button--large  { padding: 13px 29px; font-size: 14px; line-height: 17px; }
.sst-button--xlarge { padding: 17px 40px; font-size: 18px; line-height: 21px; }

/* Shapes */
.sst-button--shape-pill   { border-radius: 25px; }
.sst-button--shape-round  { border-radius: 2px; }
.sst-button--shape-square { border-radius: 0; }

/* Color presets */
.sst-button--color-lightgray {
    --sst-btn-bg: linear-gradient(to top, #f0f0f0, #fbfbfb);
    --sst-btn-bg-hover: linear-gradient(to top, #e5e5e5, #f3f3f3);
    --sst-btn-color: #ababab;
    --sst-btn-color-hover: #8a8a8a;
    --sst-btn-border-color: #ababab;
    --sst-btn-border-color-hover: #8a8a8a;
}

.sst-button--color-darkgray {
    --sst-btn-bg: linear-gradient(to top, #4a4a4a, #6a6a6a);
    --sst-btn-bg-hover: linear-gradient(to top, #3a3a3a, #5a5a5a);
    --sst-btn-color: #ffffff;
    --sst-btn-color-hover: #ffffff;
    --sst-btn-border-color: #4a4a4a;
    --sst-btn-border-color-hover: #3a3a3a;
}

/* Stretch */
.sst-button--stretch { display: block; width: 100%; }

/* Icon */
.sst-button__icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.sst-button__icon--left  { margin-right: 8px; }
.sst-button__icon--right { margin-left: 8px; }

.sst-button__icon--divider.sst-button__icon--left {
    border-right: 1px solid currentColor;
    margin-right: 12px;
    padding-right: 12px;
}

.sst-button__icon--divider.sst-button__icon--right {
    border-left: 1px solid currentColor;
    margin-left: 12px;
    padding-left: 12px;
}

.sst-button__text {
    display: inline-block;
    vertical-align: middle;
}

/* ============================================
   Fusion Builder Row / Column (drop-in)

   Reproduces the Fusion-Builder layout markup classes so the legacy
   plugin can be deactivated without breaking pages that still use
   [fusion_builder_row] / [fusion_builder_column].
   ============================================ */

/*
 * Selectors are scoped to `.fusion_builder_column` (the underscore-form
 * class the column renderer always emits) and `.fusion-builder-row.fusion-row`
 * so these rules cannot accidentally restyle Avada/theme markup that uses
 * `.fusion-row` or bare `.fusion-layout-column` outside post content
 * (header/footer/widgets, etc.).
 */

.fusion-builder-row.fusion-row {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.fusion-builder-row.fusion-row::after {
    content: '';
    display: table;
    clear: both;
}

.fusion-layout-column.fusion_builder_column {
    float: left;
    box-sizing: border-box;
    /* Width comes from the inline style emitted by the renderer; margin-top
       and margin-bottom are inline too. The values below are defensive
       fallbacks so the layout still has visible vertical rhythm if a future
       change somehow drops the inline style. */
    margin-top: 0;
    margin-bottom: 20px;
}

.fusion-layout-column.fusion_builder_column.fusion-column-last {
    margin-right: 0;
}

.fusion-layout-column.fusion_builder_column > .fusion-column-wrapper {
    box-sizing: border-box;
    width: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.fusion-layout-column.fusion_builder_column > .fusion-column-wrapper::after {
    content: '';
    display: table;
    clear: both;
}

.fusion-layout-column.fusion_builder_column > .fusion-column-wrapper > .fusion-clearfix {
    clear: both;
    display: block;
    width: 100%;
    height: 0;
    line-height: 0;
}

@media (max-width: 767px) {
    /* Stack columns full-width on small viewports. */
    .fusion-layout-column.fusion_builder_column {
        float: none;
        width: 100% !important;
    }
}

/* [fusion_builder_column_inner] -- nested column inside
   [fusion_builder_row_inner]. Matches Fusion Builder's default 20px
   padding on every side. */
.fusion-builder-column-inner {
    padding: 20px;
    box-sizing: border-box;
}

/* [fusion_builder_container] -- the outermost Fusion Builder wrapper.
   Background/padding/border come from the renderer as inline styles;
   box-sizing here just keeps that padding from adding to the width. */
.fusion-builder-container {
    box-sizing: border-box;
}

.fusion-builder-container.fusion-full-width {
    width: 100%;
}

/* ============================================
   Modal -- [fusion_modal] / [fusion_modal_text_link]
   ============================================ */

.fusion-modal-text-link {
    cursor: pointer;
    text-decoration: underline;
}

/* Hidden by default. The JS toggles display:block and the .in class to
   trigger the fade + slide animation. z-index is set to the maximum
   usable value so the modal always wins over sticky site headers, this
   plugin's own tooltips/popovers (z-index up to 999999), and anything
   else the theme or other plugins stack on the page -- it must always
   be the topmost element while open. */
.fusion-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.15s linear;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

/* Push the modal below the WP admin bar so admins still see it while
   the modal is open. (32px on desktop, 46px below 783px viewports —
   matches WordPress core's admin bar CSS.) */
body.admin-bar .fusion-modal {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .fusion-modal {
        top: 46px;
    }
}

.fusion-modal.in {
    opacity: 1;
}

/* Mobile: dialog is fluid, gutter via margin (matches Fusion's
   Bootstrap-style modal sizing). Desktop overrides below set the
   fixed widths Fusion shipped — important: use `width` rather than
   `max-width`, otherwise the dialog can stretch to the viewport
   when an enclosing rule clears max-width somewhere downstream. */
.fusion-modal .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    box-sizing: border-box;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
    transition: transform 0.3s ease-out;
    -webkit-transition: -webkit-transform 0.3s ease-out;
}

.fusion-modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* Breakpoint matches Fusion's own stylesheet: 900px, not 768px.
   The earlier 768px breakpoint clipped the right edge of a 900px
   modal-lg between 768px-899px viewports (the wrapper has
   overflow-x:hidden). Going 900px-up keeps all three sizes fluid
   on tablets until the viewport can actually fit the largest one. */
@media (min-width: 900px) {
    .fusion-modal .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
    .fusion-modal .modal-dialog.modal-lg {
        width: 900px;
    }
    .fusion-modal .modal-dialog.modal-sm {
        width: 400px;
    }
}

.fusion-modal .modal-content,
.fusion-modal .fusion-modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    outline: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.fusion-modal .modal-header {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
    min-height: 16.42857143px;
}

.fusion-modal .modal-header .close {
    position: absolute;
    top: 12px;
    right: 15px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    font-weight: bold;
    color: #000;
    opacity: 0.4;
    -webkit-appearance: none;
    text-shadow: 0 1px 0 #fff;
}

.fusion-modal .modal-header .close:hover,
.fusion-modal .modal-header .close:focus {
    opacity: 0.9;
}

.fusion-modal .modal-title {
    margin: 0;
    padding-right: 30px;
    line-height: 1.42857143;
    color: inherit;
}

.fusion-modal .modal-body {
    position: relative;
    padding: 20px;
    word-wrap: break-word;
}

.fusion-modal .modal-body > p:first-child {
    margin-top: 0;
}

.fusion-modal .modal-body > p:last-child {
    margin-bottom: 0;
}

.fusion-modal .modal-footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #ebebeb;
}

.fusion-modal .modal-footer .fusion-button {
    cursor: pointer;
}

body.sst-modal-open {
    overflow: hidden;
}

/* ============================================
   Fusion Tagline / Reading Box (drop-in)

   Reproduces the [fusion_tagline_box] markup classes (.fusion-reading-box-
   container, .reading-box, .reading-box-description) and the small handful
   of layout rules they need so existing post content keeps rendering after
   the legacy Fusion plugin is deactivated.

   Selectors use `.fusion-reading-box-container .reading-box` so the theme's
   universal `* { padding: 0; margin: 0 }` reset (bundle.css) doesn't strip
   the box padding; the inline `padding-*` styles emitted by the renderer
   could otherwise be overridden by a more-specific theme rule.
   ============================================ */

.fusion-reading-box-container {
    position: relative;
    z-index: 1;
}

.fusion-reading-box-container .reading-box {
    padding: 28px 28px 27px 31px;
}

.fusion-reading-box-container .reading-box.reading-box-center {
    text-align: center;
}

.fusion-reading-box-container .reading-box.reading-box-right {
    text-align: right;
}

.fusion-reading-box-container .reading-box h2 {
    margin: 0;
    padding-top: 0;
    line-height: 1.5;
}

.fusion-reading-box-container .reading-box .reading-box-description {
    /* Existing fusion content puts <strong>Action Prompt:</strong> in the
       description; keep its baseline aligned with the surrounding copy. */
    line-height: 1.6;
}

.fusion-reading-box-container .reading-box-additional p:last-child {
    margin-bottom: 0;
}

.fusion-reading-box-container .fusion-reading-box-additional {
    margin-top: 8px;
}

.fusion-reading-box-container .fusion-clearfix {
    clear: both;
    width: 100%;
    height: 0;
}

.fusion-reading-box-container .fusion-reading-box-flex {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fusion-reading-box-container .fusion-desktop-button {
    display: block;
}

.fusion-reading-box-container .fusion-mobile-button {
    display: none;
    float: none;
    margin: 15px 0 0;
}

.fusion-reading-box-container .continue-left  { float: left;  margin-right: 10px; }
.fusion-reading-box-container .continue-right { float: right; margin-left: 10px; }
.fusion-reading-box-container .continue-center {
    display: inline-block;
    float: none;
    margin: 15px auto 0;
}

@media (max-width: 767px) {
    .fusion-reading-box-container .fusion-desktop-button {
        display: none;
    }
    .fusion-reading-box-container .fusion-mobile-button {
        display: inline-block;
    }
}

/* ============================================
   Fusion Testimonials (drop-in)

   Reproduces the [fusion_testimonials] / [fusion_testimonial] markup
   classes (.fusion-testimonials, .review, .testimonial-thumbnail,
   .author) so existing post content keeps rendering after the legacy
   Fusion plugin is deactivated. The renderer emits inline styles for
   the per-block colors; the rules below cover only the layout
   (padding, the speech-bubble pointer triangle, thumbnail alignment).

   Unlike Fusion, .review is NOT hidden by default -- this plugin
   doesn't ship the carousel JS, so every testimonial is rendered
   stacked. That matches how the legacy site looked after CSS-only
   degradation and avoids a regression where deactivating Fusion
   makes the entire testimonials list disappear.

   The avatar icon comes from Font Awesome 4.7 (loaded conditionally
   when a testimonial shortcode is present) via an inline <i> rather
   than Fusion's icomoon `:before` -- the icomoon font isn't bundled.
   ============================================ */

.fusion-testimonials {
    margin-bottom: 25px;
}

.fusion-testimonials .reviews {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fusion-testimonials .review {
    margin-bottom: 30px;
}

.fusion-testimonials .review:last-child {
    margin-bottom: 0;
}

.fusion-testimonials blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.fusion-testimonials blockquote q {
    font-style: italic;
}

.fusion-testimonials blockquote q::before,
.fusion-testimonials blockquote q::after {
    content: "";
}

.fusion-testimonials .testimonial-image {
    max-width: 40px;
    height: auto;
}

/* Classic design -- quote sits in a tinted bubble, with a small
   speech-bubble pointer pointing down at the author row. */

.fusion-testimonials.classic blockquote {
    margin-bottom: 0;
}

.fusion-testimonials.classic blockquote q {
    display: block;
    padding: 25px;
    line-height: 1.5;
}

.fusion-testimonials.classic .author {
    position: relative;
    padding: 12px 0 0 2px;
    display: table;
    width: 100%;
}

.fusion-testimonials.classic .author::after {
    position: absolute;
    left: 35px;
    top: 0;
    content: " ";
    height: 0;
    width: 0;
    pointer-events: none;
    border: 10px solid transparent;
    /* border-top-color is overridden per-instance by the scoped <style>
       block the renderer emits, so the pointer always matches the
       configured bubble background. */
    border-top-color: #f1f1f1;
}

.fusion-testimonials.classic .no-avatar .author {
    padding-left: 0;
}

.fusion-testimonials.classic .no-avatar .author::after {
    left: 12px;
}

.fusion-testimonials.classic .testimonial-thumbnail {
    display: table-cell;
    vertical-align: middle;
    padding-right: 30px;
    height: 40px;
    width: 40px;
    text-align: center;
}

.fusion-testimonials.classic .testimonial-thumbnail.doe .fa {
    font-size: 28px;
    line-height: 40px;
}

.fusion-testimonials.classic .company-name {
    display: table-cell;
    vertical-align: middle;
}

.fusion-testimonials.classic .author a {
    text-decoration: none;
}

/* Clean design -- thumbnail centered above the quote, no bubble. */

.fusion-testimonials.clean .testimonial-thumbnail {
    margin: 0 auto 25px;
    width: 150px;
    text-align: center;
    display: block;
}

.fusion-testimonials.clean .testimonial-thumbnail.doe .fa {
    font-size: 90px;
    line-height: 100px;
}

.fusion-testimonials.clean blockquote {
    border: none;
}

.fusion-testimonials.clean blockquote q {
    display: block;
    padding: 25px;
    line-height: 1.6;
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
}

.fusion-testimonials.clean .author {
    margin-top: 25px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
}

.fusion-testimonials.clean .author a {
    text-decoration: none;
}

/* ============================================
   Fusion Vimeo (drop-in)

   Reproduces the wrapper + alignment classes [fusion_vimeo] emits so
   the embed still sizes / centers correctly after the legacy Fusion
   plugin is deactivated. The renderer puts max-width / max-height on
   the wrapper; these rules just handle alignment + a responsive
   iframe that fills its container.
   ============================================ */

.fusion-video {
    /* Wrapper carries inline max-width / max-height from the renderer.
       Default to block so the alignment helpers below take effect. */
    display: block;
}

.fusion-video .video-shortcode {
    position: relative;
}

.fusion-video .video-shortcode iframe {
    /* Let the iframe use its width/height HTML attributes for sizing
       (matches Fusion's behaviour and the legacy 800x360 layout).
       max-width:100% just lets it shrink horizontally on narrow
       viewports. Avoid `height:100%` -- the parent has no defined
       height and the iframe would collapse to a thin strip. */
    max-width: 100%;
    border: 0;
    display: block;
}

/* Alignment helpers for [fusion_vimeo]. The renderer emits these
   `fusion-align*` class names (matching legacy Fusion output), distinct
   from the plain `aligncenter` / `alignleft` / `alignright` WP core
   classes defined near the top of this file. */

.fusion-alignleft {
    display: inline;
    float: left;
    margin-right: 15px;
}

.fusion-alignright {
    display: inline;
    float: right;
    margin-left: 15px;
}

.fusion-aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* `center-video` was the older Fusion centering flag (center="yes"
   on the shortcode) and was applied without the float-clearing the
   `fusion-align*` classes do. Keep that simpler centering for legacy
   posts. */
.fusion-video.center-video {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Fusion Dropcap (drop-in)

   Floats an oversized letter at the start of a paragraph (.dropcap
   bare class for legacy posts, .fusion-dropcap for new ones). Color
   is set inline per-instance by the renderer; the rule below covers
   the sizing/positioning Fusion's stylesheet provided. Without it
   the wrapping <span> rendered at normal text size and the dropcap
   effect was lost.
   ============================================ */

.fusion-dropcap,
.dropcap {
    position: relative;
    top: 4px;
    float: left;
    margin-right: 10px;
    padding: 0;
    line-height: 52px;
    font-size: 60px;
    text-transform: uppercase;
}

.fusion-dropcap.dropcap-boxed {
    height: 51px;
    width: 51px;
    border-radius: 8px;
    background-clip: padding-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    font-size: 45px;
    line-height: 51px;
    text-align: center;
}

/* ============================================
   Fusion Highlight (drop-in)

   Inline tinted background around a span of text. Background color
   is set per-instance by the renderer; the rules below provide the
   padding + the `.dark` text-color fallback so legible copy still
   reads on dark backgrounds, plus the optional rounded variant.
   ============================================ */

.fusion-highlight {
    padding: 0.1em 0.3em;
    line-height: 1.7em;
}

.fusion-highlight.rounded {
    border-radius: 4px;
    background-clip: padding-box;
}

.fusion-highlight.dark {
    color: #ccc;
}

/* ============================================
   Fusion Popover (drop-in)

   The trigger is a small inline marker (.fusion-popover). On
   hover / click the JS appends a `.popover` bubble to <body> and
   positions it relative to the trigger; per-instance theming
   comes from the scoped <style> block the renderer emits.
   ============================================ */

.fusion-popover {
    display: inline-block;
    max-width: 100%;
    cursor: pointer;
    color: #a0ce4e;
}

.popover {
    position: absolute;
    z-index: 1060;
    max-width: 276px;
    padding: 1px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
}

.popover.show,
.popover.in {
    display: block;
}

.popover-title {
    margin: 0;
    padding: 8px 14px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    font-weight: bold;
}

.popover-title:empty {
    display: none;
}

.popover-content {
    padding: 9px 14px;
}

/* Arrow: triangle pointing toward the trigger, on the side
   opposite the popover's placement. Each `.popover.{placement}`
   variant moves the arrow to the right edge. */

.popover > .arrow,
.popover > .arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow {
    border-width: 11px;
}

.popover > .arrow::after {
    content: "";
    border-width: 10px;
}

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #ebebeb;
    border-bottom-width: 0;
}

.popover.top > .arrow::after {
    bottom: 1px;
    margin-left: -10px;
    border-top-color: #fff;
    border-bottom-width: 0;
    content: "";
}

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-left-width: 0;
    border-right-color: #ebebeb;
}

.popover.right > .arrow::after {
    left: 1px;
    bottom: -10px;
    border-left-width: 0;
    border-right-color: #fff;
    content: "";
}

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #ebebeb;
}

.popover.bottom > .arrow::after {
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #fff;
    content: "";
}

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #ebebeb;
}

.popover.left > .arrow::after {
    right: 1px;
    bottom: -10px;
    border-right-width: 0;
    border-left-color: #fff;
    content: "";
}

/* ============================================
   Fusion Table (drop-in)

   Scoped to the `.sst-table` marker the renderer emits alongside the
   legacy `table-{n}` class -- a class-prefix selector like
   `[class^="table-"]` would also match Bootstrap's `.table-responsive`
   etc. and leak the purple-thead styling onto unrelated wrappers.
   The theme's bundle.css adds the purple thead for `.table-1` /
   `.table-2` specifically; these rules cover any counter value
   (table-3 onward) with the same look.
   ============================================ */

.sst-table table {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-collapse: collapse;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin: 0 0 25px;
}

.sst-table table th,
.sst-table table td {
    padding: 10px 14px;
    border: 1px solid #dcdcdc;
    text-align: left;
    vertical-align: middle;
}

.sst-table table thead {
    background-color: #391892;
}

.sst-table table thead th {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    border-color: #391892;
}

.sst-table table tbody tr:nth-child(even) {
    background-color: #fafafa;
}