/* =====================================================================
   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: 12px 16px;
	/* font-size: 16px; */
	font-weight: 700;
	line-height: 22px;
}
/* UI Issues v2, #8: "reduce the paragraph line spacing" - was 26px/24px/
   36px (a ~1.5-1.6x ratio over each tier's own font-size, unusually loose
   for body copy) - tightened to a standard ~1.4x ratio at every tier
   (16px font: 22px here and at 1024px, since only the 1440px tier changes
   font-size at all; 24px font: 34px), padding left as-is - only the two
   things the client explicitly called out. */
.wp-block-accordion-panel {
	padding: 24px 0 30px;
	/* font-size: 16px; */
	font-weight: 300;
	line-height: 22px;
}

@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: 26px 36px 26px;
		line-height: 22px;
	}
}

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