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

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

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

/* Header button (Bootstrap 5 .accordion-button) */
.pn-accordion .accordion-button {
    -webkit-tap-highlight-color: transparent; /* no blue flash on tap (mobile) */
    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: #111111;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* 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 currentColor; /* keyboard focus only; matches the title colour */
    outline-offset: 2px;
}

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

/* 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: #111111;
    line-height: 1;
    transition: transform 0.2s ease;
}
.pn-accordion .accordion-button .pn-accordion-icon svg,
.pn-accordion .accordion-button .pn-accordion-icon i {
    width: 18px;
    height: 22px;
    font-size: 22px;
    fill: currentColor;
}
.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; }

/* 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: 4px 4px 22px;
    color: inherit;
    font-size: 17px;
    line-height: 1.6;
}
.pn-accordion .accordion-body > :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;
    }
}

/* ============================================================
 * SRR Gold skin (Design Style → "SRR Gold") — Figma: FAQ section
 * ============================================================ */
.pn-accordion--srr { --pn-acc-border: transparent; }
.pn-accordion--srr .accordion-item { border: 0; margin-bottom: 17px; }
.pn-accordion--srr .accordion-item:last-child { margin-bottom: 0; }
.pn-accordion--srr .accordion-button {
    padding: 10px 0;
    gap: 20px;
    color: #b89768;
    font-family: "Momo Trust Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0;
}
.pn-accordion--srr .accordion-button:hover { color: #dcad69; }
.pn-accordion--srr .accordion-button:focus-visible { outline-color: #b89768; }
.pn-accordion--srr .accordion-button .pn-accordion-icon { color: #b89768; }
.pn-accordion--srr .accordion-button .pn-accordion-icon svg { width: 23px; height: 23px; }
.pn-accordion--srr .accordion-body {
    padding: 4px 50px 12px 0;
    color: #ffffff;
    font-family: "Momo Trust Sans", sans-serif;
    font-size: 17px;
    line-height: 27px;
}
@media (max-width: 767px) {
    .pn-accordion--srr .accordion-button { font-size: 18px; line-height: 25px; }
    .pn-accordion--srr .accordion-body { padding-right: 0; font-size: 16px; line-height: 25px; }
}

.pn-accordion--srr .accordion-body p { font: inherit; letter-spacing: 0; color: inherit; margin: 0 0 10px; }
.pn-accordion--srr .accordion-body p:last-child { margin-bottom: 0; }
.pn-accordion--srr .accordion-header { font: inherit; margin: 0; }
.pn-accordion--srr .accordion-button .pn-accordion-icon svg { fill: none !important; }
.pn-accordion--srr .accordion-button,
.pn-accordion--srr .accordion-button:not(.collapsed) { box-shadow: none !important; background: transparent !important; color: #b89768; }
.pn-accordion--srr .accordion-item,
.pn-accordion--srr .accordion-collapse { border: 0 !important; background: transparent !important; }