/*
 * org-chart.v5.css
 * Additive layer on top of org-chart.v4.css.
 * Never overwrites v4 rules — only extends them.
 * Requires: org-chart.v4.css (enqueued as dependency)
 *
 * Adds:
 *   1. node_color CSS variable support  — card stripe + mobile color stripe
 *   2. Side branch layout               — side-left / side-right
 *   3. Vertical-list children layout    — children_layout: "vertical-list"
 *   4. Extended branch                  — branch_display: "extended"
 */

/* ── 1. Custom node_color variable ────────────────────────────────────────
 *
 * PHP sets style="--node-color:#xxxxxx" on every card.
 * This rule overrides the static .color--* class declarations in v4.css
 * and applies the custom colour to the top stripe.
 *
 * Specificity: .org-chart .org-chart__card = 0,2,0
 * v4 colour class: .org-chart__card.color--blue = 0,2,0
 * Equal specificity → last-loaded wins → v5 wins. ✓
 */
.org-chart .org-chart__card {
	border-top-color: var(--node-color, #9ca3af);
}

/* ── 2. Side branch layout ─────────────────────────────────────────────── */

/*
 * .org-node-frame wraps the left column, main node, and right column in
 * a flex row. PHP only emits this wrapper when side children exist.
 * width: max-content prevents the frame from collapsing under the parent.
 */
.org-node-frame {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 32px;
	width: max-content;
}

/*
 * Side columns stack their items vertically.
 * No border used — connectors are handled purely via ::after pseudo-elements.
 */
.org-side-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.org-side-column--left {
	align-items: flex-end; /* right-align cards toward the main node */
}

.org-side-column--right {
	align-items: flex-start; /* left-align cards toward the main node */
}

/*
 * Each side item needs position:relative so the horizontal connector
 * pseudo-element can be positioned relative to its card.
 */
.org-side-item {
	position: relative;
}

/*
 * Horizontal connector: left side item → main node.
 *
 * The gap between .org-side-column--left and .org-node is 32px
 * (set via gap: 32px on .org-node-frame).
 *
 * ::after extends rightward from the item's right edge across the 32px gap,
 * exactly reaching the left edge of the main node.
 *
 * right: -32px  → right edge of ::after is 32px past the item's right edge
 * width: 32px   → left edge of ::after is at the item's right edge
 * Together they span the entire gap between side column and main node. ✓
 */
.org-side-column--left .org-side-item::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -32px;
	transform: translateY(-50%);
	width: 32px;
	height: var(--org-line-weight);
	background: var(--org-line-color);
}

/*
 * Horizontal connector: right side item ← main node.
 * Mirror of the left connector.
 */
.org-side-column--right .org-side-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: -32px;
	transform: translateY(-50%);
	width: 32px;
	height: var(--org-line-weight);
	background: var(--org-line-color);
}

/*
 * Vertical spine connecting multiple side items in the same column.
 * Drawn as a border on the connecting edge of each column.
 * Spans full column height (from top of first item to bottom of last).
 * For a single side item the spine is just as tall as that one card.
 */
.org-side-column--left {
	border-right: var(--org-line-weight) var(--org-line-style) var(--org-line-color);
	padding-right: 0; /* border sits at the column's right edge */
}

.org-side-column--right {
	border-left: var(--org-line-weight) var(--org-line-style) var(--org-line-color);
	padding-left: 0;
}

/* ── 3. Vertical-list children ──────────────────────────────────────────── */

/*
 * children_layout: "vertical-list" on a node sets this class on its
 * .org-children container. Children stack vertically with no horizontal bar.
 *
 * PHP inserts explicit .org-connector-vert elements between branches,
 * so the inter-item spacing and connectors are handled in markup.
 */
.org-children--vertical {
	flex-direction: column;
	border-top: none;         /* no horizontal bar */
	padding-top: 0;           /* no gap above first child */
	padding-inline: 0;        /* no side padding */
	align-items: center;
	gap: 0;
}

/*
 * Suppress the absolute ::before connector stubs for vertical-list branches.
 * Those stubs are designed to fill the padding-top gap of a horizontal
 * .org-children, which does not exist in vertical mode.
 * Connectors are provided by explicit .org-connector-vert elements in PHP.
 */
.org-children--vertical > .org-branch::before {
	display: none;
}

/* ── 4. Extended branch ─────────────────────────────────────────────────── */

/*
 * branch_display: "extended" on a node shifts it down within its siblings'
 * horizontal row and extends the ::before connector stub to match.
 *
 * padding-top: 24px  → shifts the card down by one connector-vert unit
 * ::before height/top → extended to bridge the extra distance to the bar
 *
 * Only affects horizontal mode. In vertical-list mode the ::before is
 * suppressed (see rule above), so extended nodes render normally there.
 */
.org-branch--extended {
	padding-top: 24px;
}

.org-branch--extended::before {
	height: 48px;  /* double the normal 24px */
	top: -48px;    /* normal: -24px */
}

/* ── 5. Mobile: node_color for accordion colour stripe ──────────────────
 *
 * PHP sets style="--node-color:#xxxxxx" on every .accordion-item / <details>.
 * These rules override the static .color--* class declarations in v4.css.
 *
 * Specificity:
 *   v4: .accordion-item.color--blue > .accordion-header = 0,3,0
 *   v5: .org-chart--mobile .accordion-item > .accordion-header = 0,3,0
 * Equal specificity → last-loaded wins → v5 wins. ✓
 *
 * CSS custom properties cascade from the parent element (.accordion-item)
 * down to the child (.accordion-header), so --node-color is inherited. ✓
 */
@media (max-width: 768px) {
	.org-chart--mobile .accordion-item > .accordion-header {
		border-inline-start-color: var(--node-color, #9ca3af);
	}

	.org-chart--mobile .accordion-item--depth-0 > .accordion-header {
		border-bottom-color: var(--node-color, #9ca3af);
	}
}

/* ── 6. Print / PDF ─────────────────────────────────────────────────────
 *
 * Side branch layout and custom colours are part of the desktop render
 * path, which render_print_page() uses. No extra rules needed beyond
 * ensuring the custom-property stripe colour survives print.
 *
 * print-color-adjust is already set on .org-chart__card in org-chart-print.css.
 * The --node-color variable resolves at paint time, so it is preserved
 * automatically when the browser renders the print stylesheet.
 */