/*
 * org-chart.v4.css
 * Visual refinement layer — built on top of the v3 layout and connector logic.
 *
 * Changes from v3:
 *   - CSS custom properties for easy future tuning
 *   - Softer, thinner connector lines (1.5px, semi-transparent colour)
 *   - Subtle chart background (#f8fafc)
 *   - Refined card: softer shadow, thin all-round border, 12px radius, 3px stripe
 *   - Gentler hover lift
 *   - All layout, hierarchy, single-child connector logic unchanged from v3
 *
 * To customise the look without editing this file, override the custom
 * properties on .org-chart in your theme or a child stylesheet.
 */

/* ── CSS custom properties ──────────────────────────────────────────────── */
/*
 * Scoped to .org-chart so nothing bleeds into the surrounding page.
 * All connector and card values reference these variables.
 */
.org-chart {
	--org-line-color:  rgba(100, 116, 139, 0.55);
	--org-line-style:  solid;
	--org-line-weight: 1.5px;
	--org-card-radius: 12px;
	--org-card-shadow: 0 2px 8px rgba(15, 23, 42, 0.06),
	                   0 1px 2px rgba(15, 23, 42, 0.04);
	--org-card-border: 1px solid rgba(226, 232, 240, 0.85);
	--org-card-stripe: 3px;
	--org-bg:          #f8fafc;
	--org-card-bg:     #ffffff;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
.org-chart,
.org-chart * {
	box-sizing: border-box;
}

.org-chart-error {
	color: #b91c1c;
}

/* ── Desktop layout ─────────────────────────────────────────────────────── */

/*
 * Subtle background + rounded corners frame the chart as a self-contained
 * section on the page. overflow-x: auto kept for wide trees.
 */
.org-chart--desktop {
	width: 100%;
	overflow-x: auto;
	padding: 40px 20px;
	text-align: center;
	background: var(--org-bg);
	border-radius: 16px;
}

.org-chart--desktop > .org-node {
	margin: 0 auto;
}

/* gap: 0 — vertical rhythm carried by connector element heights */
.org-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	gap: 0;
}

.org-children-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	gap: 0;
}

/* ── Connectors ─────────────────────────────────────────────────────────── */

/*
 * Vertical connector from parent card down to the horizontal bar.
 * 2px → 1.5px; hard #94a3b8 → semi-transparent rgba.
 * Hierarchy remains clearly readable at this weight.
 */
.org-connector-vert {
	width: var(--org-line-weight);
	height: 24px;
	background: var(--org-line-color);
	flex-shrink: 0;
	margin: 0 auto;
}

/*
 * Children row — connector bar and layout.
 * display: inline-flex + width: fit-content confines border-top to the
 * actual children group width (v2/v3 fix, preserved here).
 */
.org-children {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 32px 24px;
	width: fit-content;
	max-width: min(1400px, calc(100vw - 80px));
	margin: 0 auto;
	border-top: var(--org-line-weight) var(--org-line-style) var(--org-line-color);
	padding-top: 24px;
	padding-inline: 20px;
	position: relative;
}

/*
 * Single-child connector fix (v3):
 * No horizontal bar when a parent has exactly one child.
 * The org-connector-vert + org-branch::before form an unbroken 48px
 * vertical line instead.
 */
.org-children--single {
	border-top: none;
	padding-inline: 0;
}

/*
 * Branch — position: relative for the absolute ::before stub.
 */
.org-branch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
}

/*
 * Vertical stub from horizontal bar down to the child card.
 * Matches weight and colour of the other connector elements.
 */
.org-branch::before {
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
	transform: translateX(-50%);
	width: var(--org-line-weight);
	height: 24px;
	background: var(--org-line-color);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

/*
 * Refinements from v3:
 *   border-radius: 14px → 12px (--org-card-radius)
 *   box-shadow: heavy single layer → two-layer softer (--org-card-shadow)
 *   border: none → subtle all-round 1px border (--org-card-border)
 *   border-top stripe: 4px → 3px (--org-card-stripe)
 *   hover lift: translateY(-4px) → translateY(-3px) — gentler
 *
 * The all-round border adds depth without competing with the colour stripe.
 * border-top must be declared AFTER border to override the shorthand.
 */
.org-chart__card {
	background: var(--org-card-bg);
	border-radius: var(--org-card-radius);
	box-shadow: var(--org-card-shadow);
	border: var(--org-card-border);
	border-top: var(--org-card-stripe) solid #9ca3af;
	width: 190px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	overflow: hidden;
	cursor: pointer;
}

.org-chart__card:hover {
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.11),
	            0 2px 4px  rgba(15, 23, 42, 0.06);
	transform: translateY(-3px);
}

.org-chart__card.color--blue   { border-top-color: #3b82f6; }
.org-chart__card.color--green  { border-top-color: #10b981; }
.org-chart__card.color--orange { border-top-color: #f59e0b; }
.org-chart__card.color--red    { border-top-color: #ef4444; }
.org-chart__card.color--gray   { border-top-color: #9ca3af; }

/* Reduced top padding when no avatar */
.card__content {
	padding: 10px 14px 14px;
}

.org-chart__card.has-avatar .card__content {
	padding-top: 16px;
}

/*
 * Circular avatar.
 * Double-class specificity beats WordPress theme rules like
 * "img { max-width:100%; height:auto }".
 */
.org-chart__card .card__image {
	display: block;
	width: 56px;
	height: 56px;
	max-width: 56px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 10px;
	flex-shrink: 0;
}

.card__title {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
	color: #1f2937;
}

.card__person {
	margin: 0 0 3px;
	font-size: 13px;
	color: #374151;
}

.card__role {
	margin: 0 0 6px;
	font-size: 11px;
	color: #6b7280;
}

.card__description {
	margin: 0 0 8px;
	font-size: 11px;
	color: #4b5563;
	line-height: 1.45;
}

.card__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #e5e7eb;
	font-size: 11px;
}

.contact-link {
	color: #2563eb;
	text-decoration: none;
	word-break: break-word;
}

.contact-link:hover {
	text-decoration: underline;
}

/* ── Responsive breakpoints ─────────────────────────────────────────────── */

@media (min-width: 769px) {
	.org-chart--mobile {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.org-chart__card {
		width: 160px;
	}

	.org-chart__card .card__image {
		width: 44px;
		height: 44px;
		max-width: 44px;
	}

	.card__title {
		font-size: 12px;
	}
}

@media (max-width: 768px) {
	.org-chart--desktop {
		display: none !important;
	}

	/* Mobile accordion color indicators — identical to v3 */
	.accordion-item.color--blue   > .accordion-header { border-inline-start: 4px solid #3b82f6; }
	.accordion-item.color--green  > .accordion-header { border-inline-start: 4px solid #10b981; }
	.accordion-item.color--orange > .accordion-header { border-inline-start: 4px solid #f59e0b; }
	.accordion-item.color--red    > .accordion-header { border-inline-start: 4px solid #ef4444; }
	.accordion-item.color--gray   > .accordion-header { border-inline-start: 4px solid #9ca3af; }

	.accordion-item--depth-0.color--blue   > .accordion-header { border-bottom-color: #3b82f6; }
	.accordion-item--depth-0.color--green  > .accordion-header { border-bottom-color: #10b981; }
	.accordion-item--depth-0.color--orange > .accordion-header { border-bottom-color: #f59e0b; }
	.accordion-item--depth-0.color--red    > .accordion-header { border-bottom-color: #ef4444; }
	.accordion-item--depth-0.color--gray   > .accordion-header { border-bottom-color: #9ca3af; }

	/* Static (non-expandable) accordion items */
	.accordion-item--static {
		border-bottom: 1px solid #e5e7eb;
	}

	.accordion-header--static {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px;
		background: white;
		cursor: default;
		width: 100%;
	}

	.accordion-item--static.accordion-item--depth-1 > .accordion-header--static {
		padding-inline-start: 30px;
	}
	.accordion-item--static.accordion-item--depth-2 > .accordion-header--static {
		padding-inline-start: 60px;
	}
}