/* ================================================
Template: Single Recipe Detail
Path: assets/css/single-recipe.css
================================================ */
:is(body, .is-preview) {
	.single-recipe__breadcrumb {
		padding-bottom: 69px;
	}
	.single-recipe__back-link {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		font-family: var(--font-primary);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		line-height: 22.88px;
		color: var(--color-text-dark);
		text-decoration: none;
		transition: all var(--transition-slow);
	}
	.single-recipe__back-link:hover {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: 1px;
		text-underline-offset: 15%;
	}
	.single-recipe__back-link svg {
		flex-shrink: 0;
	}
	.single-recipe__header {
		display: flex;
		flex-direction: column;
		gap: var(--gap-2xl);
		padding-bottom: 37px;
		padding-top: 42px;
	}
	.single-recipe__header-text {
		display: flex;
		flex-direction: column;
		gap: var(--gap-xs);
	}
	.single-recipe__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-sm);
		margin-bottom: var(--gap-md);
	}
	.single-recipe__title {
		font-family: var(--font-display);
		font-size: 38px;
		font-weight: var(--font-weight-bold);
		line-height: 50px;
		letter-spacing: normal;
		color: #524e4b;
		margin: 0;
		text-transform: none;
	}
	.single-recipe__excerpt {
		font-family: var(--font-secondary);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-light);
		line-height: normal;
		letter-spacing: 0.12px;
		color: #524e4b;
		margin-top: var(--gap-md);
	}
	.single-recipe__header-image {
		overflow: hidden;
	}
	.single-recipe__hero-img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
		aspect-ratio: 636 / 450;
		border-radius: 10px;
	}
	.single-recipe__body {
		display: flex;
		flex-direction: column;
		gap: var(--gap-2xl);
		padding-bottom: 36px;
	}
	.single-recipe__section-title {
		font-family: var(--font-primary);
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-medium);
		line-height: normal;
		letter-spacing: 0;
		color: #524e4b;
		margin: 0 0 var(--gap-lg) 0;
		padding-bottom: var(--gap-xs);
		border-bottom: 1px solid #8E8A87;

		@media screen and (max-width: 768px) {
			font-size: var(--font-size-xl);
		}
	}
	.single-recipe__wysiwyg,
	.single-recipe__excerpt {
		font-family: var(--font-secondary);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-light);
		line-height: 25.02px;
		letter-spacing: 0.135px;
		color: #524e4b;
	}
	.single-recipe__wysiwyg h3,
	.single-recipe__excerpt h3 {
		font-family: var(--font-primary);
		font-weight: 500;
		font-size: 48px;
		color: #524e4b;
		line-height: normal;
		margin-bottom: var(--gap-md);

		@media screen and (max-width: 768px) {
			font-size: 36px;
		}
		@media screen and (max-width: 576px) {
			font-size: 28px;
		}
	}
	.single-recipe__wysiwyg h4, .single-recipe__excerpt h4 {
		font-family: var(--font-primary);
        font-size: 36px;
		font-weight: 500;
		color: #524e4b;
		line-height: normal;
		margin-bottom: var(--gap-md);
		
		@media screen and (max-width: 768px) {
			font-size: 24px;
		}
	}
	.single-recipe__wysiwyg h5, .single-recipe__excerpt h5 {
		font-family: var(--font-display);
		font-size: 24px;
		font-weight: 700;
		color: #524e4b;
		line-height: normal;
		margin-bottom: var(--gap-md);
		
		@media screen and (max-width: 768px) {
			font-size: 20px;
		}
	}
	.single-recipe__wysiwyg h6, .single-recipe__excerpt h6 {
		font-family: var(--font-primary);
		font-size: 20px;
		font-weight: 700;
		color: #524e4b;
		line-height: normal;
		margin-bottom: var(--gap-md);
	}
	.single-recipe__wysiwyg strong,
	.single-recipe__wysiwyg b,
	.single-recipe__excerpt strong,
	.single-recipe__excerpt b {
		font-weight: var(--font-weight-medium);
	}
	.single-recipe__wysiwyg p,
	.single-recipe__excerpt p {
		margin: 0 0 var(--gap-lg) 0;
	}
	.single-recipe__wysiwyg p:last-child,
	.single-recipe__excerpt p:last-child {
		margin-bottom: 0;
	}
	.single-recipe__wysiwyg ul,
	.single-recipe__wysiwyg ol,
	.single-recipe__excerpt ul,
	.single-recipe__excerpt ol {
		padding-left: 18px;
		margin: 0 0 var(--gap-lg) 0;
	}
	.single-recipe__wysiwyg ol,
	.single-recipe__excerpt ol {
		list-style: auto;
	}
	.single-recipe__wysiwyg li,
	.single-recipe__excerpt li {
		margin-bottom: var(--gap-xs);
		position:relative;
	}
	.single-recipe__wysiwyg ul li:before,
	.single-recipe__excerpt ul li:before {
		content:'';
		width:4px;
		height:4px;
		position:absolute;
		left:-12px;
		top:10px;
		border-radius:100%;
		background-color:#524E4B;
	}
	.single-recipe__similar_wrap {
		max-width:696px;
		margin:0 auto;
		padding-right: 16px;
	}
	.single-recipe__similar {
		padding-top: var(--gap-2xl);
		padding-bottom: 50px;
		border-top: 2px solid #8E8A87;
	}
	.single-recipe__similar-bg {
		position:relative;
		padding-top: var(--gap-2xl);
	}
	.single-recipe__similar-bg:before {
		content:'';
		width:100%;
		height:259px;
		border-radius: 10px 0 0 10px;
		background: rgba(112, 191, 74, 0.25);
		background-blend-mode: multiply;
		position:absolute;
		top:0;
		left:0;
	}
	.single-recipe__similar .single-recipe__section-title {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: var(--gap-2xl);
		color: var(--color-denim);
		font-family: var(--font-primary);
		font-weight: var(--font-weight-semibold);
		line-height: normal;
		text-transform: uppercase;
		text-align: center;
		position:relative;
	}
	.single-recipe__similar-grid {
		margin: 0 auto;
		position:relative;
	}
	.single-recipe__similar .recipe-card__title {
		font-size: var(--font-size-lg);
		font-weight: 600;
		line-height: 32px;
	}
	.single-recipe__similar .recipe-card__link {
		gap: var(--gap-lg);
	}
	.single-recipe__similar .recipe-card__media {
		aspect-ratio: 200 / 225;
	}
	@media (min-width: 768px) {
		.single-recipe__similar-grid .recipe-card__title {font-size: var(--font-size-lg);line-height: 32px;}
		.single-recipe__header {flex-direction: row;gap: var(--gap-2xl);}
		.single-recipe__header-text,
		.single-recipe__header-image {flex: 1;}
		.single-recipe__title {font-size: 48px;}
		.single-recipe__body {flex-direction: row;}
		.single-recipe__col--ingredients {flex: 0 0 40%;}
		.single-recipe__col--instructions {flex: 1;}
	}
	@media (min-width: 1024px) {
		.single-recipe__header {gap: var(--gap-2xl);}
		.single-recipe__title {font-size: var(--font-size-4xl);line-height: 70px;letter-spacing: 1.92px;}
		.single-recipe__similar {padding-top: 80px;}
	}
	@media(max-width:767px) {
		.single-recipe__header {flex-direction:column-reverse;padding-top: 0;padding-bottom: var(--gap-2xl);}
		.single-recipe__header-image {margin: 0 -14px;}
		.single-recipe__hero-img {border-radius: 0;}
		.single-recipe__breadcrumb {order:4;padding-bottom:0;padding-top:var(--gap-md);}
		.single-recipe__tags {order:1;justify-content:center;margin-bottom: 0;}
		.single-recipe__title {order:2;}
		.single-recipe__excerpt{order:3;font-family: var(--font-primary);font-size: var(--font-size-md);line-height: normal;letter-spacing: normal;}
		.single-recipe__header-text {text-align:center;}
		.single-recipe__similar-bg {margin-right: -14px;}
		.single-recipe__similar_wrap {padding-left: 30px;padding-right:0;max-width: 100%;}
	}
}