@tailwind base;
@tailwind components;
@tailwind utilities;


h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
input,
select,
option,
label,
button,
html,
body,
div {
	font-family: 'yekan-bakh' !important;
}

.pickr {
	@apply !hidden;
}

.block-item:active {
	cursor: grabbing;
}

.dragging {
	@apply bg-[#E6E6E6];
}




/* Desktop ! */
.d_h1 {
	@apply text-5xl font-bold leading-[67px]; 
}

.d_h2 {
	@apply text-3xl font-semibold leading-[51.20px];
}

.d_h3 {
	@apply text-2xl font-semibold leading-10;
}

.d_h4 {
	@apply text-xl font-semibold leading-loose;
}

.d_h5 {
	@apply text-lg font-semibold leading-7;
}

.d_h6 {
	@apply text-base font-semibold leading-relaxed;
}

.d_body1 {
	@apply text-lg font-medium leading-7;
}

.d_body2 {
	@apply text-base font-medium leading-relaxed;
}

.d_body3 {
	@apply text-sm font-medium leading-tight;
}

.d_button1 {
	@apply text-base font-bold leading-relaxed;
}

.d_button2 {
	@apply text-sm font-bold leading-snug;
}

.d_caption {
	@apply text-sm font-medium leading-tight;
}

/* Mobile ! */

.m_h1 {
	@apply text-[32px] font-bold leading-[67px]; 
}

.m_h2 {
	@apply text-[28px]  font-semibold leading-[51.20px];
}

.m_h3 {
	@apply text-2xl  font-semibold leading-10;
}

.m_h4 {
	@apply text-xl  font-semibold leading-loose;
}

.m_h5 {
	@apply text-lg font-semibold leading-7;
}

.m_h6 {
	@apply text-base font-semibold leading-relaxed;
}

.m_body1 {
	@apply text-lg font-medium leading-7;
}

.m_body2 {
	@apply text-base font-medium leading-relaxed;
}

.m_body3 {
	@apply text-sm font-medium leading-tight;
}

.m_button1 {
	@apply text-base font-bold leading-relaxed;
}

.m_button2 {
	@apply text-sm font-bold leading-snug;
}

.m_caption {
	@apply text-xs font-medium leading-tight;
}



.toc-item {
	margin-bottom: .5rem;
	display: flex;
	width: 100%;
	align-items: center;
	gap: 1rem;
	overflow: clip;
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(244 244 245/var(--tw-border-opacity, 1));
	padding-top: .5rem;
	padding-bottom: .5rem;
	transition-property: all;
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 500;
	line-height: 1.25
}

.toc-item.active,
.toc-item:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(224 242 254/var(--tw-bg-opacity, 1))
}

.toc-item.active div,
.toc-item:hover div {
	--tw-bg-opacity: 1;
	background-color: rgb(2 132 199/var(--tw-bg-opacity, 1))
}

.toc-item div {
	height: 2rem;
	width: 6px;
	border-top-left-radius: 9999px;
	border-bottom-left-radius: 9999px;
	background-color: transparent;
	transition-property: all;
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.toc-item p {
	margin-right: .75rem;
	margin-top: .5rem;
	width: -moz-max-content;
	width: max-content;
	font-weight: 600
}