/*
==========================================================
ACCORDION BLOCK — accordion.css
==========================================================
WHAT IT IS:
A collapsible content block with expand/collapse
functionality powered by jQuery.

WHAT IT DOES:
Displays a list of ACF repeater items as accordion
panels, in one of four layouts (heading above, three
columns, heading on the left / right). Each panel
toggles open and closed on button click; several or
one at a time. An open answer settles at its natural
height, so late images/fonts and narrow columns never
clip it. Questions can be linked to with #q-… ids.
Toggle + question links: js/scripts.js.
Editor organization: BATCH_8_PLAN.md §30.

HOW TO USE:
1. In the WordPress block editor add the "Accordion"
   block to any page or post.
2. Add as many accordion items as needed.
3. Each item has a Title and Content field.
4. Save and preview the page.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/


.custom_accordion {
    margin: var(--space-5) 0 var(--space-12) 0;
}

.custom_accordion_card {
    border: 1px solid var(--color-border);
    overflow: hidden;
    border-radius: var(--radius-md);
}

.ac_body {
    height: 0;
    overflow: hidden;
    transition: ease all 350ms;
}

.ac_body_inner {
    padding: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.ac_body_inner > :first-child {
    margin-top: 0;
    padding-top: 0;
}

.ac_body_inner > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.accordion_header {
    margin: 0;
    padding: 0;
    /* Questions are H3 headings (§30): reset the global heading styles so
       they look exactly as before — the button sets its own font. */
    font: inherit;
    line-height: inherit;
    color: inherit;
    /* Room above a question reached by a #q-… link. */
    scroll-margin-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    border-bottom: none;
}

.custom_accordion .custom_accordion_item:first-child .accordion_header {
    border-top: none;
}

.accordion_header button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-5) 80px var(--space-5) var(--space-6);
    border: none;
    appearance: none;
    background: var(--color-bg);
    position: relative;
    transition: ease all 200ms;
    color: var(--color-primary);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    font-family: var(--font-heading);
    cursor: pointer;
}

.accordion_header button:hover {
    background: var(--color-bg-alt);
}

.accordion_header button:after {
    /* Plain drawn chevron (§30 A3) — no icon font needed. Same place as the
       former Font Awesome glyph; points down when closed, up when open. */
    content: '';
    position: absolute;
    top: 50%;
    right: 34px;
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translate(0, -70%) rotate(45deg);
    transition: transform 200ms ease;
}

.accordion_header button.active:after {
    transform: translate(0, -30%) rotate(-135deg);
}

/* Keyboard focus ring drawn just inside the button (§30 A4), so the
   list's rounded, clipped border can't cut it off. */
.accordion_header button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
    border-radius: var(--radius-sm);
}

/* Editor preview only — the button is disabled (accordion.php) to remove
   dead click/keyboard semantics; override the browser's default disabled
   dimming so the representative open panel still reads clearly. */
.custom_accordion_is_preview .accordion_header button:disabled {
    opacity: 1;
    cursor: default;
}

/* Editor preview only — accordion.php shows the first panel statically open
   (ac_body_preview_open) since no JS runs in the editor to measure/animate
   the real JS-driven height. Higher specificity (two classes vs. one) wins
   over the frontend's height:0 base rule without !important. */
.ac_body.ac_body_preview_open,
.ac_body.ac_body_open {
    height: auto;
    overflow: visible;
}

@media (max-width: 768px) {
    .accordion_header button {
        font-size: var(--text-base);
        padding: var(--space-4) 80px var(--space-4) var(--space-4);
    }

    .ac_body_inner {
        padding: var(--space-4) var(--space-4) var(--space-8) var(--space-4);
    }
}

@media (max-width: 480px) {
    .accordion_header button {
        font-size: var(--text-sm);
    }

    .custom_accordion {
        margin-top: var(--space-5);
    }
}

/* ==========================================================
   Batch 8H — Accordion (BATCH_8_PLAN.md §30)
   ========================================================== */

/* ── Layouts, by the block's own width ─────────────────────
   The wrapper is a size container, so the layout follows the room the
   block actually has — a phone, or a narrow Column on a computer, both
   get one column (heading area first, then the questions in order).
   Without container-query support everything stays stacked. */
.custom_accordion_wrapper {
    container: accordion / inline-size;
}

.custom_accordion_has_intro .custom_accordion_intro_area {
    margin-bottom: var(--space-8);
}

/* Stacked lists (three columns on a narrow block) keep a small gap. */
.custom_accordion_card + .custom_accordion_card {
    margin-top: var(--space-4);
}

@container accordion (min-width: 900px) {
    /* Three columns: three independent lists, so opening an answer only
       pushes down the questions under it in the same column. */
    .custom_accordion_layout_columns .custom_accordion_lists {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
        align-items: start;
    }

    .custom_accordion_layout_columns .custom_accordion_card + .custom_accordion_card {
        margin-top: 0;
    }
}

@container accordion (min-width: 720px) {
    /* Heading on the left / right: heading area ⅓, questions ⅔. The
       heading area stays first in the page code (read first); only its
       visual side changes. */
    .custom_accordion_layout_left.custom_accordion_has_intro .custom_accordion_layout,
    .custom_accordion_layout_right.custom_accordion_has_intro .custom_accordion_layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-12);
        align-items: start;
    }

    .custom_accordion_layout_right.custom_accordion_has_intro .custom_accordion_layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .custom_accordion_layout_right.custom_accordion_has_intro .custom_accordion_intro_area {
        grid-column: 2;
        grid-row: 1;
    }

    .custom_accordion_layout_right.custom_accordion_has_intro .custom_accordion_lists {
        grid-column: 1;
        grid-row: 1;
    }

    .custom_accordion_layout_left.custom_accordion_has_intro .custom_accordion_intro_area,
    .custom_accordion_layout_right.custom_accordion_has_intro .custom_accordion_intro_area {
        margin-bottom: 0;
    }

    /* The editor-only notes span the whole width. */
    .custom_accordion_layout_left .custom_accordion_links_note,
    .custom_accordion_layout_right .custom_accordion_links_note {
        grid-column: 1 / -1;
    }
}

/* ── Heading area ──────────────────────────────────────────
   Text alignment lines up these words only (the Layout chooses the side). */
.custom_accordion_align_left   .custom_accordion_intro_area { text-align: left; }
.custom_accordion_align_center .custom_accordion_intro_area { text-align: center; }
.custom_accordion_align_right  .custom_accordion_intro_area { text-align: right; }

.custom_accordion_label {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin: 0 0 var(--space-3) 0;
}

.custom_accordion_heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3) 0;
}

.custom_accordion_intro {
    max-width: 720px;
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.custom_accordion_intro > :first-child { margin-top: 0; }
.custom_accordion_intro > :last-child  { margin-bottom: 0; }

.custom_accordion_align_center .custom_accordion_intro {
    margin-left: auto;
    margin-right: auto;
}

.custom_accordion_align_right .custom_accordion_intro {
    margin-left: auto;
}

@media (max-width: 768px) {
    .custom_accordion_heading {
        font-size: var(--text-2xl);
    }
}

/* ── Narrow spaces ─────────────────────────────────────────
   Inside a WordPress Column the Column already provides the side space,
   so the block drops its own page-side padding and outer margins. Each
   list is also a size container, so a narrow list (a column, a side
   layout, three columns on a laptop) gets tighter, comfortable padding
   and a closer arrow — at full width nothing changes. */
.wp-block-column > .custom_accordion {
    margin: 0;
}

.wp-block-column > .custom_accordion > .custom_accordion_wrapper {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.custom_accordion_card {
    container: accordion-list / inline-size;
}

@container accordion-list (max-width: 479px) {
    .accordion_header button {
        padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4);
        font-size: var(--text-base);
    }

    .accordion_header button:after {
        right: var(--space-5);
    }

    .ac_body_inner {
        padding: var(--space-4) var(--space-4) var(--space-6) var(--space-4);
    }
}

/* ── Label look: Rounded tag (Batch 8H §28 / §30) ──────────
   Added only when the editor picks Rounded tag; Plain text (the default)
   adds nothing. Uses the label's own color (currentColor). The first
   border line is the fallback for browsers without color-mix().
   BOILERPLATE NOTE: the same rule lives in style.css §10c. Kept here so
   this block works when copied to a new project on its own; on a live
   project with §10c in place this copy can be removed. */
.custom_accordion_label.custom_accordion_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── Editor-only notes ─────────────────────────────────────
   Printed by accordion.php in the editor preview only. */
.custom_accordion_preview_note {
    box-sizing: border-box;
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
}

/* ==========================================================
   Section background (shared six-choice pattern, BATCH_8_PLAN.md §35)
   Only added when Background color is chosen; Standard adds nothing, so
   the section looks as before. The colour fills the section and its
   space moves from margin to padding so the colour surrounds the content.
   The question list keeps its own page-colour surface (below).
   ========================================================== */
.custom_accordion.custom_accordion_sbg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.custom_accordion_sbg_background     { background-color: var(--color-bg); }
.custom_accordion_sbg_alt_background { background-color: var(--color-bg-alt); }
.custom_accordion_sbg_dark           { background-color: var(--color-bg-dark); }
.custom_accordion_sbg_accent         { background-color: var(--color-accent); }
.custom_accordion_sbg_custom         { background-color: var(--custom_accordion-section-bg, var(--color-bg)); }

/* The question list keeps the page colour behind it, so questions and
   answers look exactly as before on any section colour. */
.custom_accordion_sbg .custom_accordion_card {
    background-color: var(--color-bg);
}

/* Words directly on a dark / brand / light-text section. */
.custom_accordion_sbg_text_light .custom_accordion_heading {
    color: var(--color-text-inverse);
}

.custom_accordion_sbg_text_light .custom_accordion_label {
    color: var(--color-text-inverse);
}

.custom_accordion_sbg_text_light .custom_accordion_intro {
    color: var(--color-text-inverse-soft);
}

.custom_accordion_sbg_text_light .custom_accordion_intro p,
.custom_accordion_sbg_text_light .custom_accordion_intro li {
    color: inherit;
}

.custom_accordion_sbg_text_light .custom_accordion_intro a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================
   Content look + card background (BATCH_8_PLAN.md §40)
   Card (default) keeps the usual card; a chosen Card background fills it
   (and drops the gray border). Flat removes fill, border, shadow and radius;
   the content sits on the section background. custom_accordion_on_dark is added when the
   surface directly behind the content is dark (a Dark / Brand / light-text
   custom card, or Flat on such a section): text, links, labels, dividers and
   focus outlines switch to light. custom_accordion_on_accent: buttons stay visible on the
   brand colour. Card settings stay saved while Flat is chosen.
   ========================================================== */

.custom_accordion_look_flat .custom_accordion_card {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

.custom_accordion_look_flat .accordion_header button,
.custom_accordion_cbg .accordion_header button {
    background: transparent;
}

.custom_accordion_look_flat .accordion_header button:hover,
.custom_accordion_cbg .accordion_header button:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.custom_accordion_cbg_background .custom_accordion_card { background-color: var(--color-bg); }
.custom_accordion_cbg_alt_background .custom_accordion_card { background-color: var(--color-bg-alt); }
.custom_accordion_cbg_dark .custom_accordion_card { background-color: var(--color-bg-dark); }
.custom_accordion_cbg_accent .custom_accordion_card { background-color: var(--color-accent); }
.custom_accordion_cbg_custom .custom_accordion_card { background-color: var(--custom_accordion-card-bg, var(--color-bg-alt)); }

.custom_accordion_cbg .custom_accordion_card {
    border-color: transparent;
}

/* Words on a dark surface. The question dividers stay, lightened. */
.custom_accordion_on_dark .accordion_header button {
    color: var(--color-text-inverse);
}

.custom_accordion_on_dark .ac_body_inner {
    color: var(--color-text-inverse-soft);
}

.custom_accordion_on_dark .ac_body_inner p,
.custom_accordion_on_dark .ac_body_inner li {
    color: inherit;
}

.custom_accordion_on_dark .ac_body_inner :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text-inverse);
}

.custom_accordion_on_dark .ac_body_inner a {
    color: inherit;
    text-decoration: underline;
}

.custom_accordion_on_dark .accordion_header,
.custom_accordion_on_dark .ac_body_inner {
    border-color: color-mix(in srgb, var(--color-text-inverse) 25%, transparent);
}

.custom_accordion_on_dark .accordion_header button:focus-visible {
    outline-color: var(--color-text-inverse);
}