/* SideNav — Figma 15349-27480 ("services-sidebar-panel").
   Surfaces, type, spacing and borders come from framework classes on the markup
   (data-colors / bg-bx crd / pd_*-30 / gp_sp-sml / fnt_t-2 / fnt_nv-sec / bdr_*).
   Only the disclosure mechanics and the design's inset rhythm live here. */

.sd-nv {

	/* Design hairlines (header divider, sub-list rule) are the palette border at
	   40% — the framework's own opacity knob rather than a literal colour. */
	--bdr-clr-o: 0.4;
	padding: 1.78rem;

	header {
		svg {
			--shape-clr-1-dyn: var(--white);
		}
	}

	/* Rows sit inset from the panel's own padding: 16px in the comp. */
	.sd-nv-row {
		padding-inline: var(--sp-qk);
		padding-block: 0.78rem;
		transition: background-color .3s ease 0s, color .3s ease 0s;

		@media (hover: hover) and (pointer: fine) {
			&:not(summary):is(:hover, :focus-visible) {
				background-color: var(--dk-bg);
				color: var(--dk-txt) !important;
			}
		}
	}

	/* IconChevronDown is the affordance, so the native marker goes — same
	   handling as .srv-nv-cat in subpage-content-v5.css and .faq in faq-tools.css. */
	.sd-nv-grp > summary {
		list-style: none;
		cursor: pointer;

		@media (hover: hover) and (pointer: fine) {
			&:is(:hover, :focus-visible) {
				background-color: var(--dk-bg);
				color: var(--dk-txt);

				a {
					color: var(--dk-txt) !important;
				}
			}
		}
	}

	.sd-nv-grp > summary::-webkit-details-marker {
		display: none;
	}

	/* Open group reads as the flipped surface (comp: #3B4046 with white type,
	   14px block padding). `.flp-bg` is the framework way to say this, but it
	   cannot key off [open] — these are the values it resolves to. */
	.sd-nv-grp[open] > summary {
		background-color: var(--dk-bg);
		color: var(--dk-txt);

		a {
			color: var(--dk-txt) !important;
		}
		
	}

	.sd-nv-grp .tb-arw {
		transition: rotate var(--g-trn-sp) var(--g-trn-tf);
	}

	.sd-nv-grp[open] .tb-arw {
		rotate: 180deg;
	}

	/* Sub-list: indented past the row inset, hairline rule down the left. */
	.sd-nv-sub {
		margin-inline-start: var(--sp-qk);
		padding-inline-start: var(--sp-qk);
	}

	/* Header affordance: small square tap target on the flipped surface. */
	.sd-nv-lnk {
		padding: 0.22rem;
	}

}