/*
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.0
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);

	--border-width: 1px;
}
* {
	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;

	p {
		hyphens: auto;
	}

	@media(max-width: 48.875em) {
		background-color: var(--wp--preset--color--accent-1);
	}
}
.error {
	background: var(--color-error);
}
.success {
	background: var(--color-success);
}
.warning {
	background: var(--color-warning);
}

main.site-main > .wp-block-group {
	background-color: var(--wp--preset--color--accent-1);
	border-right-color: var(--wp--preset--color--accent-2);
	border-left-color: var(--wp--preset--color--accent-2);
	border-bottom-color: var(--wp--preset--color--accent-2);
	border-inline-style: solid;
	padding-inline: var(--wp--preset--spacing--m);
	padding-bottom: var(--wp--preset--spacing--m);
	border-bottom-style: solid;
	border-bottom-right-radius: var(--wp--preset--border-radius--2-xl);
	border-bottom-left-radius: var(--wp--preset--border-radius--2-xl);
	border-width: var(--border-width);

	@media(max-width: 48.875em) {
		padding-inline: 0!important;
		border: unset!important;
	}
}

.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	@media(max-width: 480px) {
		margin-inline: 0 !important;
		max-width: 100% !important;
	}
}

: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 {
    @media(max-width: 48.875em) {
	    text-align: left;
    }
}
/* :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)
}
.anchor-row {
	anchor-name: --anchor-row;
}

footer li {
    a {
        text-decoration: underline solid 0.125em transparent!important;
    }
    a:hover {
        color: var(--wp--preset--color--accent-1);
        text-decoration: underline solid 0.125em var(--wp--preset--color--accent-2)!important;
    }
}    

.privacy-policy-link:hover {
    color: var(--wp--preset--color--accent-4);
}

.anchor-leaf img {
	position-anchor: --anchor-row;
    position: absolute;
    right: calc(anchor(--anchor-row end) + -1em);
    top: calc(anchor(--anchor-row top) + -1em);
}


.wp-block-columns.anchor-columns {
	gap: 0!important;
	/** Place over an image in the center of two columns in the background **/
		.wp-block-column.anchor-left {
			anchor-name: --left-column;
	
			@media(max-width: 48.875em) {
				border-bottom-left-radius: 0!important;
				border-top-right-radius: var(--wp--preset--border-radius--2-xl) !important;
			}
		}
		.wp-block-column.anchor-right {
			anchor-name: --right-column;
		}
		figure.wp-block-image.anchor-image:where(:not(.block-editor-block-list__block)) img {
			z-index: 999;
			border-radius: unset;
			transform: translateY(-50%);
			justify-self: center;
			position: absolute;

			@media(min-width: 48.875em) {
				position-anchor: --left-column;
				left: anchor(--left-column right);
				top: anchor(--left-column center);
				right: calc(anchor(--right-column left) + -4em);
			}

			@media(max-width: 48.875em) {
				/** Place the image to the left of the map in mobile **/
				position-anchor: --right-column;
				left: anchor(--right-column left);
				top: anchor(--right-column center);
			}
		}
	.map-image {
		/* min-height: 100%!important; */
		img {
			scale: 1.5;
		}
		@media(max-width: 48.875em) {
			border-top-right-radius: 0!important;
			border-bottom-left-radius: var(--wp--preset--border-radius--2-xl)!important;
			height: 30vh!important;
		}
	}
}

.wp-block-column.force-space-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

header.site-header {

	& > div > div {
		@media(max-width: 48.875em) {
			border: unset!important;
			border-radius: unset!important;
		}
	}

}
div.site-main {

}
footer.site-footer {
	margin-top: 3em!important;
}

div#wpadminbar {
	grid-area: wpadminbar;
}
div.wp-site-blocks {
	grid-area: wp-site-blocks;
}
:where(.sarmant-card) a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
}

.position-relative {
	position: relative;
}

.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-self-center {
	justify-self: anchor-center;
}
.is-content-max-width-40 {
	max-width: 40ch;
	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;
}
.text-nowrap {
	text-wrap: nowrap;
}
@supports not (text-wrap:pretty) {
	.text-wrap-pretty {
		text-wrap: balance;
	}
}
.align-items-start {
	align-items: start;
}

.flex-stack-early {
	@media(max-width: 67.5em) {
		flex-wrap: wrap!important;
		flex-direction: column;
	}
}
.has-shadow-accent {
	filter:drop-shadow(0 0.5em 1em var(--wp--preset--color--accent-2));
}

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

@media only screen and (max-width: 840px) {
    #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_1 {
        max-width: 100vw !important;
        overflow: clip;
        margin-top: 1rem;
        /* background-color: var(--wp--preset--color--contrast)!important; */
    }
}

li.mega-menu-item.mega-menu-item-has-children:hover, li.mega-menu-item.mega-menu-item-has-children:focus {
    a span.mega-indicator::after {
        transform: rotate(0)!important;
    }
}

nav.mega-menu-wrap {

    li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link {
        pointer-events: none!important;
    }
	a.mega-menu-link {
		font-size: var(--wp--preset--font-size--s) !important;
		font-weight: 600!important;

		& > span.mega-indicator:after {
			color: var(--wp--preset--color--accent-2)!important;
			transform: rotate(-90deg)!important;
			font-weight: 900!important;
            transition: transform 0.5s;
		}
	}
	ul.mega-sub-menu {

		/* border: var(--border-width) solid var(--wp--preset--color--accent-2)!important;
		border-radius: var(--wp--preset--border-radius--2-xl)!important; */
		margin-top: 1rem!important;
		min-width: 300px!important;
		overflow: clip!important;

		li.mega-menu-item {
			list-style-type: disc!important;
			background-color: var(--wp--preset--color--accent-1);
			color: var(--wp--preset--color--contrast)!important;

            &.mega-current-menu-item {
                background-color: var(--wp--preset--color--accent-6)!important;
            }

            &:hover, &:focus {
                background-color: lch(from var(--wp--preset--color--accent-6) calc(l - 20) c h)!important;
            }

			a {
				background-color: inherit!important;
				color: inherit!important;
			}
		}
	}
}

:where(:is(.current-menu-item)) {
	text-decoration: underline 0.125em rgba(0, 0, 0, 0.3);
}

/*
* 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;
	}
}
@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;
    }
}

@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;
	}
	.is-hidden-on-mobile {
		display: none!important;
		pointer-events: none!important;
	}
	.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;
		} 
	}
}

@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 {
	font-size: var(--wp--preset--font-size--s);
	display: flex;
	flex-direction: column;
	gap: 1em;

	label {
		font-weight: 600;
	}
	input[type="text"], input[type="email"], textarea {
		padding-block: 0.5em;
        padding-inline: 0.5em;
		border-radius: var(--wp--preset--border-radius--xl);
    	border: 1px solid var(--wp--preset--color--accent-2);
		width: 100%;
		font-size: var(--wp--preset--font-size--m);
	}
	/** Make input elements inherit color and font size. Used for example in CF7 forms **/
	input[type="checkbox"] + label,
	input[type="radio"] + label,
	label:has(input[type="checkbox"], input[type="radio"]) {
		color:     inherit;
		font-size: inherit;
	}
	.wpcf7-list-item {
		margin: 0;
		.wpcf7-list-item-label {
			font-size: var(--wp--preset--font-size--xs);
			font-weight: 400;
		}
	}
	input.wpcf7-submit {
		background-color: var(--wp--preset--color--accent-3);
		color: var(--wp--preset--color--accent-2);
		border-radius: var(--wp--preset--border-radius--3-xl);
		border: 1px solid var(--wp--preset--color--accent-4);
		font-family: inherit;
		font-size: inherit;
		font-weight: 600;
		padding-inline: var(--wp--preset--spacing--m);
		padding-block: 0.25em;
		text-decoration: none;
		text-transform: uppercase;
		max-width: 10em;

	&:hover {
		transform: scale(0.98);
		cursor: pointer;
	}
	}
}

/*** 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);
}

.cmplz-cookiebanner .cmplz-header {
	grid-template-columns: auto 1fr auto!important;
}