/* ==================
   FAQ COMPONENT CSS
   ================== */

/* Layout & Spacing */
.max-w-3xl {
	max-width: 48rem;
}

.me-auto {
	margin-inline-end: auto;
}

.ms-0 {
	margin-inline-start: 0;
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.w-full {
	width: 100%;
}

.w-6 {
	width: 1.5rem;
}

.h-6 {
	height: 1.5rem;
}

/* Flexbox */
.flex {
	display: flex;
}

.justify-between {
	justify-content: space-between;
}

.items-center {
	align-items: center;
}

/* Typography */
.text-left {
	text-align: left;
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.font-medium {
	font-weight: 500;
}

.text-gray-500 {
	color: #6b7280;
}

/* FAQ Dividers - Scoped to only elements inside the divide-y container */
.divide-y > div + div {
	border-top: 1px solid #e5e7eb;
}

/* Button Reset - Strictly scoped to this specific FAQ button to prevent breaking other site buttons */
button.w-full.text-left.py-4 {
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	display: block; /* Ensures block behavior like Tailwind */
}

/* Transitions & Animations for the Accordion */
.overflow-hidden {
	overflow: hidden;
}

.max-h-0 {
	max-height: 0px;
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
	transition-duration: 200ms;
}

.duration-500 {
	transition-duration: 500ms;
}

/* toggleFAQItem() JS script rotates the arrow by adding a class */
.rotate-180 {
	transform: rotate(180deg);
}