/* =========================================================
   NEDA eCAMPUS — THE FAQ ACCORDION
   Loaded on EVERY page, because there is one FAQ style and it has to be
   the same wherever a FAQ appears.

   WHY THIS FILE EXISTS

   There were two. The front page's accordion was built as core `details`
   blocks inside a group; the Contact page's was built the same way but
   styled in neda-content-page.css, which the front page never loads. On
   top of that, three of the front page's five items carry a font-size
   preset (medium, small, small) and two carry none, so even the questions
   were not the same size as each other.

   The values here are the ones the original PHP-rendered front-page
   accordion used (`.neda-fc__faq-*` in neda-front-sections.css): 10px
   corners, the same two shadows, the pale-cyan numeral, tint-and-lift on
   open, cherry focus ring. That styling is now dead on the front page -
   the block it belonged to is no longer in the template - so this file
   carries the design forward rather than inventing a third one.

   TWO SELECTORS, ONE STYLE:
     .neda-faq                              - an explicit wrapper class
     .neda-section:has(> .wp-block-details) - the front page's FAQ group,
                                              matched by what it CONTAINS
                                              so the front-page template
                                              never has to be edited. That
                                              template has been clobbered
                                              once by a concurrent Site
                                              Editor save; not touching it
                                              is deliberate.
   ========================================================= */

.neda-faq,
.neda-section:has(> .wp-block-details) {
	counter-reset: neda-faq;
}

.neda-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 8px;
}

.neda-faq > * {
	margin-block: 0 !important;
}

/* Spacing between items on the front page, where the wrapper is a normal
   flow group rather than the flex column above. */
.neda-section:has(> .wp-block-details) > .wp-block-details + .wp-block-details {
	margin-block-start: 12px;
}

/* ---- the card ---------------------------------------------------------- */

.neda-faq .wp-block-details,
.neda-section:has(> .wp-block-details) > .wp-block-details {
	counter-increment: neda-faq;
	background: #FFFFFF;
	border: 0;
	border-radius: 10px;
	padding: 2px 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.neda-faq .wp-block-details:hover,
.neda-faq .wp-block-details:focus-within,
.neda-faq .wp-block-details[open],
.neda-section:has(> .wp-block-details) > .wp-block-details:hover,
.neda-section:has(> .wp-block-details) > .wp-block-details:focus-within,
.neda-section:has(> .wp-block-details) > .wp-block-details[open] {
	background-color: #F8F9EA;
	transform: scale(1.02);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/* ---- the question ------------------------------------------------------ */

/*
 * `font-size` is set DIRECTLY here on purpose. Three of the front page's
 * items carry `has-medium-font-size` / `has-small-font-size`, and
 * WordPress emits those presets with !important - but they land on the
 * `details` element, so the summary only INHERITS them, and any direct
 * declaration beats an inherited value whatever its importance. No
 * !important needed, and all five questions finally match.
 */
/*
 * BLOCK, NOT FLEX - and the numeral and chevron are positioned rather
 * than laid out as flex items.
 *
 * This was a flex row with `gap: 12px`. Flex wraps each run of text
 * between inline elements in its own ANONYMOUS item, so the moment a
 * question contained any inline markup the gap opened on BOTH sides of
 * it. The brand-name lock wraps "Neda eCampus" in a `notranslate` span,
 * so "Can I teach on Neda eCampus?" rendered as three items with 12px
 * either side of the name, while every question without inline markup
 * was a single item and looked perfect. That is exactly how it was
 * reported: one question, spaced, and correct in the editor.
 *
 * `gap: 0` would NOT have fixed it: flex also strips the leading and
 * trailing white space of each anonymous item, so the sentence would
 * have closed up to "Can I teach onNeda eCampus?" instead. Only block
 * layout keeps the question one continuous text run, whatever markup an
 * editor puts inside it.
 */
.neda-faq summary,
.neda-section:has(> .wp-block-details) > .wp-block-details > summary {
	display: block;
	position: relative;
	padding-block: 16px;
	/* Room for the numeral and the chevron, which now sit over it. */
	padding-inline: 42px 34px;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #000000;
}

.neda-faq summary::-webkit-details-marker,
.neda-section:has(> .wp-block-details) > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* The numeral. Black on #D8F2F2 is well past 4.5:1, so the digit stays
   black exactly as it did on the front page. */
.neda-faq summary::before,
.neda-section:has(> .wp-block-details) > .wp-block-details > summary::before {
	content: counter(neda-faq);
	position: absolute;
	inset-inline-start: 0;
	/* Aligned to the FIRST line rather than to the box, so a question that
	   wraps to two lines keeps its numeral beside the opening words. */
	inset-block-start: 13px;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 10px;
	background: var(--wp--preset--color--custom-color-2, #D8F2F2);
	color: #000000;
	font-size: 0.9rem;
	font-weight: 700;
}

/*
 * The chevron, pinned to the far end. It used to be pushed there by
 * `margin-inline-start: auto`, which only works inside a flex row; with
 * the summary back to block layout it is positioned instead, on the same
 * first-line baseline as the numeral.
 */
.neda-faq summary::after,
.neda-section:has(> .wp-block-details) > .wp-block-details > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 4px;
	inset-block-start: 21px;
	inline-size: 10px;
	block-size: 10px;
	border-inline-end: 2px solid #000000;
	border-block-end: 2px solid #000000;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.neda-faq .wp-block-details[open] summary::after,
.neda-section:has(> .wp-block-details) > .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

.neda-faq summary:focus-visible,
.neda-section:has(> .wp-block-details) > .wp-block-details > summary:focus-visible {
	outline: 3px solid #D7263D;
	outline-offset: 2px;
	border-radius: 10px;
}

/* ---- the answer -------------------------------------------------------- */

.neda-faq .wp-block-details > *:not(summary),
.neda-section:has(> .wp-block-details) > .wp-block-details > *:not(summary) {
	padding-inline-start: 42px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.78);
	max-width: 80ch;
	margin-block: 0 18px;
}

/* ---- the words around the accordion ------------------------------------
 * The heading, the opening line and the group titles are ordinary blocks in
 * the page, so they arrive with the content-page band's own type scale.
 * When this was written that meant 33px for the h2 and 22px for the lede,
 * beside 17px questions - a different page's type on the same page. The
 * sitewide scale in neda-type.css has since settled the body size at 15px
 * and the section head at 24px, so what remains here is the h2, which is
 * ALREADY the sitewide 24 and is restated only to be explicit, and the
 * lede, which has to be pulled off its own larger size.
 *
 * SCOPED BY WHAT THE BAND CONTAINS, not by `#faqs`. The id lives in page
 * content and an editor can retype it; a band holding a `.neda-faq` group
 * IS the FAQ section wherever it is put. The `body` prefix is not
 * decoration - the rules being overridden are `body.neda-content-page
 * .neda-cp-band h2` and friends, and these have to outrank them.
 */
body.neda-content-page .neda-cp-band:has(.neda-faq) > h2 {
	font-size: 24px;
}

/* `!important` because the rule this overrides carries one: the lede has to
   beat WordPress's own font-size presets, so anything overriding the lede
   has to beat it in turn. */
body.neda-content-page .neda-cp-band:has(.neda-faq) > .neda-cp-lede {
	font-size: 15px !important;
}

/*
 * THE GROUP TITLES SIT BETWEEN TWO EQUAL GAPS.
 *
 * They had none above them at all: the band zeroes every h3 margin, while
 * the accordion under each title picks up the band's 18px rhythm - so a
 * title was pinned to the card above it and floating 18px clear of its own
 * questions, which read as belonging to the wrong section.
 *
 * The 18px is stated on the h3 in BOTH directions and the accordion's own
 * top margin is then cancelled, rather than leaving the gap below to the
 * rhythm rule and the gap above to this one. That way the two distances
 * cannot drift apart if the band's 18px is ever retuned.
 */
body.neda-content-page .neda-cp-band:has(.neda-faq) > h3 {
	margin-block: 18px;
}

body.neda-content-page .neda-cp-band:has(.neda-faq) > h3 + * {
	margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.neda-faq .wp-block-details:hover,
	.neda-faq .wp-block-details:focus-within,
	.neda-faq .wp-block-details[open],
	.neda-section:has(> .wp-block-details) > .wp-block-details:hover,
	.neda-section:has(> .wp-block-details) > .wp-block-details:focus-within,
	.neda-section:has(> .wp-block-details) > .wp-block-details[open] {
		transform: none;
	}
}