/* =====================================================================
   Accordion (FAQ) — CUHK 2026 style guide.
   Reference CSS: css/components.css's ".accordion"/".accordion__item"/
   ".accordion__title"/".accordion__panel"/".accordion__content" rules.

   Per Development Priority.docx: "Might only require to update css based
   on the tab provided by the plugins" — kept WP core's native
   wp:accordion/accordion-item/accordion-heading/accordion-panel blocks
   (already interactive, no JS of our own needed) instead of rebuilding
   the reference's raw <ul class="accordion"><li class="accordion__item">
   markup. Targets WP's own generated classes
   (.wp-block-accordion-item/.wp-block-accordion-heading__toggle/
   .wp-block-accordion-panel) instead.

   NOT reproducing the reference's custom rotating-chevron toggle icon
   (background-image: accordion.svg, rotate 180deg via .active class) —
   that's specific to the reference's own hand-rolled JS toggle mechanism.
   WP's accordion block has its own built-in open/close behavior via the
   Interactivity API; fighting it to swap in a different icon system
   risks breaking that, for a purely cosmetic difference (WP's default
   "+" toggle glyph still communicates the same affordance).

   English only, same scope note as every pattern so far.

   CORRECTION (found 2026-07-04, verifying directly against
   accordion.component.html at this project's real breakpoints): margin
   between items stays a flat 10px at every breakpoint, not 10/40/60px.
   components.css's ">=1024px { .accordion__item + .accordion__item
   .paragraph { margin-top: 40px } }" rule is scoped to instances with an
   ADDITIONAL ".paragraph" modifier class — this demo's own markup is
   plain ".accordion__item" without it, so that rule never actually
   applies here. Copied the qualified rule's value without checking
   whether the qualifier itself matched this instance.

   CORRECTION #2 (found 2026-07-05, explicit user instruction: "fontsize
   in accordion still not same as style guide"): the panel's own answer
   text (".wp-block-accordion-panel"/its <p>) had no explicit font-size
   or line-height at all — same systemic "ambient fluid body-font clamp"
   bug found on several other patterns' unstyled text elements (e.g.
   Card List 2's date paragraph). Reference values, measured directly:
   16px/300/26px up to 1024px, 16px/300/24px at >=1024px (line-height
   only changes there, not font-size), 24px/300/36px at >=1440px.
   ===================================================================== */
/* UI Issues v2, #8: client wants the default (no extra custom spacing)
   feel - "remove the extra padding between each accordions" - so the
   10px gap between items above is dropped entirely rather than reduced. */
.wp-block-accordion-item + .wp-block-accordion-item {
	margin-top: 0;
}
.wp-block-accordion-heading__toggle {
	background: #ececec;
	padding: 10px 20px;
	/* font-size: 16px; */
	font-weight: 700;
	line-height: 22px;
}
/* UI Issues v2, #8 / issues PDF 20260908 #6: "reduce the paragraph line
   spacing" (line-height tightened from 26px/24px/36px to a standard
   ~1.4x ratio at every tier) and "remove the extra padding between each
   accordions" - client explicitly asked for a flat 10px 20px 10px panel
   padding at every breakpoint (was tiered 24/26/46px top padding),
   applied verbatim, same value in the base rule and both media-query
   overrides below so it doesn't grow back in at 1024px/1440px. */
.wp-block-accordion-panel {
	margin-top: 0;
	padding: 10px 20px 10px;
	/* font-size: 16px; */
	font-weight: 300;
	line-height: 22px;
}
/* Issues PDF #5 (CII FAQs): panels contain stray empty paragraphs from
   the editor, which render as extra blank bands inside the open panel
   (the red boxes in the screenshot). Content cleanup across 3 languages
   is fragile; suppress them at render instead. */
.wp-block-accordion-panel p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 64rem) { /* 1024px */
	.wp-block-accordion-heading__toggle {
		background-color: #f8f8f8; /* --background-light-grey in the reference; not the same as our --util-100 (#f2f2f2) */
	}
	.wp-block-accordion-panel {
		padding: 10px 20px 10px;
		line-height: 22px;
	}
}

@media (min-width: 90rem) { /* 1440px */
	.wp-block-accordion-heading__toggle {
		/* font-size: 26px; */
		font-weight: 600;
		line-height: 40px;
	}
	.wp-block-accordion-panel {
		padding: 10px 20px 10px;
		/* font-size: 24px; */
		line-height: 34px;
	}
}