/**
 * ACCORDION — CORE/DETAILS EXTENSION, STYLESHEET (style.css)
 * The accordion's look, on the frontend and in the editor canvas. Loaded by
 * pc_accordion_enqueue_styles() in accordion.php. Editor-only fixes: editor.css.
 *
 * Order: accordion, summary, content, reversed colors, then the open/close
 * behavior from the oldest browsers up (later tiers override earlier ones),
 * then reduced motion and print, which must come last.
 **/

/* ---- Accordion ---- */
details.pc-php-accordion {
    /* Timing/Animation Variables */
    --pc-accordion-duration: 0.4s;
    --pc-accordion-ease-open: cubic-bezier(0.22, 1, 0.36, 1);
    --pc-accordion-ease-close: cubic-bezier(0.4, 0.1, 0.8, 0.6);
    /* Every accordion border uses this color. */
    --pc-accordion-border-color: #ccc;
    padding: 0;
    font-family: Domine, Georgia, serif;
    text-align: left;
}
/* Open: a border around the whole accordion, summary included. */
details.pc-php-accordion[open] {
    border: 1px solid var(--pc-accordion-border-color);
}
/* An open accordion right after another one drops its top border: the line above
   (the previous accordion's summary line or bottom border) already does that job.
   The second selector looks past the hidden heading the heading toggle adds. */
details.pc-php-accordion + details.pc-php-accordion[open],
details.pc-php-accordion + .screen-reader-text + details.pc-php-accordion[open] {
    border-top-width: 0;
}

/* ---- Summary ---- */
/* Two flex items: the title (span.pc-php-accordion__title on the frontend, added by
   accordion.php; core's editable <div> in the editor) and the chevron (::after). */
details.pc-php-accordion > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background-color: transparent;
    border-bottom: 1px solid var(--pc-accordion-border-color);
    color: #000;
    font-size: 1.4em;
    padding: 1em 30px 1em 20px;
    font-family: GT America, sans-serif;
    text-align: left;
    line-height: 1;
}
/* Open: no line under the summary (the accordion's own border frames it now).
   Transparent rather than removed, so the summary's height doesn't change. */
details.pc-php-accordion[open] > summary {
    border-bottom-color: transparent;
}
/* Safari before 18.4 draws its own triangle and ignores list-style. This hides the marker. */
details.pc-php-accordion > summary::-webkit-details-marker {
    display: none;
}
/* The toggle marker */
details.pc-php-accordion > summary::after {
    content: '';
    flex: none;
    width: 0.6em;
    height: 0.6em;
    border-right: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--pc-accordion-duration) var(--pc-accordion-ease-close);
    margin-top: -4px;
}
/* The toggle marker: open */
details.pc-php-accordion[open] > summary::after {
    transform: rotate(-135deg);
    transition: transform var(--pc-accordion-duration) var(--pc-accordion-ease-open);
}

/* ---- Accordion Content (the inner blocks) ---- */
details.pc-php-accordion > :not(summary) {
    line-height: 1.6;
}
/* The content's last child, and the last child of every element inside it, at any depth.
   Margin only: padding can hold an element's shape (the theme's 16:9 .iframe-video box). */
details.pc-php-accordion > :not(summary):last-child,
details.pc-php-accordion > :not(summary) :last-child {
    margin-bottom: 0;
}

/* ---- Colors flipped ---- */
details.pc-php-accordion.pc-php-accordion--reversed > summary {
    background-color: #000;
    border-bottom-color: transparent;
    color: #fff;
}
/* Open: the border goes around the content only (left, right, bottom). */
details.pc-php-accordion.pc-php-accordion--reversed[open] {
    border-top-width: 0;
}
/* The summary reaches 1px past each side so its black background covers the side
   borders, and it stays as wide as when closed. */
details.pc-php-accordion.pc-php-accordion--reversed[open] > summary {
    margin-inline: -1px;
}

/* ---- Open/close, default for all browsers (fade on open only) ---- */
/* An animation, not a transition. Content isn't rendered while the panel is closed, so a transition has no starting style, at least until @starting-style has better support. */
@keyframes pc-php-accordion-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
details.pc-php-accordion[open] > :not(summary) {
    animation: pc-php-accordion-reveal var(--pc-accordion-duration) var(--pc-accordion-ease-open);
}
/* For browsers that don't support ::details-content, the whole open accordion gets the white background, and the spacing goes on <details> and its children. */
@supports not selector(::details-content) {
    details.pc-php-accordion[open] {
        background: #fff;
        padding-bottom: 20px;
    }
    details.pc-php-accordion[open] > summary {
        margin-bottom: 20px;
    }
    details.pc-php-accordion > :not(summary) {
        margin-inline: 20px;
    }
    /* Contain floated images. A clearfix, not flow-root: older browsers' <details> doesn't reliably take other display values. */
    details.pc-php-accordion[open]::after {
        content: '';
        display: block;
        clear: both;
    }
}

/* Progressive Enhancement -> ::details-content: 87% coverage on 9/22/26. This gives us animation on open AND close. */
@supports selector(::details-content) {
    details.pc-php-accordion[open] > :not(summary) {
        animation: none;
    }
    /* Borders: always there, zero width while closed. Closing: the color fades out with the panel, then the width drops. Opening: they appear at once. */
    details.pc-php-accordion {
        border: 0 solid transparent;
        transition: border-color var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    border-width 0s var(--pc-accordion-duration);
    }
    details.pc-php-accordion[open] {
        transition: none;
    }
    /* Closing, the summary waits for the panel to finish before changing back:
       - its line underneath stays transparent until the accordion is fully closed;
       - reversed: it keeps its -1px until the side borders have faded, so they never show beside it.
       Opening: both change at once. */
    details.pc-php-accordion > summary {
        transition: border-bottom-color 0s var(--pc-accordion-duration),
                    margin-inline 0s var(--pc-accordion-duration);
    }
    details.pc-php-accordion[open] > summary {
        transition: none;
    }
    /* Top and bottom padding would add height, so they're open-only. */
    /* Transitions use the timing of the state they're changing to. Closing: the padding waits for the fade to finish, then drops. */
    /* flow-root contains floated images, which would otherwise hang out of the bottom. */
    details.pc-php-accordion::details-content {
        display: flow-root;
        background: #fff;
        padding-inline: 20px;
        opacity: 0;
        transform: translateY(-0.25rem);
        transition: opacity var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    transform var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    padding-block 0s var(--pc-accordion-duration),
                    content-visibility var(--pc-accordion-duration) allow-discrete;
    }
    /* Opening: the padding is there at once, before the fade starts. */
    details.pc-php-accordion[open]::details-content {
        padding-block: 20px;
        opacity: 1;
        transform: none;
        transition: opacity var(--pc-accordion-duration) var(--pc-accordion-ease-open),
                    transform var(--pc-accordion-duration) var(--pc-accordion-ease-open),
                    padding-block 0s,
                    content-visibility var(--pc-accordion-duration) allow-discrete;
    }
}

/* Progressive Enhancement -> interpolate-size (height animation) ---- */
/* Only where height: auto can be animated. Everywhere else keeps tier 2's fade. Top and bottom padding animate with the height, so they need no delay. */
@supports (interpolate-size: allow-keywords) {
    details.pc-php-accordion {
        interpolate-size: allow-keywords;
    }
    /* Clip only while animating: a fully open accordion never clips (it cut off image captions).
       Clip only top and bottom, so wide content isn't cut off at the sides. The clip margin leaves room for focus rings.
       overflow-y can't animate, only flip; allow-discrete lets a delay choose when.
       Closing: clips at once. Opening: stays clipped while the panel grows, then unclips. */
    details.pc-php-accordion::details-content {
        block-size: 0;
        overflow-y: clip;
        overflow-clip-margin: 4px;
        transition: block-size var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    padding-block var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    opacity var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    transform var(--pc-accordion-duration) var(--pc-accordion-ease-close),
                    overflow-y 0s allow-discrete,
                    content-visibility var(--pc-accordion-duration) allow-discrete;
    }
    details.pc-php-accordion[open]::details-content {
        block-size: auto;
        overflow-y: visible;
        transition: block-size var(--pc-accordion-duration) var(--pc-accordion-ease-open),
                    padding-block var(--pc-accordion-duration) var(--pc-accordion-ease-open),
                    opacity var(--pc-accordion-duration) var(--pc-accordion-ease-open),
                    transform var(--pc-accordion-duration) var(--pc-accordion-ease-open),
                    overflow-y 0s var(--pc-accordion-duration) allow-discrete,
                    content-visibility var(--pc-accordion-duration) allow-discrete;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    details.pc-php-accordion,
    details.pc-php-accordion[open] {
        transition: none;
    }
    details.pc-php-accordion[open] > :not(summary) {
        animation: none;
    }
    details.pc-php-accordion > summary,
    details.pc-php-accordion > summary::after {
        transition: none;
    }
    details.pc-php-accordion::details-content,
    details.pc-php-accordion[open]::details-content {
        transform: none;
        transition: none;
    }
}

/* ---- Print ---- */
/* The theme's print sheet makes closed content visible, but the opacity rules above would still hide it. */
@media print {
    details.pc-php-accordion::details-content {
        block-size: auto;
        overflow-y: visible;
        padding: 20px;
        opacity: 1;
        transform: none;
    }
    /* Every accordion prints open-> hide the chevron. */
    details.pc-php-accordion > summary::after {
        display: none;
    }
}