/*
Theme Name: Sarmant Mini
Theme URI: https://sarmant-mini.fi
Author: Arttu Teronen, Mika Kataja
Author URI: https://sarmantti.fi
Description: Base theme for Sarmantti Oy's WP projects
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0.4
Text Domain: sarmant_mini
*/

/** CUSTOM CSS  **/


:root {
	--transition-time: 0.3s;
	--transition-type: ease-in-out;
	--transition-base: var(--transition-time) var(--transition-type);
	--inherit-underline-color: inherit;
	
	--active-link-underline: underline 0.125em;
	--active-link-color: rgba(0, 0, 0, 0.1);
	--active-link: var(--active-link-underline) var(--active-link-color);

	--color-error: #AB4E52;
	--color-success: #00A550;
	--color-warning: #E69F64;

	--margin-inline-min-max: max(var(--wp--preset--spacing--s),10% - 800px/2);
}
* {
	box-sizing: border-box;
}

/* Scroll-detect basic styles. */
/*
header {
        position: absolute;
        top:   0;
        left:  0;
        right: 0;
        z-index:9999;
}
.scroll header {
        transition: top 0.2s ease-in-out;
}

.scroll-up header {
        position: fixed;
}
.scroll-down header {
        position: fixed;
        top: -100%!important;
}
.admin-bar header {
        top: 32px;
}

@media (max-width: 782px) {
        top: 46;
}
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;

	@supports(navigation:auto) {
		@view-transition {
			navigation: auto;
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;

		/* Turn off any transition
		*/
		-webkit-transition: none !important;
		-moz-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
	}
	/* Turn off view-transitions
	*/
	@view-transition {
		navigation: none!important;
	}
}
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	hyphens: auto;
}

.error {
	background: var(--color-error);
}
.success {
	background: var(--color-success);
}
.warning {
	background: var(--color-warning);
}

.hero-carousel-wrapper {
    position: relative !important;
}

section.hero-section {
    p {
        hyphens: none;
    }
}

.absolute-heading-wrapper {
    position: absolute !important;
    z-index: 2 !important;
    height: fit-content;
    margin-inline: auto;
    justify-self: center;
    padding: 1em;
    background-color: rgb(from var(--wp--preset--color--accent-2) r g b / 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 16px;

    h1 {
        text-shadow: 2px 2px 5px rgb(0 0 0);
    }
}


li[data-wpml='language-item']:first-of-type {
    margin-top: 0!important;
}

li[data-wpml="current-language-item"] {
    text-decoration: 1px solid black underline;
}
li[data-wpml="current-language-item"]:hover {
    cursor: not-allowed;
}
.wpml-language-switcher-block li {
    font-weight: 700;
}

:where(body.settings_page_sarmant-mini-theme-settings) {

	#wpbody-content {
		background-color: slateblue!important;
	}
	:where(input[type=text]:user-invalid) {
		outline: 2px solid var(--color-error)!important;
	}
	/* :where(input[type=text]:invalid:required) {
		outline: linear-gradient(to right, pink, lightgreen)!important;
	} */
	:where(input[type=text]:user-valid) {
		outline: 2px solid var(--color-success)!important;
	}
	input {
		background-color: aquamarine!important;
	}
}
.mobile-align-left {
	text-align: left;
}

.max-width-100-mobile > * {
    @media(max-width: 48.875rem) {
        max-width: 100%!important;
    }
}
:where(.wp-site-blocks) > :last-child {
	/* margin-block-start: 0!important; */
    margin-block-end: 0;
}

/* Transition time and type for each link and input element except Site Title */
.wp-element-button, button, input, textarea, a:where(:not(.wp-block-site-title)) {
    /* transition: 0.3s ease-in-out; */
	transition: var(--transition-base);
}
.wp-block-cover.mobile-min-height {
	@media(max-width: 48.875rem) {
		min-height: 60vh!important;
	}
}

:has(> .float-img-right-rounded, > .float-img-right-polygon) {
	display: flow-root!important;
}
.wp-block-image {
	&.float-img-right-rounded {
        float: right;
        shape-outside: circle(50%);
        shape-margin: 1.35rem;
        border-radius: 50% !important;
        margin-left: .5em;
        margin-right: 3em;
        @media(max-width: 37.5rem) {
            float: unset!important;
            text-align: center;
            margin-inline: auto!important;
        }
		img {
			aspect-ratio: 1;
			overflow: clip;
			object-fit: cover;
			border-radius: 50%;
			/* max-width: 12rem; */
            width: clamp(7.5rem, 6.9474rem + 3.1579vw, 12rem)!important;
		}
	}
	&.float-img-right-polygon {
		float: right;
		/* shape-outside: url(); */
		shape-margin: 0.75rem;
		margin-left: 0.75em!important;
		@media(max-width: 37.5rem) {
			float: unset !important;
			text-align: center;
			margin-inline: auto !important;
		}
		img {
			max-width: 12rem;
		}
	}
}

.virta.wp-block-cover {
	aspect-ratio: 1;
	justify-content: center;
	align-content: center;
	margin: 1em;
	border-radius: 100%;
	min-width: 240px;
	min-height: 100%;
	.wp-block-cover__inner-container {

		img {
			width: clamp(8rem, 7.3571rem + 3.2143vw, 12.5rem);
		}
	}
}

.wp-block-cb-carousel .slick-slide {
	padding: 0;
	overflow: clip;
}

.wp-block-cb-carousel.alignfull {
    .slick-prev, .slick-next {
        bottom: 0;
        top: auto;
    }

    button:focus, button:focus-visible {
        outline: 2px solid white;
    }
}

header.site-header {
	> div.wp-block-group {
        background-image: linear-gradient(-130deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%), url('https://demo.vihreapysakki.fi/wp-content/uploads/2025/12/Vihreapysakki_lehti_kompakti.svg'); 
        background-position-x: right;
        background-repeat: no-repeat;
        background-size: 15%;
        background-position: 100% 0%;
	}
}
footer.site-footer {
	margin-top: 0!important;
}
div#wpadminbar {
	grid-area: wpadminbar;
}
:where(.sarmant-card) a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
}
.is-content-fit-content {
	max-width: fit-content!important;
}
.is-margin-inline-none {
	margin-inline: 0!important;
}
.margin-inline-auto {
	margin-inline: auto!important;
}
.is-justify-items-center {
	@media(max-width: 48.875rem) {
		justify-items: center;
	}
}
.is-justify-self-center {
	justify-self: anchor-center;
}
.is-content-max-width-40 {
	max-width: 40ch;
	margin-inline: auto;
}
.is-content-max-width-50 {
	max-width: 50ch;
	margin-inline: auto;
}
.is-content-max-width-75 {
	max-width: 75ch;
	margin-inline: auto;
}
:where(.is-style-sarmant-nice-margin) {
	margin-inline: var(--margin-inline-min-max);
}
.list-style-none {
	list-style-type: none;
	padding-left: 0;
	text-wrap: pretty;
}
.text-wrap-pretty {
	text-wrap: pretty;
}
@supports not (text-wrap:pretty) {
	.text-wrap-pretty {
		text-wrap: balance;
	}
}
.align-items-start {
	align-items: start;
}
.align-items-center {
	align-items: center;
}
.has-shadow-accent {
	filter:drop-shadow(0 0.5em 1em var(--wp--preset--color--accent-2));
}
footer.site-footer {
    box-shadow: 0px 0px 15px 4px var(--wp--preset--color--accent-1);
}

.pello-logo img {
	/* width: clamp(11.25rem, 10.7895rem + 2.6316vw, 15rem); */
    width: clamp(10rem, 9.8465rem + 0.8772vw, 11.25rem);
}

div.leaf-pattern-left, div.leaf-pattern-right {
	@media(max-width: 48.875rem) {
		min-height: 10vh!important;

		img {
			object-fit: contain!important;
		}
	}
}

/****************/
/***NAVIGATION***/
/****************/

@media only screen and (max-width: 1020px) {
    #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open+#mega-menu-max_mega_menu_1 {
        margin-top: 0.5em;

        li.mega-menu-item {
            text-align: center;
            justify-items: center;
        }
    }

    #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-1:after {
        margin: 0;
    }
}

/** Give submenu items some space to breathe **/
ul.wp-block-navigation__container.is-responsive.wp-block-navigation {
	> li {
		position: relative;
		ul {
			min-width: fit-content;
			text-wrap: nowrap;
		}
	}
	> li:last-of-type {
		ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu	 {
			position: absolute;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
}


/*
* Make the mobile navigation menu appear sooner
*/
@media ( min-width: 74em ) {
    /* .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    } */
    /* .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    } */
	.hide-on-desktop {
		display: none!important;
		pointer-events: none!important;
	}
    /* li:has(> div.hide-on-desktop.wp-block-site-logo) {
        display: none!important;
        pointer-events: none!important;
    } */
}
@media ( min-width: 37.5em ) {
    /* .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    } */
}

.is-hidden-on-mobile {
	@media(max-width: 48.875rem) {
		display: none!important;
		pointer-events: none!important;
	}
}
@media ( max-width: 74em ) {
	.is-space-between-mobile {
		justify-content: space-between!important;	
	}
	:where(.justify-left-mobile) {
		justify-content: left!important;
	}
	.is-style-grid-cols-one {
		grid-template-columns: 1fr!important;
	}
	.order-reverse {
		flex-direction: column-reverse;
	}
	.lead-columns {
		.wp-block-column:nth-of-type(1) {
			flex-basis: var(--flex-20)!important;
		}
		.wp-block-column:nth-of-type(2) {
			flex-basis: var(--flex-80)!important;
		}
	}
	div.is-style-sarmant-columns {
		gap: unset;
		& :is(div.wp-block-cover:has(img)) {
			min-height: 40vh!important;
		} 
	}
	form.wpcf7-form {
		grid-template-areas:
			"first-name"
			"last-name"
			"your-email"
			"your-message"
			"your-message"
			"contact-submit"
			"spinner"
			"response-output"!important;
	}
	.padding-left-unset {
		padding-left: unset;
	}
	.is-style-justify-content-center-mobile {
		justify-content: center;
	}
}

@media screen and (max-width: 37.5em) {
	.is-style-grid-cols-one {
		grid-template-columns: 1fr!important;
	}
	.order-reverse {
		flex-direction: column-reverse;
	}
	div.is-style-sarmant-columns {
		gap: unset;
		& :is(div.wp-block-cover:has(img)) {
			min-height: 30vh!important;
		} 
	}
}

/*** CONTACT FORM ***/
/* form.wpcf7-form label, form.wpcf7-form input, form.wpcf7-form span {
	display: grid;
}

label.first-name {
	grid-area: first-name;
}
label.last-name {
	grid-area: last-name;
}
label.your-email {
	grid-area: your-email;
}
label.your-message {
	grid-area: your-message;
}
label.captcha {
	grid-area: captcha;
}
input.wpcf7-submit {
	grid-area: contact-submit;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
    border-radius: none;
	border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    padding-top: var(--wp--preset--spacing--s);
    padding-right: var(--wp--preset--spacing--s);
    padding-bottom: var(--wp--preset--spacing--s);
    padding-left: var(--wp--preset--spacing--s);
    text-decoration: none;
    text-transform: uppercase;
	max-width: 10em;

	&:hover {
		transform: scale(0.98);
		filter: drop-shadow(0 0.15em 0.30em var(--wp--preset--color--accent-4));
		cursor: pointer;
	}
}
span.wpcf7-spinner {
	grid-area: spinner;
	place-self: anchor-center;
	grid-column:1;
}
div.wpcf7-response-output {
	grid-area: response-output;
	margin-inline: 0!important;
	margin-block: 0.5em!important;
}
form.wpcf7-form {
	display: grid;
	grid-template-areas:
		"first-name last-name"
		"your-email ."
		"your-message your-message"
		"your-message your-message"
		"contact-submit spinner"
		"response-output .";
	grid-template-columns: auto;
	grid-template-rows: auto;
	max-width: fit-content;
	max-width: min-content;
	gap: 1em;
	margin-inline: auto;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}
.wpcf7-form-control {
	padding-block: 0.5em;
	font-size: var(--wp--preset--font-size--m);
} */

/*** WP TABLE ***/
.wp-block-table td, .wp-block-table th {
	padding: 0;
}
.wp-block-table tr {
	padding-block: 1em;
}

/*** SCROLL TO TOP BUTTON ***/
.scroll-to-top {
	position: fixed;
    bottom: 6em;
    right: 0.75em;
    z-index: 10000;
    opacity: 0;
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base);
    cursor: pointer;
    border-radius: 100%;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    transition: 0.5s;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    align-content: center;
	border: 0.06em solid;

	svg {
		fill: var(--wp--preset--color--base);
	}
}
.show-back-to-top-btn {
	opacity: 1!important;		
	transform: translateY(0);
}
.custom-z-index {
	z-index: var(--z-index-m1);
}

figure.wp-block-image.light-color-icon {
	filter: opacity(0.15) drop-shadow(0 0 0 white);
}