@font-face {
	font-family: 'Khmer MN';
	src: url('../fonts/KhmerMN.woff2') format('woff2'), url('../fonts/KhmerMN.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Times Sans Serif';
	src: url('../fonts/TimesSansSerif.woff2') format('woff2'), url('../fonts/TimesSansSerif.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-white: #fff;
	--color-black: #000;

	--color-blue: #96b3c5;
	--color-red: #c08b8b;
	--color-green: #a4c5a4;
	--color-yellow: #cac17b;
	--color-gray: #eeeeee;

	--awesome-blue: #003465;
	--awesome-green: #2e7971;
	--awesome-black: #333333;

	--color-primary: #d5e1e8;
	--color-primary-dark: #333333;

	--font-size: 16px;
	--font-family: 'Raleway', sans-serif;
	--font-title: 'PT Serif', serif;

	--min-width: 20rem;

	--breakpoint-mobile: 768px;
}

::selection {
	background-color: var(--color-blue);
	color: var(--color-white);
}
body::-webkit-scrollbar {
	width: 6px;
}

*, *::before, *::after {
	box-sizing: border-box;
}



body::-webkit-scrollbar-track {
	background-color: var(--color-primary);
}

body::-webkit-scrollbar-thumb {
	background-color: var(--color-blue);
	border-radius: 10px;
}

body {
	font-size: var(--font-size);
	line-height: 1.5rem;
	font-family: var(--font-family);
	background: linear-gradient(180deg, var(--color-primary) 0%, #ffffff00 100%),
		url('../images/bg-2.svg') center top no-repeat;
	background-size: 1400px;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

h1,
h2,
h3 {
	color: var(--awesome-black);
}

h1 {
	font-weight: normal;
	font-family: var(--font-title);
	font-size: clamp(1.25rem, 2.75vw, 2.75rem);
	line-height: clamp(1.5rem, 3vw, 3rem);
}
h2 {
	font-family: var(--font-title);
	font-weight: normal;
	font-size: 1.5rem;
	line-height: 2rem;
	margin: 0;
	margin-bottom: 1rem;
}
h3 {
	font-family: var(--font-title);
	font-weight: normal;
	font-size: 1.2rem;
	line-height: 1.5rem;
	margin-bottom: 1rem;

	&.wp-block-heading {
		font-size: clamp(1.6rem, 2vw, 2.2rem);
		line-height: clamp(1.8rem, 2.2vw, 2.4rem);
	}
}

hr,
.wp-block-separator {
	border: none;
	border-bottom: 1px solid var(--color-primary);
	margin: 3rem 0;
}

time {
	font-size: 0.8rem;
	color: var(--color-black);
	font-style: italic;
	display: block;
	margin-bottom: 1rem;
}

a {
	color: var(--color-black);
	text-decoration: none;

	&.more {
		color: var(--color-primary-dark); /* Fixed typo */
		display: inline-flex;
		width: fit-content;
		margin-left: auto;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
		background-size: 24px;
		background-repeat: no-repeat;
		background-position: 90% center;
		background-color: rgba(213, 225, 232, 1);
		padding: 0.5rem 2.5rem 0.5rem 1rem;
		border-radius: 0.5rem;
        transition: background-color 0.2s, color 0.2s, background-image 0.2s;

        &:hover {
            background-color: var(--color-primary-dark);
            color: var(--color-white);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        }
	}

    &.archive{
        display: block;
        padding: 1rem;
        color: var(--color-black);
        text-align: center;
        width: 100%;
    }
}
strong,
b {
	font-weight: 600;
}

p {
}

em,
i {
	font-style: italic;
}

ul {
	li {
		list-style-type: none;
	}
}

iframe {
	border-radius: 10px;
	filter: grayscale(50%);
}

.loading {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	background-color: rgba(255, 255, 255, 0.75);
}

table,
.wp-block-table {
	border-radius: 0.5rem;
	border: 1px solid var(--color-primary) !important;

	thead {
		background-color: var(--color-primary);
		color: var(--color-black);
		border-bottom: 1px solid var(--color-primary) !important;
		font-family: var(--font-title);

		th {
			border: 1px solid var(--color-primary) !important;
			text-align: left;
			border-left: none !important;
			border-right: none !important;
		}
	}

	tbody {
		tr {
			td {
				font-size: 0.9rem;
				padding: 0.2rem 0.5rem;
			}
		}
	}

	tr {
		td {
			border: 1px solid rgba(0, 0, 0, 0.08) !important;
			a {
				text-decoration: underline;
			}

			&:first-child {
				border-left: none !important;
			}
			&:last-child {
				border-right: none !important;
			}
		}

		&:hover {
			background-color: var(--color-primary);

			td {
				border-bottom: 1px solid var(--color-black);
			}
		}

		&:last-child {
			td {
				border-bottom: none !important;
			}
		}
	}
}

figcaption {
	font-size: 0.8rem;
	line-height: 1rem;
	color: var(--color-black);
	font-style: italic;
	display: block;
	padding: 1rem;
	padding-top: 0;
}

body {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.home {
	header {
		padding: 8vh 0 3rem 0;

		@media (max-width: var(--breakpoint-mobile)) {
			padding: 5vh 0 2rem 0;
		}
	}
}
header {
	text-align: center;
	display: flex;
	flex-direction: column;
	padding: 5vh 0 5rem 0;
	position: relative;

	@media (max-width: var(--breakpoint-mobile)) {
		padding: 5vh 0 2rem 0;
	}

	&::after {
		position: absolute;
		bottom: 0;
		width: 100%;
		content: '';
		display: block;
		height: 1px;
	}

	.logo {
		padding: 2rem;
		display: block;
		justify-content: center;
		display: flex;
		align-items: center;
		gap: 2rem;
		margin: 2dvh 0 0dvh 0;
		font-weight: normal;

		a {
			display: block;
			padding: 1rem;
			margin-bottom: 3rem;
			margin: 0;
			padding: 0;

			img {
				max-width: 6rem;
				height: auto;
				width: auto;
			}
		}
		div {
			text-align: left;

			h3 {
				line-height: 2rem;
				color: var(--color-black);
				margin: 0;
				font-size: clamp(1.3rem, 5vw, 2.2rem);
				font-weight: normal;
			}
			p {
				font-weight: 100;
				font-family: var(--font-title);

				font-size: clamp(1rem, 1.2vw, 1.5rem);
				line-height: clamp(1.2rem, 2vw, 2.5rem);
			}
		}

		@media (max-width: var(--breakpoint-mobile)) {
			flex-direction: column;
			gap: 1rem;
			margin: 0;

			div {
				text-align: center;
				h3 {
					margin-bottom: 1rem;
				}
				p {
					line-height: 1.5rem;
				}
			}
		}
	}

	nav {
		font-family: var(--font-title);
		margin: 0 1rem;

		&.languages {
			position: absolute;
			top: 0;
			right: 0;
			margin: 1rem;

			ul {
				background-color: rgba(255, 255, 255, 1);
				padding: 0.25rem;
				li {
					a {
						padding: 0.25rem 1rem;
					}
				}
			}
		}

		ul {
			display: inline-flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 0.5rem;
			padding: 0.5rem;
			background-color: var(--color-white);
			border-radius: 0.75rem;
			box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);

			li {
				&.menu-item-has-children {
					position: relative;

					> a {
						padding-right: 2rem;

						&::after {
							content: '';
							position: absolute;
							top: 35%;
							right: 1rem;
							transform: translateY(-50%);
							border: solid var(--color-black);
							border-width: 0 1px 1px 0;
							display: inline-block;
							padding: 0.25rem;
							transform: rotate(45deg);
						}

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

				a {
					display: block;
					padding: 0.5rem 1rem;
				}
				&:hover,
				&.active,
				&.current_page_item,
				&.current_page_ancestor {
					border-radius: 0.5rem;
					background-color: var(--color-black);
					> a {
						color: var(--color-white);

						&::after {
							border-color: var(--color-white);
						}
					}
				}

				ul {
					display: none;
					position: absolute;
					justify-content: flex-start;
					background-color: var(--color-white);
					padding: 0.5rem;
					border-radius: 0.5rem;
					box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
					margin-left: -0.5rem;
					z-index: 1;

					li {
						width: 100%;
						a {
							white-space: nowrap;
							text-align: left;
							color: var(--color-black);
							display: block;
							padding: 0.5rem 1rem;
						}
					}
				}

				&:hover {
					ul {
						display: flex;
					}
				}
			}
		}
	}
}

nav {
	&.menu-peamenuu-container {
		@media (max-width: var(--breakpoint-mobile)) {
			display: none;
			justify-content: center;
			position: fixed;
			z-index: 7777;
			bottom: 100px;
			width: 100%;
			margin: 0;

			ul {
				min-width: 240px;
				flex-direction: column;
				ul {
					position: relative;
					display: block;
					margin: 0;
					li {
						a {
							text-align: center;
						}
					}
				}
			}
		}

		&.active {
			display: inline-flex;
		}
	}

	&.breadcrumbs {
		ul {
			justify-content: center;
			display: flex;
			li {
				padding: 0.5rem;
				font-size: 0.85rem;
			}
		}

		@media (max-width: var(--breakpoint-mobile)) {
			display: none;
		}
	}
}

.hamburger {
	position: fixed;
	z-index: 8888;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	width: 75px;
	padding: 1rem;
	background-color: var(--color-black);
	border-radius: 10px 10px 0 0;

	hr {
		border-radius: 10px;
		height: 0.25rem;
		margin: 0;
		background-color: var(--color-primary);
	}

	@media (max-width: var(--breakpoint-mobile)) {
		display: flex;
	}
}

main {
	position: relative;

	> h2 {
		text-align: center;
	}


	section {
		display: flex;
		justify-content: center;
		margin: 0 2rem;
		margin-bottom: 5rem;

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

		.container {
			max-width: 80rem;
			width: 100%;
			background-color: var(--color-white);
			border-radius: 1rem;
			box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);

			&.transparent {
				background-color: transparent;
				box-shadow: none;
			}
		}
		.gap {
			gap: 2rem;
		}
		.col {
			display: flex;
			flex-wrap: wrap;

			> * {
				min-width: var(--min-width);
				flex: 1;
			}
		}

        article {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 2rem;
			border-bottom: 1px solid var(--color-gray);

			@media (max-width: var(--breakpoint-mobile)) {
				padding: 2rem;
				border: none;
			}

			&:last-child {
				border-right: none;
			}

			h1 {
				margin-bottom: 2rem;
			}

			p {
				margin-bottom: 1rem;

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

			ul {
				margin-left: 1rem;

				li {
					list-style: disc;
					position: relative;
					margin-bottom: 0.5rem;
				}
			}

			&.small {
				padding: 2rem;
				border-bottom: 1px solid var(--color-gray);
				border: none;
				justify-content: flex-start;
				time {
					margin: 0.5rem 0;
				}
				h3 {
					margin: 0;
					font-size: 1.2rem;
					line-height: 1.5rem;
				}
				p {
					margin: 0;
				}
			}
		}

    }
    .index-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0rem;
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;

        >div{
            flex: 1;
        }
    }
}

.col-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;

	@media (max-width: 1024px) {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}

	@media (max-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
	@media (max-width: 480px) {
		grid-template-columns: repeat(1, 1fr);
		gap: 0.5rem;
	}
}

.baromeetrid {
	margin-bottom: 1.5rem;

	a {
		background-color: var(--color-white);
		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
		border-radius: 1rem;
		min-width: 0;
		padding: 1.5rem;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		white-space: nowrap;
		align-items: flex-end;

		span {
			opacity: 0;
		}

		&:hover {
			box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
			/* animation: blur 0.1s ease-in-out; */
			cursor: pointer;

			span {
				opacity: 1;
			}
		}

		small {
			display: block;
			white-space: normal;
			line-height: 1.25rem;
		}

		i {
			font-size: 2rem;
			color: var(--color-primary);
			margin-bottom: 1.5rem;
		}

		h3 {
			margin: 0 0 0.5rem 0;
			font-size: 1.2rem;
			line-height: 1.5rem;
		}
	}
}

.kontaktid {
	.kontakt {
		background-color: var(--color-white);
		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
		border-radius: 1rem;
		padding: 1.5rem;

		h2 {
			margin: 0 0 1rem 0;
			font-size: 1.5rem;
			line-height: 2rem;
		}
		h3,
		h4 {
			margin: 0 0 0.5rem 0;
			padding: 0;
			font-size: 1rem;
		}
		p {
			margin: 0;
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}
}

@keyframes blur {
	0% {
		filter: blur(20px);
	}
	100% {
		filter: blur(0px);
	}
}

.single-post {
	section {
		article {
			h1 {
				margin: 0 0 1rem 0;
				max-width: 40rem;
			}
		}
	}
}

.persons {
	h3 {
		margin-bottom: 0.5rem;
	}
	p {
		margin-bottom: 0;
	}
}

.wp-block-button {
	a {
		border-radius: 0.5rem;
		padding: 0.5rem 1rem;
		background-color: var(--color-blue);
		color: var(--color-white);
		font-family: var(--font-title);

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

footer {
	padding: 5rem 1rem 1rem 1rem;
	text-align: center;
	margin-top: auto;
}

[class*=' chart-'],
[class^='chart-'] {
	table {
		tr {
			td {
				padding: 0.1rem 0.25rem;
				font-size: 0.85rem;
			}
			td {
				&:first-child {
					white-space: nowrap;
					background-color: var(--color-primary);
				}
			}

			&:first-child {
				td {
					background-color: var(--color-blue);
					color: #fff;
				}
			}
			&:nth-child(2) {
				td {
					background-color: var(--color-primary);
				}
			}
		}
	}
}