/**
 * Elcogen Accordion Widget Styles
 *
 * Custom styling for Elementor NESTED accordion widget based on Figma design
 * Targets: nested-accordion.default (uses <details> and <summary> elements)
 * Includes header, icon, content area, and typography styling
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ========================================
   CUSTOM CSS PROPERTIES FOR ACCORDION
   ======================================== */

:root {
	/* Accordion specific design tokens from Figma */

	/* Background colors for different states */
	--accordion-background-default: var(--color-white);
	--accordion-background-hover: var(--color-light-purple-100);
	--accordion-background-active: var(--color-light-purple-100);
	--accordion-background-selected: var(--color-white);
	--accordion-background-focus: var(--color-white);
	--accordion-background-disabled: var(--color-white);

	/* Text colors for different states */
	--accordion-text-default: var(--color-cobalt-blue-400);
	--accordion-text-hover: var(--color-text-primary);
	--accordion-text-active: var(--color-text-primary);
	--accordion-text-selected: var(--color-dark-neutral);
	--accordion-text-focus: var(--color-text-primary);
	--accordion-text-disabled: var(--color-neutral-300);

	/* Border colors */
	--accordion-border-default: var(--color-neutral-200);
	--accordion-border-focus: rgba(0, 0, 0, 0);
	--accordion-border-disabled: rgba(0, 0, 0, 0);

	/* Sizing tokens */
	--accordion-sizing-padding-y: var(--spacing-baseline-24);
	--accordion-sizing-padding-x: var(--spacing-baseline-16);
	--accordion-sizing-inner-spacing: var(--spacing-baseline-16);
	--accordion-sizing-border-width: 1px;

	/* Content area */
	--accordion-content-padding-x: var(--spacing-baseline-16);
	--accordion-content-padding-y: var(--spacing-baseline-16);
	--accordion-content-background: var(--color-white);
	--accordion-body-color: var(--color-text-primary);

	/* Icon */
	--accordion-icon-size: var(--spacing-baseline-32);

	/* Focus state */
	--accordion-focus-shadow-color: #669CC8;
	--accordion-focus-shadow: 0rem 0rem 0rem 0.1875rem #669CC8;

	/* Typography tokens */
	--text-accordion-title-family: var(--font-family-body), sans-serif;
	--text-accordion-title-size: 1.4375rem;
	--text-accordion-title-weight: var(--font-weight-semibold);
	--text-accordion-title-line-height: 2rem;
	--text-accordion-title-letter-spacing: 0rem;
}

/* ========================================
   ACCORDION CONTAINER
   ======================================== */

/* Nested accordion container */
.e-n-accordion {
	border: none !important;
	background: transparent !important;
}

/* Individual accordion item (details element) */
.e-n-accordion-item {
	border: none !important;
	margin: 0 !important;
	background: var(--accordion-background-default) !important;
	border-bottom: var(--accordion-sizing-border-width) solid var(--accordion-border-default) !important;
}

/* Open accordion item */
.e-n-accordion-item[open] {
	background: var(--accordion-background-selected) !important;
}

/* Last item border */
.e-n-accordion-item:last-child {
	border-bottom: var(--accordion-sizing-border-width) solid var(--accordion-border-default) !important;
}

/* ========================================
   ACCORDION HEADER/TAB (SUMMARY ELEMENT)
   ======================================== */

/* Accordion header - DEFAULT STATE (closed) */
.e-n-accordion-item-title {
	background: var(--accordion-background-default) !important;
	border: none !important;
	padding: var(--accordion-sizing-padding-y) var(--accordion-sizing-padding-x) !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--accordion-sizing-inner-spacing) !important;
	cursor: pointer !important;
	position: relative !important;
	transition: var(--transition-all) !important;
	list-style: none !important;
}

/* Remove default details marker */
.e-n-accordion-item-title::-webkit-details-marker {
	display: none !important;
}

/* HOVER STATE */
.e-n-accordion-item-title:hover {
	background: var(--accordion-background-hover) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* HOVER STATE - Title color */
.e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
	color: var(--accordion-text-hover) !important;
}

/* FOCUS STATE for keyboard navigation */
.e-n-accordion-item-title:focus,
.e-n-accordion-item-title:focus-visible {
	background: var(--accordion-background-focus) !important;
	box-shadow: var(--accordion-focus-shadow) !important;
	outline: none !important;
}

/* FOCUS STATE - Title color */
.e-n-accordion-item-title:focus .e-n-accordion-item-title-text,
.e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-text {
	color: var(--accordion-text-focus) !important;
}

/* OPEN/SELECTED STATE (when details[open]) */
.e-n-accordion-item[open] .e-n-accordion-item-title {
	background: var(--accordion-background-selected) !important;
}

/* OPEN STATE - Title color */
.e-n-accordion-item[open] .e-n-accordion-item-title-text {
	color: var(--accordion-text-selected) !important;
}

/* ========================================
   ACCORDION TITLE TEXT
   ======================================== */

/* Title text styling - DEFAULT STATE */
.e-n-accordion-item-title-text {
	font-family: var(--text-accordion-title-family) !important;
	font-size: var(--text-accordion-title-size) !important;
	font-weight: var(--text-accordion-title-weight) !important;
	line-height: var(--text-accordion-title-line-height) !important;
	letter-spacing: var(--text-accordion-title-letter-spacing) !important;
	color: var(--accordion-text-default) !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 !important;
	text-align: left !important;
	transition: var(--transition-color) !important;
}

/* Title header wrapper - left side */
.e-n-accordion-item-title-header {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	order: 1 !important;
}

/* ========================================
   ACCORDION ICON - CSS BASED +/- ICONS
   ======================================== */

/* Hide the default SVG icons completely */
.e-n-accordion-item-title-icon .e-opened,
.e-n-accordion-item-title-icon .e-closed {
	display: none !important;
}

/* Icon container - right side */
.e-n-accordion-item-title-icon {
	flex-shrink: 0 !important;
	width: var(--accordion-icon-size) !important;
	height: var(--accordion-icon-size) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	order: 2 !important;
}

/* Create CSS-based PLUS icon (default/closed state) */
.e-n-accordion-item-title-icon::before,
.e-n-accordion-item-title-icon::after {
	content: '' !important;
	position: absolute !important;
	background-color: var(--accordion-text-default) !important;
	transition: var(--transition-all) !important;
}

/* Vertical line of the plus */
.e-n-accordion-item-title-icon::before {
	width: 0.125rem !important;
	height: 1.1669rem !important; /* Matches Figma design (~1.2294rem scaled to 2rem) */
	transform: translateX(0) !important;
}

/* Horizontal line of the plus */
.e-n-accordion-item-title-icon::after {
	width: 1.1669rem !important;
	height: 0.125rem !important;
	transform: translateY(0) !important;
}

/* HOVER STATE - Icon color */
.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon::before,
.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon::after {
	background-color: var(--accordion-text-hover) !important;
}

/* FOCUS STATE - Icon color */
.e-n-accordion-item-title:focus .e-n-accordion-item-title-icon::before,
.e-n-accordion-item-title:focus .e-n-accordion-item-title-icon::after,
.e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-icon::before,
.e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-icon::after {
	background-color: var(--accordion-text-focus) !important;
}

/* OPEN STATE - Transform plus to minus by hiding vertical line */
.e-n-accordion-item[open] .e-n-accordion-item-title-icon::before {
	opacity: 0 !important;
	transform: rotate(90deg) !important;
}

/* OPEN STATE - Keep horizontal line visible (minus icon) */
.e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
	background-color: var(--accordion-text-selected) !important;
}

/* ========================================
   ACCORDION CONTENT
   ======================================== */

/* Content area (role="region") */
.e-n-accordion-item[role="region"],
.e-n-accordion-item > .e-con {
	background: var(--accordion-content-background) !important;
	border: none !important;
	padding: var(--accordion-content-padding-y) var(--accordion-content-padding-x) !important;
	margin: 0 !important;
}

/* Content text styling */
.e-n-accordion-item p,
.e-n-accordion-item .elementor-widget-text-editor {
	font-family: var(--font-family-body), sans-serif !important;
	font-size: var(--font-size-body-large) !important;
	font-weight: var(--font-weight-regular) !important;
	line-height: var(--line-height-body-large) !important;
	letter-spacing: 0rem !important;
	color: var(--accordion-body-color) !important;
}

/* Ensure content has proper spacing */
.e-n-accordion-item .elementor-widget-text-editor p {
	margin: 0 !important;
}

/* ========================================
   ANIMATION & TRANSITIONS
   ======================================== */

/* Smooth transitions handled by details element automatically */
.e-n-accordion-item {
	transition: var(--transition-background) !important;
}

/* ========================================
   STATE PRIORITY ORDER
   ======================================== */
/*
 * CSS specificity priority:
 * 1. Default state (base)
 * 2. Hover state
 * 3. Focus state
 * 4. Active/Selected state
 * 5. Disabled state (highest priority)
 */

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet (48rem - 64rem) */
@media screen and (max-width: 64rem) and (min-width: 48rem) {
	/* Adjust padding for tablet */
	.e-n-accordion-item-title {
		padding: 1.25rem var(--spacing-baseline-16) !important;
	}

	/* Adjust font sizes for tablet */
	.e-n-accordion-item-title-text {
		font-size: 1.3125rem !important;
		line-height: 1.875rem !important;
	}

	.e-n-accordion-item p {
		font-size: 1.1875rem !important;
		line-height: 2.25rem !important;
	}
}

/* Mobile (max-width: 47.9375rem) */
@media screen and (max-width: 47.9375rem) {
	/* Adjust padding for mobile */
	.e-n-accordion-item-title {
		padding: var(--spacing-baseline-16) var(--spacing-baseline-12) !important;
		gap: var(--spacing-baseline-12) !important;
	}

	/* Adjust font sizes for mobile */
	.e-n-accordion-item-title-text {
		font-size: 1.1875rem !important;
		line-height: 1.75rem !important;
	}

	/* Smaller icon on mobile */
	.e-n-accordion-item-title-icon {
		width: var(--spacing-baseline-24) !important;
		height: var(--spacing-baseline-24) !important;
	}

	.e-n-accordion-item-title-icon::before {
		height: 0.875rem !important;
	}

	.e-n-accordion-item-title-icon::after {
		width: 0.875rem !important;
	}

	/* Adjust content padding for mobile */
	.e-n-accordion-item > .e-con {
		padding: var(--spacing-baseline-12) !important;
	}

	.e-n-accordion-item p {
		font-size: 1.125rem !important;
		line-height: 2rem !important;
	}
}

/* ========================================
   RTL SUPPORT
   ======================================== */

/* RTL specific styles */
.rtl .e-n-accordion-item-title-text {
	text-align: right !important;
}

.rtl .e-n-accordion-item-title {
	flex-direction: row-reverse !important;
}

.rtl .e-n-accordion-item-title-header {
	order: 2 !important;
}

.rtl .e-n-accordion-item-title-icon {
	order: 1 !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
	/* Open all accordion items for printing */
	.e-n-accordion-item {
		/* Force details to display as open */
	}

	.e-n-accordion-item summary {
		list-style: none !important;
	}

	/* Hide icons in print */
	.e-n-accordion-item-title-icon {
		display: none !important;
	}
}