/**
 * amm - WooCommerce Addons :: Category Navigation
 *
 * Minimal, override-friendly defaults. All colours/typography/spacing/borders
 * are meant to be set per level via the Elementor controls. These base rules
 * only provide structure + the show/hide (accordion) logic.
 */

.amm-catnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.amm-catnav__list,
.amm-catnav__children {
	display: flex;
	flex-direction: column;
}

.amm-catnav__item {
	margin: 0;
}

/* Row = link + toggle on one line; nested children drop below. */
.amm-catnav__row {
	display: flex;
	align-items: center;
	gap: 0.35em;
}

.amm-catnav__link {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	color: inherit;
}

/* Animated normal <-> hover <-> active transitions (duration via Elementor control). */
.amm-catnav__row,
.amm-catnav__link,
.amm-catnav__count,
.amm-catnav__toggle {
	transition:
		color var(--amm-catnav-duration, 0.2s) ease,
		background-color var(--amm-catnav-duration, 0.2s) ease,
		border-color var(--amm-catnav-duration, 0.2s) ease,
		box-shadow var(--amm-catnav-duration, 0.2s) ease;
}

.amm-catnav__label {
	overflow-wrap: anywhere;
}

.amm-catnav__count {
	flex: 0 0 auto;
	line-height: 1;
}

/* Indentation of nested levels (overridden by the Elementor control). */
.amm-catnav__children {
	padding-inline-start: 1em;
}

/* ---- Toggle button ------------------------------------------------ */
.amm-catnav__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15em;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
}

.amm-catnav__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.amm-catnav__icon {
	display: inline-flex;
	font-size: 1em;
	line-height: 0;
	transition:
		transform var(--amm-catnav-duration, 0.2s) ease,
		color var(--amm-catnav-duration, 0.2s) ease;
}

.amm-catnav__icon svg,
.amm-catnav__icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.amm-catnav__item.is-open > .amm-catnav__row .amm-catnav__toggle .amm-catnav__icon {
	transform: rotate(var(--amm-catnav-rotate, 90deg));
}

/* ---- Open / closed logic ------------------------------------------ */
.amm-catnav__children {
	display: none;
}

/* JS mode: driven purely by .is-open (set on click + on load for the current branch). */
.amm-catnav--js .amm-catnav__item.is-open > .amm-catnav__children {
	display: flex;
}

/* No-JS fallback: keep the current branch (and its first sub-level) open. */
.amm-catnav:not(.amm-catnav--js) .current-cat > .amm-catnav__children,
.amm-catnav:not(.amm-catnav--js) .current-cat-parent > .amm-catnav__children,
.amm-catnav:not(.amm-catnav--js) .current-cat-ancestor > .amm-catnav__children {
	display: flex;
}

/* Elementor editor only: show every level regardless of open state, so the
   Style tab (level 2/3, count, toggle, …) can be previewed without switching
   to the frontend. Never applied outside the editor. */
.amm-catnav--editor-preview .amm-catnav__children {
	display: flex !important;
}