/* ==========================================================================
   Block „Lucyris Network Graph" (lucyris/network-graph)

   Gilt im Frontend und im Editor. Farben kommen aus den Theme-Tokens, mit
   Rueckfallwerten fuer Kontexte ohne Global Styles.

   Anpassbar ueber Custom Properties:
     --lxng-linie      Farbe der Kanten
     --lxng-schrift    Farbe der Beschriftungen
     --lxng-staerke    Strichstaerke der Kanten
   ========================================================================== */

.wp-block-lucyris-network-graph {
	--lxng-linie:   var(--wp--preset--color--custom-lucyris-red, #ba202e);
	--lxng-schrift: var(--wp--preset--color--custom-marketing-textfarbe, #1b2f4b);
	--lxng-staerke: 4;

	margin-inline: auto;
}

.lxng-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.lxng-edge {
	fill: none;
	stroke: var(--lxng-linie);
	stroke-width: var(--lxng-staerke);
	stroke-linecap: round;
}

.lxng-label {
	fill: var(--lxng-schrift);
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 25px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	/* Die Kanten laufen unter den Beschriftungen durch. paint-order legt die
	   Kontur vor die Fuellung, dadurch bleibt der Text lesbar. */
	paint-order: stroke;
	stroke: var(--wp--preset--color--base-2, #fff);
	stroke-width: 8;
	stroke-linejoin: round;
}

.lxng-label--zentrum {
	font-size: 28px;
}

.lxng-labels a {
	text-decoration: none;
}

.lxng-labels a:hover .lxng-label,
.lxng-labels a:focus-visible .lxng-label {
	fill: var(--lxng-linie);
}

@media (max-width: 781px) {
	.lxng-label { font-size: 30px; }
	.lxng-label--zentrum { font-size: 34px; }
	.lxng-edge { stroke-width: 6; }
}

/* --- Seitenleiste im Editor ---------------------------------------------- */

.lxng-knotenfeld {
	padding: 12px;
	margin-bottom: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
}

.lxng-knotenfeld__kopf {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 8px;
}

.lxng-knotenfeld__nummer {
	flex: 1;
	font-weight: 600;
	color: #757575;
}

.lxng-knoten-neu {
	width: 100%;
	justify-content: center;
}