/*
Theme Name: scleroken
Theme URI: https://scleroken.be
Author: Ryan Verschuren
Author URI: https://scleroken.be
Description: This is the theme for the Scleroken.be site
Version: 1.2.2
Text Domain: scleroken
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

 body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background: #f5f8f1;
	color: #1f2a1f;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
}

:root {
	--scleroken-green: #78bd43;
	--scleroken-green-dark: #2f6d1f;
	--scleroken-ink: #1f2a1f;
	--scleroken-muted: #657064;
	--scleroken-soft: #edf7e7;
	--scleroken-surface: #ffffff;
	--scleroken-border: rgba(47, 109, 31, 0.14);
	--scleroken-shadow: 0 18px 45px rgba(35, 48, 35, 0.1);
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: rgba(120, 189, 67, 0.25);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--scleroken-ink);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.16;
}

p {
	margin-top: 0;
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

 a {
	color: var(--scleroken-green-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
	transition: color 160ms ease, text-decoration-color 160ms ease, opacity 160ms ease;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 8px;
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
	margin-left: auto !important;
	margin-right: auto !important;
	width: inherit;
}

.wp-site-blocks{
	background: var(--scleroken-surface);
	box-shadow: var(--scleroken-shadow);
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
	min-height: 100vh;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-query,
.wp-site-blocks > .wp-block-group:not(.alignfull):not(.has-background) {
	flex: 1 0 auto;
	padding-top: clamp(2rem, 5vw, 4.5rem);
	padding-bottom: clamp(2rem, 5vw, 4.5rem);
}

.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:has(.scleroken-footer),
.wp-site-blocks > .scleroken-footer {
	margin-top: auto;
}

.scleroken-masthead {
	background: #ffffff;
	border-bottom: 1px solid var(--scleroken-border);
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.scleroken-logo-banner {
	background: #ffffff;
	margin: 0 !important;
	padding: clamp(1.25rem, 3vw, 2.5rem) var(--wp--custom--spacing--outer);
}

/* The masthead is already full width; prevent its image from breaking out twice. */
.wp-site-blocks .scleroken-masthead > .scleroken-logo-banner {
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

.scleroken-logo-banner img {
	display: block;
	height: clamp(76px, 12vw, 170px);
	margin: 0 auto;
	max-width: min(100%, 1040px);
	object-fit: contain;
	width: 100%;
}

.scleroken-nav {
	background: linear-gradient(90deg, var(--scleroken-green-dark), var(--scleroken-green)) !important;
	box-sizing: border-box;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.28);
	font-size: 0.98rem;
	font-weight: 700;
	min-height: 52px;
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
	width: 100%;
}

.scleroken-nav .wp-block-navigation__container {
	gap: 0.2rem 0.55rem;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.scleroken-nav .wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 0.72rem 0.9rem;
	transition: background-color 160ms ease, transform 160ms ease;
}

.scleroken-nav .wp-block-navigation-item__content:hover,
.scleroken-nav .wp-block-navigation-item__content:focus {
	background: rgba(255, 255, 255, 0.15);
	text-decoration: none;
	transform: translateY(-1px);
}

.scleroken-nav .wp-block-navigation__submenu-container {
	background: #ffffff !important;
	border: 1px solid var(--scleroken-border);
	border-radius: 8px;
	box-shadow: 0 14px 32px rgba(35, 48, 35, 0.16);
	color: var(--scleroken-ink) !important;
	overflow: hidden;
}

.scleroken-nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
.scleroken-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.scleroken-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: var(--scleroken-ink) !important;
}

.scleroken-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 0;
	padding: 0.7rem 0.9rem;
}

.scleroken-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.scleroken-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: var(--scleroken-soft);
	color: var(--scleroken-green-dark) !important;
	transform: none;
}

.scleroken-nav select,
.scleroken-nav option {
	background: #ffffff;
	color: var(--scleroken-ink);
}

main.wp-block-group,
main.wp-block-query,
.wp-block-query {
	color: var(--scleroken-ink);
}

.wp-block-post-title,
.wp-block-query-title,
h1.wp-block-post-title {
	margin-bottom: 1rem;
}

.wp-block-post-title a {
	color: var(--scleroken-ink);
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
	color: var(--scleroken-green-dark);
	text-decoration: underline;
}

.wp-block-post-featured-image img,
.wp-block-image img {
	border-radius: 8px;
}

.scleroken-logo-banner img {
	border-radius: 0;
}

.wp-block-post-template {
	gap: clamp(1.25rem, 3vw, 2rem);
}

.wp-block-post-template > li {
	background: #ffffff;
	border: 1px solid var(--scleroken-border);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(35, 48, 35, 0.08);
	padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.wp-block-post-template .wp-block-post-featured-image {
	margin-bottom: 1.1rem;
	overflow: hidden;
}

.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms,
.wp-block-latest-posts__post-date {
	color: var(--scleroken-muted);
	font-size: 0.92rem;
}

.wp-block-separator {
	border-color: var(--scleroken-border);
	opacity: 1;
}

.wp-block-button__link,
.wp-element-button {
	background: var(--scleroken-green-dark);
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(47, 109, 31, 0.18);
	color: #ffffff;
	font-weight: 700;
}

.wp-block-search__inside-wrapper {
	background: #ffffff;
	border: 1px solid var(--scleroken-border);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(35, 48, 35, 0.07);
	padding: 0.35rem;
}

.wp-block-search__input {
	border: none;
	border-radius: 6px;
	color: var(--scleroken-ink);
	padding-left: 0.8rem;
}

.wp-block-latest-posts {
	background: var(--scleroken-soft);
	border: 1px solid var(--scleroken-border);
	border-radius: 8px;
	list-style: none;
	padding: 1rem 1.1rem;
}

.wp-block-latest-posts li {
	border-bottom: 1px solid rgba(47, 109, 31, 0.12);
	margin-bottom: 0.9rem;
	padding-bottom: 0.9rem;
}

.wp-block-latest-posts li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.scleroken-home-grid {
	align-items: start;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(320px, 2fr) minmax(280px, 1fr) !important;
	margin-left: auto;
	margin-right: auto;
	max-width: 1120px;
	padding: clamp(2rem, 5vw, 4.5rem) var(--wp--custom--spacing--outer);
}

.scleroken-home-grid > .wp-block-group {
	grid-column: auto !important;
	grid-row: auto !important;
	min-width: 0;
}

.wp-block-image.Affiche img {
	background: #ffffff;
	box-shadow: 0 16px 38px rgba(35, 48, 35, 0.13);
	max-height: 760px;
	object-fit: contain;
}

.wp-block-query-pagination {
	border-top: 1px solid var(--scleroken-border);
	margin-top: 2rem;
	padding-top: 1.25rem;
}

.wp-block-query-pagination a {
	font-weight: 700;
	text-decoration: none;
}

.scleroken-footer {
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.scleroken-footer-inner {
	align-items: center;
	gap: 1rem 1.5rem;
	min-height: 96px;
	padding: 1.35rem var(--wp--custom--spacing--outer);
}

.scleroken-footer p {
	color: rgba(255, 255, 255, 0.86) !important;
	font-size: 0.92rem;
	margin: 0;
}

.scleroken-footer .wp-block-social-links {
	margin: 0;
}

.scleroken-footer .wp-social-link {
	background-color: rgba(255, 255, 255, 0.14) !important;
	color: #ffffff !important;
}

/* Mobile navigation is styled below at the same breakpoint as the editor UI. */

@media (max-width: 782px) {
	body {
		font-size: 16px;
	}

	.wp-site-blocks {
		box-shadow: none;
	}

	.scleroken-nav {
		min-height: 56px;
		padding-left: 0;
		padding-right: 0;
	}

	/* Use the overlay navigation throughout the tablet/mobile layout. */
	.scleroken-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-open {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		gap: 0.7rem;
		justify-content: center;
		min-height: 56px;
		padding: 0.75rem var(--wp--custom--spacing--outer);
		width: 100%;
	}

	/* Add a hamburger without replacing WordPress's translated Menu label. */
	.scleroken-nav .wp-block-navigation__responsive-container-open::before {
		background: currentColor;
		box-shadow: 0 -6px currentColor, 0 6px currentColor;
		content: "";
		display: block;
		height: 2px;
		width: 22px;
	}

	.scleroken-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: #f8fbf4 !important;
		color: var(--scleroken-ink) !important;
		padding: clamp(1rem, 4vw, 2rem) var(--wp--custom--spacing--outer);
	}

	.scleroken-nav .wp-block-navigation__responsive-close {
		margin-left: auto;
		margin-right: auto;
		max-width: 36rem;
		width: 100%;
	}

	/* Keep the accessible close label while showing a touch-friendly X. */
	.scleroken-nav .wp-block-navigation__responsive-container-close {
		border-radius: 50%;
		font-size: 0 !important;
		height: 48px;
		overflow: hidden;
		width: 48px;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-close::before,
	.scleroken-nav .wp-block-navigation__responsive-container-close::after {
		background: currentColor;
		content: "";
		height: 2px;
		left: 13px;
		position: absolute;
		top: 23px;
		width: 22px;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-close::before {
		transform: rotate(45deg);
	}

	.scleroken-nav .wp-block-navigation__responsive-container-close::after {
		transform: rotate(-45deg);
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		margin-left: auto;
		margin-right: auto;
		max-width: 32rem;
		padding-bottom: 1.5rem;
		padding-top: 4rem !important;
		width: 100%;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		align-items: stretch !important;
		gap: 0.75rem;
		width: 100%;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-page-list {
		align-items: stretch !important;
		gap: 0.75rem;
		width: 100%;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item,
	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item {
		background: #ffffff !important;
		border: 1px solid var(--scleroken-border);
		border-radius: 8px;
		box-sizing: border-box;
		color: var(--scleroken-ink) !important;
		position: relative;
		text-align: center;
		width: 100%;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item > .wp-block-navigation-item__content {
		box-sizing: border-box;
		color: var(--scleroken-ink) !important;
		font-size: 1.12rem;
		justify-content: center;
		min-height: 56px;
		padding: 0.9rem 3.25rem !important;
		transform: none;
		width: 100%;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus,
	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-page-list > .wp-block-navigation-item > .wp-block-navigation-item__content:focus {
		background: var(--scleroken-soft);
		transform: none;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		color: inherit !important;
		font-size: 1.12rem;
		margin: 0;
	}

	/* Core expands mobile submenus by default; Polylang remains a real dropdown. */
	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > button.wp-block-navigation__submenu-icon,
	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > span.wp-block-navigation__submenu-icon {
		align-items: center;
		display: flex;
		height: 56px;
		justify-content: center;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 52px;
		z-index: 2;
	}

	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation__submenu-icon svg {
		height: 12px;
		transition: transform 160ms ease;
		width: 12px;
	}

	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > button.wp-block-navigation__submenu-icon[aria-expanded="true"] svg,
	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-submenu__toggle[aria-expanded="true"] + span.wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation__submenu-container {
		background: var(--scleroken-soft) !important;
		border: 0;
		border-radius: 0 0 7px 7px;
		box-shadow: inset 0 1px var(--scleroken-border);
		display: none !important;
		margin: 0;
		min-width: 0 !important;
		padding: 0.35rem 0 !important;
		width: 100% !important;
	}

	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex !important;
	}

	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		background: transparent !important;
		border: 0;
		color: var(--scleroken-ink) !important;
		text-align: center;
		width: 100%;
	}

	.scleroken-nav .is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--scleroken-ink) !important;
		justify-content: center;
		min-height: 48px;
		padding: 0.7rem 1rem !important;
		transform: none;
		width: 100%;
	}

	.scleroken-nav .wp-block-navigation__responsive-container-open:focus-visible,
	.scleroken-nav .wp-block-navigation__responsive-container-close:focus-visible,
	.scleroken-nav .wp-block-navigation-submenu__toggle:focus-visible {
		outline: 3px solid currentColor;
		outline-offset: -4px;
	}

	.scleroken-logo-banner {
		padding-bottom: 1rem;
		padding-top: 1rem;
	}

	.scleroken-home-grid {
		grid-template-columns: 1fr !important;
		padding-top: 2rem;
	}

	.scleroken-footer-inner {
		flex-direction: column;
		text-align: center;
	}
}