/* =========================================================
   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 ───────────────────────────────────────────── */
/* Structural wrapper — visual styling lives on question/answer elements.
   Old blocks that saved accordionBg/borderWidth/borderRadius still work
   because --dpc-faq-bg/bw/br are output inline from PHP. */
.dpc-faq-item {
	background-color : var( --dpc-faq-bg, transparent );
	border           : var( --dpc-faq-bw, 0px ) solid var( --dpc-faq-border, transparent );
	border-radius    : var( --dpc-faq-br, 0px );
	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 ────────────────────────────────────── */
/* Uses Q-specific vars (--dpc-faq-q-*) with fallback to generic vars for old blocks */
.dpc-faq-question {
	display          : flex;
	align-items      : center;
	justify-content  : space-between;
	width            : 100%;
	padding          : var( --dpc-faq-q-pv, var( --dpc-faq-pv, 16px ) ) var( --dpc-faq-q-ph, var( --dpc-faq-ph, 20px ) );
	background-color : var( --dpc-faq-q-bg, transparent );
	border           : var( --dpc-faq-q-bw, 0px ) solid var( --dpc-faq-q-border, transparent );
	border-radius    : var( --dpc-faq-q-br, 0px );
	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;
	box-sizing       : border-box;
}

.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 ───────────────────────────────────────── */
/* Uses A-specific vars (--dpc-faq-a-*) with fallback to generic vars for old blocks */
.dpc-faq-answer-inner {
	padding          : var( --dpc-faq-a-pv, var( --dpc-faq-pv, 16px ) ) var( --dpc-faq-a-ph, var( --dpc-faq-ph, 20px ) );
	background-color : var( --dpc-faq-a-bg, transparent );
	border           : var( --dpc-faq-a-bw, 0px ) solid var( --dpc-faq-a-border, transparent );
	border-radius    : var( --dpc-faq-a-br, 0px );
	font-size        : var( --dpc-faq-a-size, 15px );
	color            : var( --dpc-faq-a-color, #444444 );
	line-height      : 1.65;
	box-sizing       : border-box;
}

.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;
}

/* ── Custom icon images ─────────────────────────────────── */
.dpc-icon-img {
	display      : block;
	max-width    : 100%;
	max-height   : 100%;
	object-fit   : contain;
	width        : auto;
	height       : auto;
}

/* ── Chevron icon style ─────────────────────────────────── */
.dpc-faq-icon--chevron {
	transition: transform 0.25s ease;
}
.dpc-faq-item.is-open .dpc-faq-icon--chevron {
	transform: rotate(180deg);
}
.dpc-faq-icon--chevron svg {
	display: block;
}

/* ── Item numbers ────────────────────────────────────────── */
.dpc-faq-q-number {
	flex-shrink : 0;
	min-width   : 1.8em;
	font-weight : var(--dpc-faq-q-weight, 600);
	opacity     : 0.45;
	text-align  : right;
	padding-right: 0.5em;
}

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

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