/*
Theme Name: Kookmutsjes Theme
Theme URI: https://kookmutsjes.com
Author: Abdelrahman Tawfek
Author URI: https://kookmutsjes.com
Description: A clean and modern custom WordPress theme built from scratch.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://kookmutsjes.com
Text Domain: kookmutsjes-theme
Tags: custom-theme, responsive, food, minimal, clean
*/

/* Theme Styles
-------------------------------------------------------------- */

.site-logo {
	max-width: 240px;
}
/* .wpml-switcher {
font-size: 10px;
} */
/* span.s-btn{
transform: translateY(-50%);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
span.s-btn.left{
left: 1.5px;
}
span.s-btn.right{
right: 1.5px;
} */
header nav a{
	text-transform: uppercase;
}
.sb_instagram_header, div#sbi_load {
	display: none !important;
}
.mb-6 p{
	margin-bottom: 24px;
}
/* Submenu container */
.submenu-wrapper {
	min-width: 128px;
	background-color: #ffffff;
	/*   border-radius: 6px; */
	padding: 6px;
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.08);
	z-index: 50;
}
.modal-search-input{
	font-size: 16px;
}

/* Submenu items */
.submenu-wrapper a {
	display: flex;
	align-items: center;
	/*   padding: 8px 12px; */
	font-size: 12px;
	line-height: 1.4;
	color: #2a2a2a;
	/*   border-radius: 4px; */
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover / focus state */
.submenu-wrapper a:hover,
.submenu-wrapper a:focus {
	background-color: hsl(var(--primary) / .2);
	color: #38332E;
	outline: none;
}
span.text-4xl.md\:text-5xl.font-serif.text-primary.float-left.mr-3.mt-1.leading-none {
	margin-right: .5rem;
}

input, select, textarea {
	padding: .75rem 1rem !important;
	border-width: 1px;
	border-radius: 9999px;
}
span.wpcf7-spinner {
	position: absolute;
	bottom: 0;
}

input:focus, textarea:focus {
	--tw-ring-color: hsl(var(--primary) / .2);
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

input[type="submit"] {
	background-color: hsl(var(--primary));
	color: white;
	cursor: pointer;
	transition: background-color 0.3s;
}

input[type="submit"]:hover {
	background-color: hsl(var(--primary) / 0.8) !important;
}
.block .flex {
	/* 	flex-direction: column; */
}
input[type="email"] {
	max-width: 100% !important;
	width: 100% !important;
}
.widget input {
	max-width: 100% !important;
	width: 100% !important;
	display: block;
}
.wpcf7-not-valid-tip {
	position: absolute;
	width: 100%;
}
.bg-primary .wpcf7-response-output{
	color: #fff;
}
footer .relative.flex.flex-col.sm\:flex-row.gap-2.max-w-md.mx-auto {
	margin-left: 0;
}
.recipe-tips p {
	gap: 0.5rem;             /* Space between bullet and text */
	position: relative;
	margin-bottom: 0.75rem;  /* Space between tips */
	line-height: 1.6;
}

.recipe-tips p::before {
	content: "•";            /* Bullet character */
	color: #9b734b;
	flex-shrink: 0;
	margin-right: .5rem;
}
.checkmark {
	margin-top: 2.75px;
}

.text-base {
	font-size: 1rem !important;
	line-height: 1.5rem !important;
}
.pl-12 {
	padding-left: 3rem !important;
}
/* Custom Checkbox Styling */
.recipe-category-checkbox {
	appearance: none;
	padding: 5px !important;
	-webkit-appearance: none;
	height: 16px;
	width: 16px;
	border: .5px solid #9b734b; /* Brown border */
	border-radius: 2px;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: all 0.2s ease;
}

.recipe-category-checkbox:checked {
	background-color: #9b734b; /* Brown background */
}

/* The White Checkmark */
.recipe-category-checkbox:checked::after {
	content: '';
	width: 6px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	position: absolute;
	top: 2px;
}

/* Hover effect */
.recipe-category-checkbox:hover {
	border-color: #7a5e3e;
}
.pl-14 {
	padding-left: 3.5rem !important;
}
.md\:text-sm {
	font-size: .875rem !important;
	line-height: 1.25rem !important;
}
.wpcf7-response-output {
	color: #9b734b !important;
}

.recipe-text-block {
/* 	color: hsl(var(--muted-foreground)); */
	color: hsl(var(--foreground) / .8);
}
.recipe-text-block a, .hyperlink a{
	color: var(--foreground);
	font-weight: 500;          
	transition-property: opacity;
	transition-duration: 150ms; 
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	background: linear-gradient(to top, hsl(var(--primary) / .2) 30%, transparent 30%);
	padding: 0 .1em;
}
.recipe-text-block a:hover, .hyperlink a:hover{
	opacity: 0.8;
}
.recipe-text-block ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.recipe-text-block li{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;             
	padding-bottom: 0.5rem;  
	font-size: 0.875rem;    
	line-height: 1.625;    
	color: var(--muted-foreground);
}

.recipe-text-block ul li::before {
	content: "•";
	color: var(--primary);    
	margin-top: 0.125rem;     
	flex-shrink: 0;         
}

.recipe-text-block hr{
	color: var(--foreground);     
	padding-bottom: 0.5rem;       
	border-bottom: 1px solid var(--border); 
}
.recipe-text-block h1, .recipe-text-block h2, .recipe-text-block h3, .recipe-text-block h4, .recipe-text-block h5, .recipe-text-block h6{
	color: hsl(var(--foreground));
/* 	font-weight: bold; */
	font-family: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}
.recipe-text-block h2{
	font-size: 1.5rem;
	line-height: 2rem;
	color: hsl(var(--foreground));
}
.recipe-text-block h3{
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: hsl(var(--foreground));
}
.ingredient-label .ingredient-text {
	font-size: 18px !important;
}
@media(max-width: 1024px){
	.p-5.mob{
		padding-left: 0;
		padding-right: 0;
	}
}