/* === Header Base === */
.site-header {
	position: absolute;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0);
    padding: 28px 0px 0px;
    max-width: 1440px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);

    @media screen and (max-width: 768px) {
        padding: 16px 0px 0px;
    }

	&.menu-green {
		.header-container {
			border-bottom: 1px solid rgba(2, 73, 52, 0.1);
		}

		.nav-menu li a { 
			color: #004735;
		}

		.header-switcher {
			svg {
				path {
					fill: #004735
				}
			}

			a {
				color: #004735;
			}
		}
	}
}

.header-container {
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0 60px;

    @media screen and (max-width: 768px) {
        margin: 0 20px;
        border-bottom: none;
        padding: 0 0px 16px;
    }
}

/* === Logo === */
.site-logo-icon {
	width: 100%;
	height: auto;
	object-fit: cover;
}


.site-logo a {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: #004d40;
	font-weight: 500;
}
.logo-mark {
	background: #004d40;
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
}
.logo-text {
	font-size: 14px;
	line-height: 1.2;
	color: #004d40;
}

/* === Nav === */
.site-nav {
	flex: 1;
}
.nav-menu {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.nav-menu li a {
	font-family: 'Closer Text', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-decoration: none;
}

.nav-menu li:hover a {
	text-decoration: underline;
}

/* .nav-menu li a:hover {
	color: #009170;
} */

/* === Actions === */
.header-actions {
	display: flex;
	align-items: center;
	gap: 30px;

	@media (max-width: 768px) {
		gap: 4px;
	}

	.header-switcher {
		display: flex;
		flex-direction: row;
		gap: 6px;
		align-items: center;

		a {
			font-family: Closer Text;
			font-weight: 400;
			font-size: 16px;
			line-height: 110%;
			letter-spacing: -0.01em;
			color: #FFFFFF;
			text-decoration: none;
			text-transform: uppercase;
		}

		@media (max-width: 768px) {
			display: none;
		}
	}
}

.donate-btn {
	padding: 14px 26px;
	border-radius: 12px;
	background: rgba(207, 226, 224, 1);
	color: rgba(0, 71, 53, 1);
	font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-family: 'Closer Text', sans-serif;
	border: none;
	cursor: pointer;
	text-decoration: none;

    @media screen and (max-width: 768px) {
        padding: 12px 18px;
    }
	/* transition: background 0.3s ease; */

	&:hover {
		background-color: rgba(0, 71, 53, 1);
		color: rgba(255, 255, 255, 1);
	}
}
/* .donate-btn:hover {
	background: #bfe5d8;
} */

.lang-placeholder {
	font-size: 14px;
	color: #004d40;
}

/* === Burger === */
.burger {
	display: none;
    background: rgba(0, 71, 53, 1);
    padding: 16px 13px;
    border-radius: 12px;
    width: 41px;
    height: 41px;
	cursor: pointer;
    border: none;
}
.burger span {
	width: 100%;
	height: 2px;
	background: #004d40;
	border-radius: 2px;
}

/* === Responsive === */
@media (max-width: 1200px) {
	.nav-menu {
		display: none;
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		background: #fff;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
		border-radius: 0 0 16px 16px;
	}
	.nav-menu.active {
		display: flex;
	}
	.burger {
		display: flex;
	}
}

/* === Popup Mobile Menu === */
.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,1);
	backdrop-filter: blur(3px);
	display: none;
	align-items: flex-start;
	justify-content: flex-end;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
	z-index: 9999;

    @media screen and (max-width: 768px) {
        height: 100vh;
    }
}
.mobile-menu-overlay.active {
	display: flex;
}

.mobile-menu-inner {
	background: #004735;
	color: #fff;
	width: 100%;
	max-width: 380px;
	height: 95%;
	border-radius: 20px 0 0 20px;
	display: flex;
	flex-direction: column;
    padding: 16px 20px 20px;
	position: relative;

    @media screen and (max-width: 768px) {
        max-width: 100%;
        height: calc(100% - 36px);
    }
}

/* Header inside menu */
.mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 75px;
}

.mobile-logo a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
}
.mobile-logo img {
    width: 150px;
    height: auto;
}
.menu-close {
	font-size: 28px;
    background: rgba(207, 226, 224, 1);
    border-radius: 12px;
    width: 41px;
    height: 41px;
    color: rgba(0, 71, 53, 1);
    border: none;
}

/* Menu list */
.mobile-nav-menu {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mobile-nav-menu li a {
	color: #fff;
	text-decoration: none;
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 130%;
    letter-spacing: -0.01em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding: 0 0 14px;
}
.mobile-nav-menu li a::after {
	content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.8" clip-path="url(%23clip0_796_2917)"><path d="M3.62586 3.32329C3.68365 3.38163 3.75251 3.42784 3.8284 3.45921C3.90429 3.49058 3.98569 3.50647 4.0678 3.50596L10.5143 3.50596L10.5143 9.95242C10.52 10.1143 10.5883 10.2676 10.7048 10.38C10.8213 10.4925 10.9769 10.5554 11.1389 10.5554C11.3008 10.5554 11.4564 10.4925 11.5729 10.38C11.6895 10.2676 11.7578 10.1143 11.7635 9.95242L11.7635 2.88135C11.7634 2.71573 11.6975 2.55691 11.5804 2.4398C11.4633 2.32268 11.3045 2.25684 11.1389 2.25674L4.0678 2.25674C3.90218 2.25684 3.74336 2.32268 3.62625 2.4398C3.50913 2.55691 3.44329 2.71573 3.44319 2.88135C3.44268 2.96347 3.45857 3.04486 3.48994 3.12075C3.52131 3.19664 3.56752 3.2655 3.62586 3.32329Z" fill="white"/><path d="M2.44803 11.5724C2.56629 11.6876 2.72487 11.7521 2.88997 11.7521C3.05508 11.7521 3.21365 11.6876 3.33192 11.5724L11.5815 3.3228C11.6987 3.20559 11.7646 3.04662 11.7646 2.88086C11.7646 2.7151 11.6987 2.55613 11.5815 2.43892C11.4643 2.32171 11.3053 2.25586 11.1396 2.25586C10.9738 2.25586 10.8148 2.32171 10.6976 2.43892L2.44803 10.6885C2.33282 10.8068 2.26835 10.9653 2.26835 11.1304C2.26835 11.2955 2.33282 11.4541 2.44803 11.5724Z" fill="white"/></g><defs><clipPath id="clip0_796_2917"><rect width="14" height="14" fill="white" transform="matrix(1 0 0 -1 0 14)"/></clipPath></defs></svg>');
	font-size: 14px;
}

/* Donate button */
.mobile-donate-btn {
	background: #CFE2E0;
	color: #004735;
	font-family: Closer Text;
    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.01em;

	padding: 16px 0;
    width: 100%;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	text-align: center;
    text-decoration: none;
}

/* Footer */
.mobile-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
    justify-content: space-between;
	padding-top: 20px;

	.mob-header-switcher {
		display: flex;
		flex-direction: row;
		gap: 6px;
		align-items: center;

		a {
			font-family: Closer Text;
			font-weight: 400;
			font-size: 16px;
			line-height: 110%;
			letter-spacing: -0.01em;
			color: #FFFFFF;
			text-decoration: none;
			text-transform: uppercase;
		}
	}
}
.mobile-lang {
	font-size: 14px;
}
.mobile-socials {
	display: flex;
	gap: 14px;
}

.mobile-socials a {
    background: #CFE2E0;
    border-radius: 100px;
    padding: 12px;
    width: 21px;
    height: 21px;
}

.mobile-socials img {
	width: 21px;
	height: 21px;
}