/**
 * FAQ Pattern Styles
 *
 * Styling für das FAQ Pattern basierend auf Figma Design.
 *
 * @package Hundeschule_TT5_Child
 * @since 1.0.0
 */

/* FAQ Section - py-12 md:py-16 bg-gray-50 relative overflow-hidden */
.wp-block-group.hs-faq,
.wp-block-group.alignfull.hs-faq,
.hs-faq {
	position: relative !important;
	overflow: hidden !important;
	background-color: #f9fafb; /* bg-gray-50 */
	padding-top: 4rem !important; /* py-12 */
	padding-bottom: 5rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.wp-block-group.hs-faq,
	.hs-faq {
		padding-top: 4rem !important; /* md:py-16 */
		padding-bottom: 5rem !important;
	}
}

/* FAQ Container - max-w-4xl mx-auto px-4 sm:px-6 relative z-10 */
.hs-faq-container {
	max-width: 56rem; /* max-w-4xl = 896px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
	position: relative;
	z-index: 10;
}

@media (min-width: 640px) {
	.hs-faq-container {
		padding-left: 1.5rem; /* sm:px-6 */
		padding-right: 1.5rem;
	}
}

/* SVG Top-Left Decoration via ::before pseudo-element - absolute -top-12 left-35 w-124 h-124 text-orange-100 -z-10 hidden lg:block */
.hs-faq-container::before,
.wp-block-group.hs-faq-container::before,
.wp-block-group.hs-faq-container.has-global-padding::before,
.wp-block-group.hs-faq-container.is-layout-constrained::before {
	content: '';
	position: absolute;
	top: -3rem; /* -top-12 */
	left: 8.75rem; /* left-35 */
	width: 31rem; /* w-124 */
	height: 31rem; /* h-124 */
	z-index: -10;
	pointer-events: none;
	display: none;
	color: #ffedd5; /* text-orange-100 */
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="none" stroke="%23ffedd5" stroke-width="1.5" d="M43.7,-74.5C56.4,-66.8,66.3,-53.5,73.1,-39C79.9,-24.5,83.6,-8.8,82.8,6.7C82,22.2,76.7,37.5,67.8,49.4C58.9,61.3,46.4,69.8,32.8,75.2C19.2,80.6,4.5,82.9,-10.3,81.9C-25.1,80.9,-40,76.6,-52.7,68.8C-65.4,61,-75.9,49.7,-81.8,36.2C-87.7,22.7,-89,7,-85.9,-7.5C-82.8,-22,-75.3,-35.3,-65.3,-45.7C-55.3,-56.1,-42.8,-63.6,-29.5,-71C-16.2,-78.4,-2.1,-85.7,11.4,-85.9C24.9,-86.1,31,-78.2,43.7,-74.5Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 1024px) {
	.hs-faq-container::before,
	.wp-block-group.hs-faq-container::before,
	.wp-block-group.hs-faq-container.has-global-padding::before,
	.wp-block-group.hs-faq-container.is-layout-constrained::before {
		display: block; /* lg:block */
	}
}

/* SVG Bottom-Right Decoration via ::after pseudo-element - absolute -bottom-15 -right-15 w-64 h-64 text-orange-200 -z-10 -rotate-255 hidden lg:block */
.hs-faq-container::after,
.wp-block-group.hs-faq-container::after,
.wp-block-group.hs-faq-container.has-global-padding::after,
.wp-block-group.hs-faq-container.is-layout-constrained::after {
	content: '';
	position: absolute;
	bottom: -3.75rem; /* -bottom-15 */
	right: -3.75rem; /* -right-15 */
	width: 16rem; /* w-64 */
	height: 16rem; /* h-64 */
	z-index: -10;
	pointer-events: none;
	display: none;
	transform: rotate(-255deg);
	color: #fed7aa; /* text-orange-200 */
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="none" stroke="%23fed7aa" stroke-width="1" d="M43.7,-74.5C56.4,-66.8,66.3,-53.5,73.1,-39C79.9,-24.5,83.6,-8.8,82.8,6.7C82,22.2,76.7,37.5,67.8,49.4C58.9,61.3,46.4,69.8,32.8,75.2C19.2,80.6,4.5,82.9,-10.3,81.9C-25.1,80.9,-40,76.6,-52.7,68.8C-65.4,61,-75.9,49.7,-81.8,36.2C-87.7,22.7,-89,7,-85.9,-7.5C-82.8,-22,-75.3,-35.3,-65.3,-45.7C-55.3,-56.1,-42.8,-63.6,-29.5,-71C-16.2,-78.4,-2.1,-85.7,11.4,-85.9C24.9,-86.1,31,-78.2,43.7,-74.5Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 1024px) {
	.hs-faq-container::after,
	.wp-block-group.hs-faq-container::after,
	.wp-block-group.hs-faq-container.has-global-padding::after,
	.wp-block-group.hs-faq-container.is-layout-constrained::after {
		display: block; /* lg:block */
	}
}

/* FAQ Header - text-center mb-8 md:mb-10 */
.hs-faq-header {
	text-align: center;
	margin-bottom: 2rem; /* mb-8 */
	margin-top: 0;
}

@media (min-width: 768px) {
	.hs-faq-header {
		margin-bottom: 2.5rem; /* md:mb-10 */
	}
}

/* Badge - inline-block px-4 py-1.5 bg-orange-100 text-orange-600 rounded-full text-sm mb-4 */
.hs-faq-badge,
.wp-block-paragraph.hs-faq-badge {
	display: inline-block !important;
	padding: 0.375rem 1rem !important; /* px-4 py-1.5 */
	background-color: #ffedd5 !important; /* bg-orange-100 */
	color: #ea580c !important; /* text-orange-600 */
	border-radius: 9999px !important; /* rounded-full */
	font-size: 0.85rem !important; /* text-sm */
	margin-bottom: 1rem !important; /* mb-4 */
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	font-weight: 400;
	text-align: center;
}

/* Title - text-2xl md:text-3xl */
.hs-faq-title {
	font-size: 1.5rem; /* text-2xl */
	line-height: 1.5;
	font-weight: 600;
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	text-align: center;
}

@media (min-width: 768px) {
	.hs-faq-title {
		font-size: 1.875rem; /* md:text-3xl */
	}
}

/* FAQ Items - space-y-3 md:space-y-4 */
.hs-faq-items {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* space-y-3 */
}

@media (min-width: 768px) {
	.hs-faq-items {
		gap: 1rem; /* md:space-y-4 */
	}
}

/* FAQ Item - bg-white rounded-[20px] md:rounded-[30px] overflow-hidden shadow-sm border-2 border-gray-100 hover:border-orange-200 transition-all */
.hs-faq-item,
.wp-block-details.hs-faq-item {
	background-color: #ffffff;
	border-radius: 20px; /* rounded-[20px] */
	overflow: hidden;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	border: 2px solid #f3f4f6; /* border-2 border-gray-100 */
	transition: border-color 0.2s ease-in-out;
	display: block;
	margin: 0;
    width: 100%;
}

.hs-faq-item:hover,
.wp-block-details.hs-faq-item:hover {
	border-color: #fed7aa; /* hover:border-orange-200 */
}

@media (min-width: 768px) {
	.hs-faq-item,
	.wp-block-details.hs-faq-item {
		border-radius: 30px; /* md:rounded-[30px] */
	}
}

/* FAQ Question (Summary) - w-full px-4 md:px-6 py-4 md:py-5 flex items-center justify-between text-left hover:bg-orange-50/50 transition-colors */
.hs-faq-item summary,
.wp-block-details.hs-faq-item summary {
	width: 100%;
	padding: 1rem 1rem; /* px-4 py-4 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	background-color: transparent;
	border: none;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.2s ease-in-out;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500; /* font-medium */
	color: #1f2937; /* text-gray-800 */
	position: relative;
	padding-right: 3.5rem; /* Space for icon */
	text-decoration: none !important;
	outline: none !important;
}

.hs-faq-item summary:hover,
.wp-block-details.hs-faq-item summary:hover {
	text-decoration: none !important;
	background-color: rgba(255, 237, 213, 0.5); /* hover:bg-orange-50/50 */
}

.hs-faq-item summary:focus,
.wp-block-details.hs-faq-item summary:focus,
.hs-faq-item summary:focus-visible,
.wp-block-details.hs-faq-item summary:focus-visible {
	outline: none !important;
	outline-width: 0 !important;
	outline-style: none !important;
}

@media (min-width: 768px) {
	.hs-faq-item summary,
	.wp-block-details.hs-faq-item summary {
		padding: 1.25rem 1.5rem; /* md:px-6 md:py-5 */
		padding-right: 4rem; /* Space for icon */
		font-size: 0.95rem;
	}
}

/* Remove default summary marker */
.hs-faq-item summary::-webkit-details-marker,
.wp-block-details.hs-faq-item summary::-webkit-details-marker {
	display: none;
}

.hs-faq-item summary::marker,
.wp-block-details.hs-faq-item summary::marker {
	display: none;
}

/* FAQ Icon via ::after pseudo-element - w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0 transition-all */
.hs-faq-item summary::after,
.wp-block-details.hs-faq-item summary::after {
	content: '';
	position: absolute;
	right: 1rem; /* right-4 */
	width: 2rem; /* w-8 */
	height: 2rem; /* h-8 */
	background-color: #ffedd5; /* bg-orange-100 */
	border-radius: 9999px; /* rounded-full */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease-in-out;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-size: 1rem 1rem; /* w-4 h-4 */
	background-repeat: no-repeat;
	background-position: center;
}

@media (min-width: 768px) {
	.hs-faq-item summary::after,
	.wp-block-details.hs-faq-item summary::after {
		right: 1.5rem; /* md:right-6 */
	}
}

/* When details is open, change icon background and color */
.hs-faq-item[open] summary::after,
.wp-block-details.hs-faq-item[open] summary::after {
	background-color: #f97316cf; /* bg-orange-500 */
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	transform: rotate(180deg);
}

/* FAQ Answer Container - px-4 md:px-6 pb-4 md:pb-5 pt-0 */
.hs-faq-item > *:not(summary),
.wp-block-details.hs-faq-item > *:not(summary) {
	padding: 0 1rem 1rem; /* px-4 pb-4 */
	padding-top: 0;
	position: relative;
}

@media (min-width: 768px) {
	.hs-faq-item > *:not(summary),
	.wp-block-details.hs-faq-item > *:not(summary) {
		padding: 0 1.5rem 1.25rem; /* md:px-6 md:pb-5 */
	}
}





/* Answer Text - text-gray-600 text-sm leading-relaxed */
.hs-faq-answer,
.hs-faq-item p,
.wp-block-details.hs-faq-item p {
	color: var(--muted-foreground, #717182) !important; /* text-gray-600 */
	font-size: 0.85rem !important; /* text-sm */
	line-height: 1.625 !important; /* leading-relaxed */
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 400;
    padding: 1rem 1.5rem !important;
}