/* =========================================================
   DELUCKS FAQs – Frontend Accordion Styles
   Uses CSS Custom Properties set inline per block instance
   ========================================================= */

/* ── Accordion wrapper ──────────────────────────────────── */
.dpc-faq-accordion {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── FAQ item ───────────────────────────────────────────── */
.dpc-faq-item {
	background-color : var( --dpc-faq-bg, #ffffff );
	border           : var( --dpc-faq-bw, 1px ) solid var( --dpc-faq-border, #e0e0e0 );
	border-radius    : var( --dpc-faq-br, 6px );
	margin-bottom    : 8px;
	overflow         : hidden;
	transition       : box-shadow 0.2s ease;
}

.dpc-faq-item:last-child {
	margin-bottom: 0;
}

.dpc-faq-item.is-open {
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}

/* ── Question button ────────────────────────────────────── */
.dpc-faq-question {
	display          : flex;
	align-items      : center;
	justify-content  : space-between;
	width            : 100%;
	padding          : var( --dpc-faq-pv, 16px ) var( --dpc-faq-ph, 20px );
	background       : transparent;
	border           : 0;
	cursor           : pointer;
	text-align       : left;
	font-size        : var( --dpc-faq-q-size, 16px );
	font-weight      : var( --dpc-faq-q-weight, 600 );
	color            : var( --dpc-faq-q-color, #1a1a1a );
	line-height      : 1.45;
	gap              : 12px;
	transition       : color 0.15s ease, background-color 0.15s ease;
}

.dpc-faq-question:focus {
	outline        : 2px solid var( --dpc-faq-border, #e0e0e0 );
	outline-offset : -2px;
}

.dpc-faq-question:hover {
	background-color: rgba( 0, 0, 0, 0.02 );
}

/* ── Question text span ─────────────────────────────────── */
.dpc-faq-q-text {
	flex      : 1;
	min-width : 0;
}

/* ── Icon ───────────────────────────────────────────────── */
.dpc-faq-icon {
	flex-shrink    : 0;
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	width          : 24px;
	height         : 24px;
	font-size      : 1.25em;
	font-weight    : 400;
	line-height    : 1;
	transition     : transform 0.2s ease;
	color          : var( --dpc-faq-q-color, #1a1a1a );
}

.dpc-icon-open,
.dpc-icon-close {
	display: inline-block;
}

/* Default: show open icon, hide close icon */
.dpc-icon-close {
	display: none;
}

/* When open: hide open icon, show close icon */
.dpc-faq-item.is-open .dpc-icon-open {
	display: none;
}

.dpc-faq-item.is-open .dpc-icon-close {
	display: inline-block;
}

/* ── Answer panel ───────────────────────────────────────── */
.dpc-faq-answer {
	overflow: hidden;
}

/* The [hidden] attribute hides the element */
.dpc-faq-answer[hidden] {
	display: none;
}

/* Visible answer */
.dpc-faq-item.is-open .dpc-faq-answer {
	display: block;
}

/* ── Answer inner ───────────────────────────────────────── */
.dpc-faq-answer-inner {
	padding   : 0 var( --dpc-faq-ph, 20px ) var( --dpc-faq-pv, 16px );
	font-size : var( --dpc-faq-a-size, 15px );
	color     : var( --dpc-faq-a-color, #444444 );
	line-height: 1.65;
}

.dpc-faq-answer-inner p:first-child {
	margin-top: 0;
}

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

/* ── Permalink ──────────────────────────────────────────── */
.dpc-faq-permalink {
	margin-top : 12px;
	font-size  : 0.8em;
}

.dpc-faq-permalink a {
	color           : var( --dpc-faq-q-color, #1a1a1a );
	opacity         : 0.55;
	text-decoration : none;
	border-bottom   : 1px dashed currentColor;
	transition      : opacity 0.15s ease;
}

.dpc-faq-permalink a:hover {
	opacity: 0.85;
}

/* ── Empty state ────────────────────────────────────────── */
.dpc-faq-empty {
	color      : #888;
	font-style : italic;
}

/* ── AI Modal (frontend context — block editor preview) ─── */
.dpc-faq-ai-modal {
	position        : relative;
	margin-top      : 16px;
	padding         : 4px;
	background      : rgba( 0, 0, 0, 0.04 );
	border-radius   : 8px;
}

.dpc-faq-ai-modal-inner {
	background    : #ffffff;
	border        : 1px solid #ddd;
	border-radius : 8px;
	padding       : 24px;
}

.dpc-faq-ai-modal-inner h3 {
	margin-top    : 0;
	margin-bottom : 16px;
	font-size     : 1rem;
	font-weight   : 600;
}

.dpc-faq-ai-status {
	padding       : 8px 12px;
	background    : #f0f6fc;
	border-left   : 3px solid #0073aa;
	border-radius : 2px;
	margin-bottom : 12px;
	font-size     : 0.875em;
	color         : #0073aa;
}

.dpc-faq-ai-actions {
	display    : flex;
	gap        : 8px;
	margin-top : 16px;
	flex-wrap  : wrap;
}

/* ── Responsive ─────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.dpc-faq-question {
		padding: calc( var( --dpc-faq-pv, 16px ) * 0.85 ) calc( var( --dpc-faq-ph, 20px ) * 0.75 );
	}

	.dpc-faq-answer-inner {
		padding-left  : calc( var( --dpc-faq-ph, 20px ) * 0.75 );
		padding-right : calc( var( --dpc-faq-ph, 20px ) * 0.75 );
	}
}