@charset "UTF-8";
/*
	Theme Name: palaismondial
	Author: Eelco Deuling
	Author URI: https://palaismondial.nl/
	Description: Een derde versie van het theme voor mijn persoonlijke website
	Tested up to: 6.7
	Requires PHP: 7.3
	Version: 4.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: custom-header, editor-style, custom-menu, featured-images, translation-ready
	Text Domain: palaismondial
	Domain Path: /lib/languages
*/
/*----------------------------------------------------------------------*/
/* Theme colors */
/*----------------------------------------------------------------------*/
:root {
	--base: rgb(251, 251, 251);
	--contrast: rgb(32, 32, 32);
	--accent: rgb(141, 44, 41);
}
/*----------------------------------------------------------------------*/
/* Fonts */
/*----------------------------------------------------------------------*/
@font-face {
	font-family: "Crimson Pro";
	src: url("lib/fonts/CrimsonPro-LightItalic.woff2") format("woff2"),
		 url("lib/fonts/CrimsonPro-LightItalic.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Crimson Pro";
	src: url("lib/fonts/CrimsonPro-SemiBold.woff2") format("woff2"),
		 url("lib/fonts/CrimsonPro-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Crimson Pro";
	src: url("lib/fonts/CrimsonPro-Light.woff2") format("woff2"),
		 url("lib/fonts/CrimsonPro-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Crimson Pro";
	src: url("CrimsonPro-SemiBoldItalic.woff2") format("woff2"),
		 url("lib/fonts/CrimsonPro-SemiBoldItalic.woff") format("woff");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
/*----------------------------------------------------------------------*/
/* Top tree elements */
/*----------------------------------------------------------------------*/
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: "Crimson Pro", "-apple-system", serif;
	font-size: clamp(.9rem, 100vw / 70, 1.5rem);
	font-wight: 300;
	line-height: 150%;
	overflow: auto;
	background: var(--base);
	color: var(--contrast);
}
body {
	margin: 0;
}
/*----------------------------------------------------------------------*/
/* Styling for links and focus */
/*----------------------------------------------------------------------*/
*:focus {
	outline: 2px solid var(--accent);
	outline-offset: 0.15rem;
}
a {
	color: var(--accent);
	transition: all .5s;
}
a:active,
a:hover,
a:focus {
	filter: hue-rotate(260deg) brightness(120%);
}
/*----------------------------------------------------------------------*/
/* Styling for links and focus */
/*----------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	color: var(--accent);
}
/*----------------------------------------------------------------------*/
/* Mobile menu */
/*----------------------------------------------------------------------*/
input#hamburger:focus ~ label#hamburgerHandler {
	outline: 2px solid var(--accent);
}
/*----------------------------------------------------------------------*/
/* Core Wordpress post and archive navigation colors */
/*----------------------------------------------------------------------*/
.post-page-numbers {
	color: var(--contrast);
	border: 1px solid var(--contrast);
}
a.post-page-numbers {
	color: var(--base);
	background: var(--contrast);
}
a.post-page-numbers:hover {
	background: var(--contrast);
	color: var(--base);
}
/*----------------------------------------------------------------------*/
/* Forms: theme colors */
/*----------------------------------------------------------------------*/
fieldset {
	border: 1px solid var(--accent);
}
form.search-form {
	width: 100%;
	max-width: 30rem;
}
input.search-field {
	width: 100%;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	color: var(--contrast);
	background: var(--base);
	border: 1px solid var(--accent);
}
input[type="search"] {
	margin:1rem 0 0 0;
	padding: .5rem 1rem;
	color: var(--contrast);
	background: var(--base);
	border: 1px solid var(--accent);
}
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
	color: var(--contrast);
	background: var(--base);
	border: 1px solid var(--accent);
}
/*----------------------------------------------------------------------*/
/* Wordpress blocks */
/*----------------------------------------------------------------------*/
.wp-block-button a:hover {
	color: var(--base);
	background: var(--contrast);
}
.wp-block-button.is-style-outline a:hover {
	border-color: var(--contrast);
}
.wp-block-image figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption, figure {
	margin: 0.5rem 0;
	padding: 0;
	text-align: center;
	font-style: italic;
	color: var(--accent);
}
.alignwide,
.alignfull {
	width: calc(100% + 8rem);
	margin-left: -4rem !important;
	clear: both;
}
#mainContent {
	width: 100%;
	overflow: visible;
}
/*----------------------------------------------------------------------*/
/* Styling for images */
/*----------------------------------------------------------------------*/
img {
	border: 1px solid var(--accent);
}
/*----------------------------------------------------------------------*/
/* Logo animation */
/*----------------------------------------------------------------------*/
#achtergrond {
	fill: var(--accent);
	opacity: 0;
	animation-name: bgFill;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
#loop2 {
	fill: var(--base);
	stroke: var(--accent);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation-name: stkDraw;
	animation-duration: 3s;
}
#loop1 {
	fill: var(--base);
	stroke: var(--accent);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: stkDraw;
	animation-duration: 4s;
}
@keyframes bgFill {
	to {
		opacity: 1;
	}
}
@keyframes stkDraw {
	to {
		stroke-dashoffset: 0;
		stroke: transparent;
	}
}
/*----------------------------------------------------------------------*/
/* Logo no animation */
/*----------------------------------------------------------------------*/
#noLoopBack {
	fill: var(--accent);
}
#noLoop2 {
	fill: var(--base);
	stroke: var(--accent);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
#noLoop1 {
	fill: var(--base);
	stroke: var(--accent);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
/*----------------------------------------------------------------------*/
/* Main divisions */
/*----------------------------------------------------------------------*/
.flexWrap {
	width: 100%;
	display: flex;
	justify-content: center;
}
.wrapper {
	display: flex;
	width: 100%;
	max-width: 44rem;
	padding: 0 1rem;
	overflow: visible;
}
.wrapperWide {
	display: flex;
	width: 100%;
	max-width: 50rem;
	padding: 0 1rem;
	overflow: visible;
}
.flexItemWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}
/*----------------------------------------------------------------------*/
/* Site head items */
/*----------------------------------------------------------------------*/
.firstHeadItem {
	width: 45%;
	padding: .75rem 1rem 0 0;
	text-align: right;
	font-style: italic;
	opacity: 0.7;
}
.logoHeadItem {
	width: 10%;
	padding: 1rem 0 0 0;
	z-index: 9;
}
.logoHeadItem a:hover,
.logoHeadItem a:focus {
	transform: scale(90%);
}
.lastHeadItem {
	width: 45%;
	padding: .75rem 0 0 1rem;
	text-align: left;
	font-style: italic;
	opacity: 0.7;
}
.stickToTop {
	display: flex;
	position: sticky;
	top: 0;
	background: var(--base);
	z-index: 9;
}
body.logged-in .stickToTop {
	top: 32px;
}
.navItemsHolder {
	display: flex;
	padding: 1rem 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.italicAccent {
	font-style: italic;
	color: var(--accent);
}
/*----------------------------------------------------------------------*/
/* Main navigation menu */
/*----------------------------------------------------------------------*/
.mainNav {
	display: flex;
	font-weight: 600;
	font-size: 1.25rem;
}
.mainNav ul {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.mainNav a {
	text-decoration: none;
}
.mainNav a:hover {
	text-decoration: underline;
}
.mainNav li:first-child:before,
.mainNav li:last-child:after {
	content: "";
	display: inline-block;
	align-items: center;
	height: 1rem;
	width: 2rem;
	margin-bottom: -.15rem;
	background: var(--accent);
	mask: url("lib/img/ornament.svg") no-repeat center;
}
.mainNav li:first-child:before {
	margin-right: .5rem;
}
.mainNav li:last-child:after {
	margin-left: .5rem;
	transform: scaleX(-1);
}
span.hamburgerLine,
span.hamburgerLine::before,
span.hamburgerLine::after {
	background: var(--accent);
}
/*----------------------------------------------------------------------*/
/* Shared classes */
/*----------------------------------------------------------------------*/
.centered {
	text-align: center;
}
a.blockLink {
	display: block;
}
.accolade {
	width: 100%;
	padding: 0 10rem 1.25rem 10rem;
	fill: var(--accent);
}
.accentBold {
	font-weight: 600;
	color: var(--accent);
}
.paddedTop {
	padding-top: 1rem;
}
/*----------------------------------------------------------------------*/
/* Archive navigation */
/*----------------------------------------------------------------------*/
.post-navigation,
.posts-navigation {
	padding-top: 2rem;
	justify-content: center;
	font-weight: 600;
	font-size: 1.5rem;
}
.nav-links {
	display: flex;
}
.page-numbers {
	display: block;
	padding: 0 0.35rem;
}
a.page-numbers {
	text-decoration: none;
	transition: all .3s;
}
a.page-numbers:hover {
	transform: scale(1.4);
	text-decoration: underline;
}
a.page-numbers:focus,
a.prev.page-numbers:hover,
a.next.page-numbers:hover,
a.prev.page-numbers:focus,
a.next.page-numbers:focus {
	text-decoration: none;
}
/*----------------------------------------------------------------------*/
/* Tiles */
/*----------------------------------------------------------------------*/
.tileWrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.tileWrapper .tile {
	width: calc(50% - .5rem);
}
.tile {
	flex-direction: column;
	align-self: center;
	align-content: center;
	justify-content: center;
}
a.tileImgLink {
	display: flex;
	justify-content: center;
	transition: all 0.5s;
	background: var(--accent);
}
a.tileImgLink:hover,
a.tileImgLink:focus {
	filter: none;
	transform: scale(1.05);
}
figure.imgHolder {
	display: flex;
	align-content: center;
	justify-content: center;
}
img.tileImg {
	box-sizing: border-box;
	display: flex;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 22rem;
	margin: auto;
}
a.tileImgLink:hover img.tileImg,
a.tileImgLink:focus img.tileImg {
	mix-blend-mode: screen;
	filter: saturate(0);
}
.tileLinkHolder {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: 1rem 0;
}
.tileLinkHolder:after {
	content: "";
	display: flex;
	align-items: center;
	height: .8rem;
	width: 2rem;
	margin-top: .25rem;
	background: var(--contrast);
	opacity: 0.7;
	mask: url("lib/img/eindornament.svg") no-repeat center;
}
a.titleLink {
	display: flex;
	font-weight: 600;
	text-decoration: none;
	align-items: center;
	text-align: center;
	line-height: 100%;
}
a.titleLink:hover {
	text-decoration: underline;
}
a.titleLink:before,
a.titleLink:after {
	content: "";
	display: flex;
	align-items: center;
	height: 1rem;
	width: 2rem;
	background: var(--accent);
	mask: url("lib/img/ornament.svg") no-repeat center;
}
a.titleLink:before {
	margin-right: .5rem;
}
a.titleLink:after {
	margin-left: .5rem;
	transform: scaleX(-1);
}
/*----------------------------------------------------------------------*/
/* Single */
/*----------------------------------------------------------------------*/
.post {
	text-align: center;
}
.singlePostImg {
	display: flex;
	justify-content: center;
	padding: 1rem 0 0 0;
}
/*----------------------------------------------------------------------*/
/* Footer */
/*----------------------------------------------------------------------*/
.footerWrap {
	padding: 3rem 0;
	align-items: center;
	flex-direction: column;
}
.footerWrap * {
	margin: 0;
	color: var(--accent);
}
.footerWrap a {
	text-decoration: none;
	opacity: 1;
}
.footerWrap a:hover {
	text-decoration: underline;
}
/*----------------------------------------------------------------------*/
/* Previous theme color fixes */
/*----------------------------------------------------------------------*/
.has-red-color,
.has-primary-color {
	color: var(--accent);
}
/* ---------------------------------------------------------------------*/
/* Wordpress image links hover behaviour */
/* ---------------------------------------------------------------------*/
figure.wp-block-image a {
	transition: all 0.5s;
	background: var(--accent);
}
figure.wp-block-image a:hover,
figure.wp-block-image a:focus {
	filter: none;
	transform: scale(1.05);
}
figure.wp-block-image a:hover img {
	mix-blend-mode: screen;
	filter: saturate(0);
}
/*----------------------------------------------------------------------*/
/* Media queries */
/*----------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
	.alignwide {
		max-width: 100%;
		margin-left: 0 !important;
	}
	.tile {
		width: 100%;
	}
	.accolade {
		padding: 1rem;
	}
	.mainNav {
		flex-direction: column;
	}
	.mainNav ul {
		flex-direction: column;
		margin-top: 1rem;
	}
	.mainNav li:first-child:before,
	.mainNav li:last-child:after {
		display: none;
	}
}