/**
 * ITN Accordions – Frontend Styles
 *
 * Uses CSS custom properties (variables) set inline per accordion set,
 * so each set can have its own visual theme.
 */

/* ===========================
   Wrapper
   =========================== */
.itn-accordion-wrap {
	/* Legacy / fallback vars */
	--itn-color-header: #2c3e50;
	--itn-color-header-text: #ffffff;
	--itn-color-content-bg: #f9f9f9;
	--itn-color-border: #dddddd;
	--itn-border-radius: 4px;
	--itn-font-size-title: 16px;
	--itn-anim-duration: 300ms;
	border: 0 !important;

	/* Title vars */
	--itn-title-bg: var(--itn-color-header);
	--itn-title-text: var(--itn-color-header-text);
	--itn-title-font-size: var(--itn-font-size-title);
	--itn-title-border-width: 0px;
	--itn-title-border-style: solid;
	--itn-title-border-color: var(--itn-color-border);
	--itn-title-border-radius: var(--itn-border-radius);
	--itn-title-margin-top: 0px;
	--itn-title-margin-right: 0px;
	--itn-title-margin-bottom: 0px;
	--itn-title-margin-left: 0px;
	--itn-title-padding-top: 14px;
	--itn-title-padding-right: 18px;
	--itn-title-padding-bottom: 14px;
	--itn-title-padding-left: 18px;

	/* Content vars */
	--itn-content-bg: var(--itn-color-content-bg);
	--itn-content-text: inherit;
	--itn-content-font-size: 14px;
	--itn-content-border-width: 0px;
	--itn-content-border-style: solid;
	--itn-content-border-color: var(--itn-color-border);
	--itn-content-border-radius: 0px;
	--itn-content-margin-top: 0px;
	--itn-content-margin-right: 0px;
	--itn-content-margin-bottom: 0px;
	--itn-content-margin-left: 0px;
	--itn-content-padding-top: 16px;
	--itn-content-padding-right: 18px;
	--itn-content-padding-bottom: 16px;
	--itn-content-padding-left: 18px;

	/* Icon vars */
	--itn-icon-color: currentColor;
	--itn-icon-bg: transparent;
	--itn-icon-size: 18px;
	--itn-icon-border-radius: 0px;
	--itn-icon-hover-color: currentColor;

	box-sizing: border-box;
	width: 100%;
	margin: 1.5em 0;
}

.itn-accordion-wrap *,
.itn-accordion-wrap *::before,
.itn-accordion-wrap *::after {
	box-sizing: inherit;
}

/* ===========================
   Accordion container
   =========================== */
.itn-accordion {
	border: 0px solid var(--itn-color-border);
	border-radius: var(--itn-border-radius);
	overflow: hidden;
}

/* ===========================
   Accordion item
   =========================== */
.itn-accordion-item {
	border-bottom: 1px solid var(--itn-color-border);
}

.itn-accordion-item:last-child {
	border-bottom: none;
}

/* ===========================
   Header / Trigger
   =========================== */
.itn-accordion-header {
	margin: 0;
	padding: 0;
}

.itn-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--itn-title-padding-top) var(--itn-title-padding-right) var(--itn-title-padding-bottom) var(--itn-title-padding-left);
	margin: var(--itn-title-margin-top) var(--itn-title-margin-right) var(--itn-title-margin-bottom) var(--itn-title-margin-left);
	background: var(--itn-title-bg);
	color: var(--itn-title-text);
	border: var(--itn-title-border-width) var(--itn-title-border-style) var(--itn-title-border-color);
	border-radius: var(--itn-title-border-radius);
	cursor: pointer;
	text-align: left;
	font-size: var(--itn-title-font-size);
	font-weight: 600;
	line-height: 1.4;
	transition: background-color 0.15s ease, filter 0.15s ease;
	gap: 0.6em;
}

.itn-accordion-trigger:hover,
.itn-accordion-trigger:focus-visible {
	filter: brightness(1.12);
	outline: none;
}

.itn-accordion-trigger:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: -3px;
}

/* Keep left icon left-aligned and title flowing to the right */
[data-icon-position="left"] .itn-accordion-trigger {
	flex-direction: row;
	justify-content: space-between;
}

.itn-accordion-title {
	flex: 1;
}

/* ===========================
   Icon
   =========================== */
.itn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--itn-icon-size);
	height: var(--itn-icon-size);
	color: var(--itn-icon-color);
	background: var(--itn-icon-bg);
	border-radius: var(--itn-icon-border-radius);
	transition: transform var(--itn-anim-duration) ease, color 0.15s ease;
}

.itn-icon svg {
	width: var(--itn-icon-size);
	height: var(--itn-icon-size);
}

.itn-accordion-trigger:hover .itn-icon {
	color: var(--itn-icon-hover-color);
}

/* Rotate arrow/chevron icons when item is open */
.itn-accordion-item.itn-is-open .itn-icon-arrow,
.itn-accordion-item.itn-is-open .itn-icon-chevron,
.itn-accordion-item.itn-is-open .itn-icon-caret {
	transform: rotate(180deg);
}

/* ===========================
   Content area
   =========================== */
.itn-accordion-content {
	overflow: hidden;
	background: var(--itn-content-bg);
	color: var(--itn-content-text);
	font-size: var(--itn-content-font-size);
	border: var(--itn-content-border-width) var(--itn-content-border-style) var(--itn-content-border-color);
	border-radius: var(--itn-content-border-radius);
	margin: var(--itn-content-margin-top) var(--itn-content-margin-right) var(--itn-content-margin-bottom) var(--itn-content-margin-left);
	transition: height var(--itn-anim-duration) ease;
}

/* When hidden attribute is present JS hasn't run yet; CSS hides it */
.itn-accordion-content[hidden] {
	display: none;
}

/* During animation, hidden attribute is removed */
.itn-accordion-content.itn-animating {
	display: block;
	overflow: hidden;
}

.itn-accordion-content-inner {
	padding: var(--itn-content-padding-top) var(--itn-content-padding-right) var(--itn-content-padding-bottom) var(--itn-content-padding-left);
}

/* ===========================
   Open state
   =========================== */
.itn-accordion-item.itn-is-open > .itn-accordion-content {
	display: block;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 480px) {
	.itn-accordion-trigger {
		padding: 0.75em 0.85em;
	}

	.itn-accordion-content-inner {
		padding: 0.85em;
	}
}