/*
 * pms-panel.css — PMS Engagement Panel (pmspace/panel block)
 *
 * Uses CSS custom properties set as inline vars on the <details> element by
 * render.php. This means every property is scoped per-block automatically
 * without needing unique class names per instance.
 *
 * Custom properties used:
 *   --pms-panel-bg            header background (default: transparent)
 *   --pms-panel-color         header text/icon colour (default: inherit)
 *   --pms-panel-hover-bg      header hover background
 *   --pms-panel-hover-color   header hover text/icon colour
 *   --pms-panel-content-bg    content area background
 *   --pms-panel-radius        border radius (default: 6px)
 */

/* ── Outer wrapper (<details>) ─────────────────────────────────────────── */
.pms-panel {
    display: block;
    border-radius: var( --pms-panel-radius, 6px );
    overflow: hidden; /* clips content to border-radius */
}

.pms-panel--shadow {
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
}

/* ── Header bar (<summary>) ────────────────────────────────────────────── */
.pms-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5em;
    padding:         0.6em 1em;
    cursor:          pointer;
    list-style:      none;       /* removes the default disclosure triangle in Firefox */
    user-select:     none;

    background: var( --pms-panel-bg,    transparent );
    color:      var( --pms-panel-color, inherit      );

    border-radius: var( --pms-panel-radius, 6px )
                   var( --pms-panel-radius, 6px )
                   0 0;

    transition: background 0.15s ease, color 0.15s ease;
}

/* Remove default Safari/Chrome disclosure triangle */
.pms-panel__header::-webkit-details-marker { display: none; }
.pms-panel__header::marker               { display: none; }

/* Hover state */
.pms-panel__header:hover {
    background: var( --pms-panel-hover-bg,    var( --pms-panel-bg,    transparent ) );
    color:      var( --pms-panel-hover-color, var( --pms-panel-color, inherit      ) );
}

/* ── Title text ─────────────────────────────────────────────────────────── */
.pms-panel__title {
    flex: 1;
    font-weight: inherit;
    line-height: 1.3;
}

/* ── Chevron toggle icon ────────────────────────────────────────────────── */
.pms-panel__toggle {
    flex-shrink:  0;
    font-size:    1em;
    line-height:  1;
    color:        inherit;
    transition:   transform 0.2s ease;
    /* Starts pointing right (→) and rotates 90° to point down (↓) when open */
    transform:    rotate( 0deg );
}

.pms-panel[open] .pms-panel__toggle {
    transform: rotate( 90deg );
}

/* ── Content area (<div class="pms-panel__content">) ───────────────────── */
.pms-panel__content {
    padding:    1em;
    background: var( --pms-panel-content-bg, transparent );

    border-radius: 0 0
                   var( --pms-panel-radius, 6px )
                   var( --pms-panel-radius, 6px );
}

/* Ensure first and last blocks inside the content don't add extra spacing */
.pms-panel__content > :first-child { margin-top:    0; }
.pms-panel__content > :last-child  { margin-bottom: 0; }

/* ── Editor canvas styles (editor.js applies .pms-panel-editor wrapper) ── */
.pms-panel-editor .pms-panel__header {
    /* Prevent the header from receiving its <summary> click behaviour
       in the editor — clicking should select the block, not toggle it */
    pointer-events: none;
}

.pms-panel-editor .pms-panel__title {
    /* Re-enable pointer events for the RichText editable area */
    pointer-events: auto;
}