/*
Theme Name: Lombaers
Theme URI: https://www.lombaers.be
Author: Studio Colibri
Author URI: https://www.studiocolibri.be
Description: Theme WordPress pour Francoise Lombaers, base sur l'ancien site Hugo.
Version: 0.1.0
Text Domain: lombaers
*/

@font-face {
	font-family: "BwGradual";
	src: url("assets/fonts/BwGradual-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "BwGradual";
	src: url("assets/fonts/BwGradual-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--primary: #4b665f;
	--bg: #eae8e1;
	--line: 1px solid var(--primary);
	--gutter: 0.5vw;
	--font: "BwGradual", system-ui, sans-serif;
	--ease: 180ms ease;
}

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

html {
	margin-top: 0 !important;
}

#wpadminbar {
	top:unset!important;
	bottom: 0 !important;
}

html,
body {
	min-height: 100%;
	margin: 0;
	background: var(--primary);
	color: var(--primary);
	font-family: var(--font);
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0;
}

body {
	padding: var(--gutter);
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a.active {
	font-weight: 700;
}

strong,
b {
	font-weight: 700;
}

::selection {
	background: var(--primary);
	color: var(--bg);
}

::-webkit-scrollbar {
	display: none;
}

.nav__head {
	font-weight: 700;
}

.nav__title-mobile {
	display: none!important;
	font-weight: 700;
}


@media (max-width: 991px) {
	#menu-menu-haut > li {
		display: none;
	}

	#menu-menu-haut > li.nav__title-mobile {
		display: block !important;
		font-size: 0.65rem;
	}
}





.fibonacci-carre {
	width: calc(100vw - 1vw);
	height: calc(100vh - 1vw);
	grid-column-gap: 0;
	grid-row-gap: 0;
	background: var(--bg);
	background-size: auto;
	border: 1px solid var(--primary);
	grid-template-rows: calc(100% / 21 * 3) calc(100% / 21 * 5) calc(100% / 21 * 13);
	grid-template-columns: calc(100% / 34 * 8) calc(100% / 34 * 5) calc(100% / 34 * 21);
	grid-auto-columns: 1fr;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	position: relative;

	> * {
		min-width: 0;
	}

	._5x3,
	._5x5 {
		background: var(--bg);
		text-transform: uppercase;
		font-size: clamp(0.58rem, 0.72vw, 0.72rem);
		line-height: 1.18;
	}

	._5x3 {
		grid-area: 1 / 2 / 2 / 3;
		display: flex;
		align-items: center;
		padding: 1rem 1.4rem;
		border-right: var(--line);
		border-bottom: var(--line);
	}

	._5x5 {
		grid-area: 2 / 2 / 3 / 3;
		display: flex;
		align-items: center;
		padding: 1rem 1.4rem;
		border-right: var(--line);
	}

	.header-menu,
	.header-menu ul,
	.section-menu,
	.section-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.header-menu li,
	.section-menu li {
		display: block;
	}

	.header-menu .menu-item-has-children > a,
	.section-menu .menu-item-has-children > a,
	.header-menu .current-menu-item > a,
	.header-menu .current-menu-ancestor > a,
	.header-menu .current_page_item > a,
	.header-menu .current_page_ancestor > a,
	.section-menu .current-menu-item > a,
	.section-menu .current-menu-ancestor > a,
	.section-menu .current_page_item > a,
	.section-menu .current_page_ancestor > a {
		font-weight: 700;
	}

	.header-menu .sub-menu > li:last-child,
	.section-menu .sub-menu > li:last-child {
		margin-bottom: 0.5rem;
	}

	._8x8 {
		grid-area: 1 / 1 / 3 / 2;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: var(--line);
		background: var(--bg);

		.comp {
			width: min(62%, 13rem);
			height: auto;
			fill: var(--primary);
			color: var(--primary);
		}

		.menu-icon {
			position: absolute;
			right: 2rem;
			top: 2rem;
			display: none;
			width: 2rem;
		}

		.menu-icon__label {
			display: none;
		}
	}

	.nav-mobile {
		display: none;
	}

	._13x13 {
		grid-area: 3 / 1 / 4 / 3;
		position: relative;
		border-top: var(--line);
		border-right: var(--line);
		background: color-mix(in srgb, var(--primary) 8%, var(--bg));
		overflow: hidden;

		.pic-wrapper,
		img {
			width: 100%;
			height: 100%;
			min-height: 0;
			object-fit: cover;
			mix-blend-mode: multiply;
		}
	}

	._21x8 {
		grid-area: 1 / 3 / 4 / 4;
		position: relative;
		background: var(--bg);
		overflow: auto;
		padding: 0;

		.top-square {
			width: 2.5rem;
			height: 2.5rem;
			object-fit: fill;
			margin-top: 1px;
			position: fixed;
			top: 2rem;
			bottom: auto;
			left: auto;
			right: 1.7rem;
			z-index: 3;

			a,
			svg {
				display: block;
				width: 100%;
				height: auto;
			}

			svg {
				fill: var(--bg);
			}
		}

		.nav2 {
			position: sticky;
			top: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			align-content: center;
			gap: .5rem 1rem;
			flex-wrap: wrap;
			width: 100%;
			min-height: calc(100vh / 21 * 3);
			padding: 0 clamp(2rem, 3.2vw, 3.4rem);
			background: var(--primary);
			color: var(--bg);
			text-transform: uppercase;
			font-size: 0.6rem;
			line-height: 1.2;
		}

		.nav2__link {
			display: inline-grid;
			grid-template-areas: "label";
			align-items: center;
			color: inherit;
			text-decoration: none;
			font-weight: 300;

			&,
			&::after {
				grid-area: label;
			}

			&::after {
				content: attr(data-text);
				height: 0;
				overflow: hidden;
				visibility: hidden;
				font-weight: 700;
				pointer-events: none;
				user-select: none;
			}

			&:hover,
			&.active {
				font-weight: 700;
			}

			&.active {
				text-decoration: underline;
				text-underline-offset: 0.35rem;
			}
		}

		.hero {
			position: relative;
			height: calc(100vh / 21 * 5 - 0.5vw + 2px);
			display: flex;
			align-items: flex-end;
			background: var(--primary);
			color: var(--bg);

			h1 {
				max-width: 68%;
				margin: 0 0 2rem clamp(2rem, 3.2vw, 3.4rem);
				color: var(--bg);
				text-transform: uppercase;
				font-size: clamp(1.45rem, 2.2vw, 2rem);
				line-height: 1.08;
			}
		}

		.content {
			--content-x: clamp(2rem, 3.2vw, 3.4rem);
			/*max-width: 48rem;*/
			padding: 2rem var(--content-x) 5rem;
			animation: fade-in 320ms var(--ease) both;

			p,
			li {
				font-size: clamp(0.95rem, 1.28vw, 1.34rem);
				line-height: 1.68;
			}

			p {
				margin: 0 0 1.6rem;
			}

			h2
			{
				margin: 2.4rem 0 1rem;
				text-transform: uppercase;
				font-size: clamp(1rem, 1.35vw, 1.35rem);
				line-height: 1.2;
			}

			h3 {
				margin: 1.6rem 0 0.8rem;
				text-transform: uppercase;
				font-size: clamp(0.9rem, 1.2vw, 1.2rem);
				line-height: 1.2;
			}

			a:not(.block-50) {
				text-decoration: underline;
				text-underline-offset: 0.3rem;
				text-decoration-thickness: 1px;
			}
		}
	}

}

.slider {
	display: grid;
	gap: 1rem;
	margin: 2.5rem 0;

	.slider-figure {
		margin: 0;

		img {
			width: 100%;
			max-height: 70vh;
			object-fit: cover;
		}
	}

	figcaption {
		margin-top: 0.45rem;
		font-size: 0.72rem;
		line-height: 1.35;
	}
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 3.6rem;
}

.content-children,
.related-pages {
display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

.fibonacci-carre .content .block-50 .heading-crea {
	margin: 0.75rem 0 0.35rem;
	font-size: 1rem;
	line-height: 1.1;
}

.block-50 {
	width: 100%;
	max-width: none;
	transition: transform var(--ease);
	font-weight: 300;

	&:hover {
		transform: scale(1.018);
		font-weight: 300;
	}

	p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		font-size: 0.82rem !important;
		font-weight: 300;
		line-height: 1.42 !important;
		margin: 0 0 0.5rem !important;
	}
}

.fibonacci-carre .content__img,
.fibonacci-carre .block-50 img {
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin-top: 0;
	margin-bottom: 0;
}

.lombaers-carousel {
	--carousel-height: clamp(18rem, 42vh, 28rem);
	position: relative;
	width: calc(100% + var(--content-x, 0px));
	margin: 1.5rem 0;
	/*overflow: hidden;*/
}

.lombaers-carousel__viewport {
	overflow: hidden;
	width: 100%;
}

.lombaers-carousel__container {
	display: flex;
	gap: 1rem;
	align-items: stretch;
}

.lombaers-carousel__slide {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	position: relative;
}

.lombaers-carousel__image {
	display: block;
	width: auto;
	max-width: none;
	height: var(--carousel-height);
	object-fit: cover;
}

.lombaers-carousel__caption {
	margin-top: 0.45rem;
	font-size: 0.72rem;
	line-height: 1.35;
}

.lombaers-carousel__controls {
    position: relative;
    left: 0;
    margin-top: 1rem;
    display: flex;
    gap: 0.35rem;
    z-index: 2;
}

.lombaers-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--primary);
	color: var(--bg);
	font: inherit;
	font-weight: 200;
	line-height: 1;
	cursor: pointer;
}

.lombaers-carousel__button:disabled {
	opacity: 0.35;
	cursor: default;
}

.btm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 4rem;
	padding-top: 2rem;
	font-family: var(--font);
	font-size: 0.65rem;
	line-height: 1.3;
	text-transform: uppercase;
}

.btm__legal {
	flex: 1 1 auto;
}

.btm__socials {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;

	a {
		display: inline-flex;
		color: var(--primary);
		text-decoration: none;
	}

	svg {
		display: block;
		width: 1.2rem;
		height: 1.2rem;
		fill: currentColor;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(0.4rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 991px) {
	body {
		padding: 0;
	}

	.fibonacci-carre {
		width: 100vw;
		min-height: 100vh;
		height: auto;
		grid-template-columns: 1fr 5rem;
		grid-template-rows: 5rem 40vh auto;
		border: 0;

		._5x3 {
			grid-area: 1 / 1 / 2 / 2;
			border: 0;
			padding: 0.8rem 1rem;
		}

		._5x5 {
			display: none;
		}

		._8x8 {
			grid-area: 1 / 2 / 2 / 3;
			border: 0;
			justify-content: flex-end;
			padding-right: 5vw;

			> .comp {
				display: none;
			}

			.menu-icon {
				z-index: 6;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                position: fixed;
                right: unset;
                top: unset;
                width: auto;
                color: var(--primary);
                font-family: var(--font);
                font-size: 0.65rem;
                font-weight: 700;
                line-height: 1;
                text-transform: uppercase;

				.menu-icon__label {
					display: inline-block;
				}

				.comp {
					display: block;
					fill: var(--primary);
					width: 2rem;
					height: 2rem;

					&.clicked {
						fill: var(--bg);
					}
				}

				&:has(.clicked) {
					color: var(--bg);
				}
			}
		}

		.nav-mobile {
			z-index: 3;
			text-align: center;
			background-color: var(--primary);
			color: var(--bg);
			flex-direction: column;
			justify-content: center;
			padding: 20vh 1rem;
			display: none;
			position: fixed;
			inset: 0;
		}

		.nav-mobile.open {
			display: flex;
		}

		.nav-mobile__link {
			color: var(--bg);
			text-transform: uppercase;
			margin-top: 1rem;
			margin-bottom: 1rem;
			font-family: var(--font);
			font-size: 1rem;
			font-weight: 300;
			line-height: 1;
			display: block;
		}

		.nav-mobile__group + .nav-mobile__group {
			margin-top: 1.5rem;
		}

		.nav-mobile__link.current-menu-item,
		.nav-mobile__link.current-menu-ancestor,
		.nav-mobile__link.current_page_item,
		.nav-mobile__link.current_page_ancestor {
			font-weight: 700;
		}

		._13x13 {
			grid-area: 2 / 1 / 3 / 3;
			border: 0;
			border-top: var(--line);
			border-bottom: var(--line);

			.pic-wrapper,
			img {
				min-height: 40vh;
			}
		}

		._21x8 {
			grid-area: 3 / 1 / 4 / 3;
			border: 0;
			padding: 0;

			.top-square {
				display: none;
			}

			.nav2 {
				display: none;
			}

			.hero {
				position: relative;
				top: auto;
				height: auto;
				margin: 0 -1rem 2rem;
				padding: 2rem 1rem;
				justify-content: center;

				h1 {
					max-width: none;
					margin: 0;
					font-size: 1.2rem;
					text-align: center;
				}
			}

			.content p,
			.content li {
				font-size: 1rem;
			}

			.content {
				--content-x: 1rem;
				padding: 0 1rem 5rem;
				margin: 0 auto;
				text-align: left;
			}

			.btm {
				flex-direction: column;
				justify-content: center;
				text-align: center;
				margin-top: 3rem;
			}
		}

	}

	.block-50 {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.flex,
	.content-children,
	.related-pages {
		justify-content: center;
		grid-template-columns: 1fr;
		text-align: center;
	}

	.fibonacci-carre .content__img,
	.fibonacci-carre .block-50 img {
		margin-left: auto;
		margin-right: auto;
	}
}