/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

:root {
	--gw-color-green: #0c9847;
	--gw-color-blue: #0d1c37;
}

/* ProximaNova Font Declarations */
@font-face {
	font-style: normal;
	font-weight: 100;
	src: url("fonts/ProximaNova/ProximaNova-Thin.ttf") format("truetype");
	font-family: "ProximaNova";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 400;
	src: url("fonts/ProximaNova/ProximaNova-Regular.ttf") format("truetype");
	font-family: "ProximaNova";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 600;
	src: url("fonts/ProximaNova/ProximaNova-Semibold.ttf") format("truetype");
	font-family: "ProximaNova";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 700;
	src: url("fonts/ProximaNova/ProximaNova-Bold.ttf") format("truetype");
	font-family: "ProximaNova";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 900;
	src: url("fonts/ProximaNova/ProximaNova-Black.ttf") format("truetype");
	font-family: "ProximaNova";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 600;
	src: url("fonts/ProximaNova/ProximaNova-CondensedSemibold.ttf")
		format("truetype");
	font-family: "ProximaNova Condensed";
	font-display: swap;
}

/* Anybody Font Declarations */
/* AnybodyVariable.ttf */
/* AnybodyItalicVariable.ttf */

@font-face {
	font-style: normal;
	src: url("fonts/Anybody/AnybodyVariable.ttf") format("truetype");
	font-family: "AnybodyVariable";
	font-display: swap;
}

@font-face {
	font-style: italic;
	src: url("fonts/Anybody/AnybodyItalicVariable.ttf") format("truetype");
	font-family: "AnybodyVariable";
	font-display: swap;
}

/* ----------------------------------------------------------------------------
 * Sfondo animato: due SVG sovrapposti, animazioni articolate con variabili CSS
 * translateX, rotate e scale con timing indipendenti
 * ---------------------------------------------------------------------------- */

/* Registrazione proprietà per interpolazione fluida nelle keyframes */
@property --uncode-bg-x {
	syntax: "<length-percentage>";
	initial-value: 0%;
	inherits: false;
}
@property --uncode-bg-rotate {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@property --uncode-bg-scale {
	syntax: "<number>";
	initial-value: 1;
	inherits: false;
}

.uncode-animated-bg {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.35;
	z-index: -1;
	width: 250vw;
	height: 250vh;
	overflow: hidden;
	pointer-events: none;
}

.uncode-animated-bg__layer {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
}

.uncode-animated-bg__layer img {
	--uncode-bg-x: 0%;
	--uncode-bg-rotate: 0deg;
	--uncode-bg-scale: 1;
	transform: translateX(var(--uncode-bg-x)) rotate(var(--uncode-bg-rotate))
		scale(var(--uncode-bg-scale));
	opacity: 1;
	width: auto;
	min-width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
}

/* Layer 1: tre animazioni con durate diverse (X più lenta, rotate media, scale più veloce) */
.uncode-animated-bg__layer--1 img {
	--timing-global: 300s;
	animation:
		uncode-bg-x-1 calc(var(--timing-global) + 5s) linear infinite alternate,
		uncode-bg-rotate-1 calc(var(--timing-global) + 3s) linear infinite alternate,
		uncode-bg-scale-1 calc(var(--timing-global) * 4s) linear infinite alternate;
}

/* Layer 2: stessi assi ma direzioni/timing diversi per effetto disaccoppiato */
.uncode-animated-bg__layer--2 img {
	--timing-global: 320s;
	animation:
		uncode-bg-x-2 calc(var(--timing-global) + 8s) linear infinite alternate,
		uncode-bg-rotate-2 calc(var(--timing-global) + 12s) linear infinite
			alternate,
		uncode-bg-scale-2 calc(var(--timing-global) + 4s) linear infinite alternate;
}

/* --- Layer 1: translateX, rotate, scale (timing propri) --- */
@keyframes uncode-bg-x-1 {
	from {
		--uncode-bg-x: -25%;
	}
	to {
		--uncode-bg-x: 25%;
	}
}
@keyframes uncode-bg-rotate-1 {
	from {
		--uncode-bg-rotate: -180deg;
	}
	to {
		--uncode-bg-rotate: 180deg;
	}
}
@keyframes uncode-bg-scale-1 {
	from {
		--uncode-bg-scale: 0.8;
	}
	to {
		--uncode-bg-scale: 1;
	}
}

/* --- Layer 2: direzioni opposte su X e rotate, scale in controfase --- */
@keyframes uncode-bg-x-2 {
	from {
		--uncode-bg-x: 25%;
	}
	to {
		--uncode-bg-x: -25%;
	}
}
@keyframes uncode-bg-rotate-2 {
	from {
		--uncode-bg-rotate: 180deg;
	}
	to {
		--uncode-bg-rotate: -180deg;
	}
}
@keyframes uncode-bg-scale-2 {
	from {
		--uncode-bg-scale: 1;
	}
	to {
		--uncode-bg-scale: 0.9;
	}
}

/* Assicura che il contenuto resti sopra lo sfondo */
body.has-animated-bg .main-wrapper,
body.has-animated-bg #main,
body.has-animated-bg .content-wrapper {
	position: relative;
	z-index: 1;
}

.body-borders {
	position: fixed;
	z-index: 1000000;
	inset: clamp(0.5rem, 2vw, 1rem);
	box-shadow: 0 0 0 2rem var(--gw-color-blue);
	border: 1px solid var(--gw-color-green);
	border-radius: 10px;
	pointer-events: none;
}
.menu-wrapper {
	.menu-container {
		top: clamp(9px, 2vw, 17px) !important;
	}
}
.menu-borders.needs-after::after {
	box-shadow: 0 1px 0 0 var(--gw-color-blue);
}
@media (max-width: 959px) {
	.menu-container .logo-container {
		padding: 0px !important;
	}
}
.row-menu-inner {
	padding-right: 18px !important;
	padding-left: 18px !important;

	.main-menu-container {
		width: auto !important;
	}
}

.single-block-padding {
	padding: clamp(20px, 2vw, 36px);
}

.uncode-close-offcanvas-mobile {
	width: 72px !important;
}
.mobile-menu-button {
	padding: 0 16px;
}
@media (max-width: 959px) {
	.menu-wrapper.menu-sticky .main-menu-container.open-items,
	.menu-wrapper.menu-hide-only .main-menu-container.open-items {
		width: 80% !important;
	}
	body.menu-mobile-off-canvas .main-menu-container:not(.uncol *) {
		top: 9px;
	}
	body.opening-overlay-menu.menu-mobile-off-canvas
		.main-menu-container:not(.uncol *) {
		top: 9px;
		right: 9px;
		box-shadow: 0 0px 100px 10px rgba(0, 0, 0, 1);
	}

	.menu-sidebar-inner {
		padding: 64px 0px 108px 0px;
	}
}

@media (min-width: 959px) {
	#menu-main-menu {
		display: flex;
		flex-direction: row;
		gap: 0;

		li {
			display: flex;
			flex: 1;

			a {
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid var(--gw-color-green);
				padding: 0 1rem !important;
				width: 100%;
			}

			&:first-child {
				a {
					border-left: 1px solid var(--gw-color-green);
				}
			}

			&:last-child {
				a {
					border-right: none;
				}
			}

			&.highlight {
				a {
					background-color: var(--gw-color-green);
					color: #fff;
				}
			}
		}
	}
}

#popmake-76 {
	.wpcf7-form {
		label {
			color: white;

			a {
				color: white !important;
				text-decoration: underline;
			}
		}
		input {
			color: black;
		}
	}
}

body,
.heading-text {
	font-stretch: 125%;
}
.footer-content * {
	font-size: 12px !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

.image-hero {
	.uncode-single-media .uncode-single-media-wrapper {
		pointer-events: none;
	}
	.uncode-single-media {
		.t-entry-visual-tc {
			border: 1px solid var(--gw-color-green);
			border-radius: 1rem;
			overflow: hidden;
			pointer-events: none;
		}
	}
	.uncode-single-media:nth-child(2) {
		z-index: -1;
	}
	.uncode-single-media:nth-child(2) .t-inside {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
	}
}
.principlesRow {
	height: 300px !important;
	display: flex;
	align-items: center;

	h2 {
		font-size: clamp(20px, 3vw, 36px);
		line-height: 1.05;
	}
	.h5 {
		font-size: clamp(12px, 2vw, 14px);
	}
}

@media (max-width: 768px) {
	.principlesRow:nth-child(odd) {
		padding-right: 64px !important;
	}
	.principlesRow:nth-child(even) {
		padding-left: 64px !important;
	}
	.principlesRow {
		.uncont {
			margin-bottom: 36px !important;
		}
		.uncont > *:not(.uncode-owl-nav-wrap):not(.pin-spacer):not([data-sticky]) {
			margin-top: 16px !important;
		}
	}
}
#principlesStart {
	position: relative;

	&:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2100px;
		background-color: var(--gw-color-blue);
		opacity: 1;
		z-index: -10;
		pointer-events: none;
		background-image: url("background/bg-line.png");
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
}