/**
 * Jaloin Teeman sivustokohtaiset tyylit.
 */


/* Sivuston navigaatio */

/* Hampparin ja sulkemiskuvakkeen koko */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}


/* Kuvaton hero näyttää valitun peitteen kokonaan. Ilman värivalintaa
   piilotetaan WordPressin oletuspeite, jotta sivuston tausta näkyy. */
.page-hero:not(:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background))
> .wp-block-cover__background {
	opacity: 0 !important;
}

/* Palettiväri on luokkana, oma väri inline-tyylinä ja liukuväri
   tunnistetaan WordPressin yhteisestä liukuväriluokasta. */
.page-hero:not(:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background))
> .wp-block-cover__background:is([class*="-background-color"], .has-background-gradient, [style*="background-color:"], [style*="background:"]) {
	opacity: 1 !important;
}

/* Peri sivuston tekstiväri, ellei herolle ole valittu omaa väriä. */
.page-hero:where(:not(.has-text-color)) {
	color: inherit;
}

/* Osioiden tunnisteet ja lohkotyylit periytyvät Twenty Twenty-Fivesta.
   Muokkaa asiakkaan aluevärejä ja painikevärejä näissä viidessä säännössä.
   Tavalliset CSS-muuttujat pitävät painikkeiden värit oikeina myös
   sisäkkäisissä osioissa: lähimmän osion arvot periytyvät painikkeelle. */

/* 1: Valkoinen alue. */
body .is-style-section-1 {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	--jaloin-button-background: var(--wp--preset--color--accent-1);
	--jaloin-button-text: var(--wp--preset--color--accent-5);
	--jaloin-button-hover-background: var(--wp--preset--color--accent-2);
}

/* 2: Tummanharmaa alue. */
body .is-style-section-2 {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-5);
	--jaloin-button-background: var(--wp--preset--color--accent-5);
	--jaloin-button-text: var(--wp--preset--color--contrast);
	--jaloin-button-hover-background: var(--wp--preset--color--accent-4);
}

/* 3: Musta alue. */
body .is-style-section-3 {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-5);
	--jaloin-button-background: var(--wp--preset--color--accent-5);
	--jaloin-button-text: var(--wp--preset--color--contrast);
	--jaloin-button-hover-background: var(--wp--preset--color--accent-4);
}

/* 4: Vaaleanharmaa alue. */
body .is-style-section-4 {
	background-color: var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--contrast);
	--jaloin-button-background: var(--wp--preset--color--accent-1);
	--jaloin-button-text: var(--wp--preset--color--accent-5);
	--jaloin-button-hover-background: var(--wp--preset--color--accent-2);
}

/* 5: Vaalea perusalue. */
body .is-style-section-5 {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	--jaloin-button-background: var(--wp--preset--color--accent-3);
	--jaloin-button-text: var(--wp--preset--color--accent-5);
	--jaloin-button-hover-background: var(--wp--preset--color--accent-2);
}

body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5) {
	padding: var(--wp--preset--spacing--40);
}

/* Peri lähimmän sisältöalueen väri myös emoteeman erikseen värittämiin
   sisälohkoihin. Lohkon oma väri tai inline-tyyli säilyttää etusijansa. */
body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
:where(h1, h2, h3, h4, h5, h6, figcaption, .wp-block-post-date,
	.wp-block-post-terms, .wp-block-site-title, .wp-block-post-author-name,
	.wp-block-comment-author-name, .wp-block-comment-date,
	.wp-block-comment-edit-link, .wp-block-comment-reply-link,
	.wp-block-quote, .wp-block-pullquote) {
	color: inherit;
}

/* Tekstilinkkien alleviivaus ja hover periytyvät emoteemasta. */
body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
a:where(:not(.wp-element-button, .wp-block-button__link, .wp-block-file__button)) {
	color: inherit;
}

/* Täyttöpainike. Lohkoeditorissa asetetut omat värit voivat ohittaa nämä. */
body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--jaloin-button-background);
	color: var(--jaloin-button-text);
}

body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
.wp-block-button:not(.is-style-outline) .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--jaloin-button-hover-background);
	color: var(--jaloin-button-text);
}

/* Reunapainike seuraa alueen tekstiväriä ja täyttyy kohdistettaessa. */
body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
.wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--jaloin-button-background);
	border-color: var(--jaloin-button-background);
	color: var(--jaloin-button-text);
}

/* Kaksivärinen näppäimistökohdistus erottuu vaalealla ja tummalla pinnalla.
   Sama sääntö toimii myös editorissa ilman .wp-site-blocks-käärettä. */
body :is(.is-style-section-1, .is-style-section-2, .is-style-section-3, .is-style-section-4, .is-style-section-5)
:is(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

/* Vaalea accent-4 on pintaväri; emoteema käyttää sitä myös metatekstissä.
   Peritty tekstiväri säilyttää luettavuuden myös osioiden ulkopuolella. */
body :is(.wp-block-post-date, .wp-block-comment-author-name) {
	color: inherit;
}

body :is(.wp-block-post-date, .wp-block-comment-author-name) a {
	color: inherit;
}

/* Erotin */


hr.is-style-dots::before {
	color:var(--wp--preset--color--accent-3);
	font-size: 8em;
    letter-spacing: 0;
    padding-left: 0;
}


/* Tiedosto */

.wp-block-file__button {
    font-size: var(--wp--preset--font-size--small);
    padding-top: 0.4rem;
    padding-right: 1.6rem;
    padding-bottom: 0.4rem;
    padding-left: 1.6rem;
}


/* Kansleri Cookie Banner – sivustokohtaiset tyylit */

.kncc-banner, .kncc-banner a {
	color: #fff;
	font-size: 12px !important;
}

.kncc-banner .kncc-btn {
	border-radius: 2px;
	font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    padding: 0.4rem 0.5rem !important;
    margin: 0 !important;
}

.kncc-banner .kncc-heading {
	display:none;
}


/* Jaloin Lohkot – Nostokortin sivustokohtainen väri */

.wp-block-jaloin-nostokortti__nuoli {
	color: var(--wp--preset--color--accent-1);
}

/* Jaloin Teema – Takaisin ylös: muokkaa kokoa, paikkaa, pyöristystä ja värejä tässä.
   Matala pinotaso jättää valikot ja evästebannerin painikkeen yläpuolelle. */
body .jaloin-back-to-top {
	position: fixed;
	right: max(24px, env(safe-area-inset-right));
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

body .jaloin-back-to-top[hidden] {
	display: none;
}

body .jaloin-back-to-top:hover {
	background: var(--wp--preset--color--accent-3);
}

body .jaloin-back-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

/* Piilota painike avoimen mobiilivalikon tai muun modaalin ajaksi.
   visibility poistaa sen samalla näppäimistön kohdistusjärjestyksestä. */
html.has-modal-open .jaloin-back-to-top,
body.has-modal-open .jaloin-back-to-top,
body:has(.wp-block-navigation__responsive-container.is-menu-open, dialog[open]) .jaloin-back-to-top {
	visibility: hidden;
}