/**
 * Frontend styles for the Accordion Block
 * Minimal styling with keyline and inline arrow
 */

/* Alpine.js x-cloak directive - CRITICAL for preventing FOUC */
[x-cloak] {
	display: none !important;
}

/* Accordion Block Styles */
.wp-block-rkh-blocks-accordion {
	width: 100%;
    box-sizing: border-box;

	/* Prevent layout shift during load */
	contain: layout;
}

/* Accordion Item - No borders, minimal styling */
.wp-block-rkh-blocks-accordion-item {
	margin-bottom: var(--accordion-item-spacing, var(--wp--preset--spacing--medium, 1rem));
}

/* Accordion Header - Clickable row with title and arrow inline */
.wp-block-rkh-blocks-accordion-item .accordion-header {
	width: 100%;
}

.wp-block-rkh-blocks-accordion-item .accordion-toggle {
    font-size: inherit;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--small, 0.75rem) 0;
	background: transparent;
	border: none;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s ease;
	font-family: inherit;
	color: inherit;
	min-height: 48px; /* Consistent touch target with tabs block */
}

.wp-block-rkh-blocks-accordion-item .accordion-toggle:hover {
	opacity: 0.8;
}

.wp-block-rkh-blocks-accordion-item .accordion-toggle:focus {
	outline: none; /* Remove default focus for mouse clicks */
}

.wp-block-rkh-blocks-accordion-item .accordion-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Title styling */
.wp-block-rkh-blocks-accordion-item .accordion-title-wrapper {
	flex: 1;
	margin-right: var(--wp--preset--spacing--small, 0.75rem);
}

.wp-block-rkh-blocks-accordion-item .accordion-title-wrapper .accordion-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: block;
	font-family: inherit;
}

/* Arrow/Icon styling - inline with title */
.wp-block-rkh-blocks-accordion-item .accordion-icon-wrapper {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.wp-block-rkh-blocks-accordion-item .accordion-icon {
	width: 16px;
	height: 16px;
	color: inherit;
	transition: transform 0.4s ease-out;
}

/* Icon animations for different types */

/* Chevron: Rotate when open */
.wp-block-rkh-blocks-accordion-item .accordion-icon.rotate-180 {
	transform: rotate(180deg);
}

/* Arrow: Rotate when open */
.wp-block-rkh-blocks-accordion-item .accordion-icon.rotate-90 {
	transform: rotate(90deg);
}

/* Plus icon: Smooth spinning animation with vertical line fade */
.wp-block-rkh-blocks-accordion-item .accordion-icon .accordion-icon-horizontal,
.wp-block-rkh-blocks-accordion-item .accordion-icon .accordion-icon-vertical {
	transition: opacity 0.4s ease, transform 0.4s ease;
	transform-origin: center;
}

/* When closed: show both lines (plus) */
.wp-block-rkh-blocks-accordion-item .accordion-icon .accordion-icon-horizontal {
	opacity: 1;
}

.wp-block-rkh-blocks-accordion-item .accordion-icon .accordion-icon-vertical {
	opacity: 1;
}

/* When open: spin icon and hide vertical line (minus) */
.wp-block-rkh-blocks-accordion-item .accordion-icon.plus-open {
	transform: rotate(180deg);
}

.wp-block-rkh-blocks-accordion-item .accordion-icon.plus-open .accordion-icon-vertical {
	opacity: 0;
	transform: rotate(90deg) scale(0);
}

.wp-block-rkh-blocks-accordion-item .accordion-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Content area - minimal styling (height/opacity handled by JavaScript) */
.wp-block-rkh-blocks-accordion-item .accordion-content {
	overflow: hidden;
}

.wp-block-rkh-blocks-accordion-item .accordion-content-inner {
	padding: var(--wp--preset--spacing--medium, 1rem) 0;
	color: inherit;
	line-height: 1.6;
}

/* Remove margins from first and last elements in content */
.wp-block-rkh-blocks-accordion-item .accordion-content-inner > *:first-child {
	margin-top: 0;
}

.wp-block-rkh-blocks-accordion-item .accordion-content-inner > *:last-child {
	margin-bottom: 0;
}

/*
 * SIMPLIFIED APPROACH: Let paragraphs inherit from their parent group
 * Remove forced styling to allow natural inheritance
 */

/* Mobile touch improvements */
@media (max-width: 768px) {
	.wp-block-rkh-blocks-accordion-item .accordion-toggle {
		min-height: 48px; /* Ensure consistent touch target */
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.wp-block-rkh-blocks-accordion-item .accordion-icon {
		transition: none;
	}

	.wp-block-rkh-blocks-accordion-item .accordion-icon .accordion-icon-horizontal,
	.wp-block-rkh-blocks-accordion-item .accordion-icon .accordion-icon-vertical {
		transition: none;
	}
}