/* Shop category sidebar — mobile collapse v1.
 *
 * Section: inc/sections/shop-cat-mobile-collapse-v1.php
 * JS:      assets/js/pp-shop-cat-mobile-collapse.js
 *
 * Default on mobile (≤1024px): aside collapsed, only the H3 toggle
 * is visible. Adding `.pp-cat-expanded` to the aside reveals the
 * <ul>. Desktop is untouched.
 */

/* Toggle title — common to both states. We always promote the H3 to
 * a tappable affordance (cursor pointer + chevron) so the click
 * target is obvious. */
body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-sidebar-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	cursor: default; /* desktop = static heading */
}

/* The chevron is appended by the JS as <span class="pp-cat-chevron">.
 * Hidden on desktop, shown on mobile. */
body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-cat-chevron {
	display: none;
}

@media (max-width: 1024px) {
	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-sidebar-title {
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;

		/* Card-ish styling so the closed state reads as a button. */
		padding: 14px 16px;
		background: rgba(var(--pp-blue-rgb, 26, 58, 82), 0.06);
		border: 1px solid rgba(var(--pp-blue-rgb, 26, 58, 82), 0.18);
		border-radius: 8px;

		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-sidebar-title:hover,
	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-sidebar-title:focus-visible {
		background: rgba(var(--pp-blue-rgb, 26, 58, 82), 0.10);
		outline: none;
	}

	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-cat-chevron {
		display: inline-flex;
		width: 22px;
		height: 22px;
		align-items: center;
		justify-content: center;
		transition: transform 200ms ease;
		flex-shrink: 0;
	}

	/* Closed-by-default: hide the list. Visible when aside has
	 * .pp-cat-expanded. We use display:none / display:flex rather
	 * than max-height transition — testing on prod revealed that
	 * some upstream CSS (likely pp-shop-sidebar-pathways-v2 or one
	 * of the inline blocks) holds the computed max-height at 0
	 * even when an inline `max-height: 1200px !important` is set,
	 * which makes the animated-reveal pattern unreliable. The
	 * display toggle is instant rather than animated, which is an
	 * acceptable trade-off for predictable behavior.
	 */
	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar .pp-category-list {
		display: none;
	}

	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar.pp-cat-expanded .pp-category-list {
		display: flex; /* restores the pathway-card flex-column layout */
		margin-top: 12px;
	}

	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar.pp-cat-expanded .pp-cat-chevron {
		transform: rotate(180deg);
		transition: transform 200ms ease;
	}

	/* Tighten the aside itself so the closed pill has no extra padding
	 * sitting above the products. */
	body.pp-shop-cat-mobile-collapse-v1 #pp-shop-sidebar {
		margin-bottom: 16px;
		padding-bottom: 0;
	}
}