/*
Theme Name: Sarmant IFF
Theme URI: https://floorball.sport
Author: Arttu Teronen, Mika Kataja
Author URI: https://sarmantti.fi
Description: IFF - Based on sarmant_mini by Sarmantti
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.2
Text Domain: sarmant_iff
*/


: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;

	--button-padding: 0.5em;

	--margin-inline-min-max: max(var(--wp--preset--spacing--s),10% - 800px/2);

	--ts-position: 1px 2px 0.5em;
	--ts-color: var(--wp--preset--color--black);
	--ts: var(--ts-position) var(--ts-color);

	@position-try --bottom {
		top: anchor(bottom);
		left: anchor(left);
	}
	@position-try --top {
		bottom: anchor(top);
		left: anchor(left);
	}
	@position-try --right {
		top: anchor(top);
		left: anchor(right);
	}
	@position-try --left {
		top: anchor(top);
		left: anchor(right);
	}
}
* {
	box-sizing: border-box;
}

input[type="search" i]::-webkit-search-cancel-button {
	filter: invert(1) hue-rotate(180deg) brightness(2);
}

/* Scroll-detect basic styles. */

header {
	position: absolute;
	top:   0;
	left:  0;
	right: 0;
	z-index:9999;
}
.scroll header {
	transition: top 0.5s ease-in-out;
}

.scroll aside.some-stripe-wrap {
	transition: left 0.5s ease-in-out;
}

.scroll-up header {
	position: fixed;
}
.scroll-down {

	header, aside.some-stripe-wrap {
		position: fixed;
	}
	header {
		top: -100%!important;
	}
	aside.some-stripe-wrap {
		left: -100%!important;
	}
}
header .wp-block-group {
	border-radius: 0;
}

/* .scroll-down aside.some-stripe-wrap {
	position: fixed;
	left: -100%!important;
} */

.fa.fa-arrow-left.prevArrowBtn.slick-arrow {
	    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 0;
    color: #BFAFB2;
}
.fa.fa-arrow-right.nextArrowBtn.slick-arrow {
	    position: absolute;
    z-index: 1000;
    top: 50%;
    right: 0;
    color: #BFAFB2;
}
.admin-bar header {
	top: var(--wp-admin--admin-bar--height);

	@media(max-width: 782px) {
		top: var(--wp-admin--admin-bar--height);
	}
}

@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}

section:has(> .sponsors-and-partners) {
	margin-top: var(--wp--preset--spacing--l);
}

:where(:not(body.block-editor-page)) main.site-main {
	/*top: var(--header-height) !important;*/
	margin-top: var(--header-height)!important;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
		scrollbar-color: var(--wp--preset--color--accent-1) var(--wp--preset--color--base);
		/* overflow-x: clip; */

		@view-transition {
			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;
	}
}

html, body {
	overscroll-behavior-x: none;
	overflow-x: clip;
}
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	/* overflow-x: clip; */

	p {
		hyphens: auto;
	}

	&.page-template-page-light, &.page-template-page-light.editor-styles-wrapper,
	&.page-template-nav-cards-page, &.page-template-nav-cards-page.editor-styles-wrapper {
		background: var(--wp--preset--color--base);
		background: linear-gradient(
			180deg,
			var(--wp--preset--color--base) 0%,
			hsl(from var(--wp--preset--color--accent-1) h 20 l / 1) 50%,
			var(--wp--preset--color--base) 80%
		)!important;
	}
}
.error {
	background: var(--color-error);
}
.success {
	background: var(--color-success);
}
.warning {
	background: var(--color-warning);
}

/*.entry-content.alignfull.wp-block-post-content.has-global-padding.is-layout-constrained.wp-block-post-content-is-layout-constrained > *:not(> .wp-block-group) {
  color: white;
}*/

body.single-post .entry-content.wp-block-post-content {
	&.wp-block-heading {
		color: var(--wp--preset--color--base);
	}
}

:where(body.settings_page_sarmant-iff-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;
}
: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)
}


div.site-header {
	grid-area: header;
}
div.site-main {
	grid-area: main;
}
footer.site-footer {
	grid-area: footer;
	margin-top: 0!important;
}
div#wpadminbar {
	grid-area: wpadminbar;
}
div.wp-site-blocks {
	grid-area: wp-site-blocks;
}


/** Highlight Events Grid **/
div.wp-block-group.is-layout-grid.highlight-events-parent {

 	grid-template-columns: repeat(6, 1fr);

	& :nth-child(1) {
	 	grid-column: span 4;
		grid-row: span 2;
	}
	& :nth-child(2) {
	 	grid-column: span 2;
		grid-row: span 1;
	}
	& :nth-child(3) {
		grid-column: span 2;
		grid-row: span 1;
	}
	& >:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
		grid-column: span 2;
	}

	@media(max-width: 1032px) {
		grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
		grid-template-rows: auto;

		& > * {
			grid-column: unset!important;
			grid-row: unset!important;
		}
	}
}

: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-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;
}
.text-wrap-pretty {
	text-wrap: pretty;
}
@supports not (text-wrap:pretty) {
	.text-wrap-pretty {
		text-wrap: balance;
	}
}
.align-items-start {
	align-items: start;
}
.has-shadow-accent {
	filter:drop-shadow(0 0.5em 1em var(--wp--preset--color--accent-2));
}
header.site-header {
    &::after {
        content: " ";
        height: 0.25em;
        width: 100%;
        display: block;
        background: linear-gradient(360deg, var(--wp--preset--color--accent-4));
    }
	& > div.wp-block-group {
		border-bottom-right-radius: 0!important;
	}
}

footer.site-footer {

	&::before {
    	content: " ";
    	height: 0.25em;
    	width: 100%;
    	display: block;
    	background: linear-gradient(360deg, var(--wp--preset--color--accent-4));
	}
	& :where(a, li, p) {
		color: var(--wp--preset--color--contrast);
	}
	& :where(li) a {
		text-decoration: none!important;
	}

	& :is(a):hover {
		color: var(--wp--preset--color--accent-1);
	}

	& .is-layout-grid {
		justify-content: center;
		display: grid;
		gap: max(2em, 3vw);
		grid-template-columns: repeat(auto-fit, minmax(10em, max-content));

		@media(max-width:782px) {
			grid-template-columns: 1fr;
			place-items: self-start;
            width: max-content;
		}
	}
	& .wp-block-social-links .wp-social-link :where(svg) {
		width: 1.5em;
		height: 1.5em;
		fill: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--accent-1);
	}

	.footer-bottom-row > * {
		@media(max-width: 1024px) {
			max-width: 70%;
		}
	}
}

/****************/
/***NAVIGATION***/
/****************/
.mega-menu-wrap .mega-menu.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
	top: calc((var(--header-height) / 2.5) - 1rem)!important;
}


a.mega-menu-link {
	font-size: var(--wp--preset--font-size--s)!important;

	span.mega-indicator::after {
		background-color: var(--wp--preset--color--accent-1)!important;
	}
}

.mega-menu-item.mega-current-page-ancestor.mega-current_page_ancestor > a,
.mega-current_page_item > a {
  	border-inline-start: 3px solid var(--wp--preset--color--accent-1)!important;
	color: var(--wp--preset--color--accent-1)!important;
	/*background: limegreen !important;*/
}

@media(min-width: 1200px) {
	#mainMenuRow > div > .mega-menu-wrap > ul.mega-menu > .mega-menu-item.mega-current-page-ancestor.mega-current_page_ancestor > a, 
	.mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a {
		border-inline-start: none!important;
	}
}

@media(max-width: 1200px) {
	header :where(div.wp-block-group):has(> div.mega-menu-wrap) {
		margin-inline-start: auto;
		margin-inline-end: 0 !important;
	}
	div.mega-menu-wrap .mega-menu-toggle.mega-menu-open + ul.mega-menu.max-mega-menu {
		padding-top: 3em!important;
	}
	div.mega-menu-wrap .mega-menu-toggle ~ button.mega-close::before {
		font-size: var(--wp--preset--font-size--m)!important;
	}
	header button.mega-close {
		background: var(--wp--preset--color--base)!important;
		border-bottom-left-radius: var(--wp--preset--border-radius--3-xl)!important;
	}
}

li.mega-menu-item-has-children > ul.mega-sub-menu:not(:where(.mega-menu-wrap > ul > li > ul.mega-sub-menu)) {
	margin-inline-start: 0.5em!important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
	top: var(--wp-admin--admin-bar--height);
}

.wp-block-navigation__overlay-container .wp-block-navigation__container.wp-block-navigation {
	width: 100%;

	& .wp-block-navigation-item {
		width: inherit;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
		padding-block: 0.5em;

		.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
			font-size: 2em;
			position: absolute;
            right: 0;
		}
	}

	& a.wp-block-navigation-item__content {
		width: 100%;
		padding: 0!important;
	}

	& .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
		display: block;
		position: static;
		top: 100%;
		padding-left: 0.5em;
	}

	& :is(.is-vertical.wp-block-navigation.is-layout-flow.wp-block-navigation-is-layout-flow) {
		margin-top: 0;
	}
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
    left: 0;
    right: auto;
	width: 100% !important;
}

.main-navigation {
	:where(.is-menu-open) ul.wp-block-navigation__container.is-responsive.main-navigation {
		margin: 0 auto!important;
	}
	:where(.is-menu-open) .wp-block-navigation__responsive-container-content {
		padding-top:0!important;
	}
	:where(.is-menu-open) {
		padding-top: 4em!important;
	}
}
.wp-block-group:has(> nav.nav-main-bottom) {

	@media(min-width: 1200px) {
		ul.nav-main-bottom {
			display: flex;
			gap: min(max(2em))!important;
		}
	}
	@media(max-width: 1200px) {
		& {
			margin-right: 0!important;
		}
	}
}

.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
	font-size: var(--wp--preset--font-size--l);
}

.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container {
    min-width: 280px;
}

.wp-block-navigation-item.has-child .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	min-width: 280px;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
    padding-inline: 1em;
	padding-top: 0.5em;
	padding-bottom: 0;
}

:where(:is(.current-menu-item)), :where(:is(.current-menu-ancestor)) {
	color: var(--wp--preset--color--accent-1);
}

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
	height: 2em;
	width: 2em;
}

nav :where(ul.wp-block-navigation:nth-last-of-type) {
	@media(min-width: 74em) {
		gap: 6em!important;
	}
}

nav :where(ul.wp-block-navigation:first-of-type) {
	@media(min-width: 74em) {
		gap: 1.25em!important;
	}
}

.wp-block-navigation__overlay-container {
	div > ul {
		justify-content: space-between;
	}
	form.nav-search {
		margin-block: 1.5em;
		text-transform: none;

		input:focus-visible {
			outline: 1px solid black;
		}

		button.wp-block-search__button svg {
			fill: var(--wp--preset--color--contrast);
		}

		input.wp-block-search__input {
			border: 1px solid;
		}
	}
}

html.has-modal-open main {
	filter: grayscale(1) blur(2px);
}

.nav-search, {
	input {
		background-color: var(--wp--preset--color--accent-4);
		color: var(--wp--preset--color--contrast);
		border: 1px solid var(--wp--preset--color--contrast);
	}
	::-webkit-input-placeholder {
		color: rgb(228, 228, 228);
		color: var(--wp--preset--color--contrast);
	}
	button.wp-block-search__button svg {
		fill: var(--wp--preset--color--accent-2);
	}
}

form.search-form {
	background: var(--wp--preset--color--base);
	display: flex;

	label {
		width: 100%;
		display: flex;
        flex-direction: row;
		height: fit-content;
        align-self: center;
	}
}

input[type="search"] {
	&::-webkit-input-placeholder {
		color: hsl(from var(--wp--preset--color--contrast) h s 79 / 1);
	}
}

input.search-field {
	font-size: var(--wp--preset--font-size--s);
	font-family: inherit;
	background-color: var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 2em;
	padding-inline: 1em;
	margin-left: 1em;
	min-width: stretch;
}

input.search-submit.wp-element-button {
	padding-block: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--preset--border-radius--3xl);
	margin-left: 1em;
}

@media (prefers-reduced-motion: no-preference) {
	nav :where(.wp-block-navigation-item a) {
		text-decoration: none!important;
		background-image: linear-gradient(var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-1))!important;
		background-repeat: no-repeat!important;
		background-position: left bottom!important;
		background-size: 0% 3px;
		transition: background-size 400ms ease;
		max-width: fit-content!important;

		&:hover {
			background-size: 100% 3px;
		}
	}
	.wp-block-navigation-item a:hover {
		background-size: 100% 3px;
	}

	a.mega-menu-link::after {
		--line-width: calc( 100% - 2 * 0.5em);
		content: "";
		width: var(--line-width);
		height: 3px;
		background-image: linear-gradient(var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-1));
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 0% 3px;
		position: absolute;
		bottom: -0.25em;
		left: 0.5em;
		display: block !important;
		transition: background-size 400ms ease;
	}
	a.mega-menu-link:hover::after {
		background-size: var(--line-width) 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	nav :where(.wp-block-navigation-item a) {
		background: unset;
		text-decoration: underline 0.125em solid transparent;
	}
	.wp-block-navigation-item a:hover {
		background: unset;
		text-decoration: underline 0.125em solid var(--wp--preset--color--accent-1);
	}
}

.calendar-button {
	:where(path) {
		transition: var(--transition-base)!important;
	}
	&:hover {
		cursor: pointer;
		:where(path) {
			fill: var(--wp--preset--color--accent-1);
		}
	}
	.calendar-link {
		width: 100%;
		height: 100%;
		display: block;
	}
}


/*
* Make the mobile navigation menu appear sooner
*/
@media ( min-width: 1200px ) {
    .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: 1199px ) {

	ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu li:before {
	    content: "";
	    width: 3px;
	    height: 1.25em;
	    background: var(--wp--preset--color--custom-inside-green);
	    position: absolute;
	    left: -0.5em;
	}

	/** When using navigation overlay template, we want to hide the upper nav completely and show it only via the template **/
	div.wp-block-group :has(> nav[aria-label="Upper Main Nav"]) {
		display:none;
	}
 	header :not(:has(.is-menu-open)) hr:first-of-type {
    	display: none;
    }
	/****/
	.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;
		}
	}
	form.wpcf7-form {
		grid-template-areas:
			"first-name"
			"last-name"
			"your-email"
			"your-message"
			"your-message"
			"contact-submit"
			"spinner"
			"response-output"!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 ***/

/* Flex form */
form.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-inline: auto;

	label {
		display: block!important;
	}
}

input[type=submit].wpcf7-submit {
	background-color: var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--base);
	border: 1px solid currentColor;
    padding-top: var(--button-padding);
    padding-right: var(--button-padding);
    padding-bottom: var(--button-padding);
    padding-left: var(--button-padding);
    text-decoration: none;
	font-size: inherit;

	&:hover {
		transform: scale(0.98);
		filter: drop-shadow(0 0.15em 0.30em var(--wp--preset--color--accent-4));
		cursor: pointer;
	}
}

textarea,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]) {
	caret-color: var(--wp--preset--color--accent-1);
}

textarea:focus-visible,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]):focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--accent-1);
}

:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
	background-color: unset;
	border: unset;
}

button.wp-block-search__button.has-icon.wp-element-button {
	background-color: unset;
    box-shadow: unset;
    padding: unset;
	border-width: unset;

	&:hover {
		border-color: var(--wp--preset--color--accent-1);
	}

	svg {
		min-width: 2rem;
		min-height: 2rem;
	}
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
    stroke: var(--wp--preset--color--accent-1);
	margin-top: unset;
	transition: var(--transition-base);

	path {
		stroke-width: 2;
	}
}

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

.wp-block-search__inside-wrapper {
	input[type=search].wp-block-search__input {
		border-radius: 2em;
		padding-inline: 1em;
	}
}

/*** WP TABLE ***/
.wp-block-table th,
.wp-block-table .has-text-align-center {
    text-align: left !important;
}

.wp-block-table table thead th {
    position: sticky;
    top: 0;
	background: var(--wp--preset--color--accent-2);
    z-index: 10;
}

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

figure.wp-block-table {
	max-height: 550px;
    scrollbar-color: var(--wp--preset--color--accent-1) var(--wp--preset--color--base);
	overflow-x: auto;
	white-space: nowrap;
	text-wrap: nowrap;
	max-width: 100%;

	table {
		border-block-color: transparent;

		thead {
			border-bottom: 2px solid rgba(0, 0, 0, 0.5);
			tr > th {
				border-block-color: transparent;
				padding-inline: 0.5em;
			}
			th:first-of-type {
				border-left-color: transparent;
			}
			th:last-of-type {
				border-right-color: transparent;
			}
		}
		tbody {
			tr:last-of-type > td {
				border-bottom-color: transparent;
			}
			td:first-of-type {
				border-left-color: transparent;
			}
			td:last-of-type {
				border-right-color: transparent;
			}
			td {
				padding: 0.5em;
			}
		}
	}
	th, tr > td {
		border-color: rgba(0, 0, 0, 0.5);
	}
}


/** SOCIAL MEDIA STRIPE **/

aside.some-stripe-wrap {
	z-index: 999;
    position: fixed;
    left: 0;
    top: calc(var(--header-height) + var(--wp-admin--admin-bar--height));
    max-width: fit-content;
	margin-top: 0;

	@media(max-width: 1270px) {
		display: none;
		pointer-events: none;
	}
}

main {
	position: relative;
}



/* aside.block-editor-block-list__block {
	display: none!important;
} */

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

/** POPOVER GROUP
* Arttu Teronen | Sarmantti Oy | 2026-03-05
* Added popover styling for class ".popover-group"
*/
body:has(.popover-group[popover]:popover-open) {
	overflow: hidden;
}
[popover]:popover-open {
	max-width: 50%;
	border: 0;
	overflow-y: scroll;
	max-height: 100vh;
	padding: 0;
	&::backdrop {
		background-image: linear-gradient(45deg,
			var(--wp--preset--color--accent-1),
			var(--wp--preset--color--accent-2),
			var(--wp--preset--color--accent-3)
			);
		opacity: 0.95;
	}
	@media(max-width: 782px) {
		max-width: 80%!important;
	}
	.close-popover {

		&:hover {
			cursor: pointer;
		}
	}
}

/** Optional widths for group blocks' child items. */
/* Group childs set with max-width of <custom-choice> take 90% width on mobile */
/* :where(:not(div.entry-content)) > .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	@media(max-width: 991px) {
		max-width: 80%;
	}
	@media(max-width: 782px) {
		max-width: 90%;
	}
} */

/** CAROUSEL STYLES **/
.is-style-carousel-this {

	.slick-slider.slick-dotted {
		margin-bottom: 2em;
	}
	.slick-autoplay-toggle-button {
		color: var(--wp--preset--color--accent-1);

		.slick-play-icon:before, .slick-pause-icon:before {
			font-size: var(--wp--preset--font-size--l);
		}
	}
	.slick-arrow {
		z-index: 1;
		width: fit-content;
		height: fit-content;
		/* span {
			color: var(--wp--preset--color--accent-1);
		} */
		&.slick-prev {
			left: 2rem;
		}
		&.slick-next {
			right: 2rem;
		}
		/* .slick-prev-icon, .slick-next-icon {
			font-size: var(--wp--preset--font-size--4-xl);
		} */
		&.slick-prev .slick-prev-icon:before {
			content: "←" / "Previous article";
		}
		&.slick-next .slick-next-icon:before {
			content: "→" / "Next article";
		}
	}
	.slick-next:focus .slick-next-icon, .slick-next:focus .slick-prev-icon, .slick-prev:focus .slick-next-icon, .slick-prev:focus .slick-prev-icon, .slick-dots li button:focus .slick-dot-icon:before {
		color: var(--wp--preset--color--contrast);
		outline: 2px solid var(--wp--preset--color--accent-1);
	}
	.slick-dots li button .slick-dot-icon {
		color: var(--wp--preset--color--accent-1);
	}

	.slick-slide li img.wp-block-cover__image-background.wp-post-image {
		width: 100%;
		mask-image: linear-gradient(
			to bottom,
			rgb(from var(--wp--preset--color--accent-1) r g b / 0.005),
			black 50%,
			black 50%,
			rgb(from var(--wp--preset--color--accent-1) r g b / 0.005)
		);
		-webkit-mask-image: linear-gradient(
			to bottom,
			rgb(from var(--wp--preset--color--accent-1) r g b / 0.005),
			black 50%,
			black 50%,
			rgb(from var(--wp--preset--color--accent-1) r g b / 0.005)
		);
	}
	.slick-slide li img.wp-block-cover__image-background.wp-post-image + .wp-block-cover__inner-container {
		@media(max-width: 74em) {
			margin-top: 4em!important;
			margin-bottom: auto;
		}
	}

	:where(.wp-block-paragraph, .wp-block-heading, .wp-block-post-title, .is-style-sarmant-iff-post-title-1) {
		text-shadow: var(--ts);
	}

	.slick-dots li {
		@media(max-width: 74em) {
			margin: 0 10px;
		}
	}

	.slick-next .fa-solid, .slick-prev .fa-solid {
		font-size: var(--wp--preset--font-size--xl);
        color: var(--wp--preset--color--accent-1);
        background: var(--wp--preset--color--base);
        padding: 0.25em;
        width: fit-content;
        border-radius: 100%;
	}
}

/** Style images in old posts **/
figure.wp-block-uagb-image__figure :where(img){
	max-width: 100%;
    height: auto;
}

:where(:is(nav.wp-block-breadcrumbs)) {
	a {
		text-decoration-color: inherit;
	}
}

/** Style heading where background is white **/
body.single :where(.wp-block-group.has-contrast-background-color) :is(h2,h3,h4,h5,h6) {
	color: var(--wp--preset--color--base);
}

/** Wrap headings nicely on mobile **/
:is(.wp-block-heading) {
    text-wrap-style: balance;
}

/** FADE OUT IMAGE **/
figure.fade-out-image img {
	-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/** COUNTDOWN TIMER **/
.wp-block-group > div.wpdevart_countdown_standart#wpdevart_countdown_1 {

	.wpdevart_top_html {
		margin-block: 0.5em!important;

		:where(a) {
			color: var(--wp--preset--color--contrast)!important;
			text-decoration-color: transparent;
			&:hover {
				text-decoration-color: var(--wp--preset--color--accent-1)!important;
			}
		}
	}

	div.wpdevart_countdown_element {
		& * {
			font-family: var(--wp--preset--font-family--cooper-hewitt-medium)!important;
		}

		span[class$="_text"] {
			text-transform: uppercase;
			font-size: 1rem;
		}
		@media(max-width: 500px) {
			width: 50%;
            margin: 0 auto;
		}
	}
}

/** ARTICLES LIST **/
li.wp-block-post.post {
    display: flex;
    flex-direction: column;
    /* gap: var(--wp--preset--spacing--s); */
}

/** SPONSORS AND PARTNERS **/
.sponsors-and-partners {
	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

		:where(figure) {
			text-align: center;
		}

		:where(figure.wp-block-image) > img {
			border-bottom-right-radius: 0;
			max-height: 120px;
			width: auto;
			vertical-align: middle;
			align-items: center;
		}
	}
}

.sponsors-and-partners {
	.wp-block-group .wp-block-group.is-layout-constrained {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.25em;
		column-gap: 1em;
	}
	figure {
		flex-basis: 16%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	img {
		vertical-align: middle;
		min-width: 140px;
		max-width: 90%;
		border-radius: 0;
	}
}

/** Style nav card wrapper **/

:has(> .nav-card, > .is-style-sarmant-iff-card-like-button) {
	grid-template-columns: repeat(auto-fit, minmax(16em, max-content));
}

.wp-block-post-template-is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(16em, max-content));
}

/** Button text vertical alignment fix */
.wp-block-button__link.wp-element-button {
	text-wrap-style: balance;
}


/** Complianz **/
body.cmplz-document .cmplz-document.cookie-statement > * {
	color: #FFF;
}