/* WordPress Details Block - Base Styles */

.wp-block-details {
	margin: 0 0 16px 0;
}

/* Title/Summary - Keep WordPress font size */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.125rem;
	color: #000;
	transition: opacity 0.2s ease;
	user-select: none;
}

.wp-block-details summary:hover {
	opacity: 0.8;
}

/* Description/Content - Reset to default size (not inheriting parent size) */
.wp-block-details > *:not(summary) {
	color: #333;
	line-height: 1.6;
	font-size: 1rem;
}

/* Ensure summary doesn't inherit block font-size changes */
.wp-block-details.has-large-font-size summary {
	font-size: 1.5rem;
}

.wp-block-details.has-x-large-font-size summary {
	font-size: 2.5rem;
}

.wp-block-details.has-small-font-size summary {
	font-size: 0.875rem;
}

.wp-block-details p {
	margin: 0;
}

.wp-block-details p:not(:last-child) {
	margin-bottom: 12px;
}

/* Responsive styling */
@media (max-width: 640px) {
	.wp-block-details summary {
		font-size: 14px;
	}
}

/* ====================================
   Default Style - WordPress Native Look
   ==================================== */

.wp-block-details.is-style-default summary {
	padding: 12px 0;
}

.wp-block-details.is-style-default > *:not(summary) {
	padding: 0;
}

/* ====================================
   Q&A Style - Accordion Design
   ==================================== */

.wp-block-details.is-style-qa summary {
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
}

/* Remove default marker for Q&A */
.wp-block-details.is-style-qa summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-qa summary::marker {
	display: none;
}

/* Arrow icon for Q&A */
.wp-block-details.is-style-qa summary::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 9px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="9" fill="none" viewBox="0 0 10 6"><path fill="%23000" d="M5.067 4.367c.785-.838 1.571-1.676 2.304-2.462.42-.472.891-.943 1.31-1.414.052-.105.157-.158.262-.21a.56.56 0 0 1 .628.105c.158.21.21.471.053.68 0 .106-.053.158-.105.21L5.591 5.52c-.315.367-.629.367-.996 0L.667 1.276C.405 1.014.405.7.614.438c.157-.21.524-.262.734-.105.104.053.21.158.262.262C2.762 1.8 3.862 3.005 5.014 4.262c0 0 .053.052.053.105"></path></svg>')
		no-repeat center;
	background-size: contain;
	transition: transform 0.3s ease;
	margin-left: 12px;
	flex-shrink: 0;
}

/* Rotate arrow when open */
.wp-block-details.is-style-qa[open] summary::after {
	transform: rotate(180deg);
}

/* Q&A Content area */
.wp-block-details.is-style-qa > *:not(summary) {
	padding: 0 16px 16px 16px;
}

/* Spacing between multiple Q&A blocks */
.wp-block-details.is-style-qa + .wp-block-details.is-style-qa {
	margin-top: 8px;
}

/* Dark mode for Q&A */
.wp-block-details.is-style-qa.dark-mode {
	background-color: #1a1a1a;
	border-color: #333;
}

.wp-block-details.is-style-qa.dark-mode summary {
	color: #fff;
}

.wp-block-details.is-style-qa.dark-mode summary:hover {
	background-color: #2a2a2a;
}

.wp-block-details.is-style-qa.dark-mode > *:not(summary) {
	color: #e0e0e0;
}

.wp-block-details.is-style-qa.dark-mode summary::after {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none" viewBox="0 0 10 6"><path fill="%23fff" d="M5.067 4.367c.785-.838 1.571-1.676 2.304-2.462.42-.472.891-.943 1.31-1.414.052-.105.157-.158.262-.21a.56.56 0 0 1 .628.105c.158.21.21.471.053.68 0 .106-.053.158-.105.21L5.591 5.52c-.315.367-.629.367-.996 0L.667 1.276C.405 1.014.405.7.614.438c.157-.21.524-.262.734-.105.104.053.21.158.262.262C2.762 1.8 3.862 3.005 5.014 4.262c0 0 .053.052.053.105"></path></svg>')
		no-repeat center;
	background-size: contain;
}

/* Light mode (default) */
.wp-block-details {
	background-color: #fff;
}

.wp-block-details summary {
	color: #000;
}

.wp-block-details > *:not(summary) {
	color: #333;
}