/* One stylesheet for the Accordion Container and its Accordion Items. */

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

/* Full bleed. --block-bg is set inline by the template; 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;
    background-color: var(--block-bg, transparent);
    border-image: linear-gradient(var(--block-bg, transparent) 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;
    min-height: 400px;
}

.design-block-accordioncontainer-left {
    flex: 0 0 50%;
    max-width: 50%;
    /* Outer edge 12px, 48px toward the middle — mirrored by the right column. */
    padding: 32px 48px 32px 12px;
    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-size: 1.75rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    font-family: sans-serif;
}

.design-block-accordioncontainer-introduction {
    font-size: 1rem;
    color: #333;
    font-family: sans-serif;
    line-height: 1.6;
}

.design-block-accordioncontainer-right {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 32px 12px 32px 48px;
    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,
   inset 32px top and bottom (matching the column padding) so it doesn't read as a split. */
.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: 32px;
        bottom: 32px;
        width: 1px;
        background: rgba(0, 0, 0, 0.16);
    }

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

@media (max-width: 768px) {
    .design-block-accordioncontainer-inner {
        flex-direction: column;
    }

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

    /* 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-left: 0;
        padding-right: 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 rgba(0, 0, 0, 0.16);
    }

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

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

.design-block-accordionitem-wrapper {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    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: #f9fafb;
    transition: background 0.2s ease;
    gap: 12px;
}

    .design-block-accordionitem-header:hover {
        background: #f1f3f5;
    }

    .design-block-accordionitem-header:focus-visible {
        outline: 2px solid #4f46e5;
        outline-offset: -2px;
    }

    .design-block-accordionitem-header[aria-expanded="true"] {
        background: #f1f3f5;
        border-bottom: 1px solid #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: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.design-block-accordionitem-chevron {
    flex-shrink: 0;
    color: #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: #374151;
    font-size: 0.9375rem;
    line-height: 1.7;
}

    .design-block-accordionitem-body-inner a {
        color: #4f46e5;
        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: 4px;
    }