/*
Theme Name: Sarmant Inergia Mini
Author: Arttu Teronen, Mika Kataja, Sarmantti Oy
Author URI: https://sarmantti.fi
Description: Theme for Inergia 2025 
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 0.0.5
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;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
/* .error {
	background: #AB4E52;
}
.success {
	background: #00A550;
}
.warning {
	background: #E69F64;
} */

: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;
}
: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)
}
.sarmant-corners {
	
	svg {
		position: absolute;
		bottom: 0;
		z-index: -1;
	}
}


/* GRID TEMPLATES */
/******************/

/* Grid template for regular layout header-main-footer */
:where(.wp-site-blocks.grid-container) {
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	display: grid;
	grid-template-areas:
		"header"
		"main"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}
div.site-header {
	grid-area: header;
}
div.site-main {
	grid-area: main;
}
div.site-footer {
	grid-area: footer;
	margin-top: 0!important;
}
/** Adjust grid when user is logged in **/
:where(body.logged-in.admin-bar) div.wp-site-blocks  {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height))!important;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height))!important;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height))!important;
	display: grid;
	grid-template-areas:
		"header"
		"main"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}
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: " ";
}
.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;
}
.is-content-max-width-75 {
	max-width: 75ch;
}

@media screen and (max-width: 37.5em) {
	.is-style-grid-cols-one {
		grid-template-columns: 1fr!important;
	}
	.order-reverse {
		flex-direction: column-reverse;
	}
}
.list-style-none {
	list-style-type: none;
	padding-left: 0;
	text-wrap: pretty;
}
.text-wrap-pretty {
	text-wrap: pretty;
}


.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);
}

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

.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;
	}
}

/*
: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;
	}
	.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;
		}
	}
}
/*** Sarmant-alerts and sarmant-priority-alerts ***/

#sarmant-priority-alerts .disrupt-alert  {
 background: var(--wp--preset--color--inergia-alert);
 color: #fff;
 padding:1em 2em;
}
#sarmant-priority-alerts .disrupt-alert + .disrupt-alert  {
/*	margin-top: 1em;*/
	border-top: thin solid black;
}
#sarmant-priority-alerts .disrupt-alert > .container {
  max-width: var(--wp--style--global--content-size);
	margin: auto;
}
#sarmant-priority-alerts .alert-modified {
	font-size: 1rem;
}

#sarmant-alerts {
}
#sarmant-alerts > .disrupt-alert {
}
#sarmant-alerts .alert-modified {
	font-weight: bold;
}


/*** CONTACT FORM ***/

input.wpcf7-submit {
	grid-area: contact-submit;
	background-color: var(--wp--preset--color--inergia-basic);
	color: white;
    border-radius: none;
	border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    padding-top: var(--wp--preset--spacing--no-clamp-small);
    padding-right: var(--wp--preset--spacing--no-clamp-small);
    padding-bottom: var(--wp--preset--spacing--no-clamp-small);
    padding-left: var(--wp--preset--spacing--no-clamp-small);
    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: flex;
	flex-direction: column; 
	max-width: fit-content;
	max-width: min-content;
	gap: 1em;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}
.wpcf7-form-control {
	padding-block: 0.5em;
	font-size: var(--wp--preset--font-size--medium);
}
.wpcf7-form label {
	margin-bottom: 0.75em;
}
.wpcf7-form .wpcf7-textarea {
	width: 100%;
}

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

/* Font Awesome icons */
a[href^="/"] {
	position: relative;
	padding-right: 1.2em;
}

a[href^="/"]:after {
	font-family: "Font Awesome 6 Free";
	font-size: 0.7em;
	font-weight: 600;
	position: absolute;
	right: .2em;
	bottom: .2em;
	content: "\f054";
	display: block;
	width: 1em;
    background-color: inherit;
}

a[target=_blank] {
  position: relative;
  padding-right: 1.2em;
}
a[target=_blank]:after {
	font-family: "Font Awesome 6 Free";
	font-size: 0.8em;
	font-weight: 600;
	position: absolute;
	right: .2em;
	bottom: .2em;;
	content: "\f08e";
	display: block;
	width: 1em;
    background-color: inherit;
}

.phone a[href^="tel:"] {
	position: relative;
    padding-left: 1em;
}
.phone a[href^="tel:"]:after {
	font-family: "Font Awesome 6 Free";
	font-size: 0.8em;
	font-weight: 600;
	position: absolute;
	left: 0em;
	bottom: .2em;
	content: "\f095";
	display: block;
	width: 1em;
    background-color: inherit;
}

.email a[href^="mailto:"] {
	position: relative;
    padding-left: 1em;
}
.email a[href^="mailto:"]:after {
	font-family: "Font Awesome 6 Free";
	font-size: 0.8em;
	font-weight: 600;
	position: absolute;
	left: 0em;
	bottom: .2em;;
	content: "\f0e0";
	display: block;
	width: 1em;
    background-color: inherit;
}

a[href$=".pdf"] {
	position: relative;
    padding-right: 1.2em;
}
a[href$=".pdf"]:after {
	font-family: "Font Awesome 6 Free";
	font-size: 0.8em;
	font-weight: 600;
	position: absolute;
	right: .2em;
    bottom: .2em;
	content: "\f1c1";
	display: block;
	width: 1em;
}
#sarmant_submenu li a:after { 
	bottom: 0.5em!important; 
}
p.no-pic a {
	margin-right: unset;
}
p.no-pic a:after {
  content: "";
}

a.some {
  display: inline-block;
  font-size: 1.4em;
  margin-top: 0.2em;
  margin-inline: 0.2em;
  padding: 0;
}

a.some:after {
  content:none!important;
}

/* Table customization */
figure.wp-block-table.is-style-stripes table th, 
figure[class*=" is-style-inergia-table-"] table th {
	background-color: rgba(0,0,0,0.2);
	font-weight: inherit;
}

figure.wp-block-table.is-style-stripes table thead, 
figure[class*=" is-style-inergia-table-"] table thead {
	border-bottom: thin solid black;
}

figure.wp-block-table.is-style-stripes table th, 
figure[class*=" is-style-inergia-table-"] table th, 
figure.wp-block-table.is-style-stripes table td, 
figure[class*=" is-style-inergia-table-"] table td {
	border: thin solid black;
	padding: 0.5em 0.5em;
}


figure.wp-block-table.is-style-stripes table tr:nth-child(2n+1), 
figure.wp-block-table.is-style-stripes table tr {
  background-color: transparent; 
}

figure.wp-block-table.is-style-stripes table tr:nth-child(2n), 
figure[class*=" is-style-inergia-table-"] table tr:nth-child(2n) {
  background-color: rgba(0,0,0,0.1);
}

figure.is-style-inergia-table-base table th {
	color: white;
	background-color: var(--wp--preset--color--inergia-basic);
}
figure.is-style-inergia-table-base table tr:nth-child(2n) {
	background-color: color-mix(in srgb, var(--wp--preset--color--inergia-basic), transparent 88%); 
}

figure.is-style-inergia-table-air table th {
	color: white;
	background-color: var(--wp--preset--color--inergia-1);
}
figure.is-style-inergia-table-air table tr:nth-child(2n) {
	background-color: color-mix(in srgb, var(--wp--preset--color--inergia-1), transparent 88%); 
}

figure.is-style-inergia-table-land table th {
	color: white;
	background-color: var(--wp--preset--color--inergia-2);
}
figure.is-style-inergia-table-land table tr:nth-child(2n) {
	background-color: color-mix(in srgb, var(--wp--preset--color--inergia-2), transparent 88%); 
}

figure.is-style-inergia-table-water table th {
	color: white;
	background-color: var(--wp--preset--color--inergia-3);
}
figure.is-style-inergia-table-water table tr:nth-child(2n) {
	background-color: color-mix(in srgb, var(--wp--preset--color--inergia-3), transparent 88%); 
}

/* core/image Henkilökuva */
figure.is-style-personnel img {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
	border-radius: 99999px;
	border: thin solid #8b8680;
}

/* hide items from mobile, the janky way */
@media (max-width: 781px) {
	.hide-mobile { 
		display: none!important;
	}
	.submenu {
		display: none;
	}
}

.sub-menu.anchor .menu-item-type-anchor a {
	text-transform: initial; 
  padding-left: 1em!important;
}
/*
.sub-menu.anchor .level-h2 a:before{
	content: "|-  ";
}
.sub-menu.anchor .level-h3 a:before{
	content: "||- ";
}
.sub-menu.anchor .level-h4 a{
	content: "|||-";
}
.sub-menu.anchor .level-p a{
	content: "   -";
}*/

details {
	background-color: color-mix(in srgb, var(--wp--preset--color--inergia-basic), transparent 88%); 
	/*border: thin solid var(--wp--preset--color--inergia-basic);*/
	margin-bottom: 0.25em!important;
}
details[open] {
  padding-bottom: 1em;
}
details p {
	padding-inline: 0.5em;

}
details p:empty {
 display:none;
}

details > summary {
	padding-inline: 0.5em;
	padding-block: 0.25em;
	background-color: var(--wp--preset--color--inergia-basic);
	color: white;
}
details > summary::marker {
	position: absolute;
	right: 0;
}

.wp-block-cover:not(:has(img)) {
	min-height: 0!important;
}