/*
 * WC Advanced Categories Widget – Styles
 * Inspired by Distriplac.com navigation UX.
 * Custom design – not a copy.
 */

/* ──────────────────────────────────────────────
   CSS Custom Properties
────────────────────────────────────────────── */
.wcac-widget {
	--wcac-font: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--wcac-bg: #f5f6f7;
	--wcac-border: #e2e4e7;
	--wcac-radius: 6px;

	/* Colors */
	--wcac-text: #2c3338;
	--wcac-text-muted: #6b7280;
	--wcac-accent: #1a73e8;
	--wcac-accent-bg: #eaf2ff;
	--wcac-ancestor-color: #374151;
	--wcac-toggle-color: #1a73e8;
	--wcac-count-bg: #e9eaeb;
	--wcac-count-text: #6b7280;

	/* Spacing */
	--wcac-item-py: 9px;
	--wcac-item-px: 14px;
	--wcac-indent: 18px;
	--wcac-toggle-size: 28px;

	/* Motion */
	--wcac-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--wcac-duration: 220ms;

	font-family: var(--wcac-font);
}

/* ──────────────────────────────────────────────
   Nav container
────────────────────────────────────────────── */
.wcac-nav {
	background: var(--wcac-bg);
	border: 1px solid var(--wcac-border);
	border-radius: var(--wcac-radius);
	overflow: hidden;
}

/* ──────────────────────────────────────────────
   Lists
────────────────────────────────────────────── */
.wcac-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcac-list--level-0 {
	padding: 6px 0;
}

/* ──────────────────────────────────────────────
   Items
────────────────────────────────────────────── */
.wcac-item {
	position: relative;
}

.wcac-item__row {
	display: flex;
	align-items: center;
	gap: 0;
	padding-inline-start: calc(var(--wcac-item-px) + (var(--wcac-depth, 0) * var(--wcac-indent)));
	transition: background-color var(--wcac-duration) var(--wcac-ease);
}

.wcac-item__row:hover {
	background-color: rgba(0, 0, 0, 0.035);
}

.wcac-item--active > .wcac-item__row {
	background-color: var(--wcac-accent-bg);
}

/* Separator between top-level items */
.wcac-list--level-0 > .wcac-item + .wcac-item > .wcac-item__row {
	border-top: 1px solid var(--wcac-border);
}

/* ──────────────────────────────────────────────
   Toggle button (+ / -)
────────────────────────────────────────────── */
.wcac-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wcac-toggle-size);
	height: var(--wcac-toggle-size);
	padding: 0;
	margin-inline-end: 2px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wcac-toggle-color);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	border-radius: 4px;
	transition:
		background-color var(--wcac-duration) var(--wcac-ease),
		color var(--wcac-duration) var(--wcac-ease);

	/* Make tap target large enough on mobile */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
}

.wcac-toggle:hover,
.wcac-toggle:focus-visible {
	background-color: rgba(26, 115, 232, 0.1);
	outline: none;
}

.wcac-toggle:focus-visible {
	box-shadow: 0 0 0 2px var(--wcac-accent);
}

.wcac-toggle--leaf {
	width: var(--wcac-toggle-size);
	pointer-events: none;
}

.wcac-toggle__icon {
	display: block;
	transition: transform var(--wcac-duration) var(--wcac-ease);
}

/* ──────────────────────────────────────────────
   Links
────────────────────────────────────────────── */
.wcac-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: var(--wcac-item-py) var(--wcac-item-px) var(--wcac-item-py) 0;
	color: var(--wcac-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
	transition: color var(--wcac-duration) var(--wcac-ease);

	/* Prevent accidental text selection on rapid taps */
	-webkit-user-select: none;
	user-select: none;
}

.wcac-link:hover {
	color: var(--wcac-accent);
	text-decoration: none;
}

.wcac-link--active {
	color: var(--wcac-accent);
	font-weight: 600;
}

.wcac-link--ancestor {
	color: var(--wcac-ancestor-color);
	font-weight: 500;
}

/* ──────────────────────────────────────────────
   Product count badge
────────────────────────────────────────────── */
.wcac-count {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	background: var(--wcac-count-bg);
	color: var(--wcac-count-text);
	font-size: 0.72rem;
	font-weight: 500;
	border-radius: 10px;
	line-height: 1;
	margin-inline-end: var(--wcac-item-px);
}

.wcac-link--active .wcac-count {
	background: var(--wcac-accent);
	color: #fff;
}

/* ──────────────────────────────────────────────
   Children list accordion
────────────────────────────────────────────── */
.wcac-children {
	overflow: hidden;

	/*
	 * JavaScript controls visibility via the `hidden` attribute and
	 * the .wcac-children--open modifier. We use CSS animations for
	 * the expand effect.
	 */
}

.wcac-children[hidden] {
	display: none;
}

.wcac-children--open {
	display: block;
	animation: wcac-slide-down var(--wcac-duration) var(--wcac-ease);
}

@keyframes wcac-slide-down {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Closing animation — applied by JS before hiding */
.wcac-children--closing {
	display: block !important;
	animation: wcac-slide-up var(--wcac-duration) var(--wcac-ease) forwards;
}

@keyframes wcac-slide-up {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* ──────────────────────────────────────────────
   Depth-based visual hierarchy
   Subtle left border accent for nested levels
────────────────────────────────────────────── */
.wcac-list--level-1 {
	border-top: 1px solid var(--wcac-border);
	border-bottom: 1px solid var(--wcac-border);
	background: rgba(255, 255, 255, 0.55);
}

.wcac-list--level-2 {
	background: rgba(255, 255, 255, 0.8);
}

.wcac-item[style*="--wcac-depth: 1"] > .wcac-item__row {
	border-left: 2px solid transparent;
}

.wcac-item[style*="--wcac-depth: 1"].wcac-item--active > .wcac-item__row,
.wcac-item[style*="--wcac-depth: 1"].wcac-item--ancestor > .wcac-item__row {
	border-left-color: var(--wcac-accent);
}

/* ──────────────────────────────────────────────
   Widget title (WordPress widget before_title)
────────────────────────────────────────────── */
.wcac-widget .widget-title,
.wcac-widget h2,
.wcac-widget h3 {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wcac-text-muted);
	margin-bottom: 10px;
}

/* ──────────────────────────────────────────────
   Astra Theme compatibility overrides
────────────────────────────────────────────── */
.wcac-nav ul {
	margin: 0 !important;
	padding: 0 !important;
}

.wcac-link:focus {
	outline: 2px solid var(--wcac-accent);
	outline-offset: -2px;
	border-radius: 2px;
}

/* ──────────────────────────────────────────────
   Responsive – Mobile
────────────────────────────────────────────── */
@media (max-width: 768px) {
	.wcac-widget {
		--wcac-toggle-size: 36px;
		--wcac-item-py: 11px;
	}

	.wcac-link {
		font-size: 0.95rem;
	}
}

/* ──────────────────────────────────────────────
   High contrast / reduced motion
────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wcac-children--open,
	.wcac-children--closing,
	.wcac-item__row,
	.wcac-toggle,
	.wcac-link {
		animation: none !important;
		transition: none !important;
	}
}