/* ============================================================
 * PN 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 / .pn-collapsing) and the animation are
 * handled here + in pn-accordion.js, so it works the same on the
 * front end and inside the Elementor editor.
 * ============================================================ */

.pn-accordion {
    /* Figma node 105:405 — divider "Line 3": #916037 @ 50%. */
    --pn-acc-border: rgba(145, 96, 55, 0.5);
    --pn-acc-radius: 6px;
    width: 100%;
    background: transparent;
    border: 0;
}

/* 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 .pn-accordion,
body.elementor-editor-active .pn-accordion * {
    pointer-events: none !important;
}

/* Bootstrap's own .accordion-item paints a full box + radius; Figma has only a
   hairline between items, so reset the box and draw a single top divider. */
/* Item container with perspective for 3D depth */
.pn-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    perspective: 800px;
    transition: border-color 0.35s ease, background-color 0.35s ease;
}
.pn-accordion .accordion-item + .accordion-item {
    border-top: 1px solid var(--pn-acc-border);
}
.pn-accordion .accordion-item:hover {
    border-color: var(--pn-acc-border-hover, rgba(244, 234, 138, 0.35));
}

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

/* Header button (Bootstrap 5 .accordion-button) */
.pn-accordion .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 16px 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #f4ea8a;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    text-align: left;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.pn-accordion .accordion-item:first-child .accordion-button,
.pn-accordion .accordion-item:first-of-type .accordion-button {
    padding-top: 0 !important;
}

/* Mouseover / Hover effects on button */
.pn-accordion .accordion-button:hover {
    color: var(--pn-title-hover, #ffffff);
}

/* Bootstrap tints + shadows the expanded header — Figma keeps it flat. */
.pn-accordion .accordion-button:not(.collapsed) {
    background: transparent;
    color: #f4ea8a;
    box-shadow: none;
    padding-bottom: 5px;
}

.pn-accordion .accordion-button:not(.collapsed):hover {
    color: var(--pn-title-hover, #ffffff);
}

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

.pn-accordion .accordion-button:focus {
    outline: none;
    box-shadow: none;
}
.pn-accordion .accordion-button:focus-visible {
    outline: 2px solid #15b2c0;
    outline-offset: 2px;
}

.pn-accordion .accordion-button .pn-accordion-title {
    flex: 1 1 auto;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, text-shadow 0.35s ease;
    will-change: transform, text-shadow;
}

/* 3D Pop-out animation on title mouseover */
.pn-accordion .accordion-button:hover .pn-accordion-title {
    transform: translateX(10px) translateY(-2px) scale(1.025);
    text-shadow: 0 4px 16px rgba(244, 234, 138, 0.4), 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Icon: two states, toggled by the collapsed class on the button */
.pn-accordion .accordion-button .pn-accordion-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f4ea8a;
    line-height: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, filter 0.35s ease;
    will-change: transform, filter;
}
.pn-accordion .accordion-button .pn-accordion-icon svg,
.pn-accordion .accordion-button .pn-accordion-icon i {
    width: 25px;
    height: 25px;
    font-size: 25px;
    fill: currentColor;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pn-accordion .accordion-button .pn-icon--open { display: none; }
.pn-accordion .accordion-button .pn-icon--closed { display: inline-flex; }
.pn-accordion .accordion-button:not(.collapsed) .pn-icon--open { display: inline-flex; }
.pn-accordion .accordion-button:not(.collapsed) .pn-icon--closed { display: none; }

/* 3D Mouseover animation on icon */
.pn-accordion .accordion-button:hover .pn-accordion-icon {
    color: var(--pn-icon-hover, #ffffff);
    filter: drop-shadow(0 4px 12px rgba(244, 234, 138, 0.45));
}
.pn-accordion .accordion-button.collapsed:hover .pn-accordion-icon {
    transform: translateY(5px) scale(1.18);
}
.pn-accordion .accordion-button:not(.collapsed):hover .pn-accordion-icon {
    transform: translateY(-5px) scale(1.18);
}

/* Collapse mechanics (mirrors Bootstrap .collapse / .collapsing) */
.pn-accordion .accordion-collapse {
    overflow: hidden;
}
.pn-accordion .accordion-collapse:not(.show):not(.pn-collapsing) {
    display: none;
}
.pn-accordion .accordion-collapse.pn-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. */
.pn-accordion .accordion-collapse.pn-measuring {
    display: block !important;
    height: auto !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.pn-accordion .accordion-body {
    padding: 2px 0 16px;
    color: #ffffff;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.16px;
}
.pn-accordion .accordion-body > :first-child,
.pn-accordion .accordion-body p:first-child {
    margin-top: 0;
}
.pn-accordion .accordion-body > :last-child,
.pn-accordion .accordion-body p:last-child {
    margin-bottom: 0;
}

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

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

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

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

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