/* Particle (chevron) footer background + logo cut out of the particles.
   The script draws into a <canvas> it inserts as the first child of the footer. */

.footer_wrap.terykon-footer {
	/* The script reads these 3 tokens (must be #hex). Set --terykon-bg to your footer background. */
	--terykon-orange: #e66000; /* cursor highlight */
	--terykon-bone: #f2eeed;   /* particle colour */
	--terykon-bg: #000000;     /* canvas background */

	isolation: isolate;        /* own stacking context so the canvas can sit behind the content */
	padding-top: 108px;
}

/* Canvas goes under all existing content without touching its positioning */
.footer_wrap.terykon-footer > canvas {
	z-index: -1 !important;
}

/* Logo: this <img> only defines the position/size of the logo.
   The script hides it (opacity 0) and cuts the logo out of the chevron grid.
   The block below also resets the old marquee/watermark styles (absolute position, opacity, fixed height, etc.). */
.footer_wrap.terykon-footer .terykon-footer__wordmark {
	position: relative;
	top: auto; right: auto; bottom: auto; left: auto;
	z-index: 1;
	display: flex;
	justify-content: center;
	width: auto;
	height: auto;
	max-height: none;
	margin: 0 0 82px;
	padding: 0 24px;
	overflow: visible;
	opacity: 1;
	transform: none;
	animation: none;
}
.footer_wrap.terykon-footer .terykon-footer__wordmark img {
	display: block;
	flex: none;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	opacity: 1; /* the script sets inline opacity:0 on it itself */
	animation: none;
	transform: none;
}

@media (max-width: 720px) {
	.footer_wrap.terykon-footer { padding-top: 64px; }
	.footer_wrap.terykon-footer .terykon-footer__wordmark { margin-bottom: 48px; }
}