@import '@splidejs/splide/dist/css/splide-core.min.css';
@import "tailwindcss";

@theme {
  --color-gray-*: initial;
  --color-gray-100: #f4f4f1;
  --color-gray-300: #d8d7d2;
  --color-gray-500: #747472;
  --color-gray-700: #3e3b36;
  --color-gray-900: #1d1404;

  --color-burgundy: #990000;
  --color-sand: #fbf8f0;
  --color-yellow: #fcd72d;

	--breakpoint-2xl: initial;

  --font-primary: "PT Serif", serif;
  --font-sans: "Inter", sans-serif;
}

@utility container {
  margin-inline: auto;
  padding-inline: 1.25rem;
}

body {
  @apply text-gray-900 antialiased text-base/[1.85];
}

a.link {
  @apply font-primary font-bold underline text-lg text-burgundy hover:no-underline;
}

::selection {
  @apply bg-burgundy text-white;
}

[x-cloak] {
	display: none !important;
}

/* Prose */
.prose {
  @apply **:[h1,h2,h3,h4]:font-primary **:[h1,h2,h3,h4]:text-burgundy **:[h1,h2,h3,h4]:font-bold **:[h1]:text-2xl **:[h1]:lg:text-5xl/11 **:[h1]:mb-3 **:[h1]:lg:mb-5 **:[h3]:text-xl **:[h3]:mt-8 **:[p]:not-last:mb-5 **:[ul]:list-disc **:[ul]:mb-5 **:[ul]:pl-4 **:[ul>li]:not-last:mb-1 **:[a]:text-burgundy;
}

.prose {
	h2 {
		@apply mb-2 text-2xl/8;
	}

	h3 {
		@apply mb-2 text-xl/6;
	}
}

/* Form Defaults */
.form-default {
  .form-body {
    @apply space-y-5;
    label {
      @apply block font-primary font-bold mb-1;
    }
    input {
      @apply bg-white border border-gray-300 h-[45px] w-full rounded p-3 text-gray-700 leading-6 focus:outline-burgundy;
    }
    textarea {
      @apply bg-white border border-gray-300 w-full rounded p-3 text-gray-700 leading-6 focus:outline-burgundy;
    }
  }

	.form-field .error {
		@apply text-burgundy;
	}

  .form-footer {
    @apply mt-3;
    button[type="submit"] {
      @apply w-full py-3 bg-yellow rounded-full text-center font-primary text-xl font-bold cursor-pointer hover:bg-[#fcdd4f] duration-200 focus:outline-burgundy;
    }
  }
}

/* Splide Carousel */
.splide__arrows {
	@apply absolute left-0 right-0 top-1/2 -translate-y-1/2 z-10;
}

.splide__arrow {
  @apply bg-white cursor-pointer flex items-center hover:bg-white/70 border border-gray-300 rounded-full size-10;

  svg {
    @apply fill-burgundy mx-auto size-7;
  }
}
.splide__arrow--next {
  @apply absolute right-[2%] lg:right-[3%];
}

.splide__arrow--prev {
  @apply absolute left-[1%] lg:left-[3%] rotate-180;
}