/**
 * Custom styles to immediately follow Tailwind’s `base` layer
 */

/**
 * This uses the background and foreground colors declared in the `theme.json`
 * file and is applied both to the front end and in the block editor.
 */
body {
	@apply bg-background font-sans;
}

footer {
	@apply bg-secondary w-full text-white;

	.footer-menu {
		@apply mb-4 flex flex-col gap-4 md:flex-row md:justify-center md:gap-8;

		li {
			@apply md:not-first:before:text-primary md:flex md:not-first:before:pr-5 md:not-first:before:content-["|"];

			a {
				@apply md:hover:text-primary block rounded-sm px-3 py-2 text-white hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent;
			}
		}
	}
}

#header-menu {
	@apply flex flex-col rounded-lg border-0 p-4 font-medium lg:flex-row lg:space-x-5 lg:p-0 rtl:space-x-reverse;
}

#masthead {
	@apply relative;
	height: 75vh;
}
#nav-container {
	@apply w-full py-16;
	#site-navigation {
		@apply container mx-auto flex flex-row items-center justify-between rounded-4xl bg-white p-0;
		#menu {
			@apply bg-secondary font-barlow flex w-3/4 justify-end rounded-4xl px-12 py-6 text-2xl font-bold text-white;

			a {
				@apply md:hover:text-primary block rounded-sm px-3 py-2 text-white hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent;
			}
		}
		#logo {
			@apply mx-12 my-4;
		}
	}
}

#slide {
	background: url("assets/img/bg-slider.jpg") no-repeat center top;
	z-index: -1;
	@apply absolute top-0 w-full bg-cover;
	height: 75vh;
}
#text-slide {
	@apply font-montserrat z-10 mt-32 flex flex-col items-center justify-center text-center text-7xl font-bold text-white;
}