/*!
Theme Name: Meita Base Two Child Ilomantsi
Theme URI: https://meita.fi
Template: meita-theme-basetwo
Author: Lauri Merisaari
Author URI: https://meita.fi
Description: Child theme for Meita Base Two. Block theme based and inspired of Meita Base one and Twenty Twenty Two
Requires at least: 6.0
Tested up to: 6.1
Requires PHP: 8.0
Version: 0.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meitabasetwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, accessibility-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
*/

/* 
 * CSS Global variables
 *
 * Overwrite these in child theme to globally control defaults
 * Original can be found in src/css/variables.scss
 */
 :root {

    --meita-custom-nav-elements-border-width: 1px;
    
    --meita-custom-forms-input-border: 1px;
    --meita-custom-forms-input-border-style: solid;
    --meita-custom-forms-input-border-color: #808080;
    --meita-custom-forms-input-pg: white;
    --meita-custom-forms-input-border-radius: 15px;

    /* All buttons defaults, can be owerwriten in site editor */
    --meita-custom-default-border-radius: 15px;
    --meita-custom-button-padding: 11.7px;
    --meita-custom-button-hpadding: 16.7px;
    --megamenu-container-padding: 3em;
    --megamenu-nav-hpadding: 1em;

    /* Default animation duration */
    --animate-duration: 0.3s;

}

header .custom-logo-link {
	position: relative;
	z-index: 10;
}

header .wp-block-search {
	border-radius: 100px;
}
header .wp-block-search .wp-block-search__inside-wrapper {
	border-radius: 100px;
	border: none;
	background-color: #FCD5DF;
}
header .wp-block-search__inside-wrapper .wp-block-search__input {
	border-radius: 100px 0 0 100px;
	background-color: #FCD5DF;
}

header .wp-block-search__inside-wrapper .wp-element-button {
	border-radius: 0 100px 100px 0;
}

header .main-nav {
	opacity: 0;
	transform: translatey(-100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	width: 100%!important;
	transition: all var(--animate-duration) ease-in;
	nav {
		padding-left: var(--wp--custom--spacing--outer);
  		padding-right: var(--wp--custom--spacing--outer);
		padding-top: 8rem;
		padding-bottom: 4rem;
		ul {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
		}
		ul li > a {
			font-weight: bold;
			padding: 0.5rem 1rem;
		}
		ul ul a {
			font-weight: normal;
			font-size: 1rem;
		}
	}
}
body.nav-visible header .main-nav {
	opacity: 1;
	transform: translatey(0);
}
.admin-bar header .main-nav {
	top: 32px;
}

body.nav-visible header > div > * {
	position: relative;
	z-index: 10;
	a {
		color: #fff!important;
	}
	.header-border {
		border-right-color: var(--wp--preset--color--foreground)!important;
	}
	.header-right {
		background-color: transparent!important;
	}
}

.nav-button svg path {
	transition: d var(--animate-duration) ease;
}
.nav-button.active {
	background-color: #fff!important;
	color: #000!important;
	svg path {
		fill: black!important;
	}
}

.wp-block-cover {
	overflow: visible;
}
.somenapit {
	position: absolute;
	left: -3.5rem;
	top: 50%;
	transform: translateY(-50%);
}

.header-border {
	transition: all var(--animate-duration) ease-in;
}

.wp-site-blocks main.wp-block-group {
	margin-top: 0!important;
}

.yoast-breadcrumbs {
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	a {
		text-decoration: underline;
	}
	a, .breadcrumb_last {
		color: var(--wp--preset--color--foreground);
	}
	span {
		display: inline-block;
		margin: 0 .5rem;
	}
	span:first-child {
		margin-left: 0;
	}
	.breadcrumb_last {
		font-weight: bold;
	}
}
.yoast-breadcrumbs span a:first-child {
	background-image: url('https://ilomantsi.meitadev.fi/wp-content/uploads/2024/06/icon-house.svg');
	background-repeat: no-repeat;
	background-position: left 50%;
	background-size: contain;
	padding-left: 1.75rem;
}

h1 em {
	font-family: var(--wp--preset--font-family--pacifico);
	font-weight: normal;
	font-style: normal;
}

/* BLOCK BUTTONS - 3 VIEREKKÄIN */
.wp-block-buttons.is-style-three-per-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	font-size: 1rem;
	a {
		display: block;
		width: 90%;
		text-align: left;
		position: relative;
		color: var(--wp--preset--color--foreground);
		background-color: var(--wp--preset--color--secondary);
	}
}
.wp-block-buttons.is-style-three-per-row div {
	background-image: url('https://ilomantsi.meitadev.fi/wp-content/uploads/2024/06/icon-arrow.svg');
	background-repeat: no-repeat;
	background-position: 98% 50%;
	background-color: var(--wp--preset--color--primary);
}
.wp-block-buttons.is-style-list-with-arrows {
	a {
		display: block;
		width: 100%;
		text-align: left;
		position: relative;
		background-color: transparent;
		background-image: url('https://ilomantsi.meitadev.fi/wp-content/uploads/2024/06/icon-arrow-black.svg');
		background-repeat: no-repeat;
		background-position: 98% 50%;
		border-bottom: 1px solid var(--wp--preset--color--secondary);
		padding-left: 0;
		color: var(--wp--preset--color--foreground);
	}
}

.wp-block-media-text.is-style-border {
	border: 60px solid var(--wp--preset--color--primary);
	border-top: 45px solid var(--wp--preset--color--primary);
	border-bottom: 45px solid var(--wp--preset--color--primary);
}

.wp-block-media-text.has-background {
	.wp-block-media-text__content {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

.wp-block-media-text.is-style-graphics .wp-block-media-text__content {
	background-image: url('https://ilomantsi.meitadev.fi/wp-content/uploads/2024/08/kurvi.png');
	background-repeat: no-repeat;
	background-position: 115% center;
	background-size: 9rem;
	padding-right: 7rem;
}
.wp-block-media-text.is-style-graphics.has-media-on-the-right .wp-block-media-text__content {
	background-position: -15% center;
	padding-left: 7rem;
}

.wp-block-file {
	background-color: var(--wp--preset--color--primary);
	background-image: url('https://ilomantsi.meitadev.fi/wp-content/uploads/2024/06/icon-download.svg');
	background-repeat: no-repeat;
	background-position: .5rem 50%;
	background-size: 1.5rem;
	padding-left: 2.5rem;
	a {
		width: 100%;
		display: block;
		background-color: var(--wp--preset--color--secondary);
		padding: 1rem 0 1rem 1rem;
	}
}

.taxonomy-category.wp-block-post-terms a {
	border: 2px solid #000;
	border-radius: 4px;
	padding: .5rem 1rem;
	text-decoration: none;
}

.quote-lohko em, .is-style-details-font em {
	font-family: var(--wp--preset--font-family--pacifico);
	font-weight: normal;
	margin-right: .2rem;
}
.is-style-details-font em {
	margin-right: .1rem;
}

[role="button"] {
  cursor: pointer;
}
[role="button"]:hover,
[role="button"]:focus,
[role="button"]:active {
  outline: 2px solid white;
}

.bg-gfx {
	background-image: url(https://ilomantsi.meitadev.fi/wp-content/uploads/2024/08/rengas.png);
	background-position: 0 -35%;
	background-size: 45%;
	background-repeat: no-repeat;
}