/*
Theme Name: Ruimtevolk
Author: De Heren Van B.V.
Author URI: https://www.deherenvan.nl
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.4
Version: 25.12
*/

html {
	scroll-behavior: smooth;
	scroll-padding-top: 15vh;
}

body {
	overflow-x: hidden;
}

:is(.entry-content, #editor .is-root-container)>*:not(.alignwide, .alignfull),
body.archive main>*:not(.alignwide, .alignfull) {
	--left-space: calc(min(var(--wp--style--global--wide-size), 100%) - min(var(--wp--style--global--content-size), 100%));
	padding-left: var(--left-space);
	box-sizing: content-box;

	&:is(.wp-block-buttons, .wp-block-pullquote) {
		/* max-width: var(--wp--style--global--wide-size); */
	}

	&:is(.wp-block-list) {
		/* max-width: var(--wp--style--global--wide-size); */
		/* padding-left: calc(var(--left-space) + 1.6rem); */
		padding-left: calc(var(--left-space) + 3rem);
	}

	&:is(.wp-block-quote) {
		max-width: var(--wp--style--global--wide-size);
		padding-left: max(calc(var(--left-space) / 2), 1rem);
	}
}

@media (max-width: 540px) {
	.wp-block-post-featured-image[style*="aspect-ratio:1;"] {
		aspect-ratio: 16/9 !important;
	}
}

header {
	&.is-scrolled {
		position: sticky;
		top: 0;
		backdrop-filter: blur(10px);
		filter: invert(1);
		z-index: 99;
		transform: translateY(-100%);

		&>div.has-base-background-color {
			padding-block: .25em;
		}

		& .wp-block-group[style*=padding-top] {
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}

		& .lottie-animation-wrapper {
			display: none;
		}

		& figure img {
			padding-block: 5px;
			max-height: 50px;
		}

		&.is-scrolling-up {
			transform: translateY(0%);
			transition: transform 0.4s ease;
		}
	}

	& figure.wp-block-image>a {
		display: flex;
	}

	& li.wp-block-navigation-submenu:has(>button[aria-expanded="true"]) {
		position: relative;
		color: var(--wp--preset--color--base);

		&:before {
			content: "";
			position: absolute;
			inset: -1rem;
			background: var(--wp--preset--color--contrast);
			clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
		}

		&>ul.wp-block-navigation__submenu-container {
			background: var(--wp--preset--color--contrast) !important;
			padding-block: 1rem;
			clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
		}

	}

	& :is(.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,
		.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,
		.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,
		.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container) {
		left: -1rem;
		right: auto;
	}

	& .wp-block-navigation__responsive-container.is-menu-open {
		height: 100dvh;
		z-index: 99;

		& ul {
			width: 100%;

			& li {
				display: block !important;
				width: 100%;

				& ul {
					margin: 0 0 1rem 1rem;
					padding: 0 !important;
				}
			}
		}
	}

	.wp-block-navigation__responsive-container-open>svg {
		width: 36px;
		height: 36px;
	}

	.current-menu-item.wp-block-navigation-link a span {
		text-decoration: underline
	}
}

footer {

	& #mailpoet_form_1 form.mailpoet_form {
		padding: 0;
		display: grid;
		grid-template-columns: 1fr;
		gap: .5rem;

		& .mailpoet_paragraph {
			margin-bottom: 0;
		}

		@media (min-width: 600px) {
			grid-template-columns: repeat(4, 1fr);

			& .mailpoet_paragraph {
				grid-column: span 2;

				&:has([type="email"]) {
					grid-column: span 3;
				}

				&:has([type="submit"]) {
					grid-column: span 1;
				}
			}
		}

		& input {
			border-radius: 0;
			padding: 0.5em !important;
			border: 1px solid var(--wp--preset--color--contrast);
			font-size: var(--wp--preset--font-size--small);
		}

		& .mailpoet_submit {
			display: block;
			position: relative;
			background: var(--wp--preset--color--contrast);
			color: var(--wp--preset--color--base);
		}
	}

}

nav.rank-math-breadcrumb {

	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;

	& a {
		color: var(--wp--preset--color--dark-grey);
		text-decoration: none;
	}

	& .separator {
		color: var(--wp--preset--color--dark-grey);
		margin-inline: 8px;
	}

}

body:is(.single-post, .single-project) main .post-meta {

	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);

	& p {
		margin-block: .5rem;
	}

	& span {
		color: var(--wp--preset--color--dark-grey);
	}

	@media (min-width: 960px) {

		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		max-width: var(--wp--style--global--wide-size);
		width: 100%;
		padding-inline: var(--wp--style--root--padding-left) 0 !important;

		& p {
			max-width: calc(var(--left-space) - 2rem);
		}

		&+* {
			margin-block-start: 0;
		}

	}
}

@keyframes enterHeader {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

@media (max-width: 600px) {
	.wp-block-cover.alignfull.has-aspect-ratio {
		aspect-ratio: 1/1 !important;
	}
}