.falcon-ew-acc {
    --falcon-ew-acc-gap: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*
 * Fallbacks matching the widget's own control defaults (the Private AI
 * statement card), for anywhere Elementor's generated CSS hasn't loaded.
 */
.falcon-ew-acc-item {
    padding: 28px 30px;
    background-color: #1a1a1a;
    border-left: 3px solid #2B64F8;
    border-radius: 0 16px 16px 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/*
 * Notification style: tinted, dashed-outline callout. --falcon-ew-acc-accent
 * is set inline on the widget root from the Accent Color control; the
 * border and tint strengths are color-mix() percentages of that accent
 * (the original Gain Green container used 8c ~ 55% and 0d ~ 5% alphas),
 * so the same look works for every brand color. Beats the Block Quote
 * fallbacks above on specificity; Block Quote's own Elementor controls
 * are condition-gated off in this style, so they emit no CSS here.
 */
.falcon-ew-acc--style-notification .falcon-ew-acc-item {
    padding: 20px;
    border: var(--falcon-ew-acc-n-border-width, 1.5px) var(--falcon-ew-acc-n-border-style, dashed)
        color-mix(in srgb, var(--falcon-ew-acc-accent, #4ADE80) var(--falcon-ew-acc-n-border-mix, 55%), transparent);
    border-radius: 13px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--falcon-ew-acc-accent, #4ADE80) var(--falcon-ew-acc-n-tint-mix, 5%), transparent),
        transparent
    );
}

.falcon-ew-acc--style-notification .falcon-ew-acc-item.is-open {
    border-color: color-mix(in srgb, var(--falcon-ew-acc-accent, #4ADE80) var(--falcon-ew-acc-n-open-border-mix, 85%), transparent);
}

/* Matches the example's link color; the Link Color control overrides it. */
.falcon-ew-acc--style-notification .falcon-ew-acc-text a {
    color: #58A6FF;
}

.falcon-ew-acc-heading {
    margin: 0;
    padding: 0;
}

.falcon-ew-acc-title {
    display: block;
    color: #ffffff;
    transition: color 0.2s ease;
}

/*
 * Theme and Elementor Kit global button styles also target plain
 * <button>, so this reset is scoped under .falcon-ew-acc for enough
 * specificity to win without !important.
 */
.falcon-ew-acc .falcon-ew-acc-toggle,
.falcon-ew-acc .falcon-ew-acc-toggle:hover,
.falcon-ew-acc .falcon-ew-acc-toggle:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
}

.falcon-ew-acc .falcon-ew-acc-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.falcon-ew-acc .falcon-ew-acc-toggle:focus-visible {
    outline: 2px solid var(--falcon-ew-acc-accent, #2B64F8);
    outline-offset: 4px;
}

.falcon-ew-acc-icon {
    --falcon-ew-acc-icon-size: 14px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--falcon-ew-acc-icon-size) * 1.6);
    height: calc(var(--falcon-ew-acc-icon-size) * 1.6);
    margin-top: 0.15em;
    color: var(--falcon-ew-acc-accent, #2B64F8);
}

.falcon-ew-acc-icon::before {
    content: "";
    width: calc(var(--falcon-ew-acc-icon-size) * 0.6);
    height: calc(var(--falcon-ew-acc-icon-size) * 0.6);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.3s ease;
}

.falcon-ew-acc-item.is-open .falcon-ew-acc-icon::before {
    transform: translateY(25%) rotate(-135deg);
}

/*
 * Summary and full text are each a collapsible region using the
 * grid-template-rows 0fr <-> 1fr technique (same as Falcon Description
 * Cards), so both animate to their real content height without JS
 * measuring. The gap above each region is padding INSIDE the clipped
 * area, so it collapses along with the text instead of leaving a stray
 * 14px behind a hidden region.
 *
 * visibility: hidden on a collapsed region keeps its links out of the tab
 * order; the delay lets it stay visible until the collapse finishes.
 */
.falcon-ew-acc-region {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease;
}

.falcon-ew-acc-region-clip {
    min-height: 0;
    overflow: hidden;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.falcon-ew-acc-region-inner {
    padding-top: var(--falcon-ew-acc-gap);
}

.falcon-ew-acc-text {
    color: #b0b5bc;
}

.falcon-ew-acc-text strong,
.falcon-ew-acc-text b {
    color: #ffffff;
}

.falcon-ew-acc-text > :first-child {
    margin-top: 0;
}

.falcon-ew-acc-text > :last-child {
    margin-bottom: 0;
}

/*
 * "Even Out Text Spacing": a line box is taller than the glyphs by its
 * leading (line-height - font-size), split half above the first line and
 * half below the last. That half-leading is what makes the card's top and
 * bottom padding look larger than set -- and by a different amount for
 * every font/line-height combo. (1em - 1lh) / 2 is exactly minus one
 * half-leading, computed from each element's OWN font-size and
 * line-height, so it tracks whatever the Typography controls are set to.
 *
 * Applied to both ends of the title and of each text region's first/last
 * block, so it's correct in every open/closed state and mode without
 * knowing which block happens to be last. Only the leading is removed,
 * never the glyphs' own ascender/descender space, so nothing gets clipped
 * by the collapsing regions' overflow: hidden.
 */
.falcon-ew-acc--trim .falcon-ew-acc-title {
    margin-block: calc((1em - 1lh) / 2);
}

.falcon-ew-acc--trim .falcon-ew-acc-text > :first-child {
    margin-top: calc((1em - 1lh) / 2);
}

.falcon-ew-acc--trim .falcon-ew-acc-text > :last-child {
    margin-bottom: calc((1em - 1lh) / 2);
}

/* The title's first line now starts at the toggle's top edge. */
.falcon-ew-acc--trim .falcon-ew-acc-icon {
    margin-top: 0;
}

/* Full text: collapsed until the item opens. */
.falcon-ew-acc-region--full {
    grid-template-rows: 0fr;
}

.falcon-ew-acc-region--full > .falcon-ew-acc-region-clip {
    visibility: hidden;
    transition-delay: 0.35s;
}

.falcon-ew-acc-item.is-open .falcon-ew-acc-region--full {
    grid-template-rows: 1fr;
}

.falcon-ew-acc-item.is-open .falcon-ew-acc-region--full > .falcon-ew-acc-region-clip {
    visibility: visible;
    transition-delay: 0s;
}

/* Replace mode: the summary collapses as the full text expands. */
.falcon-ew-acc--replace .falcon-ew-acc-item.is-open .falcon-ew-acc-region--summary {
    grid-template-rows: 0fr;
}

.falcon-ew-acc--replace .falcon-ew-acc-item.is-open .falcon-ew-acc-region--summary > .falcon-ew-acc-region-clip {
    visibility: hidden;
    transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
    .falcon-ew-acc-item,
    .falcon-ew-acc-title,
    .falcon-ew-acc-icon::before,
    .falcon-ew-acc-region,
    .falcon-ew-acc-region-clip,
    .falcon-ew-acc-region--full > .falcon-ew-acc-region-clip,
    .falcon-ew-acc--replace .falcon-ew-acc-item.is-open .falcon-ew-acc-region--summary > .falcon-ew-acc-region-clip {
        transition: none;
    }
}