/*
 * MiraeLaw FAQ accordion — structural + visual design.
 *
 * Reusable everywhere the [miraelaw_faq] shortcode is placed (Contact,
 * Practice Areas, Office Locations, Homepage). Component-level look — item
 * divider color, chevron, question/answer typography — lives here so every
 * placement stays visually consistent; only Homepage-specific LAYOUT (the
 * two-column heading+list split) lives in home-faq.css. Values are taken
 * from design-system.css tokens wherever an exact match exists (see
 * Home-2.html analysis); the few that don't (trigger/answer 18px vertical
 * padding, question 16.5px/700/1.4) are noted inline.
 *
 * `.ml-faq-trigger` is a raw <button>, which Elementor's active Global Kit
 * unavoidably styles as a solid CTA button via `.elementor-kit-9 button`
 * (background/color/padding/font-weight) — a class+element selector that
 * outranks a single class selector on specificity alone, regardless of
 * source order. Every rule touching the trigger's own look is therefore
 * scoped as `.ml-faq .ml-faq-trigger` (two classes) to reliably outrank it.
 *
 * The Kit also ships a SEPARATE `.elementor-kit-9 button:hover, ...:focus`
 * rule (background-color: rgb(168,74,38)) that our base `background: none`
 * does not cover: at (0,2,1) it still outranks the base trigger rule at
 * (0,2,0) specifically during hover/focus, even though our `:hover`
 * text-color rule (0,3,0) already wins for `color`. That's why only the
 * background was leaking through while the text color was already correct.
 * `background: none` is restated explicitly in every hover/focus state
 * below so no property is left for the Kit's rule to win.
 */

.ml-faq {
	margin: 0;
	border-top: 1px solid var( --ml-primary );
}

.ml-faq-item {
	border-bottom: 1px solid var( --ml-border-warm );
}

.ml-faq-question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.ml-faq .ml-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ml-spacing-sm );
	width: 100%;
	/* 18px doesn't match a shared spacing token (source measured exactly);
	   4px matches --ml-spacing-3xs. Still comfortably exceeds the 44px WCAG
	   touch-target minimum. */
	padding: 18px var( --ml-spacing-3xs );
	background: none;
	border: none;
	border-radius: 0;
	font: inherit;
	font-weight: normal;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: color var( --ml-transition-base );
	/* Elementor's Global Kit styles every raw <button> with white-space:
	   nowrap; our (0,2,0) override above already outranks its (0,1,1) rule
	   on every property it sets, but never restated white-space, so the
	   Kit's nowrap applied uncontested and forced long questions onto one
	   line — overflowing the trigger (and, via ancestors with no overflow
	   clip, the whole page) below ~390px. Restated here so it inherits into
	   .ml-faq-trigger-text and questions wrap normally again. */
	white-space: normal;
}

.ml-faq .ml-faq-trigger:hover,
.ml-faq .ml-faq-trigger:focus,
.ml-faq .ml-faq-trigger:focus-visible {
	background: none;
	color: var( --ml-secondary );
}

.ml-faq-trigger-text {
	/* No shared token matches this exact size/weight/line-height combo
	   (hand-specified in the source design). Body font, not heading font —
	   confirmed against Home-2.html's computed font-family (Noto Sans), a
	   deliberate departure from every other section's Source Serif 4 H2/H3. */
	font-family: var( --ml-font-body );
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var( --ml-primary );
}

.ml-faq .ml-faq-trigger:hover .ml-faq-trigger-text,
.ml-faq .ml-faq-trigger:focus .ml-faq-trigger-text,
.ml-faq .ml-faq-trigger:focus-visible .ml-faq-trigger-text {
	color: inherit;
}

.ml-faq-icon {
	flex: none;
	font-family: var( --ml-font-body );
	font-size: 12px;
	line-height: normal;
	color: var( --ml-accent );
	/* Home-2.html itself defines no open-state icon treatment (native
	   <details> has none to copy), but the trigger's own aria-expanded
	   attribute already reflects state correctly (see faq.js) — rotating the
	   existing glyph on top of it is a sighted-user affordance the source
	   design simply didn't need to specify, not a departure from it. */
	transition: transform var( --ml-transition-base );
}

.ml-faq-icon::before {
	content: '\25BC'; /* ▼ */
}

.ml-faq .ml-faq-trigger[aria-expanded='true'] .ml-faq-icon {
	transform: rotate( 180deg );
}

.ml-faq-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var( --ml-transition-base );
}

.ml-faq-answer {
	/* 18px bottom doesn't match a shared spacing token (source measured
	   exactly); 4px sides match --ml-spacing-3xs. */
	padding: 0 var( --ml-spacing-3xs ) 18px;
	font-family: var( --ml-font-body );
	font-size: var( --ml-text-base );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-700 );
}

.ml-faq-answer > *:first-child {
	margin-top: 0;
}

.ml-faq-answer > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus state
 * ------------------------------------------------------------- */
.ml-faq .ml-faq-trigger:focus-visible {
	outline: 3px solid var( --ml-focus-ring );
	outline-offset: -2px;
}

/* ---------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.ml-faq-panel,
	.ml-faq-trigger,
	.ml-faq-icon {
		transition: none;
	}
}