/* =================================================================
   ACCORDION
   Smooth Nested Accordion open/close + title layout tweaks.
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Smooth accordion (Nested Accordion widget)
   Add .smooth-accordion to the accordion widget (Advanced > CSS
   Classes). Replaces Elementor's instant open/close with a smooth
   expand, à la the Rafaela Lucas reference:
     - height eases open via the grid-template-rows 0fr -> 1fr
       technique, which animates to the TRUE content height (perfect
       easing, no max-height guessing)
     - the answer fades + slides in
     - the + icon rotates to an × on open (your ipg icon kept)
   All Elementor styling is preserved — the open-state padding is
   left to Elementor, so your Style-tab settings still apply.
   Honours reduced-motion.
--------------------------------------------------------------- */

/* STATE MODEL: the visual open state is the .acc-open CLASS (set by
   assets/js/accordion.js), NOT the [open] attribute.
   Modern browsers stop rendering a <details>' content the moment
   [open] is removed (content-visibility on the internal slot, which
   display:grid can no longer override) — so attribute-keyed CSS can
   never animate the close, and a re-render starts at its final state
   so reopens don't animate either (the "animates once per item" bug).
   The script keeps [open] set during the collapse and only removes it
   after the transition ends; the class drives every animation.
   body.acc-js gates it all — without JS the [open]-keyed fallback
   rules keep the accordion fully usable (instant, but working). */

/* Expand: override Elementor's display:none so height can animate */
.smooth-accordion details > .e-con {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-js .smooth-accordion details.acc-open > .e-con,
body:not(.acc-js) .smooth-accordion details[open] > .e-con {
    grid-template-rows: 1fr;
}

/* Closed: collapse the content's vertical padding too, so the
   closed state is flat. Open keeps whatever padding you set in
   Elementor (nothing hardcoded here). */
.acc-js .smooth-accordion details:not(.acc-open) > .e-con,
body:not(.acc-js) .smooth-accordion details:not([open]) > .e-con {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The collapsing child must be free to shrink to 0 and clip,
   and it fades + slides in as the panel opens. */
.smooth-accordion details > .e-con > * {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease 0.05s,
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.acc-js .smooth-accordion details.acc-open > .e-con > *,
body:not(.acc-js) .smooth-accordion details[open] > .e-con > * {
    opacity: 1;
    transform: none;
}

/* Icon: the + rotates to an × on open */
.smooth-accordion .e-n-accordion-item-title-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-js .smooth-accordion details.acc-open .e-n-accordion-item-title-icon,
body:not(.acc-js) .smooth-accordion details[open] .e-n-accordion-item-title-icon {
    transform: rotate(45deg);
}

.smooth-accordion * {
    transition: all ease 0.3s;
}

/* Reduced motion: keep it functional, drop the animation */
@media (prefers-reduced-motion: reduce) {
    .smooth-accordion details > .e-con,
    .smooth-accordion details > .e-con > *,
    .smooth-accordion .e-n-accordion-item-title-icon {
        transition: none !important;
    }
}
.our-process .e-n-accordion-item-title, .accordion-icon .e-n-accordion-item-title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.accordion-icon .e-n-accordion-item-title {
    gap: 48px;
}

.our-process .e-n-accordion-item-title {
    gap: 128px;
}

.accordion-icon .e-n-accordion-item-title-icon {
    padding-top: 8px;
}

@media (max-width: 1024px) { 
    .our-process .e-n-accordion-item-title, .accordion-icon .e-n-accordion-item-title {
        gap: 24px;
    }
}