/* One stylesheet for the Accordion Container and its Accordion Items. The container's title,
   introduction and separator take the shared tokens in /blocks/blocks.css; each var() carries its
   own fallback for a site without that file. The container's partial links this file and
   accordion.js itself, once per page. */

/* ---------- Container ---------- */

/* Full bleed. --block-bg is set inline by the template when the author chose a colour, and the
   panel white stands in when they did not; the colour is painted as a zero-width
   border image outset to the viewport on both sides, so it reaches the edges of the screen while
   the block itself keeps whatever width its container gives it. The outset is decoration only --
   it doesn't affect layout and doesn't create a horizontal scrollbar.

   This lives here rather than in the site's stylesheet so the block is self-contained: drop the
   folder and the partial into any site, on any page template, and the bleed comes with it. The
   block needs nothing from the host's CSS.

   Two caveats worth knowing. An accordion nested inside another accordion drops the bleed (the
   second rule) -- painting an inner block across the viewport would cover the one it sits in. And
   the bleed doesn't clip to its context: in a narrow column it still paints the full viewport
   width, which is inherent to the technique rather than a setting. */
.design-block-accordioncontainer-block {
    width: 100%;
    box-sizing: border-box;
    padding: var(--block-pad-y, 64px) 0;
    background-color: var(--block-bg, var(--block-panel-bg, #fff));
    border-image: linear-gradient(var(--block-bg, var(--block-panel-bg, #fff)) 0 0) fill 0 // 0 100vw;
}

.design-block-accordioncontainer-block .design-block-accordioncontainer-block {
    border-image: none;
}

.design-block-accordioncontainer-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.design-block-accordioncontainer-left {
    flex: 0 0 50%;
    max-width: 50%;
    /* Half the gutter toward the middle -- mirrored by the right column -- so the two columns sit
       --block-gutter apart, as the CTA's do. */
    padding: 0 calc(var(--block-gutter, 56px) / 2) 0 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.design-block-accordioncontainer-header {
    width: 100%;
    margin-bottom: 16px;
}

.design-block-accordioncontainer-heading {
    font-family: var(--block-title-font, Georgia, "Times New Roman", serif);
    font-size: var(--block-title-size, clamp(1.5rem, 1rem + 1.5vw, 2.25rem));
    font-weight: var(--block-title-weight, 700);
    line-height: var(--block-title-line, 1.15);
    color: var(--block-ink, #1a1a1a);
    margin: 0 0 8px 0;
}

.design-block-accordioncontainer-introduction {
    font-size: var(--block-body-size, 1.0625rem);
    line-height: var(--block-body-line, 1.75);
    color: var(--block-ink, #1a1a1a);
}

.design-block-accordioncontainer-right {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 0 0 calc(var(--block-gutter, 56px) / 2);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Separator between the title/description and the items, as on sfopera.com. The template adds the
   --separated class only when both are present. Desktop: a vertical line between the two columns,
   the height of the content; the block's own padding keeps it off the edges. */
.design-block-accordioncontainer--separated .design-block-accordioncontainer-right {
    position: relative;
}

    .design-block-accordioncontainer--separated .design-block-accordioncontainer-right::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--block-rule, rgba(0, 0, 0, 0.16));
    }

.design-block-accordioncontainer-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Stacked at the width every block stacks at (blocks.css). */
@media (max-width: 900px) {
    .design-block-accordioncontainer-block {
        padding: var(--block-pad-y-sm, 40px) 0;
    }

    .design-block-accordioncontainer-inner {
        flex-direction: column;
    }

    .design-block-accordioncontainer-left,
    .design-block-accordioncontainer-right {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 20px 24px;
    }

    /* Mobile: accordion items span 98% of the block, centred, so they don't touch the sides. Delete
       these two rules to put the 20px side padding back. */
    .design-block-accordioncontainer-right {
        padding: 24px 0 0;
    }

    .design-block-accordioncontainer-items {
        width: 98%;
        margin: 0 auto;
    }

    /* Stacked: the separator turns horizontal, between the description and the items. */
    .design-block-accordioncontainer--separated .design-block-accordioncontainer-right {
        border-top: 1px solid var(--block-rule, rgba(0, 0, 0, 0.16));
    }

        .design-block-accordioncontainer--separated .design-block-accordioncontainer-right::before {
            display: none;
        }
}

/* ---------- Item ---------- */

/* Every colour, size and the radius come from the shared tokens in /blocks/blocks.css. */
.design-block-accordionitem-wrapper {
    border: 1px solid var(--block-panel-border, #d1d5db);
    border-radius: var(--block-radius, 6px);
    overflow: hidden;
    background: var(--block-panel-bg, #fff);
    font-family: inherit;
}

/* The header is a <button>, so it is focusable and keyboard-operable for free. Reset its defaults. */
.design-block-accordionitem-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    user-select: none;
    background: var(--block-panel-head-bg, #f9fafb);
    transition: background 0.2s ease;
    gap: 12px;
}

    .design-block-accordionitem-header:hover {
        background: var(--block-panel-head-bg-hover, #f1f3f5);
    }

    .design-block-accordionitem-header:focus-visible {
        outline: 2px solid var(--block-focus, #1a1a1a);
        outline-offset: -2px;
    }

    .design-block-accordionitem-header[aria-expanded="true"] {
        background: var(--block-panel-head-bg-hover, #f1f3f5);
        border-bottom: 1px solid var(--block-panel-border, #d1d5db);
    }

.design-block-accordionitem-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.design-block-accordionitem-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.design-block-accordionitem-title {
    font-size: var(--block-body-size, 1.0625rem);
    font-weight: 600;
    color: var(--block-ink, #1a1a1a);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.design-block-accordionitem-chevron {
    flex-shrink: 0;
    color: var(--block-ink-muted, #6b7280);
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.design-block-accordionitem-header[aria-expanded="true"] .design-block-accordionitem-chevron {
    transform: rotate(180deg);
}

.design-block-accordionitem-body[hidden] {
    display: none;
}

.design-block-accordionitem-body-inner {
    padding: 20px 24px;
    color: var(--block-ink, #1a1a1a);
    font-size: var(--block-body-size, 1.0625rem);
    line-height: var(--block-body-line, 1.75);
}

    /* Links are ink and underlined, like the rest of the blocks' text. */
    .design-block-accordionitem-body-inner a {
        color: var(--block-ink, #1a1a1a);
        text-decoration: underline;
    }

    .design-block-accordionitem-body-inner p {
        margin: 0 0 1em;
    }

        .design-block-accordionitem-body-inner p:last-child {
            margin-bottom: 0;
        }

    .design-block-accordionitem-body-inner ul,
    .design-block-accordionitem-body-inner ol {
        padding-left: 1.5em;
        margin: 0 0 1em;
    }

    .design-block-accordionitem-body-inner img {
        max-width: 100%;
        height: auto;
        border-radius: var(--block-radius, 6px);
    }