/*
Theme Name: Demo
Theme URI:
Description: Mekanismin Demo
Template: custom
Author: Mekanismi
Author URI: https://www.mekanismi.fi
Version: 1.0

License:
License URI:

*/

:root {
    /* --primary: hsl(180, 92%, 39%); */
    --primary: hsl(194, 54%, 59%);
    --primary-filter: invert(78%) sepia(31%) saturate(657%) hue-rotate(84deg) brightness(87%) contrast(84%);
    --primary-hover: hsl(194, 54%, 69%);
    --secondary: hsl(150, 59%, 53%);
    --light-grey: #f3f6f8;
    --accent: hsl(38, 58%, 72%);
}
body.theme-style-dark{
    --primary: hsl(339, 80%, 26%);
    --secondary: hsl(196, 31%, 22%);
    --accent: hsl(188, 52%, 70%);
    background: var(--black);
    --text-color: var(--white);
    color: var(--text-color);
    --color: var(--white);
    --light-grey: #4a5056;
}
body.theme-style-dark .has-light-grey-background-color{
    --text-color: var(--white);
}
body.theme-style-dark .wp-block-cover__background.has-accent-background-color{
    --wp--preset--color--accent: #26628d;
}
body.theme-style-dark .wp-block-group:not(.has-light-grey-background-color):not(.has-white-background-color).has-black-color{
    --text-color: var(--white);
}

.has-white-background-color,
.has-light-grey-background-color{
    --text-color: var(--black);
    color: var(--text-color);
}

#theme-style-select{
    position: absolute;
    z-index: 99999;
    right: 0;
    top: 0;
    font-size: 0.8em;
    width: 6em;
}
.admin-bar #theme-style-select{
    top: 30px;
}

/*header*/


.hero h1 + p {
    margin-top: 1.5em;
}

.hero img {
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#top-bar {
    background: transparent;
    transition: all 0.3s ease;
}
.wp-block-heading{
    --text-color: var(--secondary);
}
body.theme-style-dark .wp-block-heading{
    --text-color: var(--accent);
}
:where(.wp-block-group, .wp-block-media-text).has-background:not(.has-light-grey-background-color):not(.has-white-background-color) .wp-block-heading{
    --text-color: inherit;
}

.menu.drop-down-menu li > ul {
    min-width: 280px;
}

/* .nostot figure.wp-block-image.is-style-circle img {
    max-width: 280px;
}

.nostot .pic-wrapper {
    text-align: center;
}

.nosto-link-container:hover {
    box-shadow: none;
}
.nosto-link-container {
    background: hsl(0deg 0% 95.69% / 60%);
}

.nosto-block {
    padding: 1.5em;
} */

.navigation.f-col {
    justify-content: flex-end;
}

body.theme-style-dark #content .logos img{
    filter: grayscale(1) contrast(0.9) brightness(1.05) invert(1);
    mix-blend-mode: normal;
}
body.theme-style-dark #content .logos a:hover img{
    filter: grayscale(1) contrast(0.9) brightness(1.05) invert(1) !important;
}

body.theme-style-dark .has-light-grey-background-color .wp-block-button.is-style-outline .wp-block-button__link{
    --border-color: var(--white);
}
body.theme-style-dark .has-light-grey-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover{
    --text-color: var(--btn-color);
}

.frm_primary_label {
    margin-top: 1em;
}

.nosto-block .wp-block-cover .wp-block-heading{
    transform: rotate(-6deg);
    transition: all .3s;
}
 /* a.nosto-link-container:hover .nosto-block .wp-block-cover .wp-block-heading{
    transform: rotate(-3deg);
} */

#content .wp-block-column.wp-block-cover-inside {
    min-width: unset;
}

.hero{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(50% + 70px) calc(100% - 40px), 50% 100%, calc(50% - 70px) calc(100% - 40px), 0 100%);
}

/* .wp-block-group.has-secondary-background-color.is-style-full-width{
    position: relative;
}
.wp-block-group.has-secondary-background-color.is-style-full-width::before,
.wp-block-group.has-secondary-background-color.is-style-full-width::after{
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 15px);
    margin-block: -15px;
    background: var(--white);
    top: 0;
}
.wp-block-group.has-secondary-background-color.is-style-full-width::after{
    bottom: 0;
    top: unset;
} */

.wp-block-group.has-secondary-background-color.is-style-full-width{
    clip-path: polygon(0 0, calc(50% - 30px) 0, 50% 20px, calc(50% + 30px) 0, 100% 0, 100% 100%, calc(50% + 30px) 100%, 50% calc(100% - 20px), calc(50% - 30px) 100%, 0 100%);
}

.loop-wrapper > .post.one-row .cont .text-container {
    color: var(--black);
    --text-color: var(--black);
}

.theme-style-dark :is(h3, .post .date) {
    color: var(--white);
}