/* 
Theme Name: Curated Sauces
Theme URI: https://curatedsauces.com/
Description: Elegant theme created for Curated Sauces
Author: Kemoso
Author URI: https://kemoso.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

#main-menu-container.ekit-sticky--active {background-color:var(--e-global-color-accent)}
.e-fas-map-marker-alt {width:12px}

/* * Target the menu item's link (<a> tag). 
 * You might need to adjust the selector '.navbar-nav .nav-item .nav-link' 
 * to match your specific menu structure.
 */

/* 1. Set the container (the link) to relative positioning */
/* On your site, the selector is '.navbar-nav .nav-item .nav-link' */
.elementskit-navbar-nav .menu-item .ekit-menu-nav-link {
  position: relative;
  padding-bottom: 8px; /* Add some padding so the line isn't touching the text */
}

/* 2. Create the underline pseudo-element */
.elementskit-navbar-nav .menu-item .ekit-menu-nav-link::after {
  content: ''; /* Required for a pseudo-element */
  position: absolute; /* Position it relative to the link */
  left: 50%; /* Start it from the center */
  bottom: 0; /* Position it at the bottom of the link */
  
  /* This is the "hidden" state: 0 width */
  width: 0; 
  height: 2px; /* This is the line's thickness */
  
  /* This combination centers the element and is key for the effect */
  transform: translateX(-50%); 
  
  /* Add the transition effect for the 'width' property */
  transition: width 0.3s ease-in-out;
}

/* 3. Define the hover state */
.elementskit-navbar-nav .menu-item .ekit-menu-nav-link:hover::after {
  width: 100%; /* Expand to 100% width on hover */
}

#main-menu-container:not(.ekit-sticky--active) .elementskit-navbar-nav .menu-item .ekit-menu-nav-link::after {
	background-color: var(--e-global-color-accent); /* Change this to your desired line color */
}

#main-menu-container.ekit-sticky--active .elementskit-navbar-nav .menu-item .ekit-menu-nav-link::after {
	background-color: var(--e-global-color-primary); /* Change this to your desired line color */
}

.ekit-promo-popup {
	z-index: 99999;
}

/*
 * CSS to enforce consistent featured image dimensions in the blog post cards.
 *
 * .elementskit-entry-thumb is targeted as the primary container for the image.
 * The use of !important is added here to override potential inline styles or
 * conflicting CSS from Elementor or the theme, ensuring the 250px height is enforced.
 */

/* Base styles for all screen sizes: ensure the container is full width and hides overflow */
.elementskit-entry-thumb {
    width: 100%;
    /* Ensures nothing overflows the container when image is set to object-fit: cover */
    overflow: hidden;
    display: block; /* Ensures the anchor tag acts like a block-level container */
    /* Add min/max height to ensure stability across devices */
    min-height: 200px; /* Base height for small screens */
    max-height: 250px; /* Prevents container from growing too large on small screens if not specified otherwise */
}

/* Ensure the image inside the container covers the full space without distorting */
.elementskit-entry-thumb img {
    /* Use a high-specificity selector if needed, but the current one is usually fine. */
    width: 100%;
    height: 100% !important; /* CRITICAL: Ensures the image inherits the parent's full height, overriding conflicting styles */
    object-fit: cover; /* Crucial for filling the space while maintaining aspect ratio and clipping excess width */
    display: block;
}
.woocommerce-page .content-area {
	margin-top: 200px;
}
/* Responsive adjustment: Fixed height for screens wider than 500px */
@media (min-width: 501px) {
    .elementskit-entry-thumb {
        height: 250px !important; /* CRITICAL: Enforce the required height, overriding potential conflicts */
        min-height: 250px !important;
        max-height: 250px !important;
    }
}

/* Base height for screens 500px and below */
@media (max-width: 500px) {
    .elementskit-entry-thumb {
        /* Enforce a consistent height for mobile-friendly view */
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
}

@media only screen and (min-width:1025px) and (max-width:1199px) {
	#main-menu-container:not(.ekit-sticky--active) {margin-bottom:-10.5%}
}

@media only screen and (min-width:1025px) {
	#main-menu-container:not(.ekit-sticky--active) {
		background: #041A06;
		background: linear-gradient(180deg, rgba(4, 26, 6, 1) 0%, rgba(255, 255, 255, 0) 100%);
	}
	.woocommerce-page #main-menu-container:not(.ekit-sticky--active) {
		background: rgba(0,0,0,0.75);
	}	
	#main-menu-container:not(.ekit-sticky--active) #logo-light-bg {display:none}	
	#main-menu-container.ekit-sticky--active .logo-dark-bg {display:none}	
	#main-menu-container.ekit-sticky--active #logo-light-bg img {width:130px}
	.elementor-19 #main-menu-container:not(.ekit-sticky--active) .elementskit-navbar-nav > li.menu-item > a {color:#fff}
	.elementor-19 #main-menu-container.ekit-sticky--active .elementskit-navbar-nav > li.menu-item > a {color:var( --e-global-color-secondary )}
	.elementor-19 #main-menu-container:not(.ekit-sticky--active) .ekit_navsearch-button {background-color:transparent}
	.elementor-19 #main-menu-container:not(.ekit-sticky--active) .ekit_navsearch-button i {color:#fff}
}

@media only screen and (max-width:1024px) {
	#main-menu-container.ekit-sticky--active .logo-dark-bg,
	#main-menu-container .logo-dark-bg {display:none}
}