/* Artuozo WP Tree Menu — frontend */

.awtm {
	--awtm-branch: #7a5230;
	--awtm-w: 3px;
	--awtm-node-bg: #fff;
	--awtm-node-text: #2b2118;
	--awtm-leaf: #5fa052;
	--awtm-hl: #ffe08a;
	--awtm-hl-text: #2b2118;

	/* Масштаб раскладки: JS уменьшает его (1 → 0.18), пока дерево не поместится в ширину. */
	--awtm-s: 1;

	--awtm-gap: calc(22px * var(--awtm-s));
	--awtm-hgap: calc(8px * var(--awtm-s));
	--awtm-vgap: calc(72px * var(--awtm-s));
	--awtm-spgap: calc(26px * var(--awtm-s));   /* расстояние между супругами (там знак брака) */
	--awtm-nh: calc(44px * var(--awtm-s));
	--awtm-node-max: calc(240px * var(--awtm-s));
	--awtm-node-min: calc(92px * var(--awtm-s));
	--awtm-fs: calc(0.95rem * var(--awtm-s));
	--awtm-pad-y: calc(8px * var(--awtm-s));
	--awtm-pad-x: calc(12px * var(--awtm-s));
	--awtm-bw: max(1px, calc(2px * var(--awtm-s)));
	--awtm-vg: var(--awtm-vgap);

	/* Вертикальный список (масштаб там всегда 1) */
	--awtm-indent: 32px;
	--awtm-anchor: 14px;
	--awtm-sp: 10px;
	--awtm-lw: var(--awtm-w);

	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	padding: 0;
	overflow-x: hidden;
	overflow-x: clip; /* гарантия: горизонтального скролла страницы не будет */
	font-size: 16px;
	line-height: 1.3;
}

.awtm--flowchart { --awtm-vg: calc(var(--awtm-gap) * 2); }

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

.awtm .awtm__inner {
	position: relative;
	width: 100%;
	padding: 6px 8px;
	isolation: isolate;
}

.awtm .awtm__list,
.awtm .awtm__item {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

.awtm .awtm__item::marker { content: ""; }

.awtm .awtm__list { position: relative; }

/* ---------- Пара (человек + супруги) ---------- */

.awtm .awtm__unit {
	display: flex;
	align-items: center;
	gap: var(--awtm-spgap);
}

/* ---------- Блок (человек) и карточка при наведении ---------- */

.awtm .awtm__node,
.awtm .awtm__card {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: var(--awtm-node-min);
	min-height: var(--awtm-nh);
	padding: var(--awtm-pad-y) var(--awtm-pad-x);
	background: var(--awtm-node-bg);
	color: var(--awtm-node-text);
	border: var(--awtm-bw) solid var(--awtm-branch);
	border-radius: calc(10px * var(--awtm-s));
	box-shadow: inset 0 calc(4px * var(--awtm-s)) 0 0 var(--awtm-accent, transparent), 0 1px 3px rgba(0, 0, 0, 0.14);
	font-size: var(--awtm-fs);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
}

.awtm .awtm__node {
	position: relative;
	z-index: 2;
	max-width: min(100%, var(--awtm-node-max));
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.awtm .awtm__title { font-weight: 600; }
.awtm .awtm__desc  { margin-top: 2px; font-size: 0.82em; opacity: 0.72; }

.awtm .awtm__node.awtm-male,   .awtm .awtm__card.awtm-male   { --awtm-accent: #4f8fd6; }
.awtm .awtm__node.awtm-female, .awtm .awtm__card.awtm-female { --awtm-accent: #d9709b; }

.awtm a.awtm__node:focus-visible {
	outline: 3px solid var(--awtm-leaf);
	outline-offset: 2px;
}

/* лёгкий подъём при наведении, когда увеличение выключено */
.awtm:not(.awtm--zoom) a.awtm__node:hover {
	color: var(--awtm-node-text);
	transform: translateY(-2px);
	box-shadow: inset 0 calc(4px * var(--awtm-s)) 0 0 var(--awtm-accent, transparent), 0 6px 14px rgba(0, 0, 0, 0.2);
}

.awtm-notice {
	padding: 10px 14px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
}

/* ---------- Портрет: виден только в карточке при наведении ---------- */

.awtm .awtm__node .awtm__portrait { display: none; }

.awtm .awtm__card .awtm__portrait {
	display: block;
	width: 6.5em;
	height: 8em;
	margin: 0.45em 0 0.3em;
	overflow: hidden;
	border-radius: 0.5em;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.awtm .awtm__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Карточка — увеличенная копия блока поверх дерева (вёрстка при этом не «прыгает») */
.awtm .awtm__card {
	position: absolute;
	z-index: 60;
	margin: 0;
	max-width: min(100%, var(--awtm-node-max));
	pointer-events: none;
	box-shadow: inset 0 calc(4px * var(--awtm-s)) 0 0 var(--awtm-accent, transparent), 0 10px 26px rgba(0, 0, 0, 0.32);
	animation: awtm-cardin 0.14s ease-out;
}

@keyframes awtm-cardin { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Активный пункт ---------- */

.awtm--hl-color .awtm__node--current,
.awtm--hl-color .awtm__card.awtm__node--current {
	background: var(--awtm-hl);
	color: var(--awtm-hl-text);
	outline: max(1px, calc(2px * var(--awtm-s))) solid var(--awtm-branch);
	outline-offset: max(1px, calc(2px * var(--awtm-s)));
}

.awtm--hl-size .awtm__node--current { transform: scale(1.18); z-index: 5; }
.awtm--hl-size:not(.awtm--zoom) a.awtm__node--current:hover { transform: scale(1.18) translateY(-2px); }

/* ================================================================
   НАПРАВЛЕНИЯ «сверху вниз» и «снизу вверх» (линии рисует SVG из frontend.js)
   ================================================================ */

.awtm:not(.awtm--stacked):not(.awtm--radial) .awtm__list {
	display: flex;
	justify-content: center;
}

.awtm:not(.awtm--stacked):not(.awtm--radial) .awtm__item {
	display: flex;
	align-items: center;
	padding: 0 var(--awtm-hgap);
	min-width: 0;
}

.awtm--dir-down:not(.awtm--stacked):not(.awtm--radial) .awtm__list { align-items: flex-start; }
.awtm--dir-down:not(.awtm--stacked):not(.awtm--radial) .awtm__item { flex-direction: column; }
.awtm--dir-down:not(.awtm--stacked):not(.awtm--radial) .awtm__list--sub { margin-top: var(--awtm-vg); }

.awtm--dir-up:not(.awtm--stacked):not(.awtm--radial) .awtm__list { align-items: flex-end; }
.awtm--dir-up:not(.awtm--stacked):not(.awtm--radial) .awtm__item { flex-direction: column-reverse; }
.awtm--dir-up:not(.awtm--stacked):not(.awtm--radial) .awtm__list--sub { margin-bottom: var(--awtm-vg); }

/* ================================================================
   «ОТ ЦЕНТРА ПО КРУГУ» — блоки расставляет frontend.js
   ================================================================ */

.awtm--radial .awtm__list,
.awtm--radial .awtm__item {
	position: static;
	display: block;
}

.awtm--radial .awtm__unit {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
}

.awtm--radial .awtm__unit--col { flex-direction: column; }
.awtm--radial .awtm__node { max-width: var(--awtm-node-max); }

/* ================================================================
   ВЕРТИКАЛЬНЫЙ РЕЖИМ — только для узких экранов (телефоны)
   ================================================================ */

.awtm--stacked .awtm__list { display: block; }
.awtm--stacked .awtm__list--sub { padding-left: var(--awtm-indent); }

.awtm--stacked .awtm__item {
	position: relative;
	padding-top: var(--awtm-sp);
}

.awtm--stacked .awtm__list--root > .awtm__item:first-child { padding-top: 0; }

.awtm--stacked .awtm__unit {
	flex-wrap: wrap;
	gap: 6px 10px;
}

.awtm--stacked .awtm__node--main { order: -1; }
.awtm--stacked .awtm__node--spouse .awtm__title::before { content: "\26AD\00a0"; opacity: 0.7; }

.awtm--stacked .awtm__node {
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	text-align: left;
	overflow-wrap: anywhere;
}

.awtm--flowchart.awtm--stacked .awtm__list--sub > .awtm__item::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--awtm-anchor) - var(--awtm-indent) - var(--awtm-lw) / 2);
	border-left: var(--awtm-lw) solid var(--awtm-branch);
}

.awtm--flowchart.awtm--stacked .awtm__list--sub > .awtm__item:last-child::after {
	bottom: auto;
	height: calc(var(--awtm-sp) + var(--awtm-nh) / 2 + var(--awtm-lw) / 2);
}

.awtm--flowchart.awtm--stacked .awtm__list--sub > .awtm__item::before {
	content: "";
	position: absolute;
	top: calc(var(--awtm-sp) + var(--awtm-nh) / 2 - var(--awtm-lw) / 2);
	left: calc(var(--awtm-anchor) - var(--awtm-indent));
	width: calc(var(--awtm-indent) - var(--awtm-anchor));
	border-top: var(--awtm-lw) solid var(--awtm-branch);
}

/* ================================================================
   ЛИНИИ, ВЕТВИ И ЛИСТЬЯ (SVG)
   ================================================================ */

.awtm__svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
}

.awtm__svg .awtm__branch { fill: var(--awtm-branch); }
.awtm__svg .awtm__limb   { fill: none; stroke: var(--awtm-branch); stroke-linecap: round; stroke-linejoin: round; }
.awtm__svg .awtm__ring   { fill: none; stroke: var(--awtm-branch); }
.awtm__svg .awtm__leaf   { fill: var(--awtm-leaf); stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.03px; }
.awtm__svg .awtm__ground { fill: var(--awtm-branch); opacity: 0.16; }
.awtm__svg .awtm__grow   { stroke-dasharray: 1 2; stroke-dashoffset: 0; }

.awtm--tree .awtm__node,
.awtm--tree .awtm__card {
	border-color: var(--awtm-leaf);
	border-radius: calc(16px * var(--awtm-s)) calc(5px * var(--awtm-s)) calc(16px * var(--awtm-s)) calc(5px * var(--awtm-s));
}

.awtm--tree.awtm--stacked .awtm__node { border-radius: 16px 5px 16px 5px; }

/* место под ствол и крону */
.awtm--tree.awtm--dir-up:not(.awtm--stacked):not(.awtm--radial) .awtm__inner {
	padding: max(16px, calc(34px * var(--awtm-s))) 8px max(40px, calc(100px * var(--awtm-s)));
}

.awtm--tree.awtm--dir-down:not(.awtm--stacked):not(.awtm--radial) .awtm__inner {
	padding: max(40px, calc(100px * var(--awtm-s))) 8px max(16px, calc(34px * var(--awtm-s)));
}

.awtm--radial .awtm__inner { padding: 8px; }

.awtm--tree.awtm--stacked { --awtm-indent: 38px; --awtm-sp: 16px; }

/* ================================================================
   АНИМАЦИЯ РОСТА (только реалистичное дерево)
   ================================================================ */

@keyframes awtm-pop    { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes awtm-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes awtm-leaf   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes awtm-fade   { from { opacity: 0; } to { opacity: 0.16; } }
@keyframes awtm-fadein { from { opacity: 0; } to { opacity: 1; } }

.awtm--anim-pre .awtm__svg { visibility: hidden; }
.awtm--anim-pre .awtm__node { opacity: 0; }
.awtm--anim-pre .awtm__grow { stroke-dashoffset: 1; }

.awtm--anim-run .awtm__node {
	animation: awtm-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
	animation-delay: var(--awtm-nd, 0s);
}

.awtm--anim-run .awtm__grow {
	animation: awtm-draw var(--awtm-bdur, 0.6s) ease-in-out both;
	animation-delay: var(--awtm-bd, 0s);
}

.awtm--anim-run .awtm__leaf,
.awtm--anim-run .awtm__ring {
	transform-origin: 0 0;
	animation: awtm-leaf 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
	animation-delay: var(--awtm-ld, 0s);
}

.awtm--anim-run .awtm__fade {
	animation: awtm-fadein 0.4s ease-out both;
	animation-delay: var(--awtm-ld, 0s);
}

.awtm--anim-run .awtm__ground { animation: awtm-fade 0.8s ease-out both; }

/* ---------- Мобильные ---------- */

@media (max-width: 480px) {
	.awtm { --awtm-indent: 24px; --awtm-anchor: 10px; --awtm-node-min: calc(84px * var(--awtm-s)); }
	.awtm.awtm--tree.awtm--stacked { --awtm-indent: 30px; }
	.awtm.awtm--stacked .awtm__node { padding: 7px 10px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.awtm .awtm__node { transition: none; }
	.awtm .awtm__card { animation: none; }
	.awtm:not(.awtm--zoom) a.awtm__node:hover { transform: none; }
}