/**
 * Simplis FAQs - Frontend Styles
 *
 * All class names are prefixed with `.simplis-faqs-` to prevent conflicts
 * with theme styles, Elementor widgets, or other plugins.
 *
 * Design matches The Access Panel Company visual identity as established
 * in the CRO mockup. Inherits font-family and letter-spacing from the theme
 * so it integrates seamlessly into any Elementor Single Product template.
 *
 * Loaded ONLY when the [simplis_faqs] shortcode is present on the page.
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.simplis-faqs-section {
	margin-bottom: 48px;
}

/* ── List (dl) ───────────────────────────────────────────────────────────── */

.simplis-faqs-list {
	margin: 0;
	padding: 0;
}

/* ── Individual FAQ item (div wrapping dt + dd) ───────────────────────────── */

.simplis-faqs-item {
	border-bottom: 1px solid #e0e0e0;
}

.simplis-faqs-item:first-child {
	border-top: 1px solid #e0e0e0;
}

/* ── Question trigger (dt > button) ──────────────────────────────────────── */

.simplis-faqs-question-wrap {
	margin: 0;
}

.simplis-faqs-question {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 16px 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: #1a1a1a;
	letter-spacing: inherit;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	line-height: 1.4;
}

.simplis-faqs-question:focus-visible {
	outline: 2px solid #c8390a;
	outline-offset: 2px;
	border-radius: 2px;
}

/* +/− icon */
.simplis-faqs-question::after {
	content: '+';
	font-size: 20px;
	color: #6b6b6b;
	font-weight: 300;
	flex-shrink: 0;
	line-height: 1;
	transition: color 0.15s ease;
}

.simplis-faqs-question[aria-expanded="true"]::after {
	content: '\2212'; /* Unicode minus (−) */
	color: #1a1a1a;
}

/* ── Answer panel (dd) ───────────────────────────────────────────────────── */

/*
 * Animation: max-height transition from 0 to a generous maximum.
 * The panel is visually hidden via max-height:0 + overflow:hidden when closed.
 * JS manages the .simplis-faqs-answer--open class and aria-hidden.
 *
 * Note: 1200px is a safe upper limit for answer content. If you have very long
 * answers, increase this value. Using a large max-height does not affect the
 * rendered height - only the transition ceiling.
 */

.simplis-faqs-answer {
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding-bottom 0.3s ease;
	padding-bottom: 0;
}

.simplis-faqs-answer.simplis-faqs-answer--open {
	max-height: 1200px;
	padding-bottom: 16px;
}

/* ── Answer inner content ─────────────────────────────────────────────────── */

.simplis-faqs-answer-inner {
	font-size: 14px;
	color: #6b6b6b;
	line-height: 1.7;
}

.simplis-faqs-answer-inner p {
	margin-bottom: 8px;
}

.simplis-faqs-answer-inner p:last-child {
	margin-bottom: 0;
}

.simplis-faqs-answer-inner a {
	color: #c8390a;
	text-decoration: none;
}

.simplis-faqs-answer-inner a:hover {
	text-decoration: underline;
}

.simplis-faqs-answer-inner strong {
	color: #2c2c2c;
	font-weight: 600;
}

.simplis-faqs-answer-inner ul,
.simplis-faqs-answer-inner ol {
	padding-left: 20px;
	margin-bottom: 8px;
}

.simplis-faqs-answer-inner li {
	margin-bottom: 4px;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.simplis-faqs-answer {
		transition: none;
	}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
	.simplis-faqs-question {
		font-size: 14px;
		padding: 14px 0;
	}

	.simplis-faqs-answer-inner {
		font-size: 13px;
	}
}