/**
 * Section wrappers.
 *
 * Row-level classes applied through Beaver Builder's Row Settings >
 * Advanced > CSS Class, for sections assembled from stock or third-party
 * modules rather than one of this plugin's own. They supply the section
 * chrome — full-bleed background, decorative glow, vertical rhythm, content
 * column — and leave the modules inside styled by whatever provides them.
 */

/* --------------------------------------------------------------------------
   FAQ section
   For pages using UABB's Advanced Accordion in place of the Product FAQ
   module. Put `actabl-faq-section actabl-reveal` on the row, then drop a
   heading module and the accordion inside it, each tagged with the class
   `actabl-reveal-item` so they animate in like the rest of the page.

   The accordion keeps UABB's own styling; only the section around it is
   treated here.
   -------------------------------------------------------------------------- */

/* Selectors here carry .fl-row as well as the section class. A single class is
   the same specificity as a bare `.fl-row` rule in the theme, and this
   stylesheet is enqueued on wp_enqueue_scripts, so a theme rule loading later
   would win a tie and cancel the breakout — leaving the section boxed in at
   whatever width the row was. The module stylesheets do not need this because
   Beaver Builder loads them later and they target their own unique classes. */
.fl-row.actabl-faq-section {
	background: #f2f4ff;
	/* Full-bleed breakout, matching the Product FAQ module, so the row does not
	   need its content width set to Full Width. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* clip, not hidden: hidden would coerce the vertical axis into a scroll
	   container and cut off the glow. */
	overflow-x: clip;
	overflow-y: visible;
	padding: clamp(72px, 8vw, 115px) 0 clamp(56px, 5.8vw, 84px);
	position: relative;
}

/* The vertical rhythm and background belong to the design, so the row's own
   background and padding are cleared. !important is required because Beaver
   Builder prints per-node settings after this stylesheet at equal specificity. */
.fl-row.actabl-faq-section > .fl-row-content-wrap {
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Decorative warm glow blooming from the left edge, behind the content. */
.fl-row.actabl-faq-section::before {
	background: radial-gradient(closest-side, rgba(255, 197, 154, 0.9) 0%, rgba(255, 197, 154, 0.5) 45%, rgba(255, 197, 154, 0) 100%);
	bottom: 0;
	content: "";
	height: 64%;
	left: -19vw;
	pointer-events: none;
	position: absolute;
	width: 63vw;
	z-index: 0;
}

/* Content column, matching the Product FAQ module. The extra ancestor beats
   Beaver Builder's own `.fl-row-fixed-width .fl-row-content` max-width. */
.fl-row.actabl-faq-section > .fl-row-content-wrap > .fl-row-content {
	margin: 0 auto;
	max-width: 1334px;
	padding: 0 24px;
	position: relative;
	width: auto;
	z-index: 1;
}

/* UABB's accordion rows are promoted to real reveal items by
   assets/actabl-reveal.js, since the module's markup is not ours to tag. That
   means the shared hidden/visible states, the position-in-run indices and the
   reduced-motion handling all apply to them automatically; only the rhythm is
   set here.

   120ms apart rather than the usual 80, with one step of head start so the rows
   follow the heading. The rows are small and identical, and at the default
   spacing six of them are mid-animation at once, so the list reads as one block
   lifting rather than rows arriving in turn. */
.actabl-faq-section .uabb-adv-accordion {
	--actabl-reveal-offset: 0.12s;
	--actabl-reveal-step: 0.12s;
}

/* Section heading, so a stock Beaver Builder heading module matches the rest of
   the page without per-page typography settings. The two classes are listed
   separately rather than nested: current Beaver Builder puts both on the same
   element, older versions wrap the text in a child span. */
.actabl-faq-section .fl-heading,
.actabl-faq-section .fl-heading-text {
	color: #131768;
	font-family: Literata, Georgia, serif;
	font-size: 41px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 54px;
	text-align: left;
}

/* :where() keeps this at zero specificity so a per-module margin set in the
   builder still wins; this is only the default rhythm. */
:where(.actabl-faq-section .fl-heading) {
	margin: 0 0 43px;
}

@media (max-width: 640px) {
	.actabl-faq-section .fl-heading,
	.actabl-faq-section .fl-heading-text {
		font-size: 30px;
		line-height: 40px;
	}

	:where(.actabl-faq-section .fl-heading) {
		margin-bottom: 26px;
	}
}