/* =========================================================
   INNER PAGE — Interactive Sitemap — [veic_sitemap]
   VEIC 2027 (Vellore Endocrinology International Congress)
   -------------------------------------------------------
   Renders the site's Primary Navigation menu as a collapsible vertical
   flowchart/tree: a single "Home" root node at the top, connected by
   lines down to its branches (the top-level nav items) stacked one
   below the other, each expandable into its own children/grandchildren
   the same way, indented one step further per level.

   Contained: .veic-sitemap-wrapper is a bounded, scrollable canvas
   (fixed max-height + overflow: auto) rather than a plain block that
   grows with content — a long, fully-expanded chart scrolls inside its
   own box instead of stretching the page and running under the footer.

   All selectors are scoped under .veic-sitemap-* so nothing here leaks
   into or collides with the rest of the site's global link/list styles.
   ========================================================= */

.veic-sitemap-container {
	--veic-sm-level1-border: var(--veic-primary, #0A2E73);
	--veic-sm-level1-bg: #eef3fb;
	--veic-sm-level2-border: var(--veic-secondary, #1E88E5);
	--veic-sm-level2-bg: #eaf4fe;
	--veic-sm-level3-border: var(--veic-accent, #00C8FF);
	--veic-sm-level3-text: var(--veic-primary, #0A2E73);
	--veic-sm-level3-bg: #eafcff;
	/* Home root node colours */
	--veic-sm-home-bg: var(--veic-primary, #0A2E73);
	--veic-sm-home-text: #ffffff;
	--veic-sm-home-border: var(--veic-primary, #0A2E73);

	--veic-sm-line-color: #b7c3d6;
	--veic-sm-submenu-indent: 2.75rem;
	--veic-sm-vertical-spacing: 16px;

	font-family: 'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	width: 100%;
	padding: 30px;
	background: #fff;
	box-sizing: border-box;
}
.veic-sitemap-container *,
.veic-sitemap-container *::before,
.veic-sitemap-container *::after {
	box-sizing: border-box;
}

.veic-sitemap-header {
	border-bottom: 3px solid #f0f0f0;
	margin-bottom: 24px;
	padding-bottom: 15px;
}
.veic-sitemap-header h2 {
	color: var(--veic-primary, #0A2E73);
	font-weight: 700;
	margin: 0 0 6px;
}
.veic-sitemap-header p {
	color: var(--veic-text, #222222);
	margin: 0;
}

/* ---- Bounded canvas: this is what keeps the chart "inside the page"
   no matter how many branches get expanded — it scrolls internally
   instead of growing the document height under the footer. ---- */
.veic-sitemap-wrapper {
	position: relative;
	max-height: fit-content;
	overflow: auto;
	border: 1px solid #e5e9f0;
	border-radius: 12px;
	background: var(--veic-bg, #F5F8FD);
	padding: 28px 24px;
}

.veic-sitemap-loading-status {
	padding: 40px;
	text-align: center;
	color: #8a93a3;
	font-style: italic;
}

/* =========================================================
   VERTICAL TREE / FLOWCHART
   ========================================================= */
.veic-sitemap-tree,
.veic-sitemap-tree ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
	position: relative;
}

/* The "shift" for each nested level */
.veic-sitemap-tree ul {
	padding-left: var(--veic-sm-submenu-indent) !important;
	margin-top: 6px !important;
}

.veic-sitemap-tree li {
	margin: 0 !important;
	padding: var(--veic-sm-vertical-spacing) 0 var(--veic-sm-vertical-spacing) 40px !important;
	position: relative;
}

/* Vertical trunk line connecting a node to its siblings */
.veic-sitemap-tree li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-left: 2px solid var(--veic-sm-line-color);
	height: 100%;
}
.veic-sitemap-tree li:last-child::before {
	height: 30px; /* stop the trunk line at the last sibling's own branch */
}

/* Horizontal dash connecting the trunk to the node */
.veic-sitemap-tree li::after {
	content: "";
	position: absolute;
	top: 30px;
	left: 0;
	border-top: 2px dashed var(--veic-sm-line-color);
	width: 32px;
}

/* The Home root sits at the very top of the chart — no incoming line,
   nothing to connect it to. */
#veic-sitemap-root {
	padding-left: 0 !important;
}
#veic-sitemap-root > li {
	padding: 0 0 var(--veic-sm-vertical-spacing) 0 !important;
}
#veic-sitemap-root > li::before,
#veic-sitemap-root > li::after {
	display: none;
}

/* --- Node buttons --- */
.veic-sitemap-node {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 22px !important;
	border-radius: 10px !important;
	border: 2px solid var(--veic-sm-level1-border) !important;
	font-weight: 600 !important;
	background: var(--veic-sm-level1-bg) !important;
	color: var(--veic-sm-level1-border) !important;
	text-decoration: none !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	cursor: pointer;
}
.veic-sitemap-node:hover {
	background-color: #fff !important;
	transform: translateX(6px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Home root node */
.veic-sitemap-node.veic-sitemap-home-node {
	background: var(--veic-sm-home-bg) !important;
	color: var(--veic-sm-home-text) !important;
	border-color: var(--veic-sm-home-border) !important;
}
.veic-sitemap-node.veic-sitemap-home-node:hover {
	background: var(--veic-secondary, #1E88E5) !important;
	color: #fff !important;
}

/* Level 2 / level 3 colour coding (matches nesting depth) */
.veic-sitemap-tree ul ul .veic-sitemap-node:not(.veic-sitemap-home-node) {
	border-color: var(--veic-sm-level2-border) !important;
	color: var(--veic-sm-level2-border) !important;
	background: var(--veic-sm-level2-bg) !important;
}
.veic-sitemap-tree ul ul ul .veic-sitemap-node:not(.veic-sitemap-home-node) {
	border-color: var(--veic-sm-level3-border) !important;
	color: var(--veic-sm-level3-text) !important;
	background: var(--veic-sm-level3-bg) !important;
}

/* Expand/collapse caret — only shown on nodes that have children */
.veic-sitemap-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	transition: transform 0.25s ease;
}
.veic-sitemap-has-children.veic-sitemap-expanded > .veic-sitemap-node .veic-sitemap-toggle {
	transform: rotate(90deg);
}

/* Children list — hidden until expanded */
.veic-sitemap-has-children > ul {
	display: none;
}
.veic-sitemap-has-children.veic-sitemap-expanded > ul {
	display: block;
	animation: veicSitemapSlideInStretch 0.3s ease-out;
}

@keyframes veicSitemapSlideInStretch {
	from { opacity: 0; transform: translateX(-12px); }
	to { opacity: 1; transform: translateX(0); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 600px) {
	.veic-sitemap-container { --veic-sm-submenu-indent: 1.25rem; }
	.veic-sitemap-wrapper { padding: 20px 14px; max-height: 65vh; }
	.veic-sitemap-tree li { padding-left: 28px !important; }
	.veic-sitemap-node { padding: 10px 14px !important; font-size: 0.9rem; white-space: normal; }
}