/*
 * Facelift 2025 theme overrides and additions
 */

/* Fonts */
@font-face {
	font-family: 'Sen';
	src: url('fonts/sen/Sen-VariableFont_wght.ttf') format('truetype');
}

/* Variables */
:root {
	/* Colors */
	--black: #000000;
	--black-rgb: 0, 0, 0;

	--white: #FFFFFF;
	--white-rgb: 250, 250, 250;


	--blue: #003D59;
	--blue-rgb: 0, 61, 89;

	--blue-60: #668A9B;
	--blue-50: #7F9DAC;
	--blue-40: #99B1BC;
	--blue-30: #B2C4CD;
	--blue-20: #CCD8DD;
	--blue-10: #E5EBEE;


	--turquoise: #00829B;
	--turquoise-rgb: 0, 130, 155;

	--turquoise-60: #76B3BF;
	--turquoise-50: #8DC0C9;
	--turquoise-40: #A3CCD4;
	--turquoise-30: #BAD9DF;
	--turquoise-20: #D1E5E9;
	--turquoise-10: #E8F2F4;


	--red: #C64D5A;
	--red-rgb: 198, 77, 90;

	--red-60: #DC949C;
	--red-50: #E2A6AC;
	--red-40: #E8B7BC;
	--red-30: #EDC9CD;
	--red-20: #F3DBDE;
	--red-10: #F9EDEE;


	--light-grey: #f9f9fb;
	--light-grey-rgb: 249, 249, 251;

	/* not in guidelines */
	--blue-pale: #BAD9DF;
	--blue-pale-rgb: 186, 217, 223;

	/* not in guidelines */
	--grey: #666666;
	--grey-rgb: 102, 102, 102;

	/* Fonts */
	--font : 'Sen', sans-serif;

	/* Typography */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;
}

/* General start */
body {
	font-family: var(--font);
	font-weight: var(--weight-regular);
	font-variation-settings: "wght" var(--weight-regular);
	color: var(--black);
	line-height: 1.45;
}
h1 {
	font-weight: var(--weight-extrabold);
	font-variation-settings: "wght" var(--weight-extrabold);
	color: var(--blue);
	line-height: 1.2;

	font-size: 40px;
	@media (max-width: 768px) {
		font-size: 32px;
	}
}
h2,h3,h4,h5,h6 {
	font-weight: var(--weight-bold);
	font-variation-settings: "wght" var(--weight-bold);
	color: var(--black);
	line-height: 1.2;
}
p {
	font-weight: inherit;
	font-variation-settings: inherit;
	color: inherit;

	a {
		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);
	}
}
blockquote {
	font-weight: var(--weight-regular);
	font-variation-settings: "wght" var(--weight-regular);
	color: var(--turquoise);
}
a {
	color: var(--red);

	&:hover {
		color: var(--red);
		text-decoration: underline;
	}
}
.button {
	background: var(--red);
	color: var(--white);
	border: 1px solid var(--red);

	font-weight: var(--weight-bold);
	font-variation-settings: "wght" var(--weight-bold);
	line-height: 1.2;

	&:hover {
		color: var(--red);
		background: var(--white);
	}
}
strong, b {
	font-weight: var(--weight-bold);
	font-variation-settings: "wght" var(--weight-bold);
}
.light-btn {
	background-color: rgba(var(--blue-rgb), 0.2);
	color: var(--black);
	text-transform: none;
	font-size: 14px;
	line-height: 1.2;
	padding: 4px 12px;

	transition: none;

	&:hover {
		color: var(--white);
		background-color: var(--blue);
	}
}
.post-edit-link {
	display: inline-block;
	margin-top: 40px;
}
.screen-reader-only {
	border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
/* General end */

/* Header start */
@media (min-width: 1024px) {
	.header-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.logo {
			position: static;
		}

		.top-nav-wrap {
			position: static;
			text-transform: none;

			.top-nav {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				gap: 25px;

				li {
					margin-right: 0;

					a {
						color: var(--blue);

						&:hover, &:is(li:hover > &) {
							text-decoration: underline;
						}
					}

					ul {
						z-index: 1;
						background-color: var(--turquoise);

						li a {
							color: var(--white);

							&:hover {
								background: transparent;
							}
						}
					}
				}
			}

			.header-search-form {
				.search-opener {
					color: var(--blue);
				}
				.icon-search {
					color: var(--blue);
				}
			}

			&:after {
				content: none;
			}
		}
		&:after {
			content: none;
		}
	}
}
.top-nav-wrap {
	@media (max-width: 1023px) {
		&:not(.mobile) {
			display: none;
		}
	}
	@media (min-width: 1024px) {
		&.mobile {
			display: none;
		}
	}
}
.language-list {
	a {
		color: var(--blue);
		&:hover {
			color: var(--blue);
		}

		@media (max-width: 1023px) {
			color: var(--white);
			background-color: var(--turquoise);
			&:hover {
				color: var(--white);
			}
		}
	}
}
.navigation {
	background: var(--blue);
	font-weight: var(--weight-bold);
	font-variation-settings: "wght" var(--weight-bold);

	a {
		text-transform: none;
	}
}
.main-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;

	@media (max-width: 1023px) {
		flex-direction: column;
	}

	.active {
		background-color: var(--turquoise);
		.hold a {
			color: var(--white);
		}
	}

	> li {
		width: fit-content;
		flex-grow: 1;

		@media (max-width: 1023px) {
			width: 100%;
		}

		.hold {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 20px;
	
			padding: 0;
			width: 100%;
		}

		a {
			color: var(--white);

			@media (min-width: 1024px) {
				padding-inline: 0;
				padding-block: 20px;
	
				&:first-child {
					padding-inline-start: 20px;
				}
				&:last-child {
					padding-inline-end: 20px;
				}
				&:hover {
					background: unset;
					color: unset;
					text-decoration: underline;
				}
			}
		}

		.arrow {
			padding: 0;
			position: static;
			text-decoration: none !important;
			background: unset;

			&:is(:hover &) {
				color: var(--white);
			}
		}

		@media (min-width: 1024px) {
			&:hover {
				background: var(--turquoise);
				.hold a {
					color: var(--white);
				}
			}
		}

		.drop {
			@media (min-width: 1024px) {
				background: var(--turquoise);
				border: 1px solid rgba(var(--white-rgb), 0.5);
				border-top: none;
				margin-left: -1px;
			}

			li {
				@media (max-width: 1023px) {
					padding-inline-start: 10px;
				}

				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;

				&:hover a {
					color: var(--white);
				}

				.inner-drop {
					width: 100%;
				}
				.inner-arrow {
					color: var(--white);
				}
				@media (min-width: 1024px) {
					.inner-drop {
						display: none !important;
					}
					.inner-arrow {
						display: none;
					}
				}
				.arrow {
					color: var(--white);
				}
			}
		}
	}
}
#header {
	border-bottom: none;
}
.nav-opener {
	span, &:before, &:after {
		background-color: var(--blue);
	}
}
.nav-wrap {
	&:is(.nav-active &) {
		background-color: var(--blue);
	}
}
.header-search-form {
	[type="text"] {
		text-transform: none;
		color: var(--black);
		border-color: var(--black);
		border: none;
		&::placeholder {
			color: var(--blue);
			text-transform: none;
		}
	}
	[type="submit"] {
		color: var(--blue);
	}
}
/* Header end */

/* Footer start */
#footer {
	background-color: var(--blue);
	background-position-y: 70px;

	color: var(--white);

	.footer-logos {
		padding: 0;

		img {
			margin: 0;
		}
	}

	address {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		font-style: normal;
		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);
		gap: 20px 40px;

		font-size: 24px;
		line-height: 1.2;

		margin-top: 100px;
		margin-bottom: 0;

		p {
			margin: 0;
		}
	}

	.footer-nav {
		margin-top: 24px;

		padding-top: 50px;

		font-size: 16px;

		.footer-nav-wrap {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			margin: 0;
			gap: 30px;

			@media screen and (max-width: 767px) {
				flex-direction: column;
			}

			.column {
				flex: 1;
				padding: 0;
			}
		}

		.title {
			text-transform: none;
			font-weight: var(--weight-bold);
			font-variation-settings: "wght" var(--weight-bold);

			margin-bottom: 30px;
		}

		a {
			&:hover {
				color: var(--white);
				text-decoration: underline;
			}
		}
		.active .title > a {
			color: var(--white);
		}
		.arrow {
			text-decoration: none !important;

			background-color: transparent;
		}
	}
}
@media (min-width: 768px) {
	#footer {
		padding: 80px 20px;
	}
}
/* Footer end */

/* Blocks start */
.container:after {
	content: none;
}
.text-info-box {
	color: var(--white);

	h2 {
		font-size: 40px;
		font-weight: var(--weight-extrabold);
		font-variation-settings: "wght" var(--weight-extrabold);

		a {
			color: var(--white);

			&:hover {
				color: var(--white);
			}
		}
	}

	&:has(.header_area):after {
		content: "";
		position: absolute;

		right: 0;
		top: 0;

		width: 50%;
		height: 100%;
		margin: 0;

		background-color: var(--turquoise);
		background-image: url(images/Kuuloliitto-logo-icon.svg);
		background-repeat: no-repeat;
		background-position: right 20px center;
		z-index: -99;

		@media (max-width: 767px) {
			width: 100%;
			background-position: center bottom -50px;
		}
	}

	&:is(.text-info-box-wrapper &) {
		h2 {
			font-size: 28px;

			a {
				color: var(--white);

				&:hover {
					color: var(--white);
				}
			}
		}

		&:after {
			content: "";
			position: absolute;

			right: 0;
			top: 0;

			width: 50%;
			height: 100%;
			margin: 0;

			background-color: var(--blue);
			z-index: -99;

			@media (max-width: 767px) {
				width: 100%;
			}
		}
		&:nth-child(even):after {
			left: 0; right: unset;
			background-color: var(--turquoise);
		}
	}
}

.text-holder {
	a {
		&:hover {
			color: var(--red);
		}
	}
}

.main-head {
	color: var(--blue);
}

.main-heading {
	h2 {
		color: var(--black);
		text-transform: none;
		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);

		span {
			background-color: var(--light-grey);
		}
	
		&:before {
			background: var(--blue);
			opacity: 0.2;
		}
	}

	.link {
		a {
			font-weight: var(--weight-bold);
			font-variation-settings: "wght" var(--weight-bold);

			&:hover {
				color: var(--blue);
			}
		}
	}
}

.update-block {
	background-color: var(--light-grey);
}

.article {
	.img {
		img {
			border-radius: 30px;
		}
	}

	.info {
		.category {
			padding-left: 0;
			color: var(--blue);
		}
		time {
			color: var(--black);
		}
	}

	.title {
		color: var(--black);
		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);

		transition: none;
	}

	.article-link {
		&:hover {
			.title {
				color: var(--turquoise);
			}
			.info .category {
				text-decoration: none;
			}
		}
	}
}

.info-boxes {
	background-color: var(--white);
	padding-block: 80px;
	padding-inline: 20px;
}
.info-columns {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;

	overflow: visible;

	z-index: 1;

	&:before {
		content: none;
	}

	.column {
		min-width: 200px;
		max-width: 300px;
		width: auto;
		flex-basis: 0;
		flex-grow: 1;
		position: relative;

		--offset: -10px;

		&:before, &:after {
			position: absolute;
			display: block;
			border-radius: 30px;
			content: "";
			background-color: var(--red);
			pointer-events: none;
		}
		&:before {
			opacity: 0.2;
			width: 40%;
			height: 40%;
			left: var(--offset);
			top: var(--offset);
		}
		&:after {
			width: 80%;
			height: 100%;
			right: var(--offset);
			bottom: var(--offset);
			z-index: -1;
		}
	}
}
a.info-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	position: relative;

	height: 100%;

	padding: 27px;

	background-color: var(--blue);

	border-radius: 30px;

	.title {
		text-align: start;

		font-size: 22px;
		line-height: 1.2;

		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);

		margin-top: auto;
		margin-bottom: 0;
		text-transform: none;

		&:is(a:hover &) {
			color: var(--white);
			text-decoration: underline;
		}
	}

	.img {
		height: fit-content;
		text-align: start;
	}
	.icon-men {
		margin: 0;
		font-size: 40px;
		&:before {
			content: url(images/icon/people-group-light-2.svg);
		}
	}
	.icon-book {
		font-size: 40px;
		&:before {
			content: url(images/icon/book-light.svg);
		}
	}
	.icon-heart {
		font-size: 40px;
		&:before {
			content: url(images/icon/circle-heart-sharp-light.svg);
		}
	}
	.icon-union {
		font-size: 40px;
		&:before {
			content: url(images/icon/object-union-light.svg);
		}
	}
}
.text-box {
	color: var(--black);
	
	.title {
		color: var(--black);
		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);
		&:is(a:hover &) {
			color: var(--black);
		}
	}
	.text {
		color: var(--black);
	}
	.ico {
		color: var(--black);
		line-height: 1.45;
	}

	.tags {
		margin-top: 10px;
	}
}
.social-block {
	background-color: var(--light-grey);

	.title {
		text-transform: none;
		line-height: 1.2;
	}

	.wrap {
		width: 100%;
		height: 100%;
		min-height: 500px;
		background-color: var(--white);
	}

	.three-columns {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.column {
		min-width: 220px;
	}

	.link {
		margin-top: auto;

		font-weight: var(--weight-bold);
		font-variation-settings: "wght" var(--weight-bold);

		a:hover {
			color: var(--blue);
		}
	}

	.social-box {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.fb-page {
		width: 100%;
		span, iframe {
			width: 100% !important;
		}
	}

	.column:has(.twitter-timeline) {
		display: none;
	}
}
.social-links {
	padding: 60px 0;
	text-align: center;
	background-color: var(--white);

	h2 {
		margin-bottom: 40px;
	}

	.social-icons {
		display: flex;
		justify-content: center;
		gap: 24px;
		flex-wrap: wrap;
	}

	.social-icon {
		display:          flex;
		align-items:      center;
		justify-content:  center;
		width:            72px;
		height:           72px;
		border-radius:    50%;
		background-color: var(--blue);
		transition:       opacity 0.2s;

		&:hover {
			opacity: 0.75;
		}

		svg {
			width:  36px;
			height: 36px;
			fill:   white;
		}
	}
}
.campaign-spot {
	margin-block-start: 40px;
	.container {
		padding: 0;
	}
	.article-block {
		background-size: cover;
		border-radius: 30px;

		padding: 114px 67px 90px;

		@media (max-width: 768px) {
			padding-inline: 30px;
		}

		.box-text {
			background-color: rgba(var(--blue-rgb), 0.9);
			border-radius: 30px;
			float: none;

			h2 a:hover {
				color: var(--white);
				text-decoration: underline;
			}
		}
	}
}
section {
	&:not(:first-child) {
		margin-block-start: 40px;
	}
}
.accordion {
	h2 {
		margin-block-end: 26px;
	}
	details {
		border-top: 1px solid rgba(var(--black-rgb), 0.2);
		padding-block: 26px;
	}
	summary {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;

		cursor: pointer;

		font-size: 20px;

		&::-webkit-details-marker {
			display: none;
		}

		&:is([open] &) {
			margin-bottom: 26px;
		}

		&:hover {
			strong, b {
				text-decoration: underline;
			}
		}

		.opener {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: var(--red);
			gap: 12px;

			line-height: 1;

			.open {
				display: block;
			}
			.close {
				display: none;
			}
			&:after {
				display: block;
				content: url(images/icon/plus-circle-light.svg);
			}
			&:is([open] &) {
				.open {
					display: none;
				}
				.close {
					display: block;
				}
				&:after {
					content: url(images/icon/minus-circle-light.svg);
				}
			}
		}
	}
}
.cta {
	background-color: var(--blue);
	background-position: right 60px center;
	background-size: 30%;
	background-repeat: no-repeat;

	border-radius: 30px;
	overflow: hidden;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;

	> * {
		flex-basis: 50%;
		flex-grow: 1;
	}

	h2, p, a {
		color: var(--white);
	}

	.text-box {
		padding: 48px;
	}

	.image-box {
		img {
			object-fit: cover;
			height: 100%;
			width: 100%;
		}
	}

	@media (max-width: 768px) {
		flex-direction: column;
	}

}
.news-highlights {
	header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		margin-bottom: 20px;
	}
	.articles {
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		gap: 30px;

		li {
			min-width: 200px;
			flex-basis: calc(100% / 3);
			flex-grow: 1;
		}
		article {
			display: flex;
			flex-direction: column;
			gap: 16px;

			img {
				width: 100%;
				height: 240px;
				object-fit: cover;
				border-radius: 30px;
			}
			.terms {
				text-transform: uppercase;
			}
			h3 {
				padding: 0;
				margin-block-start: auto;
				margin-block-end: 0;

				a {
					color: var(--black);
				}
			}
		}
	}
}

.contacts {
	margin-top: 30px;
	padding: 0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	list-style: none;

	gap: 30px;

	li {
		min-width: 300px;
		flex-basis: 0;
		flex-grow: 1;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		gap: 20px;

		.img-wrapper {
			flex-shrink: 0;
			flex-basis: 170px;
			flex-grow: 0;

			border-radius: 30px;
			overflow: hidden;

			img {
				padding: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&:not(:has(img)) {
				background: repeating-linear-gradient(
					45deg,
					rgba(var(--blue-rgb), 0.5),
					rgba(var(--blue-rgb), 0.5) 10px,
					transparent 10px,
					transparent 20px
				);
			}
		}
		.text-wrapper {
			flex-grow: 1;

			font-style: normal;

			margin-bottom: 0;

			display: flex;
			flex-direction: column;
			justify-content: center;

			> * {
				margin: 0;
			}

			.name {
				font-weight: var(--weight-semibold);
				font-variation-settings: "wght" var(--weight-semibold);
			}

			p {
				margin-bottom: 0;
			}

			:is(.address, .tel):not(:empty) {
				margin-top: 20px;
			}

			.email a {
				color: var(--red);

				font-weight: var(--weight-semibold);
				font-variation-settings: "wght" var(--weight-semibold);
			}
			.tel a {
				color: var(--black);
				font-weight: var(--weight-regular);
				font-variation-settings: "wght" var(--weight-regular);
			}
		}
	}
}

.post-content {
	display: flex;

	flex-direction: column;
	flex-wrap: nowrap;

	height: 100%;

	.thumbnail {
		img {
			padding: 0;

			width: 100%;
			height: 213px;
			object-fit: cover;

			border-radius: 30px;

			background-color: var(--red-20);

			&.placeholder {
				object-fit: scale-down;
			}
		}
		max-width: 400px;
	}
	.meta {
		font-size: 16px;

		margin-top: 18px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		gap: 1em;

		.category {
			text-transform: uppercase;
		}
		.date {
			opacity: 0.7;
		}

		&.event-time {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			gap: 20px;

			.ico {
				font-size: 24px;
			}

			.text {
				font-weight: var(--weight-semibold);
				font-variation-settings: "wght" var(--weight-semibold);
			}
		}

		&.event-location {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			gap: 20px;

			.ico {
				font-size: 36px;
			}

			address {
				margin: 0;

				font-style: normal;

				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}

		&.terms {
			flex-grow: 1;
			margin-bottom: 0;
			
			.term-list {
				align-items: flex-end;
			}
			
			.term-item {
				border: none;
				background-color: var(--turquoise-20);

				a {
					font-size: 14px;
					line-height: 1.5;

					color: var(--black);

					font-weight: var(--weight-regular);
					font-variation-settings: var(--weight-regular);

					padding: 4px 10px;
				}

				&:hover {
					background-color: var(--red-30);
					a {
						text-decoration: none;
					}
				}
			}
		}
	}

	.title {
		margin-top: 14px;

		h2, h3 {
			padding: 0;
			margin: 0;
			font-size: 20px;
		}
		a:hover {
			color: var(--black);
		}
	}
}
.article-list {
	list-style: none;
	padding: 0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

	gap: 40px 80px;

	> .article-item {
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 1;

		min-width: 300px;

		.post-content:has(.thumbnail a:hover, .title a:hover) {
			.title a {
				color: var(--black);
				text-decoration: underline;
			}
			img {
				filter: brightness(0.6);
			}
		}
	}
}

.tapahtumat-list {
	gap: 60px;
}

section.related {
	header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;
		gap: 20px;

		h2, h3 {
			padding: 0;
			margin: 0;
		}
	}

	.topics {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;

		margin-block: 10px 30px;
		
		.term-list {
			align-items: flex-end;
			margin-bottom: 0;
		}
		
		.term-item {
			border: none;
			background-color: var(--turquoise-30);

			a {
				font-size: 14px;
				color: var(--black);

				font-weight: var(--weight-regular);
				font-variation-settings: var(--weight-regular);


				padding: 4px 8px;
			}

			&:hover {
				background-color: var(--red-30);
				a {
					text-decoration: none;
				}
			}
		}
	}
}

.terms {
	margin-block: 60px;
	ul {
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
	}
	li {
		border: 1px solid var(--red);
		border-radius: 6px;
		background: transparent;

		&.active {
			background-color: var(--red);
			a {
				color: var(--white);
			}
		}
	}
	a {
		display: block;
		padding: 12px 20px;

		font-size: 16px;

		color: var(--red);

		font-weight: var(--weight-medium);
		font-variation-settings: "wght" var(--weight-medium);
	}
}
/* Blocks end */

/* Default page template start */
.sidebar {
	display: none;
}

@media (min-width: 768px) {
	#two-columns {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.sidebar {
		display: block;
		float: none;
	}
	.main-content {
		float: none;
	}
}
.aside-nav {
	.menu-opener {
		background: var(--turquoise);
	}
	ul {
		.top-most-menu-item {
			color: var(--black);

			font-size: 24px;

			font-weight: var(--weight-bold);
			font-variation-settings: "wght" var(--weight-bold);

			border-bottom: none;
		
			a {
				padding-top: 0;
				color: var(--black);
			}
		
			&:hover, a:hover {
				color: var(--blue);
				text-decoration: underline;
			}
		}

		li {
			border-bottom: 1px solid rgba(var(--blue-rgb), 0.33);
		}
		a {
			transition: none;

			color: var(--black);
			&:hover {
				color: var(--blue);
				text-decoration: underline;
			}
		}
	}
}
.main-content {
	.container, .guide-block {
		padding-inline: 0;
	}
	> .guide-block:first-child {
		padding-top: 0;
	}
}
/* Default page template end */

/* Index template start */
.main-content.full-width {
	width: 100%;
	padding: 0;
}
.blog, .archive.category, .page-template-template-events, .archive.tax-kategoriat, .page-template-template-union-events, .archive.tax-union-kategoriat {
	main {
		max-width: unset;

		> * {
			max-width: 1200px;
			margin-inline: auto;
		}
	}
	.main-content {
		max-width: unset;
		> * {
			max-width: 1200px;
			margin-inline: auto;
		}
	}

	.blog-holder {
		max-width: unset;
		background-color: var(--light-grey);

		margin-inline: -10px;
		padding: 50px 10px;

		> * {
			max-width: 1200px;
			margin-inline: auto;
		}

		.paging {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: 10px;

			margin-top: 80px;
			margin-bottom: 30px;

			> li {
				margin: 0;

				> * {
					font-size: 18px;
					border: solid 1px var(--blue);
				}
				strong {
					color: var(--white);
					background-color: var(--red);

					&.extend {
						color: var(--blue);
						background-color: transparent;
					}
				}
				a {
					margin: 0;
					color: var(--blue);
					background-color: transparent;
				}
				&.prev, &.next {
					a {
						padding-inline: 20px;
						border: none;
						font-weight: var(--weight-bold);
						font-variation-settings: "wght" var(--weight-bold);
					}
				}
			}
		}

		&.loading {
			filter: opacity(0.6) blur(1px);
			pointer-events: none;
		}
	}
}
.blog-header {
	margin-top: 28px;

	.content {
		max-width: 860px;
	}
}
.search {
	.search-input {
		font-size: 18px;
		padding-block: 14px;
		padding-inline: 24px 60px;

		width: 100%;
		max-width: 420px;

		height: 54px;

		background-color: var(--turquoise-10);
		border: 2px solid var(--turquoise-30);
		border-radius: 6px;

		&::-webkit-input-placeholder, &::placeholder {
			color: var(--black);
		}
	}

	button {
		line-height: 1;
		vertical-align: middle;
		border: none;
		background-color: transparent;

		margin-left: -50px;

		.icon-search {
			color: var(--blue);
			font-size: 22px;
		}
	}
}

.event-types {
	strong:after {
		content: ":";
	}

	.event-organizers {
		list-style-type: none;

		margin-top: 10px;
		padding: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		gap: 40px;

		width: fit-content;

		border-bottom: 1px solid rgba(var(--grey-rgb), 0.5);
	}
	.event-organizer {
		border-bottom: 7px solid transparent;
		padding-bottom: 7px;

		margin-bottom: -1px;

		a {
			color: var(--blue);

			font-size: 24px;
			line-height: 1.5;

			font-weight: var(--weight-bold);
			font-variation-settings: "wght" var(--weight-bold);
		}

		&.association:is(.page-template-template-events &, .archive.tax-kategoriat &),
		&.organization:is(.page-template-template-union-events &, .archive.tax-union-kategoriat &) {
			border-bottom-color: var(--red);
			a {
				color: var(--red);
			}
		}
	}
}

.tapahtumat-search {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	gap: 20px;
	
	justify-content: flex-start;
	align-items: center;

	.search-input-container {
		width: 100%;
		max-width: 420px;

		position: relative;
		display: inline-block;

		button {
			top: 14px;
			position: absolute;
		}
	}
	.reset-button-container {
		display: inline-block;

		input {
			background: transparent;
			padding: 0;
			border: none;

			&:not(.show) {
				display: none;
			}
		}
	}
}
/* Index template end */

/* Contact page template start */
.page-template-template-contact {
	.box {
		padding: 50px;
		border-radius: 30px;

		&:nth-child(4n of .box), &:nth-child(4n-1 of .box) {
			background-color: var(--red-10);
		}
		&:nth-child(4n-2 of .box), &:nth-child(4n-3 of .box) {
			background-color: var(--turquoise-10);
		}

		.content-wrapper {
			margin-bottom: 0;
		}

		p:last-child {
			margin-bottom: 0;
		}

		h2 {
			padding-top: 0;
			margin-bottom: 20px;
		}

		a {
			color: var(--black);
			text-decoration: underline;
	
			&:hover {
				text-decoration: none;
			}
		}

		.columns {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			> :first-child {
				width: 30%;
				min-width: 100px;
			}
			> :last-child {
				flex: 1 0 0;
			}
		}
	}
	.main-content {
		padding-bottom: 50px;
	}

	.officer-holder {
		&.loading {
			filter: opacity(0.6) blur(1px);
			pointer-events: none;
		}
	}
	
	.officers {
		h3 {
			padding-top: 0;
		}
		
		.officer-search {
			.search-input {
				max-width: 380px;
			}
			margin-bottom: 40px;
		}
		.contacts {
			row-gap: 50px;
			.img-wrapper {
				min-height: 250px;
			}
		}
	}

	.contact-sections {
		list-style: none;
		padding: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;

		.button {
			background-color: transparent;
			color: var(--red);

			&:hover {
				background-color: var(--red);
				color: var(--white);
			}
		}
	}
}
/* Contact page template end */

/* Singular start */
.single-post {
	.post-content {
		> .meta {
			.category a {
				color: var(--red);
			}
		}

		.featured-image {
			img {
				padding: 0;
	
				width: 100%;
				height: auto;
	
				border-radius: 30px;
	
				background-color: var(--red-20);
	
				&.placeholder {
					object-fit: scale-down;
				}
			}
		}
	}
}
/* Singular end */

/* Overrides start */
.general-address {
	.icon {
		color: var(--blue);
	}
	.link a:hover {
		color: var(--black);
	}
}
.person-wrap {
	.name {
		a {
			color: var(--black);
			&:hover {
				color: var(--blue);
			}
		}
	}
}
.address-box {
	.title {
		color: var(--blue);
	}
	a:hover {
		color: inherit;
		text-decoration: none;

		border-color: var(--blue);
		background-color: var(--blue-10);

		box-shadow: inset 0 0 0 1px var(--blue);

		.title {
			color: var(--blue);
		}
	}
}
.jcf-select, input[type="text"], .search-wrap [type="text"] {
	/*
	border-color: var(--blue);
	color: var(--black);
	background-color: var(--blue-10);
	font-size: 18px;
	*/
	&:not(.jcf-select) {
		padding-block: 14px;
		padding-inline: 24px 60px;
	}

	width: 100%;
	max-width: 420px;

	height: 54px;

	background-color: var(--turquoise-10);
	border: 2px solid var(--turquoise-30);
	border-radius: 6px;

	&::-webkit-input-placeholder, &::placeholder {
		color: var(--black);
	}
}
.search-wrap [type="submit"],  .jcf-select .jcf-select-opener {
	color: var(--blue);
}
body .jcf-select-drop {
	margin-top: -4px;
	.jcf-select-drop-content {
		border-color: var(--red);
		background-color: var(--blue-10);
	}
}
.jcf-select.jcf-drop-active, .jcf-list {
	border-color: var(--red);
	background-color: var(--blue-10);
	border-bottom: none;
}
.jcf-select-drop .jcf-hover, .jcf-list-box .jcf-selected {
	color: var(--blue);
	text-decoration: underline;
}
.search-wrap [type="text"]:focus {
	border-color: var(--red);
}
.search-wrap {
	input {
		
	}
}
.main-content :is(h1, h2, h3, h4, h5, h6) {
	padding-top: 0;
}
.guide-block {
	padding: 0;
	margin-block-start: 40px;
}
iframe {
	margin-bottom: 0;
}
/* Overrides end */
/* Newsletter popup */
.newsletter-popup {
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 999;
	max-width: 480px;
	padding: 48px;
	background-color: var(--turquoise);
	color: #fff;
	transition: all .4s ease-in-out;
	visibility: visible;
	transform: translateX(0);
}
.newsletter-popup.hidden {
	visibility: hidden;
	transform: translateX(calc(100% + 60px));
}
.newsletter-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}
.newsletter-popup__close > * { pointer-events: none; }
.newsletter-popup__title {
	color: #fff;
	margin-top: 0;
	margin-bottom: 12px;
	font-size: 1.25rem;
}
.newsletter-popup__text {
	color: #fff;
	margin-bottom: 24px;
}
.newsletter-popup__link.button {
	background: #fff;
	color: var(--turquoise);
	border-color: #fff;
}
.newsletter-popup__link.button:hover {
	background: transparent;
	color: #fff;
}
@media (max-width: 768px) {
	.newsletter-popup {
		bottom: 0;
		right: 0;
		max-width: none;
		width: 100%;
		padding: 32px 24px;
	}
	.newsletter-popup.hidden {
		transform: translateY(100%);
	}
}
/* Newsletter popup end */