/*
 * FAQ section — two-column layout, single-open accordion.
 * docs/step-18-faq-section.md, measured live at 1440px against
 * https://stodio.webflow.io/. assets/js/faq-accordion.js owns the
 * single-open enforcement and the height/icon transition; this file only
 * supplies the geometry and the "closed"/"open" visual states it toggles.
 */

/* ---- Section / container ----
   Rail padding for CONTAINER is a literal CSS rule reading --wp--custom--rail
   directly, the same mechanism pricing.css and gallery.css use — WRAPPER
   (.idia-faq) is align:full with layout:constrained, so WordPress's
   has-global-padding de-dup rule would otherwise zero CONTAINER's own
   auto-applied root padding. !important needed for the same reason
   documented at length in pricing.css: CONTAINER itself carries
   has-global-padding (layout:constrained, no align), so the de-dup rule's
   own zero-padding declaration ties with this one on specificity, and
   WordPress's global-styles-inline-css prints after this enqueued file. */
.idia-faq__container {
	padding-left: var(--wp--custom--rail) !important;
	padding-right: var(--wp--custom--rail) !important;
}

/* overflow: hidden on WRAPPER clips .idia-faq__title-block's
   translateX(-100px) entrance overshoot (see "Title + item entrance" below)
   at the true viewport edge — same fix as pricing.css's .idia-pricing,
   found by sweeping every translateX/translateY entrance for the same class
   of bug (a transient horizontal scrollbar during the ~1s reveal). This
   section has no surface-card class to supply the clip for free, and
   nothing here gives an FAQ element a box-shadow or hover transform that
   would extend past the section bounds — the house hover gesture on
   .idia-faq__item is a border-radius change only — so the clip is safe at
   this scope. */
.idia-faq {
	overflow: hidden;
}

/* ---- FAQ block: two columns ----
   !important: WordPress prints this block's own blockGap as generated
   per-instance CSS (.wp-container-core-group-is-layout-*) after every
   enqueued theme stylesheet — same specificity fight documented at length in
   marquee.css, gallery.css, counter.css and header.css. Without it this rule
   silently loses and the row falls back to the block's raw blockGap
   attribute (24px desktop / 16px mobile) instead of the --wp--custom--gap--36
   curve (36/32/28/28, matching the reference's own --gap--gap-36 exactly). */
.idia-faq__block {
	gap: var(--wp--preset--spacing--36) !important;
}

.idia-faq__title-block {
	flex-shrink: 0;
}

.idia-faq__item-block {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* The block's justifyContent:flex-start layout attribute (vertical
   orientation) prints align-items: flex-start inline, so each accordion row
   shrinks to its own text width instead of stretching to fill the 690px
   column — the reference's .faq-item-block has no such override and its rows
   stretch by default. Reproduced here on the row itself rather than removing
   the block attribute, since flex-start is also what left-aligns the title/
   badge stack above it. */
.idia-faq__item-wrap {
	width: 100%;
}

@media (max-width: 991px) {

	.idia-faq__block {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40) !important;
	}
}

@media (max-width: 479px) {

	.idia-faq__block {
		gap: var(--wp--preset--spacing--36) !important;
	}
}

/* ---- Accordion item ----
   44px radius closed, 16px radius open — the house hover gesture from
   AGENTS.md §11.1 (radius change on state transitions), applied here to an
   open/close rather than a hover. */
.idia-faq__item {
	width: 100%;
	background-color: var(--wp--preset--color--tertiary);
	border-radius: var(--wp--preset--border-radius--full);
	transition: border-radius var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1);
}

.idia-faq__item[open] {
	border-radius: var(--wp--preset--border-radius--lg);
}

@media (max-width: 479px) {

	.idia-faq__item {
		border-radius: var(--wp--custom--radius--24);
	}

	.idia-faq__item[open] {
		border-radius: var(--wp--custom--radius--16);
	}
}

/* Remove the browser's native disclosure triangle/marker — the +/- bars
   below are the only toggle affordance. */
.idia-faq__question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--28);
}

.idia-faq__question::-webkit-details-marker {
	display: none;
}

.idia-faq__question::marker {
	content: "";
}

/* theme.json's own core/details block style (styles.blocks.core/details)
   draws a chevron via .wp-block-details summary::after — a border-rotate
   arrow, not the native marker the rules above already suppress. It is the
   right default for a generic <details> block elsewhere on the site, but
   this section's own two-bar +/- icon (.idia-faq__plus) is the only toggle
   affordance stodio's design calls for, so the theme's arrow is switched
   off here specifically rather than globally. */
.wp-block-details.idia-faq__item .idia-faq__question::after {
	content: none !important;
}

.idia-faq__question:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: -2px;
	border-radius: var(--wp--preset--border-radius--lg);
}

.idia-faq__q-text {
	font-size: var(--wp--preset--font-size--h5);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--h5);
	color: var(--wp--preset--color--main);
}

/* ---- Plus/minus icon ----
   Two 2px bars forming a "+". The reference's own computed transform is
   `none` in both states (docs/step-18), so the open state is built as the
   vertical bar's cross-axis scale going to 0 rather than a rotate — same
   visual result (+ becomes -) without inventing a transform the reference
   doesn't use. */
.idia-faq__plus {
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--wp--preset--border-radius--full);
}

.idia-faq__plus-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--wp--preset--color--main);
	border-radius: var(--wp--preset--border-radius--full);
	transition: transform var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1);
}

.idia-faq__plus-bar--v {
	width: 2px;
	height: 16px;
	transform: translate(-50%, -50%) scaleY(1);
}

.idia-faq__plus-bar--h {
	width: 16px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.idia-faq__item[open] .idia-faq__plus-bar--v {
	transform: translate(-50%, -50%) scaleY(0);
}

@media (max-width: 479px) {

	.idia-faq__plus {
		width: 32px;
		height: 32px;
		min-width: 32px;
		min-height: 32px;
	}

	.idia-faq__plus-bar--v {
		height: 16px;
	}

	.idia-faq__plus-bar--h {
		width: 16px;
	}
}

/* ---- Answer panel ----
   .idia-faq__answer is the height-animated element (assets/js/
   faq-accordion.js sets its inline height from 0 to the measured content
   height on open, and back to 0 on close); overflow:hidden here clips the
   in-between frames. The inner <p> supplies the top padding so the
   collapsed height can genuinely reach 0 rather than being floored by its
   own padding. */
.idia-faq__answer {
	overflow: hidden;
	height: 0;
	transition: height var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1);
}

/* JS-off fallback: assets/js/faq-accordion.js is what normally drives
   height (0 -> measured px -> "auto") and clears the collapsed height on
   open. Without it, <details>[open] still toggles instantly via the
   browser's native behaviour, but this element's own height:0 base state
   would otherwise leave the answer permanently invisible even though the
   details element itself reports open. This rule is the only thing
   standing between "JS disabled" and "every answer permanently
   unreachable" — see docs/step-18-faq-section.md's JS-off requirement. */
.idia-faq__item[open] .idia-faq__answer {
	height: auto;
}

.idia-faq__answer-text {
	padding: 0 var(--wp--preset--spacing--28) var(--wp--preset--spacing--24);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--body);
}

@media (max-width: 479px) {

	.idia-faq__answer-text {
		font-size: 14px;
		line-height: 1.4;
	}
}

@media (prefers-reduced-motion: reduce) {

	.idia-faq__item,
	.idia-faq__plus-bar,
	.idia-faq__answer {
		transition: none;
	}
}

/* ---- Title + item entrance — starting state ----
   Title block uses stodio's own "slideInLeft" preset (opacity + translateX
   only, no blur — a different, simpler mechanism than the hero/CTA "Fade In"
   family). Every item uses the standard "Fade In" family (blur + rise +
   fade) at a UNIFORM 300ms delay — the reference does not stagger its five
   items despite being a list, so this reproduces that rather than adding a
   cascade. See animation-map-remaining-sections.json, faq section.

   Scoped to .idia-faq__item-wrap (the group wrapper), not .idia-faq__item
   (the <details> element itself) — the accordion's own open/close height
   mechanism (faq-accordion.js) sets inline height/hidden on .idia-faq__answer
   inside .idia-faq__item, and this entrance must never share a target
   element with that logic. Opt-in only: scoped to
   prefers-reduced-motion: no-preference, so a reduced-motion visitor's
   section renders complete and settled immediately — faq-accordion.js
   independently checks the same media query before running these tweens. */
@media (prefers-reduced-motion: no-preference) {

	.idia-faq__title-block {
		opacity: 0;
		transform: translateX(-100px);
	}

	.idia-faq__item-wrap {
		opacity: 0;
		transform: translateY(50px);
		filter: blur(5px);
	}
}