/* ============================================================
 * MCG Accordion (Bootstrap 5 based) — Elementor widget styles
 * ------------------------------------------------------------
 * Self-contained Bootstrap 5 accordion look & collapse behaviour.
 * Does NOT require Bootstrap's CSS/JS to be loaded — the collapse
 * classes (.collapse / .mcg-collapsing) and the animation are
 * handled here + in mcg-accordion.js, so it works the same on the
 * front end and inside the Elementor editor.
 * ============================================================ */

.mcg-accordion {
    --mcg-acc-border: rgba(0, 0, 0, 0.125);
    --mcg-acc-radius: 6px;
    width: 100%;
}

/* Inside the Elementor editor only: don't let the accordion's buttons capture
   the mouse, so Elementor can select, drag, move and drop the widget. The
   front end is unaffected (this body class only exists in the editor preview). */
body.elementor-editor-active .mcg-accordion,
body.elementor-editor-active .mcg-accordion * {
    pointer-events: none !important;
}

.mcg-accordion .accordion-item {
    background: transparent;
    border-bottom: 1px solid var(--mcg-acc-border);
}

.mcg-accordion .accordion-header {
    margin: 0;
}

/* Header button (Bootstrap 5 .accordion-button) */
.mcg-accordion .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 14px 4px;
    border: 0;
    background: transparent;
    color: #0174b4;
    font-size: 20px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Mouseover: nudge the title only — no color change. */
.mcg-accordion .accordion-button .mcg-accordion-title {
    transition: transform 0.2s ease;
}
.mcg-accordion .accordion-button:hover .mcg-accordion-title {
    transform: translateX(6px);
}

/* Suppress Bootstrap's built-in chevron (.accordion-button::after) so only
   our custom circle icon shows. */
.mcg-accordion .accordion-button::after,
.mcg-accordion .accordion-button::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
    width: 0 !important;
    height: 0 !important;
}

.mcg-accordion .accordion-button:focus {
    outline: none;
    box-shadow: none;
}
.mcg-accordion .accordion-button:focus-visible {
    outline: 2px solid #0174b4;
    outline-offset: 2px;
}

.mcg-accordion .accordion-button .mcg-accordion-title {
    flex: 1 1 auto;
}

/* Icon: two states, toggled by the collapsed class on the button */
.mcg-accordion .accordion-button .mcg-accordion-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4FB0F5;
    line-height: 1;
    transition: transform 0.2s ease;
}
.mcg-accordion .accordion-button .mcg-accordion-icon svg,
.mcg-accordion .accordion-button .mcg-accordion-icon i {
    width: 26px;
    height: 26px;
    font-size: 26px;
    fill: currentColor;
}
.mcg-accordion .accordion-button .mcg-icon--open { display: none; }
.mcg-accordion .accordion-button .mcg-icon--closed { display: inline-flex; }
.mcg-accordion .accordion-button:not(.collapsed) .mcg-icon--open { display: inline-flex; }
.mcg-accordion .accordion-button:not(.collapsed) .mcg-icon--closed { display: none; }

/* Collapse mechanics (mirrors Bootstrap .collapse / .collapsing) */
.mcg-accordion .accordion-collapse {
    overflow: hidden;
}
.mcg-accordion .accordion-collapse:not(.show):not(.mcg-collapsing) {
    display: none;
}
.mcg-accordion .accordion-collapse.mcg-collapsing {
    height: 0;
    will-change: height;
}

/* Off-screen measurement state: lets JS read the natural content height of a
   collapsed panel (at its real width) without it flashing on screen. */
.mcg-accordion .accordion-collapse.mcg-measuring {
    display: block !important;
    height: auto !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.mcg-accordion .accordion-body {
    padding: 4px 4px 22px;
    color: inherit;
    font-size: 17px;
    line-height: 1.6;
}
.mcg-accordion .accordion-body > :last-child {
    margin-bottom: 0;
}

/* Boxed variant (optional, applied when .mcg-accordion--boxed is present) */
.mcg-accordion.mcg-accordion--boxed .accordion-item {
    border: 1px solid var(--mcg-acc-border);
    border-radius: var(--mcg-acc-radius);
    margin-bottom: 10px;
    overflow: hidden;
}
.mcg-accordion.mcg-accordion--boxed .accordion-button {
    padding-left: 18px;
    padding-right: 18px;
}
.mcg-accordion.mcg-accordion--boxed .accordion-body {
    padding-left: 18px;
    padding-right: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .mcg-accordion .accordion-collapse.mcg-collapsing {
        transition: none !important;
    }
}

/* ============================================================
 * Entrance animation (reveal on scroll)
 * ------------------------------------------------------------
 * Items start hidden whenever [data-anim] is present and are
 * revealed when JS adds .mcg-anim-in once the accordion scrolls
 * into view (see mcg-accordion.js). Pure-CSS safeties keep the
 * content visible inside the Elementor editor, for reduced-motion
 * users, and (via <noscript>) when JavaScript is disabled.
 * ============================================================ */
.mcg-accordion[data-anim] .accordion-item {
    transition: opacity var(--mcg-anim-dur, 600ms) ease,
                transform var(--mcg-anim-dur, 600ms) ease;
    will-change: opacity, transform;
}
.mcg-accordion[data-anim]:not(.mcg-anim-in) .accordion-item {
    opacity: 0;
}
.mcg-accordion[data-anim="fade-up"]:not(.mcg-anim-in) .accordion-item    { transform: translateY(28px); }
.mcg-accordion[data-anim="fade-down"]:not(.mcg-anim-in) .accordion-item  { transform: translateY(-28px); }
.mcg-accordion[data-anim="fade-left"]:not(.mcg-anim-in) .accordion-item  { transform: translateX(28px); }
.mcg-accordion[data-anim="fade-right"]:not(.mcg-anim-in) .accordion-item { transform: translateX(-28px); }
.mcg-accordion[data-anim="zoom"]:not(.mcg-anim-in) .accordion-item       { transform: scale(0.94); }

/* Always show inside the Elementor editor (no scroll trigger there). */
body.elementor-editor-active .mcg-accordion[data-anim] .accordion-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .mcg-accordion[data-anim] .accordion-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}