/* ── AVANT Indispensable Section ──────────────────────────────────────────── */

.avind {
	--avind-cyan:   #00C6FF;
	--avind-teal:   #003B4C;
	--avind-bg:     #000;

	background: var(--avind-bg);
	color: #fff;
	overflow: hidden;

	/*
	 * isolation: isolate creates a stacking context without a z-index offset.
	 * This means all child z-indices (.avind-svg--bg, .avind-swoop, .avind-svg--a,
	 * .avind-svg--lines, .avind-label) are resolved within this single context,
	 * allowing the swoop images to be layered between the BG and Lines SVGs.
	 */
	isolation: isolate;
}

/* ── Swoops ───────────────────────────────────────────────────────────────── */
/*
 * The swoop images include empty black space on the side nearest the graphic.
 * object-fit + object-position crops that out; max-height limits the crop zone.
 * Negative margins pull the radial up/down so it overlaps the remaining black
 * fringe of each swoop image, keeping them visually flush with the diagram.
 */

.avind-swoop {
	width: 100%;
	line-height: 0;
	overflow: hidden;
	position: relative;
	z-index: 2;            /* above BG SVG (1), below A/Lines SVGs (3/4) */
}

.avind-swoop img {
	display: block;
	width: 70%;
	height: auto;
	margin: 0 auto;
}

.avind-swoop--top {
	margin-bottom: max(-22vw, -175px); /* scales with viewport, capped for ultrawide */
}

.avind-swoop--top img {
	max-height: 30vw;
	object-fit: cover;
	object-position: top center;   /* show streaks, clip empty bottom */
}

.avind-swoop--bottom {
	margin-top: max(-22vw, -175px); /* scales with viewport, capped for ultrawide */
}

.avind-swoop--bottom img {
	max-height: 30vw;
	object-fit: cover;
	object-position: bottom center; /* show streaks, clip empty top */
}

/* ── Radial wrapper ───────────────────────────────────────────────────────── */

.avind-radial {
	position: relative;
	/* No z-index here — intentional. Without z-index, .avind-radial does NOT
	   create its own stacking context, so its children (.avind-svg--bg, --a,
	   --lines, .avind-label) participate in .avind's shared stacking context
	   and their z-indices are directly comparable to .avind-swoop's z-index. */
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
}

/* Aspect-ratio box matching the 780×720 SVG viewBox */
.avind-svg-stack {
	position: relative;
	width: 100%;
	padding-bottom: 92.31%;        /* 720 ÷ 780 × 100 */
}

.avind-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Explicit stacking order within .avind's isolation context */
.avind-svg--bg    { z-index: 1; }   /* black fill + grid: behind everything   */
/* .avind-swoop      z-index: 2  — see above: swoops sit between bg and shapes */
.avind-svg--a     { z-index: 3; }   /* A shape: above swoops                  */
.avind-svg--lines { z-index: 4; }   /* spoke lines: above A shape             */
/* .avind-label      z-index: 10 — see below: labels always on top             */

/* ── Radial label buttons ─────────────────────────────────────────────────── */

/*
 * Override aggressively — many themes add background/box-shadow on button:hover.
 * Use !important on the box-model properties only; colour transitions stay clean.
 */
.avind-label {
	position: absolute;
	z-index: 10;

	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;

	cursor: pointer;
	padding: 0.3em 0.5em;

	font-family: inherit;
	font-size: clamp(0.55rem, 1vw, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: normal;           /* allow wrapping */
	text-align: center;
	max-width: 8em;                /* ~8 characters wide before wrapping */
	line-height: 1.3;

	color: rgba(0, 198, 255, 0.72);
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.avind-label:hover,
.avind-label:focus-visible {
	color: #fff;
	text-shadow:
		0 0 6px  rgba(0, 198, 255, 0.9),
		0 0 18px rgba(0, 198, 255, 0.45);
}

.avind-label[aria-expanded="true"],
.avind-label.is-active {
	color: #fff;
	text-shadow:
		0 0 8px  rgba(0, 198, 255, 1),
		0 0 24px rgba(0, 198, 255, 0.6);
}

/* ──────────────────────────────────────────────────────────────────────────
   Label positions + per-direction transforms.

   Each spoke-tip coordinate is taken from the Lines SVG (780×720, y −6 offset).
   The transform nudges the label text so it sits BEYOND the tip (away from
   centre) rather than being centred on it, preventing overlap with the line.
   ────────────────────────────────────────────────────────────────────────── */

/*
 * Positions extend the spoke-tip vectors ~15% further from centre (50%, 50%)
 * so the label text clears the end of each line segment.
 * The per-label transform then anchors the text block so its nearest edge
 * points outward (away from the diagram) rather than being centred on the tip.
 */

/* Upper-left — text floats above the tip */
.avind-label--uncover {
	left: 38.3%; top: 24.3%;
	transform: translate(-65%, -100%);
}

/* Upper-right — mirror */
.avind-label--provide {
	left: 61.9%; top: 24.4%;
	transform: translate(-35%, -100%);
}

/* Pure right — text extends rightward from tip */
.avind-label--reinforce {
	left: 76.4%; top: 43.8%;
	transform: translate(0, -50%);
}

/* Lower-right */
.avind-label--deliver {
	left: 71.3%; top: 67.7%;
	transform: translate(-10%, 4px);
}

/* Straight down — centred below tip */
.avind-label--enable {
	left: 49.9%; top: 75.9%;
	transform: translate(-50%, 0);
}

/* Lower-left — mirror of deliver */
.avind-label--architect {
	left: 28.7%; top: 67.7%;
	transform: translate(-90%, 4px);
}

/* Pure left — text extends leftward from tip */
.avind-label--guide {
	left: 23.4%; top: 43.7%;
	transform: translate(-100%, -50%);
}

/* ── Detail Modal ─────────────────────────────────────────────────────────── */

.avind-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.avind-modal[hidden] {
	display: none;
}

.avind-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	cursor: pointer;
}

.avind-modal__box {
	position: relative;
	z-index: 1;
	background: #000 var(--avind-modal-bg) center center / cover no-repeat;
	border: 2px solid #fff;
	border-radius: 15px;
	padding: 2.5rem 2.5rem 2rem;
	max-width: 580px;
	width: 100%;
	color: #fff !important;
	text-align: center;
	max-height: 85vh;
	overflow-y: auto;
	animation: avind-fade-up 0.25s ease;
}

/* Force white on all theme-generated content inside the modal */
.avind-modal__box p,
.avind-modal__box li,
.avind-modal__box span,
.avind-modal__box div,
.avind-modal__box a:not(.avind-panel__cta) {
	color: #fff !important;
}

.avind-modal__close {
	position: absolute;
	top: 0.9rem;
	right: 1rem;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.15em 0.35em;
	transition: color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.avind-modal__close:hover {
	color: #fff;
}

.avind-modal__title {
	margin: 0 0 0.6rem;
	padding-right: 2rem;               /* clear the close button */
	text-align: center;
}

.avind-modal__body {
	text-align: center;
}

.avind-modal__cta {
	margin-top: 1.25rem;
	text-align: center;
}

/* ── Shared panel typography (used inside modal and mobile accordion) ─────── */

.avind-panel__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--avind-cyan);
}

.avind-panel__body {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.75;
}

.avind-panel__body p { margin: 0 0 0.75em; }
.avind-panel__body p:last-child { margin-bottom: 0; }

.avind-panel__cta {
	display: inline-block;
	padding: 0.55em 1.5em;
	border: 1.5px solid var(--avind-cyan);
	color: var(--avind-cyan);
	background: transparent;
	text-decoration: none;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.avind-panel__cta:hover {
	background: var(--avind-cyan);
	color: #000;
}

/* ── Mobile Accordion ────────────────────────────────────────────────────── */

.avind-accordion {
	display: none;
	border-top: 1px solid rgba(0, 198, 255, 0.2);
}

.avind-acc-item {
	border-bottom: 1px solid rgba(0, 198, 255, 0.2);
}

.avind-acc-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;

	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	text-align: left;

	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(0, 198, 255, 0.78);
	transition: color 0.2s ease;
}

.avind-acc-trigger:hover,
.avind-acc-trigger[aria-expanded="true"] {
	color: #fff;
}

/* Plus / minus icon */
.avind-acc-trigger__icon {
	position: relative;
	flex-shrink: 0;
	width: 0.9rem;
	height: 0.9rem;
}

.avind-acc-trigger__icon::before,
.avind-acc-trigger__icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.avind-acc-trigger__icon::before {   /* horizontal bar */
	top: 50%; left: 0;
	width: 100%; height: 1.5px;
	transform: translateY(-50%);
}

.avind-acc-trigger__icon::after {    /* vertical bar — collapses when open */
	top: 0; left: 50%;
	width: 1.5px; height: 100%;
	transform: translateX(-50%);
}

.avind-acc-trigger[aria-expanded="true"] .avind-acc-trigger__icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

.avind-acc-panel[hidden] {
	display: none;
}

.avind-acc-panel {
	padding: 0.25rem 1.25rem 1.5rem;
	animation: avind-fade-up 0.25s ease;
}

.avind-acc-cta {
	margin-top: 1rem;
	text-align: left;
}

/* Force white on all theme-generated content inside accordion panels */
.avind-acc-panel,
.avind-acc-panel p,
.avind-acc-panel li,
.avind-acc-panel span,
.avind-acc-panel div,
.avind-acc-panel a:not(.avind-panel__cta) {
	color: #fff !important;
}

/* ── Animation ───────────────────────────────────────────────────────────── */

@keyframes avind-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive breakpoint ───────────────────────────────────────────────── */

@media (max-width: 768px) {
	.avind-radial {
		display: none;
	}

	.avind-accordion {
		display: block;
	}

	/* On mobile the radial is hidden, which leaves both swoops adjacent.
	   Flexbox order moves the bottom swoop after the accordion so the
	   layout reads: top swoop → accordion content → bottom swoop. */
	.avind {
		display: flex;
		flex-direction: column;
	}

	.avind-swoop--top    { order: 1; margin-bottom: 0; }
	.avind-radial        { order: 2; display: none; }
	.avind-accordion     { order: 3; display: block; }
	.avind-swoop--bottom { order: 4; margin-top: 0; }
}