@import "tailwindcss";
@plugin "daisyui";

@font-face {
	font-family: 'Distrampler';
	src: url('/fonts/distrampler/distrampler.woff2') format('woff2'),
			url('/fonts/distrampler/distrampler.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


:root {
	--font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
	--swiper-pagination-bullet-size: 16px;
  --swiper-pagination-bullet-width: 16px;
  --swiper-pagination-bullet-height: 16px;
  --swiper-pagination-color: rgba(178, 105, 169, 1);
	--swiper-pagination-bullet-inactive-color: rgba(178, 105, 169, 1);
}

@theme { 
	--color-violet-100: rgba(178, 105, 169, 1);
	--color-violet-200: rgba(117, 60, 142, 1);
	--color-cream: rgba(242, 229, 219, 1);
	--color-brown: rgba(221, 189, 165, 1);

	--font-serif: "Distrampler", "serif"; 
	--font-slab: "Arbutus Slab", "sans-serif"; 
	--font-sans: "Open Sans", "sans-serif"; 
}

*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
	@apply bg-white font-sans text-black text-lg;
}

.container {
	@apply px-6 2xl:px-0 max-w-[1416px] mx-auto;
}

ol {
	@apply list-disc list-inside
}

ul {
	@apply list-decimal list-inside
}

.btn-overlay {
	@apply relative inline-flex items-center justify-center px-6 py-3 text-base font-medium transition-all duration-300 ease-in-out w-full;
}

.text-overlay-container {
	@apply relative overflow-hidden;
}

.text-overlay-gradient {
	@apply absolute bottom-0 left-0 w-full h-32 pointer-events-none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 1) 100%);
}

.text-overlay-gradient .btn-overlay {
	@apply absolute bottom-4 left-1/2 transform -translate-x-1/2 pointer-events-auto text-violet-200 underline underline-offset-2 hover:underline-offset-4 hover:text-violet-100 transition-all duration-300 ease-in-out;
}

.collapse-custom {
	@apply transition-all duration-500 ease-in-out overflow-hidden;
	max-height: 250px;
}

.collapse-custom[aria-expanded="false"] {
	@apply pb-0;
	max-height: 250px;
	transition: max-height 1s ease-in-out, padding 0.5s ease-in-out;
}

.collapse-custom[aria-expanded="true"] {
	@apply pb-24;
	height: auto;
	max-height: max-content;
	transition: max-height 0.6s ease-out, padding 0.4s ease-out;
}

.swiper-pagination-bullet {
	@apply !mb-1 
}