/**
 * Page Designer — Accordion Block runtime styles
 * Namespace: pd-blk-acc-*
 *
 * Consumed by both the editor canvas and the published page.
 * Uses CSS custom properties set by pd_accordion_panel.js so the
 * panel controls drive live rendering without inline-style soup.
 *
 * NEVER place pd-acc-pnl-* (panel) selectors here — this file is
 * for the block itself, loaded into the canvas iframe.
 */

/* ── Root wrapper ─────────────────────────────────────────────── */
.pd-blk-acc {
    --pd-acc-header-bg: #fafafa;
    --pd-acc-header-color: #333333;
    --pd-acc-header-size: 15px;
    /* v3.7.876 — default body text FOLLOWS the Global Theme General Text so an
       uncustomised accordion matches the editor on the live page too (the editor's
       generated bridge rule isn't saved). --pd-general-color = canvas/web global
       text; --at-color-text = admin-page theme text (always present on admin); the
       grey is the last-ditch fallback. A panel-set body colour still overrides this. */
    --pd-acc-body-color: var(--pd-general-color, var(--at-color-text, #666666));
    --pd-acc-body-size: 14px;
    --pd-acc-item-gap: 8px;
    --pd-acc-item-border: 1px solid #e5e7eb;
    --pd-acc-item-radius: 8px;
    --pd-acc-divider: 1px solid #e5e7eb;
    --pd-acc-icon-color: #999999;
    --pd-acc-anim-dur: 0.25s;
}

/* ── Each <details> item ──────────────────────────────────────── */
.pd-blk-acc-item {
    border: var(--pd-acc-item-border);
    border-radius: var(--pd-acc-item-radius);
    margin-bottom: var(--pd-acc-item-gap);
    overflow: hidden;
    transition: margin var(--pd-acc-anim-dur) ease;
}
.pd-blk-acc-item:last-child {
    margin-bottom: 0;
}

/* ── Summary / header ─────────────────────────────────────────── */
.pd-blk-acc-header {
    position: relative;
    padding: 16px 48px 16px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--pd-acc-header-size);
    /* v2.9.154 — Inactive section state (closed item).
       Falls back to legacy --pd-acc-header-* so existing pages
       render unchanged when the new vars aren't set. */
    color: var(--pd-acc-inactive-text, var(--pd-acc-header-color));
    background: var(--pd-acc-inactive-bg, var(--pd-acc-header-bg));
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.15s, color 0.15s;
}

/* v2.9.154 — Active section state (open item header). */
.pd-blk-acc-item[open] > .pd-blk-acc-header {
    background: var(--pd-acc-active-bg, var(--pd-acc-inactive-bg, var(--pd-acc-header-bg)));
    color: var(--pd-acc-active-text, var(--pd-acc-inactive-text, var(--pd-acc-header-color)));
}
/* Remove default marker in all browsers */
.pd-blk-acc-header::-webkit-details-marker { display: none; }
.pd-blk-acc-header::marker { display: none; content: ''; }

/* Hover
   v2.9.154 — Hover colours from panel. When no hover var is set,
   chained fallback resolves to the inactive (or legacy header) state
   and the brightness filter delivers the same subtle effect as before. */
.pd-blk-acc-header:hover {
    filter: brightness(0.96);
    background: var(--pd-acc-hover-bg, var(--pd-acc-inactive-bg, var(--pd-acc-header-bg)));
    color: var(--pd-acc-hover-text, var(--pd-acc-inactive-text, var(--pd-acc-header-color)));
}
/* Open + hover — keep active colours visible on hover (no swap to hover). */
.pd-blk-acc-item[open] > .pd-blk-acc-header:hover {
    background: var(--pd-acc-active-bg, var(--pd-acc-inactive-bg, var(--pd-acc-header-bg)));
    color: var(--pd-acc-active-text, var(--pd-acc-inactive-text, var(--pd-acc-header-color)));
}

/* Focus visible for accessibility */
.pd-blk-acc-header:focus-visible {
    outline: 2px solid var(--pd-link-color, #89b4fa); /* v3.7.23 — focus ring follows Global Links, no hardcoded colour */
    outline-offset: -2px;
}

/* ── Expand/collapse icon ─────────────────────────────────────── */
.pd-blk-acc-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 18px;
    color: var(--pd-acc-icon-color);
    transition: transform var(--pd-acc-anim-dur) ease;
}

/* Rotate icon when open */
.pd-blk-acc-item[open] > .pd-blk-acc-header > .pd-blk-acc-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* Plus/minus icon — don't rotate, switch content */
.pd-blk-acc[data-pd-acc-icon="plus-minus"] .pd-blk-acc-icon {
    font-size: 20px;
    font-weight: 300;
    transition: none;
}
.pd-blk-acc[data-pd-acc-icon="plus-minus"] .pd-blk-acc-icon::after {
    content: '+';
}
.pd-blk-acc[data-pd-acc-icon="plus-minus"] .pd-blk-acc-item[open] > .pd-blk-acc-header > .pd-blk-acc-icon::after {
    content: '\2212'; /* minus */
}
/* Hide the original text node for plus-minus mode */
.pd-blk-acc[data-pd-acc-icon="plus-minus"] .pd-blk-acc-icon {
    font-size: 0;
}
.pd-blk-acc[data-pd-acc-icon="plus-minus"] .pd-blk-acc-icon::after {
    font-size: 20px;
}

/* Caret icon */
.pd-blk-acc[data-pd-acc-icon="caret"] .pd-blk-acc-icon {
    font-size: 14px;
}

/* Arrow icon */
.pd-blk-acc[data-pd-acc-icon="arrow"] .pd-blk-acc-icon {
    font-size: 14px;
}

/* No icon */
.pd-blk-acc[data-pd-acc-icon="none"] .pd-blk-acc-icon {
    display: none;
}

/* ── Content body ─────────────────────────────────────────────── */
.pd-blk-acc-body {
    padding: 16px 20px;
    font-size: var(--pd-acc-body-size);
    color: var(--pd-acc-body-color);
    line-height: 1.7;
    border-top: var(--pd-acc-divider);
}

/* ── Animation — wrap content in a smooth reveal ──────────────── */
.pd-blk-acc[data-pd-acc-animate="1"] .pd-blk-acc-body {
    animation: pdAccSlideDown var(--pd-acc-anim-dur) ease forwards;
}
@keyframes pdAccSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Single-open mode runtime JS hook ─────────────────────────── */
/* The panel sets data-pd-acc-mode="single" on the root. A tiny
   runtime script (injected by accordion.css via published page or
   by the panel in the editor) handles closing siblings. The CSS
   here just ensures the transitions look smooth. */

/* ── Accessibility — reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pd-blk-acc-icon,
    .pd-blk-acc-body {
        transition: none;
        animation: none;
    }
}