/* =================================================================
   [faq_section] — the questions accordion on blog posts
   =================================================================
   The markup comes from `render_faq_shortcode()` in the PARENT theme
   (engitech/functions.php, around line 312), placed on every post by
   the Elementor Single Post template #12820.

   These rules used to live in Elementor's custom CSS panel, scoped by
   its `selector` keyword. They are here now because CSS kept in a
   widget's settings is invisible to version control, travels with
   nothing, and is one mis-click from being deleted. Which is what
   happened.

   Sizes are up from the Elementor version: the questions read at 1.35rem
   and the answers at 1.1rem there, and the theme sets the root font to
   10px, so a question rendered at 13.5px and an answer at 11px. That is
   the whole of "the font is tiny". Everything below is in px for the
   same reason the service stylesheet is.
   ================================================================= */

.faq-wrap {
	direction: rtl;
	margin-block: 40px;
	font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

.faq-title {
	font-size: clamp(24px, 1.1vw + 20px, 32px);
	font-weight: 700;
	color: #1a1a1a;
	margin-block-end: 24px;
	line-height: 1.4;
}

.faq-item {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	margin-block-end: 12px;
	overflow: hidden;
}

.faq-question {
	width: 100%;
	background: #fff;
	border: none;
	padding: 20px 22px;
	text-align: start;
	font-family: inherit;
	font-size: clamp(17px, 0.4vw + 15px, 21px);
	font-weight: 700;
	color: #1a1a1a;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	line-height: 1.6;
}

.faq-question.active {
	/* Elementor's kit defines this on the document, so it still resolves here.
	   The fallback is the brand blue, for a page the kit CSS does not reach. */
	color: var(--e-global-color-primary, #12adea);
	background: #eff6ff;
}

.faq-icon {
	min-width: 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, background 0.2s;
}

.faq-icon svg {
	width: 15px;
	height: 15px;
	fill: #4b5563;
	transition: fill 0.2s;
}

.faq-question.active .faq-icon {
	transform: rotate(180deg);
	background: var(--e-global-color-primary, #12adea);
}

.faq-question.active .faq-icon svg {
	fill: #fff;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

/* The shortcode's script opens an answer by adding a class, so the height has
   to be a number CSS can transition to. 600px was not enough for the longer
   answers at the larger size and clipped them; 1200px clears every answer on
   the site with room to spare, and the transition still reads as a slide
   because the content is nowhere near that tall. */
.faq-answer.open {
	max-height: 1200px;
}

.faq-answer-inner {
	padding: 18px 22px 22px;
	color: #4b5563;
	font-size: clamp(16px, 0.3vw + 15px, 19px);
	line-height: 1.95;
}

@media (max-width: 520px) {
	.faq-question {
		padding: 16px 18px;
	}

	.faq-answer-inner {
		padding: 16px 18px 18px;
	}
}