/* ==========================================================================
   HEI Sidebar Menu — "Register" theme
   An institutional directory/index look: hairline rail with node markers,
   serif+sans type pairing, restrained depth. Built from the brief's two
   colors only (#00580f green, #fff white) plus neutral ink/paper/line.
   ========================================================================== */

.hei-sm-wrap {
	--green:      #00580f;
	--green-050:  #eaf1e8;   /* faint tint for hover fill */
	--green-soft: rgba(0, 88, 15, 0.16);
	--white:      #fff !important;
	--paper:      #fffdf9;
	--ink:        #16210f;
	--ink-soft:   #4c5a44;
	--line:       #d9d4c4;

	background: #Fff !important;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 26px 24px 22px;
	max-width: 340px;
	box-shadow:
		0 1px 2px rgba(22, 33, 15, 0.05),
		0 14px 30px -18px rgba(0, 88, 15, 0.35);
	font-family: 'Inter', -apple-system, sans-serif;
}

/* ---------- Header: title + small accent tab (the signature detail) ---------- */

.hei-sm-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 6px;
}

.hei-sm-notch {
	flex: 0 0 auto;
	width: 6px;
	height: 28px;
	background: var(--green);
	border-radius: 1px;
}

.hei-sm-title {
	margin: 0;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* ---------- Top-level rail ---------- */

.hei-sm-list.hei-sm-top {
	list-style: none;
	margin: 16px 0 0;
	padding: 2px 0 2px 22px;
	position: relative;
}

.hei-sm-list.hei-sm-top::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--line);
}

.hei-sm-item {
	position: relative;
}

/* node marker on the rail */
.hei-sm-item::before {
	content: "";
	position: absolute;
	left: -17px;
	top: 17px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--line);
	transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.hei-sm-item:not(:last-child) > .hei-sm-link {
	border-bottom: 1px solid var(--line);
}

.hei-sm-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 500;
	padding: 12px 4px 12px 8px;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.hei-sm-label {
	flex: 1;
	order: 1;
}

.hei-sm-arrow {
	order: 2;
	margin-left: 10px;
	font-size: 16px;
	line-height: 1;
	color: var(--ink-soft);
	opacity: 0.5;
	transition: transform 0.18s ease, color 0.15s ease, opacity 0.15s ease;
}

.hei-sm-item:not(.has-children) .hei-sm-arrow {
	visibility: hidden;
}

/* ---------- Hover ---------- */

.hei-sm-item:hover::before {
	border-color: var(--green);
	background: var(--green-050);
}

.hei-sm-item:hover > .hei-sm-link {
	color: var(--green);
	padding-left: 12px;
}

.hei-sm-item:hover > .hei-sm-link .hei-sm-arrow {
	color: var(--green);
	opacity: 1;
}

/* ---------- Active page ---------- */

.hei-sm-item.active::before {
	border-color: var(--green);
	background: var(--green);
	box-shadow: 0 0 0 3px var(--green-soft);
}

.hei-sm-item.active > .hei-sm-link {
	color: var(--green);
	font-weight: 700;
}

.hei-sm-item.active > .hei-sm-link .hei-sm-arrow {
	color: var(--green);
	opacity: 1;
}

/* expand chevron rotation for open branches */
.hei-sm-item.has-children:hover > .hei-sm-link .hei-sm-arrow,
.hei-sm-item.has-children.open > .hei-sm-link .hei-sm-arrow,
.hei-sm-item.has-children.active > .hei-sm-link .hei-sm-arrow {
	transform: rotate(90deg);
}

/* ---------- Child rail (nested submenu) ---------- */

.hei-sm-submenu {
	list-style: none;
	margin: 2px 0 10px 0;
	padding: 0 0 2px 20px;
	position: relative;
}

.hei-sm-submenu::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 0;
	bottom: 4px;
	width: 1px;
	background: var(--line);
}

.hei-sm-submenu .hei-sm-item::before {
	width: 6px;
	height: 6px;
	left: -15px;
	top: 14px;
}

.hei-sm-submenu .hei-sm-item > .hei-sm-link {
	border-bottom: none;
	padding: 8px 4px 8px 6px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink-soft);
}

.hei-sm-submenu .hei-sm-item.active > .hei-sm-link,
.hei-sm-submenu .hei-sm-item:hover > .hei-sm-link {
	color: var(--green);
}

/* collapse / expand */
.hei-sm-item.has-children > .hei-sm-submenu {
	display: none;
}

.hei-sm-item.has-children:hover > .hei-sm-submenu,
.hei-sm-item.has-children.open > .hei-sm-submenu,
.hei-sm-item.has-children.active > .hei-sm-submenu {
	display: block;
}

/* ---------- Accessibility / responsiveness ---------- */

.hei-sm-link:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hei-sm-wrap * {
		transition: none !important;
	}
}

@media (max-width: 768px) {
	.hei-sm-wrap {
		max-width: 100%;
	}
}