/*
 * Struktur Organisasi - org chart with connector lines, desktop tree /
 * mobile stacked-branch layouts. Page-specific (loaded only on that page,
 * see functions.php) since it's a big block used nowhere else.
 * Classes are prefixed .orgchart- so they can't collide with anything else.
 */
.orgchart {
	--primary-blue: #157cbd;
	--primary-gold: #d9bb27;
	--text-dark: #2c3e50;
	--line-color: #cbd5e1;
	--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
	--card-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	color: var(--text-dark);
	padding: 20px 10px 40px;
	overflow-x: auto;
}

.orgchart-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	width: 280px;
	display: inline-block;
	color: var(--text-dark);
	box-shadow: var(--card-shadow);
	transition: transform .3s cubic-bezier(.25, .8, .25, 1), box-shadow .3s ease, border-color .3s ease;
	border-top: 4px solid var(--primary-blue);
}
.orgchart-card:hover { transform: translateY(-5px); box-shadow: var(--card-hover); border-top-color: var(--primary-gold); }

.orgchart-role { font-size: .85rem; font-weight: 700; color: var(--primary-blue); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; display: block; }
.orgchart-name { font-size: 1.1rem; font-weight: 700; color: #333; line-height: 1.4; }

.orgchart-level-1 { background: linear-gradient(135deg, #157cbd 0%, #10669c 100%); border: none; width: 320px; }
.orgchart-level-1 .orgchart-role,
.orgchart-level-1 .orgchart-name { color: #fff; }
.orgchart-level-1 .orgchart-role { opacity: .9; }

.orgchart-level-2 { border-top-color: var(--primary-gold); background: #fffdf5; }
.orgchart-level-2 .orgchart-role { color: var(--primary-blue); }

.orgchart-multi .orgchart-person { border-bottom: 1px solid #eee; padding-bottom: 6px; margin-bottom: 6px; }
.orgchart-multi .orgchart-person:last-child { border: none; padding: 0; margin: 0; }

/* Desktop: horizontal tree with connector lines */
@media (min-width: 901px) {
	.orgchart-tree { display: flex; justify-content: center; }
	.orgchart-tree ul { padding-top: 20px; position: relative; display: flex; justify-content: center; }
	.orgchart-tree li { text-align: center; list-style-type: none; position: relative; padding: 20px 10px 0; }
	.orgchart-tree li::before,
	.orgchart-tree li::after { content: ""; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--line-color); width: 50%; height: 20px; z-index: -1; }
	.orgchart-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--line-color); }
	.orgchart-tree li:only-child::after,
	.orgchart-tree li:only-child::before { display: none; }
	.orgchart-tree li:only-child { padding-top: 0; }
	.orgchart-tree li:first-child::before,
	.orgchart-tree li:last-child::after { border: 0 none; }
	.orgchart-tree li:last-child::before { border-right: 2px solid var(--line-color); border-radius: 0 5px 0 0; }
	.orgchart-tree li:first-child::after { border-radius: 5px 0 0 0; }
	.orgchart-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--line-color); width: 0; height: 20px; z-index: -1; }
}

/* Mobile: stacked hierarchical list, indentation instead of a horizontal tree */
@media (max-width: 900px) {
	.orgchart-tree ul { padding-left: 0; }
	.orgchart-tree > ul { display: flex; flex-direction: column; align-items: center; }
	.orgchart-tree > ul > li { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 20px; }
	.orgchart-tree > ul > li > ul { display: flex; flex-direction: column; align-items: center; padding-top: 20px; width: 100%; position: relative; }
	.orgchart-tree > ul > li > ul::before { content: ""; position: absolute; top: 0; height: 20px; left: 50%; border-left: 2px solid var(--line-color); width: 0; }
	.orgchart-tree > ul > li > ul > li { display: flex; flex-direction: column; align-items: center; width: 100%; }

	.orgchart-branch {
		display: flex; flex-direction: column; align-items: flex-start !important;
		width: 95%; max-width: 400px; margin: 0 auto; padding-top: 20px; position: relative;
	}
	.orgchart-branch::before { content: ""; position: absolute; top: 0; bottom: 30px; left: 10px; border-left: 2px solid var(--line-color); width: 0; }
	.orgchart-branch > li { display: flex; flex-direction: column; align-items: flex-start !important; padding-left: 40px; width: 100%; position: relative; margin-bottom: 25px; }
	.orgchart-branch > li::before { content: ""; position: absolute; top: 38px; left: 10px; width: 30px; border-top: 2px solid var(--line-color); }

	.orgchart-subbranch {
		display: flex; flex-direction: column; width: 100%; padding-left: 0; margin-top: 10px; position: relative;
		border-left: 2px solid var(--line-color); margin-left: -15px;
	}
	.orgchart-subbranch > li { display: flex; flex-direction: column; padding-left: 25px; margin-bottom: 15px; position: relative; }
	.orgchart-subbranch > li::before { content: ""; position: absolute; top: 35px; left: 0; width: 25px; border-top: 2px solid var(--line-color); }

	.orgchart-tree .orgchart-card { width: 100% !important; max-width: 100%; }
	.orgchart-tree li::before,
	.orgchart-tree li::after { display: none !important; }
}