/*
 * Nested Accordion FAQ variant — LAYER 6 (extension styles), enqueued unconditionally
 * (an extension has no widget class to lazy-load from).
 *
 * The widget's whole look is driven by --n-accordion-* custom properties on the wrapper,
 * so this file mostly REDEFINES those same vars per the theme's STYLING RULE rather than
 * setting physical properties. Where a native Style-tab control paints a literal
 * property instead of a var, it is beaten with !important and the reason is noted at the
 * rule. See functions.php for which native controls are hidden and why.
 */
.elementor-widget-n-accordion.redteam-nested-accordion--faq {
	/* Header layout: title grows to fill the row, icon pinned to the far end. */
	--n-accordion-title-flex-grow: 1;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-title-icon-order: 2;
	--n-accordion-padding: var(--s5);
	--n-accordion-icon-gap: 0 var(--s5);
	--n-accordion-item-title-space-between: var(--s2);
	/* The title's own bottom padding (--n-accordion-padding, above) already puts --s5 between the
	 * text and the header box's bottom edge, so this stays 0 — the divider (below) sits flush
	 * against that edge, giving the single --s5 gap node 6415:37748 shows, not a doubled one. */
	--n-accordion-item-title-distance-from-content: 0;

	/* No native border anywhere — the card look comes from the item wrapper below. */
	--n-accordion-border-width: 0;
	--n-accordion-border-radius: 0;

	/* Figma's "Rock Brown" is this Kit's Walnut-400 — there is no Rock Brown global here. Title/icon
	 * switch to Red-200 while open (node 6415:37748), normal/hover stay Rock Brown/Walnut-400. */
	--n-accordion-title-font-size: var(--font-h5-size, 24rem) !important;
	--n-accordion-title-normal-color: var(--color-walnut-400, #3f2e2b);
	--n-accordion-title-hover-color: var(--color-walnut-400, #3f2e2b);
	--n-accordion-title-active-color: var(--color-red-200-base, #ed1b24);
	--n-accordion-icon-normal-color: var(--color-walnut-400, #3f2e2b);
	--n-accordion-icon-hover-color: var(--color-walnut-400, #3f2e2b);
	--n-accordion-icon-active-color: var(--color-red-200-base, #ed1b24);
	--n-accordion-icon-size: 18.5rem;
}

.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item-title-text {
	font-family: var(--font-h5, 'Archivo'), sans-serif;
	font-weight: var(--font-h5-weight, 400);
	line-height: var(--font-h5-line-height, 1.5);
}

/* The rounded pearl-100 card — background + clipping live on the item wrapper so the header and
 * expanded content read as one seamless card, not two separately-coloured boxes. */
.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item {
	background-color: var(--color-pearl-100);
	border-radius: var(--s1);
	overflow: hidden;
}

/* Backgrounds/borders a Group Control paints as literal properties (not a var) — beat with
 * !important regardless of the native rule's (near-zero, :where-scoped) specificity. */
.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item-title {
	background: transparent !important;
	border: none !important;
}

.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item > .e-con {
	background: transparent !important;
	border: none !important;
	--border-radius: 0;
	--padding-top: 0;
	--padding-right: var(--s5);
	--padding-bottom: var(--s5);
	--padding-left: var(--s5);
}

/* The open-state divider — node 6415:37748. Gotcha: it can NOT go on `.e-con::before` — Elementor
 * draws a container's own border/background-overlay through that exact pseudo-element natively
 * (`elementor/assets/css/frontend.css`, for the Border/Background Overlay style controls), and
 * it's `position: absolute` there (so the overlay never affects layout), not a real in-flow box;
 * a divider added there silently took zero layout space. It also can't be a plain `border-top` on
 * `.e-con` itself — that spans `.e-con`'s full border box, i.e. edge-to-edge including the
 * horizontal padding, not inset within it like the design wants. Fix: the pseudo-element lives on
 * `.e-con`'s first real child instead (an ordinary widget wrapper div with no such native hijack) —
 * being a descendant, it's naturally inset by `.e-con`'s own left/right padding. No margin-top here:
 * the title's own bottom padding (above) already supplies the full title→divider gap, and `.e-con`
 * sits flush against the title with no gap of its own — adding margin-top here would double it, the
 * same mistake as the title's own `distance-from-content`, just relocated. Only margin-bottom (the
 * divider→content gap) is needed. */
.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item > .e-con > *:first-child::before {
	content: "";
	display: block;
	border-top: 1rem dashed var(--color-black-300, #555555);
	margin-bottom: var(--s5);
}

/* Icon: a bordered square button rather than a bare glyph. */
.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item-title-icon {
	width: 62rem;
	height: 62rem;
	justify-content: center;
	flex-shrink: 0;
	border: 1.34rem solid color-mix(in srgb, var(--color-walnut-300, #4d3734) 20%, transparent);
	border-radius: var(--s1);
}

/* Plus/minus icon swap: left as the core widget's own default (.e-opened shown + .e-closed hidden
 * on [open], and vice versa) — node 6415:37748 (open) confirmed the design wants a plain minus
 * glyph while open, not a rotated plus, so no override is needed here. */




/* --- Responsive ------------------------------------------------------------- */



/* <=960px: item padding steps down (top/bottom to --s4, left/right to --s2) and title font-size
 * switches to the H5 tablet token — style.css maps every other heading's own -tablet token the
 * same way at this breakpoint. Family/weight/line-height have no tablet counterpart in this theme
 * (only size is ever responsive), so they're untouched here. */

@media (width <= 960px) {
	.elementor-widget-n-accordion.redteam-nested-accordion--faq {
		--n-accordion-padding: var(--s4) var(--s2);
		--n-accordion-title-font-size: var(--font-h5-size-tablet, 18rem) !important;
	}

	.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item > .e-con {
		--padding-top: 0;
		--padding-right: var(--s2);
		--padding-bottom: var(--s4);
		--padding-left: var(--s2);
	}

	.elementor-widget-n-accordion.redteam-nested-accordion--faq .e-n-accordion-item > .e-con > *:first-child::before {
		margin-bottom: var(--s4);
	}
}