/**
 * Huazotl — decorative scallop edge for the desktop links bar.
 * Render-only: Playground remains owner of navigation data and palette.
 */

@media (min-width: 62rem) {
	.wapu-nav-shell .wapu-nav-row {
		position: relative;
		isolation: isolate;
		overflow: visible;
		--huazotl-nav-wave-size: 24px;
		--huazotl-nav-wave-depth: 12px;
		--huazotl-nav-wave-bg: var(--wapu-nav-row-bg, var(--wapu-header-bar-bg, var(--wtds-surface)));
	}

	/* White/default navigation surface. */
	.wapu-nav-shell--bar-white .wapu-nav-row {
		--huazotl-nav-wave-bg: var(--wtds-surface, #fff);
	}

	/* Dark / primary / header-custom surfaces inherit the same bar color. */
	.wapu-nav-shell--bar-black .wapu-nav-row,
	.wapu-nav-shell--bar-primary .wapu-nav-row,
	.wapu-nav-shell--bar-custom .wapu-nav-row {
		--huazotl-nav-wave-bg: var(--wapu-header-bar-bg, var(--wtds-surface));
	}

	/* A dedicated nav-row palette from Playground must remain authoritative. */
	.wapu-nav-shell .wapu-nav-row.wapu-nav-row--tone-custom {
		--huazotl-nav-wave-bg: var(--wapu-nav-row-bg, var(--wapu-header-bar-bg, var(--wtds-surface)));
	}

	.wapu-nav-shell .wapu-nav-row::after {
		content: "";
		position: absolute;
		z-index: 0;
		left: 0;
		right: 0;
		bottom: calc(-1 * var(--huazotl-nav-wave-depth));
		height: var(--huazotl-nav-wave-depth);
		pointer-events: none;
		background:
			radial-gradient(
				circle at calc(var(--huazotl-nav-wave-size) / 2) 0,
				var(--huazotl-nav-wave-bg) 0 calc(var(--huazotl-nav-wave-size) / 2),
				transparent calc((var(--huazotl-nav-wave-size) / 2) + .5px)
			)
			0 0 / var(--huazotl-nav-wave-size) var(--huazotl-nav-wave-depth) repeat-x;
	}

	/* Keep interactive navigation content and mega panels above the decoration. */
	.wapu-nav-shell .wapu-nav-row__cell {
		position: relative;
		z-index: 1;
	}

	/* Full-width mega panels must anchor to the nav row, not their trigger. */
	.wapu-nav-shell .wapu-nav-row__cell.has-mega-panel {
		position: static;
	}
}