/*
 * ===========
 * Footer
 * ===========
 */


.footer-section {
	.about {
		padding-bottom: var(--space-200);

		@media( max-width: 499px )  {
			text-align: center;
		}
		@media( min-width: 1000px )  {
			padding: 0 var(--space-100);
		}

		.description {
			p {
				font-size: var(--small);
				margin-bottom: var(--space-25);
			}
		}
	}

	.foot {

		nav {
			padding-top: var(--space-50);

			ol, ul {
				list-style: none;

				li {
					margin: 0;
					margin-bottom: var(--space-min);
				}
			}
		}
		.social-link {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: calc(var(--p)*2.75);
			height: calc(var(--p)*2.75);
			background-color: var(--hue-primary);
			
			i {
				display: inline-block;
				font-size: var(--h4);
				color: var(--hue-light);
			}
		}
	}
}


/* -- Sticky CTA -- */
.sticky-cta-section {
	pointer-events: none;
	position: sticky;
	z-index: 900;
	bottom: var(--space-50);
	left: 0;
	width: 100%;
	text-align: center;

	@media( min-width: 500px ) {
		bottom: 0;
		width: auto;
		text-align: right;
	}

	.sticky-cta {
		pointer-events: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: content-box;
		padding: var(--small);
		width: var(--container-width);
		overflow: clip;
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		border-radius: calc((var(--p) * 3) + (var(--small) * 2));
		background: color-mix(in srgb, var(--hue-light) 25%, transparent);
		box-shadow: 0 0 var(--border-width)  color-mix(in srgb, var(--hue-primary) 75%, transparent),
		0 var(--border-width) calc(var(--space-min)/1) color-mix(in srgb, var(--hue-primary) 25%, transparent);

		@media( min-width: 500px ) {
			width: auto;
			gap: var(--space-25);
			margin-right: calc(var(--column-unit) - var(--space-25));
		}

		.button	{
			padding: 0 calc(var(--small) * 1);
			color: var(--hue-primary);
			background: color-mix(in srgb, var(--hue-light) 75%, transparent);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);
			border-radius: 0;
			font-size: var(--small);
			font-weight: 600;
			letter-spacing: 0;

			display: inline-flex;
			flex-grow: 1;
			align-items: center;
			justify-content: center;
			gap: calc(var(--small) / 2);

			@media( min-width: 500px ) {
				width: var(--space-100);
				height: var(--space-100);

				border-radius: 50%;

				span {
					border: 0;
					clip: rect(0 0 0 0);
					height: 1px;
					margin: -1px;
					overflow: hidden;
					padding: 0;
					position: absolute;
					width: 1px;
				}
			}

			i { transform: scale(1.25); }

			* { pointer-events: none; }
		}

		@media( max-width: 499px ) {
			:first-child {
				border-top-left-radius: calc(var(--p) * 3);
				border-bottom-left-radius: calc(var(--p) * 3);
			}

			:last-child {
				border-top-right-radius: calc(var(--p) * 3);
				border-bottom-right-radius: calc(var(--p) * 3);
			}
		}
	}
}