/* AAW FAQ Accordion — base structural styles.
   Colors, spacing, and typography are controlled from Elementor's Style tab;
   this file only defines layout/behaviour so every look stays fully editable. */

.aaw-faq-wrap {
	width: 100%;
}

.aaw-faq-item {
	position: relative;
	list-style: none;
}

/* Trigger is a flex row: icon first, card content second. Because the icon
   sits in normal flex flow (not position:absolute), it never has to "jump"
   to a different spot when the item opens — only its glyph rotates. This
   also keeps the background color scoped to the content box only. */
.aaw-faq-trigger {
	all: unset;
	display: flex;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.aaw-faq-content {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 14px 20px;
	border-radius: 0;
	transition: background-color 0.25s ease, padding 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease;
}

.aaw-faq-question {
	display: block;
	margin: 0;
	transition: color 0.2s ease;
}

.aaw-faq-answer {
	display: none;
	overflow: hidden;
}

.aaw-faq-answer p {
	margin: 0 0 0.75em;
}

.aaw-faq-answer p:last-child {
	margin-bottom: 0;
}

.aaw-faq-item.aaw-active .aaw-faq-answer {
	display: block;
}

/* Icon — position never changes between normal/active states, so there is
   nothing to animate but its own background/glyph. The rotation on open is
   applied to the glyph itself (see icon_rotate control), not the wrapper. */
.aaw-faq-icon-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 2;
	transition: background-color 0.25s ease;
}

.aaw-faq-icon-wrap i,
.aaw-faq-icon-wrap svg {
	transition: transform 0.25s ease, color 0.2s ease, fill 0.2s ease;
	line-height: 1;
}

/* Base fallback: 45deg rotation on the open/active item's icon. The
   Elementor "Icon Rotation on Open" control (icon_rotate) prints its own
   per-instance rule with the same selector, so editors can still change
   this from the panel — this just guarantees a sane default (and correct
   behaviour) even before the widget's dynamic CSS has been generated. */
.aaw-faq-item.aaw-active .aaw-faq-icon-wrap i,
.aaw-faq-item.aaw-active .aaw-faq-icon-wrap svg {
	transform: rotate(45deg);
}

/* Overlap layout (default): the content card's left edge tucks in slightly
   behind the icon, so the icon visually rests on the card's top-left corner
   once the background appears — without ever repositioning itself. */
.aaw-icon-overlap .aaw-faq-icon-wrap {
	margin-top: 6px;
}

.aaw-icon-overlap .aaw-faq-content {
	margin-left: -23px;
	padding-left: 43px;
}

/* Inline layout: icon simply sits to the left of the question at all times. */
.aaw-icon-inline .aaw-faq-icon-wrap {
	margin-top: 6px;
	margin-right: 18px;
}

@media (max-width: 767px) {
	.aaw-icon-overlap .aaw-faq-content {
		margin-left: -18px;
		padding-left: 34px;
	}

	.aaw-icon-inline .aaw-faq-icon-wrap {
		margin-right: 14px;
	}
}