/* UKConnect — Amazon Leo landing page overrides
   Scoped to body.ukc-amazon-leo
   ============================================================ */

@scope (.ukc-amazon-leo) {

	* {
		text-wrap: pretty;
	}

	#header.new-design .header-right {
		display: none;
	}

	.video-block.hero-bg video {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	.page-banner-coming-soon {
		background-color: #DE6923;
		position: fixed;
		top: 60px;
		right: 60px;
		z-index: 9999;
		height: 40px;
		color: white;
		text-transform: uppercase;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 500px;
		transform: translate(50%, -50%) rotate(45deg);

		@media (width <= 1560px) {
			top: auto;
			bottom: 60px;
			transform: translate(50%, 50%) rotate(-45deg);
		}

	}
	@media (width <= 1560px) {
		.footer-bottom .row {
			flex-direction: column;
		}
		.footer-bottom .col-md-5 {
			order: 2;
		}

		ul#footer-menu-bottom-new {
			justify-content: flex-start !important;
		}

		.footer.new-design {
			padding-bottom: 120px;
		}
	}

	.container {
		max-width: 1380px;
	}

	.custom-heading-3 {
		font-size: 36px;
		font-weight: normal;
	}

	.scroll-prompt {
		position: absolute;
		left: 50%;
		bottom: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transform: translateX(-50%);
		gap: 20px;
		font-weight: 600;
		font-size: 1.2rem;
		@media (width <= 600px) and (height <= 720px) {
			display: none;
		}
	}

	.feature-board {
		overflow: hidden;
		padding: 48px;
		
		min-height: 600px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: start;
		background-color: #111111;
		background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
		background-image: var(--bg-gradient),
			var(--background-image, url('https://placehold.co/1600x900/111/444?text=Feature+Board'));

		--bg-gradient: linear-gradient(
			to right,
			rgba(0, 0, 0, 0.80) 0%,
			rgba(0, 0, 0, 0.60) 50%,
			rgba(0, 0, 0, 0.80) 100%
		);

		@media (width > 768px) {
			padding: 128px;
			--bg-gradient: linear-gradient(
				to right,
				rgba(0, 0, 0, 0.80) 0%,
				rgba(0, 0, 0, 0.60) 40%,
				rgba(0, 0, 0, 0.0) 70%
			);
		}

		p {
			max-width: 60ch;
			font-size: 20px;
            font-weight: 600;
            margin-top: 12px;
		}


		position: relative;

		& .feature-board-background {
			position: absolute;
			inset: 0;
			z-index: 0;
			&:after {
				content: '';
				position: absolute;
				inset: 0;
				background-image: var(--bg-gradient);
			}

			& img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				opacity: 0;

				&:first-child {
					opacity: 1;
				}
			}
		}

		& .feature-board-content {
			position: relative;
			z-index: 2;
		}
	}

	.checklist {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
		padding: 2rem;
		container: checklist / inline-size;

		& .checklist-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.75rem;
			color: #fff;
			font-size: 22px;
			flex: 0 0 min(220px, 100%);
			@container (width <= 1280px) {
				flex: 0 0 30%;
			}
			@container (width <= 800px) {
				flex: 0 0 45%;
			}
			@container (width <= 640px) {
				flex: 0 0 100%;
			}
            text-align: center;

			/* &::before {
				content: '';
				display: block;
				width: 50px;
				height: 37px;
				background-image: url("data:image/svg+xml,%3Csvg width='50' height='37' viewBox='0 0 50 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.0934 0.609066C46.9077 -0.203761 48.2299 -0.203515 49.0448 0.612768C49.8081 1.37807 49.8534 2.58851 49.1831 3.40736L49.0393 3.56599L16.4448 36.0736C16.0538 36.4633 15.5229 36.6843 14.9709 36.6843C14.9528 36.6843 14.9447 36.6826 14.9379 36.6824H14.9267C14.3591 36.6705 13.821 36.4272 13.4362 36.0092L0.55164 22.0177C-0.229132 21.1694 -0.174431 19.8488 0.673378 19.0682C1.52245 18.2873 2.8422 18.3424 3.62288 19.19L14.7035 31.2224L15.0355 31.5839L15.3842 31.2371L46.0915 0.610917L46.0934 0.609066Z' fill='%23DE6923'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-size: contain;
				margin: 32px;
			} */
			&::before {
				content: '';
				display: block;
				width: 48px;
				height: 48px;
				background-color: #DE6923;
				border-radius: 50%;
				background-image: url("data:image/svg+xml,%3Csvg width='50' height='37' viewBox='0 0 50 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.0934 0.609066C46.9077 -0.203761 48.2299 -0.203515 49.0448 0.612768C49.8081 1.37807 49.8534 2.58851 49.1831 3.40736L49.0393 3.56599L16.4448 36.0736C16.0538 36.4633 15.5229 36.6843 14.9709 36.6843C14.9528 36.6843 14.9447 36.6826 14.9379 36.6824H14.9267C14.3591 36.6705 13.821 36.4272 13.4362 36.0092L0.55164 22.0177C-0.229132 21.1694 -0.174431 19.8488 0.673378 19.0682C1.52245 18.2873 2.8422 18.3424 3.62288 19.19L14.7035 31.2224L15.0355 31.5839L15.3842 31.2371L46.0915 0.610917L46.0934 0.609066Z' fill='white'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-size: 60%;
				background-position: center;
				margin: 32px;
			}
		}
	}

	.section.hero {
		height: 100dvh;
		@media (min-width: 1161px) {
			.h1, .title-xxl, h1 {
				font-size: 80px;
			}
		}
		@media (height <= 800px) {
			.h1, .title-xxl, h1 {
				font-size: calc(40px + (100vw - 576px) / 584 * 20);
			}
		}
		.button {
			background-color: #8A56C5;
			border-color: #8A56C5;
			&:hover {
				background-color: #6B3D9A;
				border-color: #6B3D9A;
			}
		}
	}

	&:has(#wpadminbar) {
		.section.hero {
			height: calc(100dvh - var(--wp-adminbar-height, 32px) + 1px);
		}
		#header {
			top: var(--wp-adminbar-height, 32px);
		}
	}
	@media (max-width: 992px) {
		:has(#wpadminbar) #header.new-design .header-menu__inner {
			padding-top: calc(110px + var(--wp-adminbar-height, 32px));
		}
	}

	.button.button-green {
		background-color: #8A56C5;
		border-color: #8A56C5;
		&:hover {
			background-color: #6B3D9A;
			border-color: #6B3D9A;
		}
	}


	.custom-section-a {
		background-image: url('https://www.ukconnect.com/wp-content/uploads/2026/06/new-bg.jpg');
		background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    	background-color: #0e0d16;
		color: white;
		padding-block: 256px;

		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	.custom-section-b {
    	background-color: #15141C;
		color: white;
		padding-block: 256px 128px;
 
		display: flex;
		flex-direction: column;
		gap: 48px;
	}
	.custom-section-c {
    	background-color: #15141C;
		color: white;
		padding-block: 128px 256px;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	@media (width < 1024px) {
		.custom-section-a {
			padding-block: 128px;
		}

		.custom-section-b {
			padding-block: 128px 64px;
		}

		.custom-section-c {
			padding-block: 64px 128px;
		}
	}


	.faq-block {
		background-position: top center;
		.container {
			max-width: 800px;
		}
	}

	.process-chain {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		gap: 64px 20px;
		margin: 0;
		padding: 0;
		margin-top: 64px;
		container: process-chain / inline-size;
		
		@media (width < 768px) {
			gap: 48px;
			/* text-align: center; */
		}

		.process-item {
			flex: 0 1 min(320px, 100%);
			
			@container (width <= 1689px) {
				flex: 0 0 30%;
			}
			@container (width <= 1150px) {
				flex: 0 0 45%;
			}
			@container (width <= 900px) {
				flex: 0 0 100%;

				display: grid;
				grid-template-columns: auto 1fr;
				grid-template-rows: auto auto;
				gap:  4px 16px;

				.process-item__icon {
					grid-row: 1 / 3;
					grid-column: 1 / 2;
				}
				
				.process-item__title {
					grid-row: 1 / 2;
					grid-column: 2 / 3;
				}
				.process-item__text {
					grid-row: 2 / 3;
					grid-column: 2 / 3;
				}

			}

			& .process-item__number {
				display: none;
			}

			& .process-item__icon img {
				width: 4rem;
				height: auto;
				filter: brightness(0) saturate(100%) invert(41%) sepia(98%) saturate(655%) hue-rotate(355deg) brightness(103%) contrast(101%);
				margin-bottom: 32px;
			}

			& .process-item__title {
				font-size: 28px;
				margin-bottom: 0.5rem;
				color: #fff;
			}

			& .process-item__text {
				font-size: 1.125rem;
				line-height: 1.5;
				color: #fff;
			}
		}
	}


	.content-form-v2#content-form-v2 .content-form-wrapper {
		flex-direction: column;
        scroll-margin-top: 96px;
	}

	._form-content {
		color: initial;
	}

}