/*
Theme Name: MaisonFM
*/

html,
body {
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: var(
		--main-black
	); /* Fallback background color if image doesn't load */

	font-family: var(--font-playfair);
	font-weight: var(--font-weight-normal);
}

:root {
	/* Font family variable to use throughout the site */
	--font-playfair: "Playfair Display", serif;
	--font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Helvetica, Arial, sans-serif;

	/* Font weight variables for convenience */
	--font-weight-normal: 400; /* Regular weight */
	--font-weight-medium: 500; /* Medium weight */
	--font-weight-semibold: 600; /* Semi-bold */
	--font-weight-bold: 700; /* Bold weight */

	/* Menu sizing variables */
	--navbar-max-width: 60rem; /* Max width of menu container (~1120px) */
	--navbar-height: 5rem; /* Height of menu links (~80px) */
	--navbar-link-height-sm: 3rem; /* Height of menu links (~80px) */
	--logo-height: 2rem; /* Standard logo height (~48px) */
	--link-font-size: 1.25rem; /* Base font size for links */
	--link-letter-spacing: 0.075em; /* Slight spacing for text */

	--main-cream: hsl(31, 25%, 72%);
	--main-brown: hsl(26, 36%, 27%);
	--main-gray: hsl(266, 6%, 25%);
	--main-black: hsl(0, 0%, 1%);
}

/* Variable font: normal style */
@font-face {
	font-family: "Playfair Display"; /* Name to use in CSS */
	src: url("./fonts/playfair-display/PlayfairDisplay-VariableFont_wght.ttf")
		format("truetype"); /* Path to font file */
	font-weight: 100 900; /* Supports full weight range */
	font-style: normal; /* Normal style */
	font-display: swap; /* Show fallback until font loads */
}

/* Variable font: italic style */
@font-face {
	font-family: "Playfair Display";
	src: url("./fonts/playfair-display/PlayfairDisplay-Italic-VariableFont_wght.ttf")
		format("truetype");
	font-weight: 100 900; /* Full weight range */
	font-style: italic; /* Italic style */
	font-display: swap;
}

/* Optional static fallback font: Regular */
@font-face {
	font-family: "Playfair Display";
	src: url("./fonts/playfair-display/PlayfairDisplay-Regular.ttf")
		format("truetype");
	font-weight: 400; /* Regular weight */
	font-style: normal;
	font-display: swap;
}

/* Optional static fallback font: Bold */
@font-face {
	font-family: "Playfair Display";
	src: url("./fonts/playfair-display/PlayfairDisplay-Bold.ttf")
		format("truetype");
	font-weight: 700; /* Bold weight */
	font-style: normal;
	font-display: swap;
}

button,
a {
	font-family: var(--font-playfair);
	&:has(svg) {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
	}
	&.btn-outline {
		background-color: transparent;
		outline: none;
		border-radius: 0;
		border: 1px solid var(--main-cream);
		color: white;
		font-size: var(--link-font-size);
		letter-spacing: var(--link-letter-spacing);
		padding: 0.75rem 0.9rem;
		cursor: pointer;

		white-space: nowrap;

		&:hover {
			background-color: var(--main-cream);
			color: var(--main-black);
		}
	}
}

a {
	text-decoration: none;
}

.navbar {
	position: sticky;
	top: 0;
	align-self: stretch;
	/*width: 100%;  Full width */
	box-sizing: content-box;
	background-color: var(--main-black);

	grid-template-columns: auto 1fr auto;
	align-items: center;

	z-index: 50;
	gap: 1rem;
	padding-left: 2rem;
	padding-right: 2rem;

	ul.navbar-list {
		justify-self: center;

		width: 100%;
		list-style-type: none; /* Remove bullets */

		display: grid;
		/* grid-auto-flow: column;
		grid-auto-columns: 1fr; */
		align-items: center;
		justify-content: center;

		max-width: var(--navbar-max-width); /* Use variable for max width */
		box-sizing: content-box;
		padding: 0 1.5rem; /* Responsive padding */

		li.nav-item {
			flex: 1; /* Equal width for all items */
			text-align: center; /* Center text */

			a {
				display: inline-flex; /* Make link a flex container */
				align-items: center; /* Vertically center */
				justify-content: center; /* Horizontally center */
				height: var(--navbar-height); /* Height from variable */
				text-decoration: none; /* Remove underline */
				color: white; /* Default color */
				font-weight: var(--font-weight-normal); /* Medium weight */
				font-size: var(--link-font-size); /* Font size variable */
				letter-spacing: var(
					--link-letter-spacing
				); /* Spacing variable */

				white-space: nowrap;

				&:hover {
					color: var(--main-cream);
				}

				img {
					max-height: 3rem; /* Standard image height (~48px) */
					width: auto; /* Maintain aspect ratio */
					display: block; /* Remove bottom whitespace */

					filter: invert(
						1
					); /*TODO: remove once Fiona send me the svg*/
				}
			}

			&.nav-logo {
				grid-row: 1;
				flex: 1.5; /* Slightly larger than other items */

				a img {
					max-height: var(
						--logo-height
					); /* Logo bigger than normal links */
				}
			}

			&:not(.nav-logo) {
				display: none;
			}
		}
		grid-template-columns: 1fr;
	}

	button,
	a {
		display: none;
		font-size: var(--link-font-size);
		letter-spacing: var(--link-letter-spacing);
		&:has(svg) {
			svg {
				display: block;
			}
			span {
				display: none;
			}
		}
	}

	display: none;
}

.navbar-mobile {
	display: block;
	width: 100%;

	position: sticky;
	top: 0;

	z-index: 1000;
	background-color: var(--main-black);

	.mobile-navbar-action,
	.mobile-logo {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		padding: 0;
		box-sizing: border-box;
	}
	.mobile-contact {
		justify-content: flex-start;
		button,
		a {
			width: 3rem;
			height: 3rem;
			padding: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
	.menu-toggle-container {
		justify-content: end;

		label.menu-toggle {
			background-color: transparent;
			outline: none;
			border-radius: 0;
			border: 1px solid var(--main-cream);
			color: white;
			font-size: var(--link-font-size);
			letter-spacing: var(--link-letter-spacing);

			cursor: pointer;

			width: 3rem;
			height: 3rem;
			padding: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			input {
				display: none;
			}

			.close {
				display: none;
			}

			&:has(input:checked) {
				.open {
					display: none;
				}
				.close {
					display: unset;
				}
			}
		}
	}

	.navbar-header {
		display: grid;
		align-items: center;
		padding: 1rem;

		img {
			max-height: 3.5rem; /* Standard image height (~48px) */
			width: auto; /* Maintain aspect ratio */
			display: block; /* Remove bottom whitespace */

			filter: invert(1); /*TODO: remove once Fiona send me the svg*/
		}

		grid-template-columns: 1fr auto 1fr;
	}

	&:not(:has(input#menu-state:checked)) {
		.mobile-menu {
			display: none;
		}
	}

	.mobile-menu {
		padding: 0 1rem 1rem 1rem;

		.mobile-menu-list {
			margin-top: 0;
			padding: 0 1.75rem;
			li {
				a {
					width: 100%;
					display: inline-flex; /* Make link a flex container */
					align-items: center; /* Vertically center */
					/* justify-content: center; Horizontally center */
					height: var(
						--navbar-link-height-sm
					); /* Height from variable */
					text-decoration: none; /* Remove underline */
					color: white; /* Default color */
					font-weight: var(--font-weight-normal); /* Medium weight */
					font-size: var(--link-font-size); /* Font size variable */
					letter-spacing: var(
						--link-letter-spacing
					); /* Spacing variable */

					white-space: nowrap;
					/* text-align: left; */
					&:hover {
						color: var(--main-cream);
					}
				}

				&.menu-logo {
					display: none;
				}
			}
		}
		.mobile-reserve {
			text-align: center;
			display: block;
			width: 100%;
			height: 3.5rem;
			box-sizing: border-box;
		}
	}
}

.banner {
	align-self: stretch;
	position: relative; /* Needed for overlay positioning */
	min-height: 70vh; /* Minimum height relative to viewport height */
	background-color: var(
		--main-black
	); /* Fallback background color if image doesn't load */
	background-size: cover; /* Make background image cover entire container */
	/* background-position: center; Center the background image */
	background-position: center 20%;
	background-repeat: no-repeat; /* Prevent background from repeating */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* Overlay to darken only the background image */
	&::before {
		content: ""; /* Required for pseudo-element */
		position: absolute; /* Position over the banner */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: rgba(0, 0, 0, 0.5); Black overlay at 50% opacity
		*/
		z-index: 1; /* Behind text */
	}

	.content {
		max-width: var(--navbar-max-width);
		margin: 0 auto;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		h1 {
			position: relative; /* Make sure it's above overlay */
			z-index: 2;
			color: white; /* Text color */
			font-weight: var(--font-weight-normal);
		}
	}
}

.tarif-section {
	margin-top: 5rem;
	max-width: calc(var(--navbar-max-width) * 1.2);
	padding-left: 2rem;
	padding-right: 2rem;
	.container {
		/* display: grid;
		grid-template-columns: repeat(5, 1fr); */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		gap: 4rem;

		margin-bottom: 8rem;

		.image {
			/* grid-column: span 2; */
			flex-grow: 1;
			flex-shrink: 2;
			flex-basis: 40%;
			max-height: 50vh;
			overflow: hidden;
			border-top-left-radius: 20%;
			border-bottom-right-radius: 20%;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.tarifs-list {
			/* grid-column: span 3; */
			flex-basis: 60%;
			flex-grow: 1;
			flex-shrink: 1;
			color: white;
			h2 {
				font-size: 2rem;

				font-weight: normal;
				text-transform: uppercase;
				letter-spacing: 0.25rem;
				margin: 0;
				/* font-style: italic; */
			}
			ul {
				list-style: none;
				padding: 0;
				margin: 2rem 0 0 0;

				li {
					.service-row {
						display: flex;
						flex-direction: row;
						align-items: center;
						column-gap: 1rem;
						margin-bottom: 0.5rem;
						.title {
							font-size: 1.3rem;
							line-height: 1.3rem;
							margin: 0;
							letter-spacing: 0.125rem;
							font-style: italic;
						}

						.separator {
							flex-grow: 3;
							border-top: 1px dashed white;
							margin-top: 0.25rem;
						}
					}

					.service-description {
						font-family: var(--font-body);
						font-size: 0.85rem;
						letter-spacing: 0.09rem;
						/* font-style: italic; */
						text-align: justify;
					}
					margin-bottom: 1.5rem;

					.price {
						font-size: 1.25rem;
						line-height: 1.25rem;
					}
				}
			}
		}

		&:nth-child(even) {
			flex-wrap: wrap-reverse;
		}
	}
}

.rdv-section {
	background-color: var(--main-gray);
	align-self: stretch;
	background-image: url("https://images.unsplash.com/photo-1596728325488-58c87691e9af?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

	background-size: cover; /* Make background image cover entire container */
	background-position: center; /* Center the background image */
	background-repeat: no-repeat; /* Prevent background from repeating */

	position: relative; /* Needed for overlay positioning */
	/* Overlay to darken only the background image */
	&::before {
		content: ""; /* Required for pseudo-element */
		position: absolute; /* Position over the banner */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6); /* Black overlay at 50% opacity */
		z-index: 1; /* Behind text */
	}

	display: flex;
	flex-direction: row;
	align-items: center;

	.container {
		position: relative;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.9);
		box-sizing: border-box;
		border: 2px solid var(--main-cream);
		margin: 10rem auto;
		padding: 3rem 3rem;

		max-width: var(--navbar-max-width);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 3rem;

		.text {
			color: white;
			h2 {
				font-size: 2rem;
				font-weight: normal;
				text-transform: uppercase;
				letter-spacing: 0.25rem;
				margin: 0;
				margin-bottom: 1rem;
			}
			p {
				font-size: 1rem;
				font-weight: normal;
				letter-spacing: 0.125rem;
				margin: 0;
			}
		}

		.cta {
			flex-grow: 2;
			display: flex;
			justify-content: center;
			/* padding-left: 3rem; */
			a {
				width: 100%;
				text-align: center;
			}
		}
	}
}

.testimonials {
	align-self: stretch;
	background-color: var(--main-black);
	min-height: 25vh;

	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 5rem 0;
	gap: 3rem;

	.title {
		color: white;
		text-align: center;

		h2 {
			font-size: 2rem;

			font-weight: normal;
			text-transform: uppercase;
			letter-spacing: 0.25rem;
			margin: 0;

			margin-bottom: 1rem;
		}

		p {
			font-size: 1rem;
			font-weight: normal;
			letter-spacing: 0.125rem;
			margin: 0;
		}
	}

	.testimonial-grid {
		display: grid;
		grid-template-columns: 1fr;
		/* grid-auto-rows: 27rem; */

		/* row-gap: 20px; */
		column-gap: 1.5rem;
		row-gap: 1.5rem;

		> div {
			background: rgba(255, 255, 255, 0.95);
			padding: 1rem 1rem 1rem 1rem;

			.img {
				width: 100%;
				height: calc(20rem - 1rem);
				overflow: hidden;

				img {
					width: 100%;
				}
			}

			.footer {
				padding-top: 0.75rem;

				.stars {
					padding-left: 0.3rem;
				}

				p {
					margin: 0;

					&.testimonial-title {
						padding-top: 0.3rem;
						font-style: italic;
						font-size: 1.25rem;
						letter-spacing: 0.05rem;
						padding-left: 0.3rem;
					}
					&.testimonial-text {
						padding-top: 0.25rem;
						padding-left: 0.3rem;
					}

					&.testimonial-author {
						padding-top: 0.5rem;
						padding-left: 0.3rem;
					}
				}
			}
		}
	}
}

.access-contact-section {
	align-self: stretch;

	min-height: 25vh;
	/* background-color: white; */
	background-image: url("./assets/images/map.webp");

	background-size: cover; /* Make background image cover entire container */
	background-position: center; /* Center the background image */
	background-repeat: no-repeat; /* Prevent background from repeating */

	position: relative; /* Needed for overlay positioning */

	/* Overlay to darken only the background image */
	&::before {
		content: ""; /* Required for pseudo-element */
		position: absolute; /* Position over the banner */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6); /* Black overlay at 50% opacity */
		z-index: 1; /* Behind text */
	}

	display: flex;
	flex-direction: row;
	align-items: center;

	.container {
		box-sizing: border-box;
		border: 2px solid var(--main-cream);

		margin: 10rem auto;
		padding: 3rem 3rem;

		max-width: 40rem;

		background-color: rgba(0, 0, 0, 0.9);

		display: flex;
		flex-direction: column;
		justify-content: stretch;
		gap: 1rem;

		position: relative;
		z-index: 10;

		color: white;

		h2 {
			font-size: 2rem;
			font-weight: normal;
			text-transform: uppercase;
			letter-spacing: 0.25rem;
			margin: 0;
			margin-bottom: 0.25rem;
		}

		h3 {
			font-size: 1.25rem;
			font-weight: normal;

			letter-spacing: 0.175rem;

			margin: 0;
			margin-bottom: 0.25rem;
		}
		p,
		a {
			line-height: 1.5rem;
			/* margin: 0.25rem 0; */
			margin: 0;
			font-family: var(--font-body);
			letter-spacing: 0.1rem;
			color: white;
			text-transform: none;
		}

		.informations {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 1rem;
			div {
				flex-basis: 50%;
				flex-grow: 1;
				flex-shrink: 1;
			}
		}

		.actions {
			margin-top: 0.5rem;
			display: flex;
			button {
				font-size: 1rem;
				/* font-size: var(--link-font-size); */
				/* letter-spacing: var(--link-letter-spacing); */
			}
			a {
				width: 100%;
				text-align: center;
			}
		}
	}
}

.stars {
	display: flex;
	gap: 0.3rem;

	.star {
		width: 1rem;
		aspect-ratio: 1;
		background: var(--main-black);
		clip-path: polygon(
			50% 0%,
			61% 35%,
			98% 35%,
			68% 57%,
			79% 91%,
			50% 70%,
			21% 91%,
			32% 57%,
			2% 35%,
			39% 35%
		);
	}
}

footer {
	color: white;
	padding: 2rem;
	display: flex;
	direction: row;
	align-items: center;
}
/* Base = mobile */
@media (max-width: 767px) {
	.banner {
		display: none;
	}
	section.tarif-section {
		margin-top: 0;
		padding-left: 0;
		padding-right: 0;

		.tarifs-list {
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}

	section,
	section.testimonials {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.rdv-section,
	.access-contact-section {
		.container {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}
}

/* Base = mobile */
@media (min-width: 768px) {
	/* Tablet */

	.testimonials {
		.testimonial-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(10rem, 25rem));
		}
	}
}

@media (min-width: 1024px) {
	/* Desktop */
	.navbar-mobile {
		display: none;
	}
	.navbar {
		display: grid;
		& ul.navbar-list {
			grid-auto-flow: column;
			grid-auto-columns: 1fr;
			& li.nav-item {
				&:not(.nav-logo) {
					display: inline-block;
				}
			}
		}

		button,
		a {
			display: flex;
		}
		label {
			display: none;
		}
	}
}

@media (min-width: 1440px) {
	/* Large Desktop */
	:root {
		--logo-height: 3rem;
	}
	.navbar {
		column-gap: 3rem;
		padding: 0 2rem;
		button,
		a {
			&:has(svg) {
				svg {
					display: none;
				}
				span {
					display: block;
				}
			}
		}
	}

	.tarif-section {
		.container {
			flex-wrap: nowrap;

			.image {
				max-height: unset;
			}
			&:nth-child(even) {
				flex-wrap: nowrap;
			}
		}
	}

	.testimonials {
		gap: 3rem;
		.testimonial-grid {
			grid-template-columns: repeat(3, 25rem);
			column-gap: 3rem;

			> div:nth-child(4) {
				display: none;
			}
		}
	}
}