/*
Theme Name: Charlotte van Beuningen
Author: De Heren Van B.V.
Author URI: https://www.deherenvan.nl/
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.3
Version: 25.10
*/
html {
	scroll-behavior: smooth;
}

#tolkie-separate-container {
	width: auto !important;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

& a.wp-block-navigation-item__content[href="#"] {
	pointer-events: none;
	cursor: default;
}

header {
	& .wp-block-search {
		& .wp-block-search__input {
			border-width: 0 0 1px 0;
			padding: 0;
			font-weight: 500;
			width: 130px;

			&::placeholder {
				color: var(--wp--preset--color--contrast);
			}
		}

		& .wp-block-search__button {
			padding: 0;
			border: 0;
		}
	}

	.toggle-menu a {
		cursor: pointer;
		text-decoration: none;
		width: 36px;
		height: 36px;
		display: inline-block;
		padding-left: 3em;
		position: relative;

		&:before {
			font-size: 36px;
		}

		&:after {
			content: "menu";
			position: absolute;
			display: flex;
			align-items: center;
			left: 0;
			top: 0;
			bottom: 0;
			font-size: var(--wp--preset--font-size--default);
			font-weight: 500;
		}
	}

	& div:has(.is-style-sitemap-menu) {
		display: none;
		transition: transform 0.4s ease, opacity 0.4s ease;
	}

	@media (min-width: 600px) {

		& [class*="icon-"] {
			display: inline-block !important;
			padding-left: 1.5rem !important;
			min-height: 1.5rem;
			background-repeat: no-repeat;
			background-size: .75rem;
			background-position: left center;

			&.icon-clock {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath id='Path_105' data-name='Path 105' d='M86-868a5.842,5.842,0,0,1-2.34-.472,6.059,6.059,0,0,1-1.9-1.283,6.059,6.059,0,0,1-1.283-1.9A5.843,5.843,0,0,1,80-874a5.842,5.842,0,0,1,.473-2.34,6.059,6.059,0,0,1,1.283-1.905,6.059,6.059,0,0,1,1.9-1.282A5.842,5.842,0,0,1,86-880a5.843,5.843,0,0,1,2.34.473,6.059,6.059,0,0,1,1.9,1.282,6.059,6.059,0,0,1,1.283,1.905A5.842,5.842,0,0,1,92-874a6.93,6.93,0,0,1-.045.795,4.927,4.927,0,0,1-.15.765,2,2,0,0,0-.487-.4,1.812,1.812,0,0,0-.607-.225,4.581,4.581,0,0,0,.067-.457q.022-.233.022-.473a4.633,4.633,0,0,0-1.4-3.4,4.633,4.633,0,0,0-3.4-1.4,4.633,4.633,0,0,0-3.4,1.4A4.633,4.633,0,0,0,81.2-874a4.633,4.633,0,0,0,1.395,3.405A4.633,4.633,0,0,0,86-869.2a4.733,4.733,0,0,0,1.463-.225,4.861,4.861,0,0,0,1.283-.63,1.987,1.987,0,0,0,.442.45,2.106,2.106,0,0,0,.563.3,5.957,5.957,0,0,1-1.717.96A5.923,5.923,0,0,1,86-868Zm4.35-2.4a.724.724,0,0,1-.533-.218.724.724,0,0,1-.217-.532.724.724,0,0,1,.217-.533.724.724,0,0,1,.533-.217.724.724,0,0,1,.532.217.724.724,0,0,1,.218.533.724.724,0,0,1-.218.532A.724.724,0,0,1,90.35-870.4Zm-2.37-.78-2.58-2.58V-877h1.2v2.76l2.22,2.22Z' transform='translate(-80 880)' fill='%23fff'/%3E%3C/svg%3E%0A");
			}

			&.icon-phone {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath id='Path_103' data-name='Path 103' d='M131.3-828a10.008,10.008,0,0,1-4.117-.908,12.315,12.315,0,0,1-3.7-2.575,12.314,12.314,0,0,1-2.575-3.7A10.007,10.007,0,0,1,120-839.3a.678.678,0,0,1,.2-.5.678.678,0,0,1,.5-.2h2.7a.62.62,0,0,1,.417.158.609.609,0,0,1,.217.375l.433,2.333a1.175,1.175,0,0,1-.017.45.7.7,0,0,1-.183.317l-1.617,1.633a8.059,8.059,0,0,0,.792,1.192,11.717,11.717,0,0,0,1.008,1.108,11.726,11.726,0,0,0,1.083.958,10.538,10.538,0,0,0,1.2.808l1.567-1.567a.933.933,0,0,1,.392-.225,1.073,1.073,0,0,1,.475-.042l2.3.467a.771.771,0,0,1,.383.242.587.587,0,0,1,.15.392v2.7a.678.678,0,0,1-.2.5A.678.678,0,0,1,131.3-828Zm-9.283-8,1.1-1.1-.283-1.567H121.35q.083.683.233,1.35A7.3,7.3,0,0,0,122.017-836Zm5.967,5.967a8.278,8.278,0,0,0,1.325.45,8.141,8.141,0,0,0,1.358.217v-1.467l-1.567-.317ZM122.017-836ZM127.983-830.033Z' transform='translate(-120 840)' fill='%23fff'/%3E%3C/svg%3E%0A");
			}

			&.icon-external {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath id='Path_96' data-name='Path 96' d='M121.263-828a1.185,1.185,0,0,1-.892-.392,1.32,1.32,0,0,1-.371-.942v-9.333a1.321,1.321,0,0,1,.371-.942,1.186,1.186,0,0,1,.892-.392h8.842a1.186,1.186,0,0,1,.892.392,1.321,1.321,0,0,1,.371.942v1.333h-1.263v-1.333h-8.842v9.333h8.842v-1.333h1.263v1.333a1.32,1.32,0,0,1-.371.942,1.185,1.185,0,0,1-.892.392Zm7.579-2.667-.884-.933,1.626-1.733h-5.795v-1.333h5.795l-1.626-1.733.884-.933L132-834Z' transform='translate(-120 840)' fill='%23fff'/%3E%3C/svg%3E%0A");
			}
		}
	}

	@media (max-width: 599px) {
		&>div:first-child {
			padding-inline: .3rem;

			& ul {
				gap: .3rem;
				justify-content: space-around !important;

				& * {
					font-size: var(--wp--preset--font-size--small);
				}
			}
		}

		& .wp-block-search__input {
			display: none;
		}
	}
}

body.menu-open div:has(>header) {
	&>header div:has(.is-style-sitemap-menu) {
		display: block;
		height: auto;
		background: white;
		width: 100%;
		padding-block: 3rem;
		box-shadow: 0px 10px 10px #f5f5f5;
		transform: translateY(0);

		@starting-style {
			opacity: 0;
			transform: translateY(-10px);
		}
	}
}

main {
	margin-block-start: 0 !important;
	margin-top: 0 !important;

	& h1>#tolkie-separate-container {
		margin-bottom: 2rem;
	}

	& div.entry-content>div.wp-block-group {
		margin-top: 0;
	}

	& .wp-block-search__input {
		background: url('./assets/images/icon-search.svg') no-repeat left +1rem center;
		padding-left: 3rem;
	}
}

footer {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);

	& a {
		color: inherit;

		&:hover {
			color: inherit;
		}

	}
}


/* Frontend visibility rules */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hide-on-tablet {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.hide-on-desktop {
		display: none !important;
	}
}