/* Native core/details ("FAQ Item" block style, is-style-faq) inside a core/group ("FAQ List" block style, is-style-faq-list) — see inc/faq-block-styles.php for why this is two registered block styles instead of a custom block. Styled only through the block's own top-level wp-block-* class plus the registered is-style-* class (docs/PLAN.md §25's core block safety rule), never a selector reaching into core/details' own internal markup, since that can change across WordPress versions. Ported from the prototype's components/faq.css (.faq-item/.faq-question/.faq-answer), minus the .faq-section wrapper (a page's own tt360/section + intro paragraph cover that, same composition as every other single-instance component in this theme) and the inline chevron (replaced with a CSS mask-image below, so an editor only ever types the question/answer, never markup). Every rule below matches TWO selectors: any .wp-block-details inside .is-style-faq-list (whether or not it has its own is-style-faq class) OR a .wp-block-details.is-style-faq anywhere else. Block styles don't carry over to a newly inserted block (confirmed by Elisa: adding a new Details block inside an existing FAQ List got no style at all), so TTC adding a new FAQ question would otherwise have to remember to apply "FAQ Item" by hand every time. Matching on the list ancestor instead makes the whole list self-styling — any details block dropped inside it just looks right, no style picker step needed. The second selector (.is-style-faq alone) is kept so a details block already saved with that class, outside any FAQ List, still renders the same way it always did. */ .wp-block-group.is-style-faq-list { max-width: 720px; margin: 55px auto 0; } /* The intro line above an FAQ list (tt360/section-heading's own optional intro paragraph) caps narrower than section-heading-lg's own 880px — the prototype's .faq-section .intro sets this 620px cap directly, separate from (and narrower than) whatever width the heading above it is allowed. Missing here until now, which let the intro line run wider and wrap onto fewer lines than the prototype, measurably shortening every FAQ section (found against the real rendered height, not assumed — this, not the heading's own large/regular size, was the real cause). Scoped with :has() to the section actually holding an FAQ list, so this never reaches a section-heading intro anywhere else that might genuinely want the wider 880px cap. */ .tt360-section:has(.is-style-faq-list) .section-heading .intro { max-width: 620px; margin: 0 auto; font-size: 16px; line-height: 1.5; } /* A sibling combinator, not a > direct-child one: core/group's real markup wraps its children in its own .wp-block-group__inner-container div (confirmed on a real rendered page), so the FAQ items aren't actually direct children of .is-style-faq-list itself. A sibling selector finds them correctly wherever core/group happens to nest them, without reaching into that wrapper's own internal class name. */ .is-style-faq-list .wp-block-details + .wp-block-details { margin-top: 16px; } /* Editor-only: the block editor's own default block spacing gives every block a 28px margin-bottom (confirmed directly — nothing in this theme's own CSS sets it, and the real front end never had it either). Adjacent margins collapse to whichever is larger, so that 28px default was winning over the 16px margin-top above, measured as a 28px gap between FAQ items in the editor against 16px on the real page. Harmless to set on the front end too (nothing there was relying on a margin-bottom that was never actually set). */ .is-style-faq-list .wp-block-details { margin-bottom: 0; } .is-style-faq-list .wp-block-details, .wp-block-details.is-style-faq { background-color: rgba(var(--cream), 1); border-radius: 6px; } .is-style-faq-list .wp-block-details[open], .wp-block-details.is-style-faq[open] { background-color: rgba(var(--white), 1); } /* The item's own background follows its ancestor tt360/section automatically — not a per-block color option — so it always reads as a distinct card against whatever the section's own background is, rather than Elisa having to pick a color per instance. Question/answer text colors never change (terra-green/charcoal, the same as the unconditional rules above), only the item's own surface color does. Checked every combination for WCAG AA: green section (default, unchanged, byte-identical): cream items — terra-green/cream 5.55:1, charcoal/cream 10.13:1 cream section: white items — terra-green/white 6.26:1, charcoal/white 11.43:1 white section: cream items — same numbers as the green case above Judgment call, flagged for confirmation: the open-state white background above is specific to the green section's own already-shipped look (kept byte-identical). For cream/white sections, there's no clean third "lighter than white" or "lighter than cream" color available in this palette for an open-state shift, so the two new rules below hold the SAME background open or closed — the chevron rotation is the only state cue there. Revisit if that reads as a real loss of feedback once seen on a page. */ .tt360-section-bg-cream .is-style-faq-list .wp-block-details, .tt360-section-bg-cream .is-style-faq-list .wp-block-details[open], .tt360-section-bg-cream .wp-block-details.is-style-faq, .tt360-section-bg-cream .wp-block-details.is-style-faq[open] { background-color: rgba(var(--white), 1); } .tt360-section-bg-white .is-style-faq-list .wp-block-details, .tt360-section-bg-white .is-style-faq-list .wp-block-details[open], .tt360-section-bg-white .wp-block-details.is-style-faq, .tt360-section-bg-white .wp-block-details.is-style-faq[open] { background-color: rgba(var(--cream), 1); } .is-style-faq-list .wp-block-details > summary, .wp-block-details.is-style-faq > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 16px; font-weight: 500; line-height: 1.5; color: rgba(var(--terra-green), 1); list-style: none; cursor: pointer; } .is-style-faq-list .wp-block-details > summary::-webkit-details-marker, .wp-block-details.is-style-faq > summary::-webkit-details-marker { display: none; } /* The chevron: a CSS mask (not an inline , so an editor never has to add one) using the prototype's exact chevron path, tinted with background-color so it still follows Gold like every other icon's currentColor convention, even though a mask image can't use currentColor directly. */ .is-style-faq-list .wp-block-details > summary::after, .wp-block-details.is-style-faq > summary::after { content: ""; flex: none; width: 16px; height: 16px; background-color: rgba(var(--gold), 1); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; transition: transform 0.2s ease; } .is-style-faq-list .wp-block-details[open] > summary::after, .wp-block-details.is-style-faq[open] > summary::after { transform: rotate(180deg); } .is-style-faq-list .wp-block-details > p, .wp-block-details.is-style-faq > p { margin: 0; padding: 0 24px 24px; font-size: 14px; line-height: 1.6; } /* An answer paragraph can be followed by a bulleted/numbered list (core/list), same as the prototype's .faq-answer-list pattern. The paragraph drops its own bottom padding so the list sits close after it, and the list picks up that padding plus room for its markers — core/list renders a real