@tailwind base;

@layer base {
	a:link, a:visited {
		@apply text-blue-400;
	}
	a:hover, a:active {
		@apply text-blue-600;
	}
}

@tailwind components;
@tailwind utilities;

.modals-wrapper {
	@apply hidden;
}

body {
	@apply bg-white dark:bg-gray-900;
}

.main-section-container {
	@apply container mx-auto;
}

.main-header {
	@apply 	z-30 w-full border-b shadow shadow-md dark:border-gray-700;
}
.main-header-container {
	@apply 	container flex flex-wrap items-center justify-between w-full px-4 lg:px-6 py-3 mx-auto mt-0 bg-white
			dark:bg-gray-900;
}

.content-padding {
	@apply px-6;
}

.contact-form {
	@apply container max-w-md px-6;
}
.contact-form label {
	@apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
}
.contact-form input[type=text], .contact-form input[type=number] {
	@apply 	bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500
			block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
			dark:focus:ring-blue-500 dark:focus:border-blue-500;
}
.contact-form textarea {
	@apply	block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500
			focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
			dark:focus:ring-blue-500 dark:focus:border-blue-500;
}
.contact-form select {
	@apply	bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500
			block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
			dark:focus:ring-blue-500 dark:focus:border-blue-500;
}
.contact-form .submit {
	@apply 	text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm
			px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
}

.page.messages .message div {
	@apply mx-auto container
}
.page.messages .message {
	@apply p-4 mb-4 text-sm rounded-lg;
}
.page.messages .success {
	@apply text-green-800 dark:text-green-400 bg-green-50 dark:bg-gray-800;
}
.page.messages .info {
	@apply text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400;
}
.page.messages .error {
	@apply text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400;
}
.page.messages .warning {
	@apply text-yellow-700 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300;
}

.product-hero {
	@apply bg-white dark:bg-gray-900;
}
.product-hero__container {
	@apply main-section-container;
}
.product-hero__inner-container {
	@apply grid px-6 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12;
}
.product-hero__content-one {
	@apply mr-auto place-self-center lg:col-span-10;
}
.product-hero__content-one h1 {
	@apply max-w-2xl mb-4 text-2xl font-extrabold tracking-tight leading-none md:text-3xl xl:text-4xl dark:text-white;
}
.product-hero__content-one h2 {
	@apply mt-6 mb-4 text-lg font-bold tracking-tight leading-none md:text-xl xl:text-2xl dark:text-white;
}
.product-hero__content-one p {
	@apply max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400;
}
.product-hero__content-one ol {
	@apply max-w-lg pl-4 space-y-1 text-gray-500 list-decimal list-inside dark:text-gray-400;
}

.product-hero__content-two {
	@apply hidden lg:mt-0 lg:col-span-2 lg:flex;
}
.product-hero__content-two svg {
	@apply fill-blue-400;
}

.product-hero.odd {
	@apply bg-gray-100 dark:bg-gray-800;
}
.product-hero.odd .product-hero__content-two svg {
	@apply fill-orange-400;
}

.product-hero__content-one .coming-soon {

}

.navigation-container {
	@apply hidden md:flex md:w-auto w-full mx-0 py-0 lg:py-4 z-20 order-2 lg:order-2;
}
.nav-open .navigation-container {
	@apply flex
}
.nav-toggle {
	@apply 	flex order-2 md:hidden flex-col h-12 w-12 border-2 border-gray-200 rounded justify-center items-center
			dark:border-gray-800;
}
.nav-toggle .hamburger-line {
	@apply block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out dark:bg-gray-300;
}
.nav-toggle .hamburger-line.line1 {
	@apply -translate-y-1.5;
}
.nav-open .nav-toggle .hamburger-line.line1 {
	@apply rotate-45;
	@apply -translate-y-0;
}
.nav-toggle .hamburger-line.line2 {

}
.nav-open .nav-toggle .hamburger-line.line2 {
	@apply opacity-0;
}
.nav-toggle .hamburger-line.line3 {
	@apply translate-y-1.5;
}
.nav-open .nav-toggle .hamburger-line.line3 {
	@apply -rotate-45;
	@apply translate-y-0;
}

.navigation .ui-menu .ui-menu-item {
	@apply 	block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0
			md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700
			dark:hover:text-white md:dark:hover:bg-transparent text-gray-900;
}
.navigation .ui-menu .ui-menu-item a:link,
.navigation .ui-menu .ui-menu-item a:visited {
	@apply text-gray-900 dark:text-gray-100;
}
.navigation .ui-menu .ui-menu-item a:hover,
.navigation .ui-menu .ui-menu-item a:active {
	@apply text-blue-600;
}
.navigation .ui-menu .ui-menu-item.active {
	@apply 	underline decoration-2 font-semibold decoration-blue-400 dark:decoration-blue-600 underline-offset-2 text-blue-400;
}

.breadcrumbs a:link, .breadcrumbs a:visited {
	@apply text-gray-700 dark:text-gray-300;
}

.breadcrumbs a:hover, .breadcrumbs a:active {
	@apply text-blue-600;
}

.home-hero a.text-white:link, .home-hero a.text-white:visited,
.home-hero a.text-white:hover, .home-hero a.text-white:active {
	color: #fff;
}