/* Keyframes */
@keyframes leftInfiniteScrollEffect {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Reset */
/* The theme.json already does a big part of the resets, look there first. */

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

* {
	font: inherit;
	margin: 0;
	padding: 0;
}

html {
	hanging-punctuation: first last;
	scroll-behavior: smooth;
	interpolate-size: allow-keywords;
}

* + :is(p, ul, ol, h1, h2, h3, h4, h5, h6) {
	margin-block-start: 1em;
}

strong {
	font-weight: 700;
}

td,
th {
	vertical-align: top;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

figure,
video {
	display: block;
}

a {
	text-decoration: none;
	transition: color 0.25s ease;
}

button {
	line-height: 1.1;
	cursor: pointer;
	color: inherit;
	border: none;
	background: none;
}

p {
	text-wrap: pretty;
}

q {
	quotes: "«" "»" "‹" "›";
}

ol,
ul {
	padding-inline-start: var(--wp--preset--spacing--s);

	li + li {
		margin-block-start: var(--wp--preset--spacing--m);
	}
}

ol > li::marker {
	font-size: 1.2em;
}

main:has(.overflow-side) {
	overflow-x: clip;
}

/* Link Debug */
/* a:is([href=""], [href="#"], :not[href]) {
    outline: pink dashed 2px;
} */

/* Header */
.main-header {
	--logo-width-small: 112px;

	padding-block: var(--wp--preset--spacing--l);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	background-color: var(--wp--preset--color--forest);

	position: sticky;
	inset-inline: 0;
	inset-block-start: var(--wp-admin--admin-bar--height, 0);
	z-index: 2;

	.logo img {
		border-radius: 0;

		@media (width <= 70em) {
			width: var(--logo-width-small);
		}
	}

	li {
		margin-block-start: 0;
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: color 0.25s ease;
		cursor: pointer;

		&:hover {
			color: var(--wp--preset--color--ocean);
		}
	}
}

.home .main-header {
	background-color: transparent;
	position: fixed;
}

.home .headroom--not-top {
	background-color: var(--wp--preset--color--forest);
}

.headroom {
	transition:
		translate 0.5s ease,
		padding-block 0.5s ease,
		background-color 0.5s ease;

	.logo {
		& img {
			transition: width 0.5s ease;
		}
	}
}

.headroom--unpinned {
	translate: 0 -100%;
}

.headroom--not-top {
	padding-block: var(--wp--preset--spacing--s);

	.logo {
		animation: unset;
		& img {
			width: 175px;

			@media (width <= 70em) {
				width: var(--logo-width-small);
			}
		}
	}
}

.main-header__content {
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.navigations {
	background-color: var(--wp--preset--color--ciel);
	border-radius: 50rem;

	@media (width < 70em) {
		padding-block: var(--wp--preset--spacing--xl);
		padding-inline: var(--wp--preset--spacing--gutter);
		border-radius: 0;
		clip-path: inset(0 0 0 100%);
		font-size: var(--wp--preset--font-size--step-1);
		color: var(--wp--preset--color--blanc);
		overflow-y: auto;
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0) 0 0 0;
		z-index: 1;
		transition: clip-path 0.5s ease;

		.navigation-primary {
			flex-direction: column;
			align-items: flex-start;
		}

		&.active {
			clip-path: inset(0 0 0 0);
		}
	}
}

.navigation-primary {
	display: flex;
	align-items: center;
	padding: 0;
	list-style: none;

	& > .menu-item {
		position: relative;
	}

	& > .menu-item > a {
		display: block;
		padding-block: var(--wp--preset--spacing--s);
		padding-inline: var(--wp--preset--spacing--m);
	}

	& > .menu-item:first-child a {
		margin-inline-start: 0.9375em;

		@media (width < 70em) {
			margin-inline-start: 0;
		}
	}

	& > .menu-item:last-child a {
		margin-inline-end: 1em;

		@media (width < 70em) {
			margin-inline-end: 0;
		}
	}

	.sub-menu {
		display: none;
		list-style: none;
		flex-direction: column;
		margin: 0;
		padding: 0;
		position: absolute;
		inset-block-start: 100%;

		& > .menu-item {
			margin-block-start: var(--wp--preset--spacing--4-xs);
		}

		& > .menu-item > a {
			display: flex;
			padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
			border-radius: var(--wp--preset--border-radius--pill);
			line-height: 1.1;
			color: var(--wp--preset--color--black);
			background-color: var(--wp--preset--color--light);
		}

		& > .menu-item > a::after {
			content: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 20 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.191 10.722c-0.3636 0.349-0.9364 0.3398-1.2818-0.0183-0.3364-0.3581-0.3364-0.91822 0-1.2763l2.9909-3.0209h-15.991c-0.5 0-0.90909-0.41319-0.90909-0.9182s0.40909-0.91819 0.90909-0.91819h15.991l-2.9909-3.0209c-0.3455-0.36728-0.3364-0.94574 0.0182-1.2947 0.3545-0.33973 0.9091-0.33973 1.2636 0l4.5455 4.591c0.3545 0.35809 0.3545 0.93656 0 1.2946l-4.5455 4.591v-0.0092z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E");
			display: inline-block;
			width: 1.5em;
			height: 0.6875em;
			vertical-align: top;
			margin-inline-start: auto;
			padding-inline-start: 0.5em;
		}

		& > .menu-item > a:hover {
			color: var(--wp--preset--color--ocean);
			background-color: var(--wp--preset--color--grey-p);
		}
	}

	& > .menu-item:hover .sub-menu {
		display: flex;
	}

	@media (width < 70em) {
		.menu-item-has-children > a::after {
			content: "↓";
			display: inline-block;
			width: 1em;
			height: 1em;
			margin-inline-start: 1ch;
		}

		.sub-menu {
			display: block;
			margin-inline-start: 2ch;
			position: static;
			font-size: 0.95em;
			height: 0;
			overflow: hidden;
			transition: height 0.5s ease;
		}

		.sub-menu > .menu-item > a {
			background-color: initial;
			padding-block: var(--wp--preset--spacing--2-xs);
		}

		.sub-menu > .menu-item > a:hover {
			background-color: initial;
		}

		.sub-menu > .menu-item > a::after {
			content: none;
		}

		.sub-menu.active {
			height: auto;
		}

		.menu-item-has-children:has(.sub-menu.active) > a::after {
			content: "↑";
		}
	}
}

.menu-button {
	padding: 0;
	background-color: transparent;
	position: relative;
	z-index: 10;

	svg {
		vertical-align: bottom;
	}

	.menu-button-open,
	.menu-button-close {
		transition: opacity 0.25s ease;
	}

	.menu-button-open {
		opacity: 1;
		fill: var(--wp--preset--color--light);
	}
	.menu-button-close {
		opacity: 0;
	}

	&[aria-expanded="true"] {
		.menu-button-open {
			opacity: 0;
		}
		.menu-button-close {
			opacity: 1;
		}
	}

	@media (width >= 70em) {
		display: none;
	}
}

.menu-button-open,
.menu-button-close {
	transition: opacity 0.5s ease;
}

.menu-button-close {
	opacity: 0;
}

/* Footer */

.footer__copyright {
	padding-block: var(--wp--preset--spacing--s);
	a {
		color: inherit;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	svg {
		margin-inline-end: 1em;
		vertical-align: middle;
	}

	.footer__reactif {
		color: var(--wp--custom--reactif-colors--blue);

		&:hover {
			text-decoration: underline;
		}
	}
}

/* Blocks*/
.hero {
	isolation: isolate;
}

.hero__image-bg::before {
	content: "";
	display: block;
	position: absolute;
	background-image: linear-gradient(180deg, rgba(73, 82, 40, 0), rgba(37, 41, 20, 0.35) 35%, rgba(0, 0, 0, 0.75) 75%);
	opacity: 0.5;
	inset: 0;
	z-index: 1;
}

/* Gravity Forms */

.gform_wrapper {
	--form-grid-gap-x: var(--wp--preset--spacing--s);

	container-type: inline-size;
	container-name: gform-container;

	max-width: 930px;
	margin-inline: auto;
	border: solid 2px var(--wp--preset--color--forest);
	border-radius: var(--wp--preset--border-radius--50);
	padding: var(--wp--preset--border-radius--50);

	font-size: var(--wp--preset--font-size--step-1);
	font-weight: 600;

	fieldset {
		border: none;
		margin: 0;
		padding: 0;
	}

	textarea {
		box-sizing: content-box;
		width: stretch;
		width: -webkit-fill-available;
		width: -moz-available;
		resize: vertical;
		padding: var(--radius-default);

		&.small {
			height: 2lh;
		}

		&.medium {
			height: 4lh;
		}

		&.large {
			height: 8lh;
		}
	}

	input[type="file"] {
		width: fit-content;
		margin-block-start: calc(var(--form-grid-gap-x) / 2);
		padding: 0;
		border: none;
		border-radius: 0;
		background-color: transparent;
		cursor: pointer;
	}

	input[type="file"]::file-selector-button {
		padding-block: var(--wp--preset--spacing--2-xs);
		padding-inline: var(--wp--preset--spacing--s);
		border: var(--wp--preset--color--beige) 1px solid;
		border-radius: var(--wp--preset--border-radius--50);
		/* font-size: var(--wp--preset--font-size--step-minus-1); */
		font-family: inherit;
		color: var(--wp--preset--color--beige);
		background-color: transparent;
		cursor: pointer;
	}

	.gform_heading {
		margin-bottom: 1em;
	}

	.gform_submission_error {
		margin-block-end: 1em;
		font-size: var(--wp--preset--font-size--step-1);
		color: var(--wp--preset--color--vivid-red);
	}

	.gfield_validation_message,
	.gfield_required_asterisk {
		color: var(--wp--preset--color--vivid-red);
	}

	.gform_fields {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--form-grid-gap-x);
	}

	.gfield {
		grid-column: span 12;
		position: relative;
	}

	.hidden_label label {
		display: none;
	}

	.gfield_description {
		font-size: var(--wp--preset--font-size--step-minus-2);
		margin-top: 0.5em;
	}

	.gf_clear {
		display: none;
	}

	.ginput_container {
		margin-block-start: var(--wp--preset--spacing--xs);
	}

	:where(.ginput_container, .gfield--type-wordcaptcha) {
		:where(input, textarea, select) {
			--radius-default: var(--wp--preset--border-radius--50);

			width: 100%;
			padding: 0.6em max(var(--gf-radius), calc(var(--radius-default) * 0.5));
			border-radius: max(var(--gf-radius), var(--radius-default));
			background-color: var(--gf-color-in-ctrl);
			border-color: var(--gf-ctrl-border-color);
			border-style: solid;
			border-width: 1px;
			color: var(--gf-color-secondary-contrast);
		}

		:user-invalid {
			border-color: var(--wp--preset--color--vivid-red);
			color: var(--wp--preset--color--vivid-red);
		}

		::-webkit-input-placeholder {
			color: hsl(from var(--wp--preset--color--beige) h s l / 0.5);
		}
	}

	.ginput_container--name,
	.ginput_container_address {
		display: grid;
		column-gap: var(--form-grid-gap-x);
		row-gap: var(--form-grid-gap-y, var(--form-grid-gap-x));
	}

	.ginput_container_address .ginput_full {
		grid-column: 1 / -1;
	}

	select {
		appearance: none;
		max-width: revert;
		background: var(--gf-color-in-ctrl)
			url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB3aWR0aD0nMC45ZW0nIGhlaWdodD0nMS4xZW0nIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE4IDIyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPHBhdGggZD0ibTAuMjc4ODYgMTMuNzEyYy0wLjM4LTAuNDAwMS0wLjM3LTEuMDMwMiAwLjAyLTEuNDEwMiAwLjM5LTAuMzcwMSAxLTAuMzcwMSAxLjM5IDBsNi4yOSA2LjI5MDl2LTE3LjU5MmMwLTAuNTUwMDggMC40NS0xLjAwMDEgMS0xLjAwMDFzMSAwLjQ1MDA2IDEgMS4wMDAxdjE3LjU5Mmw2LjI5LTYuMjkwOWMwLjQtMC4zODAxIDEuMDMtMC4zNzAxIDEuNDEgMC4wMiAwLjM3IDAuMzkgMC4zNyAxLjAwMDEgMCAxLjM5MDJsLTggOC4wMDExYy0wLjA5IDAuMDktMC4yIDAuMTctMC4zMiAwLjIyLTAuMjQgMC4xLTAuNTIgMC4xLTAuNzYgMC0wLjEyLTAuMDUtMC4yMy0wLjEyLTAuMzItMC4yMmwtOC04LjAwMTF6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=")
			no-repeat right 1em center;
	}

	option {
		color: var(--wp--preset--color--noir);
	}

	.gfield-choice-input {
		width: 1em;
		height: 1em;
		margin-inline-end: 0.5ch;
		vertical-align: middle;
		accent-color: var(--wp--preset--color--sante);
	}

	.gform_fileupload_rules {
		display: block;
		font-size: var(--wp--preset--font-size--step-minus-1);
	}

	.anti-spam .gfield_label {
		position: static;
	}

	.gform_footer {
		margin-top: 2em;
	}

	.gform_button {
		display: block;
		margin-inline: auto;
	}

	@container gform-container (min-width: 32rem) {
		.gfield.gfield--width-half {
			grid-column: span 6;
		}

		.gfield--width-third {
			grid-column: span 4;
		}

		.gfield--width-two-thirds {
			grid-column: span 8;
		}

		/* .ginput_container--name,
		.ginput_container_address {
			grid-template-columns: repeat(2, 1fr);
		} */
	}

	@media (width <= 600px) {
		border: none;
		padding: 0;
	}
}

/* Logements */

.button--card::before {
	content: "";
}