/* Co-located stylesheet for <ServicesNav> (Framework Contract S-C). Scoped to the
   component's own .srv-nv root so the panel travels with the component instead of
   living in a host module's stylesheet. */

/* Landmark (Figma 18723:21849 "services-sidebar-panel"): a #d1d1d1 panel, 32px padding and
   16px gaps with a soft drop shadow; a Title 2 header beside a #212121 arrow chip; 20px
   between category rows; the open category is a square #212121 bar with white text; the
   subcategory stack hangs off a 1.5px bronze rail at 30%. */

.srv-nv.bg-bx {
	--srv-nv-bg: #d1d1d1;
	--srv-nv-ink: var(--dk-alt-bg);     /* #212121 */
	--srv-nv-ink-txt: var(--dk-alt-txt); /* white */

	row-gap: 1rem;
	padding: 2rem;
	background-color: var(--srv-nv-bg);
	filter: drop-shadow(0 0.25rem 0.3125rem hsl(from var(--lt-txt) h s l / 0.3));

	> .flx:first-child {
		padding-inline-end: 1rem;
	}

	.srv-nv-dvd {
		--bdr-clr: var(--lt-alt-bdr);
		--bdr-clr-o: 0.3;
	}

	/* Header link: #212121 chip with the white up-right arrow (24px glyph + 4px padding). */
	.srv-nv-lnk {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		background-color: var(--srv-nv-ink);
		color: var(--srv-nv-ink-txt);

		.icn {
			width: 1.5rem;
			height: 1.5rem;
		}
	}

	/* Category rows. */
	.srv-nv-lst {
		row-gap: 1.25rem;
	}

	.srv-nv-cat {

		> summary {
			list-style: none;
			cursor: pointer;
			padding-inline: 1rem;
			color: var(--lt-alt-txt);

			&::-webkit-details-marker {
				display: none;
			}
		}

		.tb-arw {
			flex: 0 0 auto;
			width: 1.5rem;
			height: 1.5rem;
			transition: rotate 0.3s ease;
		}

		&[open] .tb-arw {
			rotate: 180deg;
		}

		/* Open (active) category: square #212121 bar, white text, 14px x 16px. */
		&[open] > summary {
			background-color: var(--srv-nv-ink);
			color: var(--srv-nv-ink-txt);
			padding-block: 0.875rem;
		}
	}

	/* Subcategory stack with the indicator rail. */
	.srv-nv-sub {
		margin-top: 1rem;
		margin-left: 1rem;
		padding-left: 1.25rem;
		border-left: 1.5px solid hsl(from var(--lt-alt-bdr) h s l / 0.3);

		ul {
			row-gap: 1rem;
		}

		a {
			color: var(--lt-alt-txt);
		}
	}

	/* Direct-link category rows (no sub-items): same row metrics as a closed category, a
	   right chevron instead of the dropdown arrow, and the dark active bar for the current page. */
	.srv-nv-row {
		padding-inline: 1rem;
		color: var(--lt-alt-txt);
		text-decoration: none;

		.srv-nv-row-arw,
		.srv-nv-row-arw svg {
			flex: 0 0 auto;
			width: 1.5rem;
			height: 1.5rem;
		}

		&.srv-nv-cur {
			background-color: var(--srv-nv-ink);
			color: var(--srv-nv-ink-txt);
			padding-block: 0.875rem;
		}
	}
}