/* Custom Fonts

	font-family: "Inter", sans-serif;
	font-family: "Bodoni Moda", serif;

end Custom Fonts */

:root {
	--ff-inter: "Inter", sans-serif;
	--ff-bodoni: "Bodoni Moda", serif;

	--color-primary: hsl(0, 0%, 20%);
	--color-border: #e8e8e8;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-wrap: normal !important;
}

html * {
    margin: 0;
    padding: 0;
}

html {
	scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ht-header, 3rem) + 2rem);
}

html:focus-within {
    scroll-behavior: smooth;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

body {
	font-family: var(--ff-inter);
}

#headwrapper {
	--logo-width: 15.625rem;
	position: fixed;
    width: 100%;
    z-index: 9;
	display: grid;
	grid-template-columns: var(--logo-width) 1fr;
	align-items: center;
	padding-inline: 1rem;

	.logo-content {
		max-width: var(--logo-width);
		padding-block: 1rem;

		.logo-img {
			max-width: 100%;
			height: auto;
		}
	}

	.burger-wrapper {
		--line-ht: 3px;
		--space: 6px;
	}

	.main-menu-content {
		display: grid;
		gap: 2rem;

		.main-menu {
			display: grid;
			gap: 1rem;
			justify-content: flex-end;
			list-style-type: none;

			a {
				font-weight: 700;
				font-size: clamp(1.125rem, 3vw, 1.25rem);
				color: hsl(0, 0%, 100%);
				text-decoration: none;

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

		.search {
			background: none;
			border: none;
		}
	}
}

.nav-min #headwrapper {
	background-color: hsla(0, 0%, 0%, 0.45);
}

.showMobileMenu #headwrapper .main-menu-content {
	visibility: visible;
	top: var(--ht-header);
}

@media (width < 65rem ) { /* 1040px */
	.main-menu-content {
		position: absolute;
        justify-self: right;
        visibility: hidden;
        top: -100dvh;
		padding: 2rem;
		background-color: hsla(0, 0%, 0%, 0.45);
	}
}

@media (width >= 65rem ) { /* 1040px */
	#headwrapper {
		--logo-width: 21.875rem;

		.burger-wrapper {
			display: none;
		}

		.main-menu-content {
			display: flex;
			justify-content: flex-end;

			.close-icon {
				display: none;
			}

			.main-menu {
				display: flex;
				gap: 2rem;
			}
		}
	}
}