/* ==========================================================================
   Tree Diagram Widget — Styles
   ========================================================================== */

.td-widget {
	--td-connector-color: #C9A84C;
	--td-connector-width: 2px;
	--td-animation-speed: 350ms;
	--td-gap: 20px;

	/* Column-centre positions for a 3-column layout with gaps.
	   col-width  = (100% - 2 * gap) / 3
	   col1-centre = col-width / 2 = (100% - 2 * gap) / 6
	   col3-centre = 100% - col1-centre                        */
	--td-col1-centre: calc((100% - 2 * var(--td-gap)) / 6);
	--td-col3-centre: calc(100% - (100% - 2 * var(--td-gap)) / 6);

	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-family: inherit;
	box-sizing: border-box;
}

.td-widget *,
.td-widget *::before,
.td-widget *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Root Node
   ========================================================================== */

.td-widget__root {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 2px solid var(--td-connector-color);
	border-radius: 8px;
	padding: 16px 32px;
	background: transparent;
	max-width: 100%;
}

.td-widget__root-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.td-widget__root-subtitle {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 4px;
}

/* ==========================================================================
   Trunk Connector (Root → Tiers)
   ========================================================================== */

.td-widget__trunk {
	width: var(--td-connector-width);
	height: 30px;
	background-color: var(--td-connector-color);
}

/* ==========================================================================
   Tiers Container (header row only)
   ========================================================================== */

.td-widget__tiers {
	display: flex;
	gap: var(--td-gap);
	width: 100%;
	position: relative;
}

/* Horizontal rail — spans from tier-1 centre to tier-3 centre only. */
.td-widget__tiers::before {
	content: '';
	position: absolute;
	top: 0;
	left: var(--td-col1-centre);
	right: var(--td-col1-centre);
	height: var(--td-connector-width);
	background-color: var(--td-connector-color);
}

/* ==========================================================================
   Tier (header wrapper — sits in the flex row)
   ========================================================================== */

.td-widget__tier {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Vertical stub from horizontal rail down to tier header. */
.td-widget__tier::before {
	content: '';
	width: var(--td-connector-width);
	height: 16px;
	background-color: var(--td-connector-color);
	align-self: center;
}

/* ==========================================================================
   Tier Header (clickable accordion trigger)
   ========================================================================== */

.td-widget__tier-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background-color: #1E5FA8;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	transition: box-shadow var(--td-animation-speed) ease-in-out;
	border: none;
	outline: none;
}

.td-widget__tier-header:focus-visible {
	outline: 2px solid var(--td-connector-color);
	outline-offset: 2px;
}

.td-widget__tier-text {
	flex: 1;
	min-width: 0;
}

.td-widget__tier-title {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
}

.td-widget__tier-subtitle {
	font-size: 13px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.4;
	margin-top: 2px;
	opacity: 0.85;
}

/* ==========================================================================
   Tier Toggle Arrow
   ========================================================================== */

.td-widget__tier-toggle {
	font-size: 12px;
	color: var(--td-connector-color);
	transition: transform var(--td-animation-speed) ease-in-out;
	flex-shrink: 0;
	line-height: 1;
}

.td-widget__tier--active .td-widget__tier-toggle {
	transform: rotate(180deg);
}

/* Active tier — highlighted header. */
.td-widget__tier--active .td-widget__tier-header {
	box-shadow: inset 0 0 0 2px var(--td-connector-color);
}

/* ==========================================================================
   Tier Content (collapsible — full-width, outside tiers row)
   ========================================================================== */

.td-widget__tier-content {
	width: 100%;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height var(--td-animation-speed) ease-in-out,
		opacity var(--td-animation-speed) ease-in-out;
}

.td-widget__tier-content--active {
	max-height: 3000px;
	opacity: 1;
}

/* ==========================================================================
   Branch Connector — drops from the ACTIVE TIER's column centre
   ========================================================================== */

.td-widget__branch {
	width: var(--td-connector-width);
	height: 24px;
	background-color: var(--td-connector-color);
}

[data-tier-index="0"] > .td-widget__branch {
	margin-left: var(--td-col1-centre);
	margin-right: auto;
}

[data-tier-index="1"] > .td-widget__branch {
	margin-left: auto;
	margin-right: auto;
}

[data-tier-index="2"] > .td-widget__branch {
	margin-left: auto;
	margin-right: var(--td-col1-centre);
}

/* ==========================================================================
   Children Grid — fixed 3-column layout matching tiers row
   ========================================================================== */

.td-widget__children {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--td-gap);
	position: relative;
	padding-top: 16px;
}

/* ---------- Horizontal rail across children ---------- */

.td-widget__children::before {
	content: '';
	position: absolute;
	top: 0;
	height: var(--td-connector-width);
	background-color: var(--td-connector-color);
}

/* 3 children (any tier): rail from col 1 → col 3 centre. */
[data-child-count="3"] > .td-widget__children::before {
	left: var(--td-col1-centre);
	right: var(--td-col1-centre);
}

/* 2 children — tier 0 (cols 1-2): col 1 → col 2 centre. */
[data-tier-index="0"][data-child-count="2"] > .td-widget__children::before {
	left: var(--td-col1-centre);
	right: 50%;
}

/* 2 children — tier 1 (cols 1-2): col 1 → col 2 centre. */
[data-tier-index="1"][data-child-count="2"] > .td-widget__children::before {
	left: var(--td-col1-centre);
	right: 50%;
}

/* 2 children — tier 2 (cols 2-3): col 2 → col 3 centre. */
[data-tier-index="2"][data-child-count="2"] > .td-widget__children::before {
	left: 50%;
	right: var(--td-col1-centre);
}

/* 1 child: no horizontal rail (straight vertical connection). */
[data-child-count="1"] > .td-widget__children::before {
	display: none;
}

/* ---------- Child column placement for < 3 children ---------- */

[data-tier-index="0"][data-child-count="1"] .td-widget__child { grid-column: 1; }
[data-tier-index="1"][data-child-count="1"] .td-widget__child { grid-column: 2; }
[data-tier-index="2"][data-child-count="1"] .td-widget__child { grid-column: 3; }

[data-tier-index="0"][data-child-count="2"] .td-widget__child:nth-child(1) { grid-column: 1; }
[data-tier-index="0"][data-child-count="2"] .td-widget__child:nth-child(2) { grid-column: 2; }

[data-tier-index="1"][data-child-count="2"] .td-widget__child:nth-child(1) { grid-column: 1; }
[data-tier-index="1"][data-child-count="2"] .td-widget__child:nth-child(2) { grid-column: 2; }

[data-tier-index="2"][data-child-count="2"] .td-widget__child:nth-child(1) { grid-column: 2; }
[data-tier-index="2"][data-child-count="2"] .td-widget__child:nth-child(2) { grid-column: 3; }

/* ==========================================================================
   Child Card
   ========================================================================== */

.td-widget__child {
	background-color: #1E5FA8;
	border-radius: 8px;
	padding: 20px;
	position: relative;
}

/* Vertical stub from horizontal rail to child card. */
.td-widget__child::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: var(--td-connector-width);
	height: 16px;
	background-color: var(--td-connector-color);
}

.td-widget__child-title {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
	margin-bottom: 8px;
}

.td-widget__child-body {
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.5;
	margin-bottom: 8px;
}

.td-widget__child-list {
	margin: 8px 0 0 0;
	padding-left: 24px;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.6;
}

.td-widget__child-list li {
	margin-bottom: 2px;
}

/* ==========================================================================
   Outcome — positioned in parent tier's column
   ========================================================================== */

.td-widget__outcome-branch {
	width: var(--td-connector-width);
	height: 24px;
	background-color: var(--td-connector-color);
}

/* Position outcome branch under the parent tier's column. */
[data-tier-index="0"] > .td-widget__outcome-branch {
	margin-left: var(--td-col1-centre);
	margin-right: auto;
}

[data-tier-index="1"] > .td-widget__outcome-branch {
	margin-left: auto;
	margin-right: auto;
}

[data-tier-index="2"] > .td-widget__outcome-branch {
	margin-left: auto;
	margin-right: var(--td-col1-centre);
}

/* Outcome row: 3-column grid matching children/tiers layout. */
.td-widget__outcome-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--td-gap);
}

/* Place outcome card in the parent tier's column. */
[data-tier-index="0"] > .td-widget__outcome-row > .td-widget__outcome { grid-column: 1; }
[data-tier-index="1"] > .td-widget__outcome-row > .td-widget__outcome { grid-column: 2; }
[data-tier-index="2"] > .td-widget__outcome-row > .td-widget__outcome { grid-column: 3; }

.td-widget__outcome {
	background-color: #1E5FA8;
	border-radius: 8px;
	padding: 16px 24px;
	text-align: center;
}

.td-widget__outcome-text {
	font-size: 14px;
	color: #ffffff;
	line-height: 1.5;
}

/* ==========================================================================
   Responsive — Tablet (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	.td-widget__children {
		grid-template-columns: repeat(2, 1fr);
	}

	.td-widget__children .td-widget__child {
		grid-column: auto !important;
	}

	.td-widget__branch {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.td-widget__children::before,
	.td-widget__child::before {
		display: none;
	}

	.td-widget__outcome-row {
		grid-template-columns: 1fr;
	}

	.td-widget__outcome-row .td-widget__outcome {
		grid-column: auto !important;
	}

	.td-widget__outcome-branch {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ==========================================================================
   Responsive — Mobile (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
	.td-widget__tiers {
		flex-direction: column;
		gap: 0;
	}

	.td-widget__tiers::before {
		display: none;
	}

	.td-widget__tier::before {
		height: 20px;
	}

	.td-widget__tier:first-child::before {
		height: 16px;
	}

	.td-widget__children {
		grid-template-columns: 1fr;
	}

	.td-widget__children .td-widget__child {
		grid-column: auto !important;
	}

	.td-widget__branch {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.td-widget__children::before,
	.td-widget__child::before {
		display: none;
	}

	.td-widget__outcome-row {
		grid-template-columns: 1fr;
	}

	.td-widget__outcome-row .td-widget__outcome {
		grid-column: auto !important;
	}

	.td-widget__outcome-branch {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}