/* 
 Theme Name:     Lähifarmi
 Author:         WTF Marketing Collective Oy
 Author URI:     https://welltoldfacts.wtf
 Version:        99.0 
*/

@font-face {
	font-family: 'Fangled';
	src: url('assets/fonts/Fangled-SemiBold.woff2') format('woff2'),
		url('assets/fonts/Fangled-SemiBold.woff') format('woff'),
		url('assets/fonts/Fangled-SemiBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/*FONTS*/
	--bs-body-font-family: "Raleway", sans-serif;
	--bs-headline-font-family: "Fangled", sans-serif;
	--bs-body-line-height: 1.6;

	/*COLORS*/
	--bs-body-color: #0A2900;
	--bs-body-bg: #F8FBF7;
	--bs-heading-color: #000000;
	--bs-body-font-size: 17px;
	--bs-body-font-weight: 400;
	--bs-link-color-rgb: #000000;
	--darkgreen: #196600;
	--green: #B2FF99;
	--red: #F4AEA4;

	/*BORDER-RADIUS*/
	--bs-border-radius: 12px;
	--bs-border-radius-sm: 4px;
	--bs-border-radius-lg: 8px;

	/*CONTAINER*/
	--container-width: 1270px;
}

img {
	max-width: 100%;
	height: auto;
}

.row.big-gutter {
	--bs-gutter-x: 100px;
}

.row {
	--bs-gutter-x: 40px;
}

/* SETTINGS */

#wtf-wrapper,
body,
html {
	min-height: 100%;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	max-width: var(--container-width);
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--bs-headline-font-family);
}

h1,
h2 {
	padding-bottom: 0.4em;
	line-height: 1;
	margin-bottom: 0;
}

h1 {
	font-size: 80px;
}

h2 {
	font-size: 50px;
}

p a {
	text-decoration: underline;
}

b,
strong {
	font-weight: 700;
}

#wtf-wrapper {
	position: relative;
	overflow: hidden;
}

img {
	max-width: 100%;
}

a:focus,
a:active,
a:visited,
a {
	text-decoration: none;
}

a {
	transition: all 200ms ease-in-out;
}

a:hover {
	text-decoration: underline;
	color: #000000;
}

.copyright-row a {
	text-decoration: underline;
}

p {
	margin-bottom: 2rem;
}

.animated {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	will-change: opacity, transform;
}

.animated.visible {
	opacity: 1;
	transform: translateX(0);
}

.no-js .animated {
	opacity:1;
	transform:none;
}

/* HEADER */

header ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#moove_gdpr_cookie_info_bar {
	border-top:none !important;
}

.gdpr_lightbox .tab-title {
	font-weight:normal;
	font-family:var(--bs-headline-font-family) !important;
}

#moove_gdpr_cookie_info_bar button,
.gdpr_lightbox button {
	font-weight:600 !important;
}


.desktop-menu-container ul li {
	display: inline-block;
	margin-left: 30px;
}

.desktop-menu-container ul li a {
	font-weight: 600;
	font-size: 15px;
	padding-top: 22px;
	padding-bottom: 22px;
	display: block;
	position: relative;
}

.desktop-menu-container ul li a:hover {
	text-decoration: none;
}

.desktop-menu-container ul li a:after {
	content: '';
	height: 2px;
	background: var(--bs-body-color);
	width: 0%;
	display: block;
	position: absolute;
	transition: all 200ms ease-in-out;
}

.desktop-menu-container ul li a:hover::after {
	width: 100%;
}

.menu-social img {
	width: 20px;
	margin-top: -2px;
}

.header-col {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #F8FBF7;
	padding: 0 10px;
	border-radius: 50px;
}

header {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: all 0.3s ease;
}

.sticky-header {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: 9999;
	animation: slideDown 0.3s ease;
}

.sticky-header .header-col {
	border-radius: 0 0 35px 35px !important;
	box-shadow: rgba(0, 0, 0, 0.08) -4px 9px 25px -6px;
	background: rgba(248, 251, 247, 0.95);
	backdrop-filter: blur(4px);
}

@keyframes slideDown {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.desktop-menu-container ul>li.menu-button a {
	margin-top: 0;
	margin-right: 3px;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-bottom: 0;
}

.desktop-menu-container ul>li.menu-social a:hover {
	opacity: 0.8;
}

.desktop-menu-container ul>li.menu-social a:after,
.desktop-menu-container ul>li.menu-button a:after {
	display: none;
}

header .logo {
	width: 120px;
	height: auto;
	margin-left: 15px;
}

/* MAINHERO */

#mainhero {
	padding-top: 320px;
	padding-bottom: 180px;
	color: #FFF;
}

#mainhero p {
	font-size: 20px;
	width: 550px;
	max-width: 100%;
}

/* BUTTONS */

#lomake #gform_submit_button_1,
.menu-button a,
a.wp-block-button__link,
.button {
	font-family: var(--bs-body-font-family);
	font-weight: 600;
	background: var(--green);
	font-size: 15px;
	padding: 1em 2em 1em 2em;
	border: solid 2px var(--green);
	border-radius: 50px;
	color: var(--bs-body-color);
	margin-bottom: 30px;
	line-height: 1;
	display: inline-block;
	position: relative;
	margin-right: 10px;
	transition: all 200ms ease-in-out;
}

#lomake #gform_submit_button_1 {
	margin-bottom: 0;
}

#lomake #gform_submit_button_1:hover,
.menu-button a:hover,
a.wp-block-button__link:hover,
.button:hover {
	text-decoration: none;
	background: #d8ffcc;
	border-color: #d8ffcc;
}

.button.button-white {
	background: #F8FBF7;
	color: var(--bs-body-color);
	border-color: #F8FBF7;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button.button-white:hover {
	background: var(--green);
	color: var(--bs-body-color);
	border-color: var(--green);
}

/* NAV RESET */
header {
	position: absolute;
	z-index: 999;
	width: 100%;
}

.mobile-nav {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
}

/* Hamburger icon */
.mobile-nav .checkbox {
	position: absolute;
	height: 1.3rem;
	width: 1.5rem;
	top: 50%;
	right: 1.1rem;
	transform: translateY(-50%);
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}

.mobile-nav .hamburger-lines {
	position: absolute;
	top: 50%;
	right: 1.1rem;
	transform: translateY(-50%);
	height: 1.2rem;
	width: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 4;
	cursor: pointer;
}

.mobile-nav .hamburger-lines .line {
	height: 0.2rem;
	width: 100%;
	border-radius: 0.2rem;
	background: #0A2900;
	transition: all 0.4s ease-in-out;
}

.line1 {
	transform-origin: 0% 0%;
}

.line3 {
	transform-origin: 0% 100%;
}

.mobile-nav {
	z-index: 999999;
}

.mobile-menu-panel li {
	margin: 0;
}

.mobile-menu-panel li a {
	color: #0A2900;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	display: block;
	text-align: left;
}

.mobile-menu-panel li.menu-button a {
	text-align: center;
	font-size: 1rem;
}

/* When checked - open menu */
.mobile-nav input[type="checkbox"]:checked~.mobile-menu-panel {
	transform: translateY(0%);
}

#hamburgercheckbox:checked~.hamburger-lines .line1 {
	transform: rotate(45deg);
	background: #0A2900;
}

#hamburgercheckbox:checked~.hamburger-lines .line2 {
	transform: scaleY(0);
	background: #0A2900;
}

#hamburgercheckbox:checked~.hamburger-lines .line3 {
	transform: rotate(-47deg);
	background: #0A2900;
}

/* Mobile menu panel (now outside container) */
.mobile-menu-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: auto;
	background: #F8FBF7;
	padding: 5rem 1.5rem 0.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	transform: translateY(-120%);
	transition: transform 0.4s ease-in-out;
	z-index: 9999;
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
	overflow-y: auto;
	box-shadow: 0 1px 30px #000;
}

body.menu-open .mobile-menu-panel {
	transform: translateY(0%);
}

.logo-container {
	z-index: 99999;
}

/* TUOTTEET */

footer,
#tilaa,
#sijainti,
#tulossa,
#vertikaaliviljely,
#tuotteet {
	padding-top: 110px;
}

.product-section {
	padding-top:40px;
	padding-bottom:0;
}

.product-card {
	background: #FFF;
	border-radius: 8px;
	box-shadow: rgba(0, 0, 0, 0.08) -4px 9px 25px -6px;
	padding: 1rem;
	text-align: center;
	height: 100%;
}

.product-card:hover img {
	transform: scale(1.02);
}

.product-card img {
	width: 110%;
	max-width: 110%;
	margin-left: -5%;
	margin-top: -40px;
	height: auto;
	margin-bottom: 2rem;
	transition: transform 0.2s ease;
}

.upcoming-card img {
	width: 90%;
	margin-top: 50px;
	margin-bottom: 50px;
}

.upcoming-card:hover img {
	transform: none;
}

.product-label {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 0.25rem;
}

.product-card h3 {
	font-size: 1.2rem;
	margin: 0;
}

.coming {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 8px;
	background: rgba(10, 41, 0, 0.5);
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #FFF;
	padding: 40px;
	line-height: 1;
}

.coming strong {
	font-size: 30px;
	display: inline-block;
	padding-top: 10px;
}

/* VERTIKAALIVILJELY */

.vertikaali-card {
	background-color: #dff1cb;
	/* same green tone */
	border-radius: 10px;
	padding: 2rem;
	text-align: left;
	height: 100%;
	box-shadow: rgba(0, 0, 0, 0.08) -4px 9px 25px -6px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.vertikaali-card img {
	width: 80px;
	height: auto;
	margin-bottom: 1.5rem;
}

.vertikaali-card h3 {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.vertikaali-card p {
	font-size: 0.95rem;
	color: #333;
	margin: 0;
}

/* SIJAINTI */

#sijainti iframe {
	border-radius: 8px;
}

#tilaa .row>div:last-child,
#sijainti .row>div:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* MEISTÄ */

#meista {
	margin-top: -80px;
	padding-top: 80px;
}

#meista>div>p {
	margin-bottom: 0;
}

/* LOMAKE */

#lomake label {
	position: absolute;
	top: -10px;
	background: #FFF;
	left: 10px;
	background: #FFF;
	padding: 0 10px;
	font-size: 13px;
	color: #888;
	font-weight: 500;
}

.grecaptcha-badge {
	display:none !important;
}

#lomake .gform_required_legend {
	display: none;
}

#lomake {
	padding: 40px;
	border-radius: 8px;
	background: #FFF;
	box-shadow: rgba(0, 0, 0, 0.08) -4px 9px 25px -6px;
}

#lomake input,
#lomake textarea {
	border-radius: 4px;
	padding: 20px 15px;
	background: #FFF;
	border: solid 1px #ccc;
	box-shadow: none;
}

#lomake input:focus-visible,
#lomake input:focus,
#lomake input:active,
#lomake textarea:focus-visible,
#lomake textarea:focus,
#lomake textarea:active {
	border: solid 1px #666;
	box-shadow: none;
	outline: none;
}

h2.gform_title {
	font-size: 30px;
	margin-bottom: 30px;
}

#lomake .gform_fields {
	grid-row-gap: 25px;
}

#lomake .gfield {
	position: relative;
}

/* FOOTER */

footer .logo {
	width: 300px;
	max-width: 100%;
}

footer {
	padding-top: 150px;
	padding-bottom: 00px;
}

.copyright-row {
	font-size: 13px;
	margin-top: 30px;
}

.social-link-footer {
	text-align: center;
	margin-top: 30px;
}

.social-link-footer img {
	width: 30px;
	height: auto;
}

/* MEDIA QUERIES */

@media (min-width: 768px) and (max-width: 1600px) {
	.container {
		max-width: 92%;
	}
}

@media (min-width: 981px) {
	#tilaa .row>div:last-child {
		padding-left: 60px;
	}

	#sijainti .row>div:first-child {
		padding-right: 60px;
	}

	.mobile-nav {
		display: none;
	}
}

@media (max-width: 980px) {
	h1 {
		font-size: 40px;
	}

	#mainhero {
		padding-top:200px;
		padding-bottom:80px;
	}

	.desktop-menu-container {
		display: none;
	}

	.header-col {
		padding: 10px 5px;
		width: 95%;
		margin: auto;
	}

	header {
		top: 0px;
	}

	h2 {
		font-size:35px;
	}

	footer,
	#tilaa,
	#sijainti,
	#tulossa,
	#vertikaaliviljely,
	#tuotteet {
		padding-top: 70px;
	}
	#sijainti iframe {
		margin-top:20px;
	}
	#meista {
		padding-top:70px;
		margin-top:0;
	}
	footer {
		padding-top:150px;
	}
	header .logo {
		width: 90px;
    	margin-top: -3px;
	}
	#lomake {
		padding:30px;
	}
	.header-col {
		border-radius: 0 0 0 0 !important;
	}
	header {
		position:fixed;
		box-shadow: rgba(0, 0, 0, 0.08) -4px 9px 25px -6px;
	}
}