/**
 * Wood Ranch FAQ Accessibility Fixes - CSS
 * Styles for WCAG 2.2 Level AA compliant accordion pattern
 */

/**
 * Style the new heading structure to match original design
 */
.uagb-faq-heading {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	width: 100% !important;
	display: block !important;
}

/**
 * Make the questions container not use flex (since we handle layout in button)
 */
.uagb-faq-questions-button.uagb-faq-questions {
	display: block !important;
}

/**
 * Style the accordion button to match original FAQ toggle appearance
 */
.uagb-faq-button {
	/* Reset button styles completely */
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	cursor: pointer !important;
	text-transform: inherit !important;
	text-decoration: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	/* Match original layout - icons on right, text on left */
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	text-align: left !important;
	justify-content: space-between !important;
	flex-direction: row-reverse !important;
}

/**
 * When icon-row-reverse is set (UAGB setting), icons go on the right
 */
.uagb-faq-icon-row-reverse .uagb-faq-button {
	flex-direction: row-reverse !important;
}

/**
 * Icon styling - match original UAGB FAQ behavior
 * Show inactive icon (plus) by default, hide active icon (minus)
 * When expanded, show active icon (minus), hide inactive icon (plus)
 *
 * NOTE: Must override UAGB's high-specificity selectors AND reset all
 * dimension properties (width, height, margin, padding) that UAGB sets
 *
 * UAGB toggles aria-expanded on parent div, our JS sets it on button
 * Support BOTH patterns for maximum compatibility
 */
.uagb-faq-button .uagb-faq-icon-wrap {
	flex-shrink: 0;
}

/* Hide ALL icons by default (override UAGB's class-based visibility) */
.wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item .uagb-icon.uagb-faq-icon-wrap, .wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item .uagb-icon-active.uagb-faq-icon-wrap, .wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item.uagb-faq-item-active .uagb-icon.uagb-faq-icon-wrap, .wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item.uagb-faq-item-active .uagb-icon-active.uagb-faq-icon-wrap {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Show plus icon when collapsed - parent div aria-expanded="false" */
.wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item[aria-expanded="false"] .uagb-icon.uagb-faq-icon-wrap, .wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item.uagb-faq-item-active[aria-expanded="false"] .uagb-icon.uagb-faq-icon-wrap {
	display: flex !important;
	width: auto !important;
	height: auto !important;
}

/* Show minus icon when expanded - parent div aria-expanded="true" */
.wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item[aria-expanded="true"] .uagb-icon-active.uagb-faq-icon-wrap, .wp-block-uagb-faq-child.uagb-faq-child__outer-wrap.uagb-faq-item.uagb-faq-item-active[aria-expanded="true"] .uagb-icon-active.uagb-faq-icon-wrap {
	display: flex !important;
	width: auto !important;
	height: auto !important;
}

/* Also support button's aria-expanded (for our JS-managed buttons) */
.wp-block-uagb-faq-child .uagb-faq-button[aria-expanded="false"] .uagb-icon.uagb-faq-icon-wrap {
	display: flex !important;
	width: auto !important;
	height: auto !important;
}

.wp-block-uagb-faq-child .uagb-faq-button[aria-expanded="true"] .uagb-icon-active.uagb-faq-icon-wrap {
	display: flex !important;
	width: auto !important;
	height: auto !important;
}

/**
 * Question text styling - using original class name
 * Ensure styles are inherited through the new button structure
 */
.uagb-faq-button .uagb-question {
	flex-grow: 1 !important;
	text-align: left !important;
}

/**
 * Ensure the .uagb-question inside the button inherits the same styles
 * as the original .uagb-faq-questions-button .uagb-question selector
 */
.uagb-faq-questions-button .uagb-faq-button .uagb-question, .uagb-faq-questions .uagb-faq-button .uagb-question {
	font-weight: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
}

/**
 * Focus indicator for keyboard accessibility
 * WCAG 2.4.7 - Focus Visible
 * Uses Wood Ranch brand color with fallback
 */
.uagb-faq-button:focus {
	outline: 2px solid var(--wp--preset--color--primary, #8a1e03) !important;
	outline-offset: 2px !important;
}

/* Hide focus ring for mouse users, show only for keyboard */
.uagb-faq-button:focus:not(:focus-visible) {
	outline: none !important;
}

.uagb-faq-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #8a1e03) !important;
	outline-offset: 2px !important;
}

/**
 * Hover state
 */
.uagb-faq-button:hover {
	opacity: .8;
}

/**
 * Hidden panel state using hidden attribute
 * More accessible than display: none for some screen readers
 */
.uagb-faq-content[hidden] {
	display: none !important;
}

/**
 * Visible panel state
 */
.uagb-faq-content:not([hidden]) {
	display: block !important;
}

/**
 * Region styling for answer panels
 */
.uagb-faq-content[role="region"] {
	/* Ensure proper spacing */
	padding-top: 10px;
}

/**
 * Icon transition for smooth appearance
 */
.uagb-faq-button .uagb-faq-icon-wrap {
	transition: opacity .2s ease;
}

/**
 * Ensure the FAQ item container doesn't have conflicting styles
 */
.uagb-faq-item, .uagb-faq-child__outer-wrap {}

/**
 * Active item styling - match original
 */
.uagb-faq-item-active .uagb-faq-questions-button, .uagb-faq-item-active .uagb-faq-questions {}

/**
 * Responsive adjustments
 */
@media (max-width: 768px) {
	.uagb-faq-button {
		padding: 10px 0 !important;
	}
}

/**
 * High contrast mode support
 * WCAG 1.4.11 - Non-text Contrast
 */
@media (prefers-contrast: high) {
	.uagb-faq-button:focus {
		outline: 3px solid currentColor !important;
		outline-offset: 3px !important;
	}
}

/**
 * Reduced motion support
 * WCAG 2.3.3 - Animation from Interactions
 */
@media (prefers-reduced-motion: reduce) {
	.uagb-faq-button .uagb-faq-icon-wrap svg {
		transition: none !important;
	}
}