/*!
Theme Name: Virnex Theme
Theme URI: http://underscores.me/
Author: Virnex Group Oy
Author URI: https://virnex.fi/
Description: Custom theme: Virnex Theme, developed by Virnex
Version: 2.0.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tammi-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Tammi Theme is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* Bootrap media exsamples
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
*/

/* imports */
@import "css/variables.css";
@import "css/navigation.css";
/* load all so in editor */
@import "css/blocks.css";
@import "css/template-parts.css";

/* ANCHOR SITE BASE HTML reset 
   The basic structure of the page is the bottom, don't change it. 
   - This forces the footer and header into place so that the footer is at the end of the page.
*/

html { height: 100%; }
html.admin-bar { height: calc(100% - 32px); }
body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}
header#site-header,
footer#site-footer {
	flex: 0 0 auto;
	background-color: var(--main-color-1);
	color: var(--white);
}
#site-wrapper {
	flex: 1 0 auto;
	/* overflow-x: auto; */
}

/* ANCHOR - SITE wrapper */


/* ANCHOR - HEADER */
#site-header {
	position: relative;
}
#header-upper {
	background-color: var(--main-color-2);
	padding: var(--gap) 0;
	font-size: 1.2rem;
	font-weight: bold;
}
#header-lahjoittajapalvelu a {
	color: var(--white);
	text-decoration: none;
}
#header-lahjoittajapalvelu a:is(:hover, :focus) {
	text-decoration: underline;
}
#header-lahjoittajapalvelu:before {
	font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-right: 15px;
    content: "\f879";
}
#header-section {
}
#header-section {
	display: flex;
	gap: var(--gap);
	padding-top: var(--gap-lg);
	justify-content: space-between;
}
#header-section .site-logo img {
	max-height: 65px;
	margin-bottom: 20px;
}
#header-section__controls {
	width: 100%;
}
.site-seach-form {}
.site-seach-form label {
	margin: 0;
}
#site-header .languages-div {
	display: flex;
	align-items: flex-end;
	margin-bottom: 20px;
}
/* Kielivalikko */
.languages-div .wpml-ls {
	padding: 0;
}
.languages-div .gtranslate_wrapper {
	display: flex;
}
.languages-div .wpml-ls a, .languages-div .gtranslate_wrapper a {
    color: var(--white);
	padding: 0 10px;
	box-sizing: border-box;
}
.languages-div .wpml-ls a:is(:hover, :focus), .languages-div .gtranslate_wrapper a:is(:hover, :focus) {
    text-decoration: underline;
}
.languages-div .gtranslate_wrapper a {
	border-left: 1px solid white;
}
.languages-div .gtranslate_wrapper a:first-of-type, .languages-div .gtranslate_wrapper a.gt-current-lang:first-of-type + a {
	border-left: none;
}
.languages-div .gt-current-lang {
	display: none;
}

@media (max-width: 767.98px) {}

@media (min-width: 992px) {
	.media-desktop {
		height: 100%;
	}
	.media-mobile {
		display: none!important;		
	}
}
@media (max-width: 991.98px) {
	.media-desktop {
		display: none!important;
	}
	.media-mobile {
		flex-wrap: wrap;
	}
	#header-kerayslupa {
		display: none;
	}
	#header-section {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.header-container {
		align-items: center;
	}
	#header-section .site-logo img {
		max-height: 40px;
		margin-bottom: 0;
	}
	#header-section__controls {
		display: flex;
		justify-content: flex-end;
	}
    #site-header .languages-div {
        display: none;
    }	
}

/* ANCHOR - FOOTER */

#site-footer {
	padding: 60px 0 0;
	position: relative;
}

footer p {
	color: var(--white);
}
footer a {
	display: flex;
	margin-bottom: 0.5em;
	color: var(--white);
	text-decoration: none;
}
footer a:is(:hover, :focus) {
	color: var(--white);
	text-decoration: underline;
}
footer img.footer-logo {
	height: 80px;
	margin-bottom: 24px;
	object-fit: contain;
}
.footer-image {
    max-width: 200px;
}
.footer-col {
	padding-top: 80px;
}
.footer-phone, .footer-email {
	margin-bottom: 1rem;
}
.footer-phone:before, .footer-email:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: var(--extra-color-1);
    margin-right: 15px;
}
.footer-phone:before {
    content: "\f879";
}
.footer-email:before {
    content: "\f0e0";
}
.footer-title {
	font-weight: 700;
	margin-bottom: 1em;
}
.footer-permit-link, .footer-donate-link {
	font-weight: 700;
}
.footer-permit-link:after, .footer-donate-link:after {
	margin-left: 10px;
	font-family: "Font Awesome 5 Pro";
    content: "\f061";
}
.footer-phone:is(:hover, :focus), .footer-email:is(:hover, :focus),
.footer-permit-link:is(:hover, :focus), .footer-donate-link:is(:hover, :focus) {
	text-decoration: none;
}
.footer-phone:is(:hover, :focus) span, .footer-email:is(:hover, :focus) span,
.footer-permit-link:is(:hover, :focus) span, .footer-donate-link:is(:hover, :focus) span {
	text-decoration: underline;
}
footer .footer-some-icons .footer-some-icon {
    font-size: 25px;
    margin: 0 6px 6px;
	color: var(--white);
	display: flex;
    justify-content: center;
    align-items: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background-color: var(--main-hover);
}
footer .footer-some-icons .footer-some-icon img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(79deg) brightness(107%) contrast(101%);
	height: 22px;
}
footer .footer-some-icons .footer-some-icon:is(:hover, :focus) {
	background-color: var(--extra-color-2);
	text-decoration: none;
}
footer .footer-some-icons .footer-some-icon:is(:hover, :focus) img {
	/* filter: brightness(0) saturate(100%) invert(21%) sepia(70%) saturate(2993%) hue-rotate(82deg) brightness(94%) contrast(101%); */
}
footer .footer-copyright {
	margin-top: 40px;
}

@media (max-width: 991.98px) {
	#site-footer {
		padding: 40px 25px;
	}
	.footer-col {
		padding-top: 40px;
	}
	.footer-copyright {
		font-size: 0.9rem;
	}
}


/* ANCHOR - Back to top button */

#back-to-top {
	display: none;
	position: fixed;
    background-color: white;
    bottom: 74px;
    right: 15px;
    padding: 0 5px;
    height: 35px;
    width: 35px;
    align-items: center;
    justify-content: center;
    color: var(--main-color-1);
    border-radius: 50%;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25));
    z-index: 1;
	text-decoration: none;
}
#back-to-top:hover, 
#back-to-top:focus {
	/* opacity: 0.7; */
	color: var(--extra-color-4);
	text-decoration: none;
}
/* LOADER */
.loader {
	display: block;
	margin: 0 auto 40px;
	color: transparent!important;
	background-color: transparent!important;
	width: 50px;
	height: 50px;
	border: 4px solid var(--main-color-1);
	border-bottom-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: sub-product-loading 1s linear infinite;
}
.loader:before {
	height: 0!important;
}
@keyframes sub-product-loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Hero */
.site-hero {
	position: relative;
}
.hero-frontpage {
	position: relative;
    color: white;
    margin: 0 auto 80px;
}
.hero-frontpage .hero-image-container {
	margin-left: auto;
    display: flex;
    justify-content: center;
	position: relative;
}
.hero-frontpage .hero-image-container img {
	aspect-ratio: 8 / 3;
    object-fit: cover;
    object-position: center;
}
.hero-frontpage .hero-container {
	position: absolute;
    bottom: 0;
	left: 0;
	width: 100%;
}
.hero-frontpage .hero-content {
	padding: 40px 60px;
	width: 100%;
	height: 100%;
	margin-bottom: -80px;
}
.hero-content {
    background-color: var(--white);
}
.hero-page {
    margin: 40px auto 40px;
}
.hero-page .hero-ingress {
	margin-bottom: 0;
}
.hero-page .hero-image-container img {
	aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
}
.hero-ingress, .hero-details {
	font-size: 1.1rem;
}
.hero-single, .hero-archive {
	margin: 40px auto;
}

/* ARTIKKELISIVU */
.share-container {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 20px 10px;
}
.share-container-background {
    position: absolute;
    left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    background-color: var(--background-color-2);
}
.share-container .share-content {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 1440px;
    padding: 0 15px;
	width: 100%;
}
.share-container .share-text {
	font-size: 1.1rem;
	font-weight: 700;
	margin-right: 20px;
}
.share-container a {
	margin-right: 10px;
}
.nav-links {
	margin: 20px 0;
}
.nav-links a {
	font-size: 1.1rem;
	font-weight: 700;
}

/* ARTIKKELILISTAUS */
.categories {
	display: flex;
    margin-bottom: 20px;
    gap: 15px;
}
.categories .post-category {
	width: 0px;
	height: 1px;
}
.categories .post-category-label {
	background-color: var(--background-color-2);
	color: var(--black);
	border: none;
	font-weight: 400;
	font-size: 1rem;
	cursor: pointer;
	padding: 5px 30px;
}
.categories .post-category:checked + .post-category-label {
	background-color: var(--main-color-1);
    color: white;
}
.categories .post-category:is(:hover, :focus-visible) + .post-category-label {
	background-color: var(--background-color-2);
	outline: 2px solid var(--main-hover);
}
.categories .post-category:checked:is(:hover, :focus-visible) + .post-category-label {
	background-color: var(--main-color-1);
}
.categories .wp-block-button__link:after {
	display: none;
}

/* #loader-container {
    height: 80px;
} */
#load-more:disabled {
    opacity: 0.7;
    pointer-events: none;
}
#load-more {
	border: none;
}
#load-more:after {
	display: none;
}

#pagination p {
	margin: 0;
	font-size: 1.1rem;
}
#pagination button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: 28px;
	background-color: var(--background-color-2);
	color: var(--black);
	border: none;
}
#pagination button:disabled {
	opacity: 0.5;
}
#pagination button.prev,
#pagination p#current-page {
	margin-right: 10px;
}
#pagination button.next {
	margin-left: 10px;
}
#pagination #max-number {
	margin-left: 10px;
}

.last-updated {
	font-style: italic;
	color: var(--main-color-1);
}

/* Single */
.navigation-content .nav-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.navigation-content .nav-links .nav-next {
	margin-left: auto;
}
.navigation-content .nav-links a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.navigation-content .nav-links a i {
	background-color: var(--extra-color-3);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.navigation-content .nav-links a:is(:hover, :focus) span {
	text-decoration: underline;
}
@media (max-width:991px) {

}

/* Single tarina */
.tarina-container {
	padding-top: 40px;
}
.hero-tarina {
	margin-bottom: 80px;
}

/* Tarinoiden arkisto */
.tarinakortti {
    box-shadow: 0px 4px 20px -5px #00000026;
}

/* Hakutulossivu */
.search-page-container {
	margin: 40px auto;
}

/* Template parts */
a.sisaltonosto-post-card:is(:hover, :focus) {
	color: inherit;
}
.wp-block-button__link[target="_blank"]:after {
	position: relative;
	content: "\f35d" !important;
    font-family: "Font Awesome 5 Pro";
    font-weight: 500;
}

@media (max-width: 1400px) {
	.hero-frontpage .hero-image-container img {
		aspect-ratio: 2 / 1;
	}
}

@media (max-width: 991px) {
	/* Etusivun hero */
	.hero-frontpage .hero-image-container {
		width: 100%;
		margin-bottom: 40px;
	}
	.hero-frontpage .hero-container {
		position: relative;
	}
	.hero-frontpage .hero-content {
		padding: 30px;
		margin-top: -80px;
		margin-bottom: 0;
	}
	.hero-ingress {
		font-size: 0.95rem;
	}

	/* Alasivu hero */
	.hero-page {
		margin-top: 0;
	}
	.hero-page .hero-image-container {
		margin-left: -15px;
		margin-right: -15px;
		position: relative;
		z-index: -1;
	}
	.hero-page .hero-image-container img {
		aspect-ratio: 2 / 1;
	}
	.hero-page .hero-content {
		margin-top: -80px;
		padding: 20px;
	}
	.tammi-artikkelikortti .tammi-artikkelinosto-title {
		padding-right: 15px;
	}
}