/******1******/

/* ✅ DESKTOP: Blur stays ONLY on desktop */
@media screen and (min-width: 1025px) { 
    .storefront-primary-navigation {
        position: relative;
        background: rgba(255, 253, 230, 0.8) !important; /* Soft whitish-yellow */
        backdrop-filter: blur(5px) !important; /* Adds blur effect */
        -webkit-backdrop-filter: blur(5px) !important; /* Safari fix */
        padding: 10px;
        border-radius: 5px;
        z-index: 99; /* Ensures it's behind the logo */
    }
}

/* 🚀 MOBILE & TABLET: COMPLETELY REMOVE BLUR */
@media screen and (max-width: 1024px) { 
    .storefront-primary-navigation {
        background: rgba(255, 253, 230, 1) !important; /* Fully solid background */
        position: relative !important;
        z-index: 10 !important; /* Ensures menu is behind logo */
        filter: none !important; /* Blocks ALL effects */
        backdrop-filter: none !important; /* FULLY disables blur */
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        display: flex !important; /* Forces proper rendering */
        align-items: center !important; /* Ensures menu structure remains */
    }

    /* 🚨 EXTRA: BLOCK ALL INVISIBLE BLUR ELEMENTS */
    .storefront-primary-navigation::before,
    .storefront-primary-navigation::after {
        display: none !important;
        content: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    /* ✅ Ensure the logo is always visible */
    .site-branding {
        position: relative !important;
        z-index: 1000 !important; /* Forces logo to top */
        display: flex !important;
        align-items: center !important;
    }

    /* 🚨 PREVENT HIDDEN BACKDROP FROM OTHER ELEMENTS */
    body, html, .storefront-primary-navigation, .site-header {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }
}

/* ✅ Keep menu text dark green */
.storefront-primary-navigation a {
    color: #1B4D3E !important; /* Dark green */
    font-weight: normal;
}


/******2******/

/* 🚀 MOBILE & TABLET: REMOVE YELLOW BACKGROUND COMPLETELY */
@media screen and (max-width: 1024px) { 
    .storefront-primary-navigation {
        background: none !important; /* Fully removes the yellow background */
        backdrop-filter: none !important; /* Ensures blur stays off */
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }
}

/******3******/


/* Change navigation menu font */
/* Import Mali font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@300;400;600&display=swap');

/* Apply Mali font to the navigation menu */
.storefront-primary-navigation a {
    font-family: 'Mali', cursive !important;
    font-size: 18px !important; /* Adjust size if needed */
    font-weight: 400 !important; /* Options: 300 (light), 400 (regular), 600 (semi-bold) */
}

/******4******/
/* 🧵 FIX NAV MENU WRAPPING ON DESKTOP AND TABLET */

.main-navigation ul.menu > li {
    white-space: nowrap;
}

.main-navigation a {
    font-size: 16px; /* Smaller size to help spacing */
    padding: 8px 14px; /* Adjusts spacing between items */
}

@media (max-width: 768px) {
    .main-navigation a {
        font-size: 15px;
        padding: 8px 10px;
    }
}

/******5******/
/* 🌙 FINAL MENU FIX – PREVENT LINE WRAPPING */

.storefront-primary-navigation ul.menu {
  display: flex;
  flex-wrap: nowrap;        /* Force items to stay in one row */
  justify-content: space-between;
  overflow: hidden;
  white-space: nowrap;
}

.storefront-primary-navigation ul.menu li {
  white-space: nowrap;
  margin: 0 8px;             /* Space between items */
}

.main-navigation a {
  font-size: 15px !important;     /* Slightly smaller font to help fit */
  padding: 8px 10px !important;   /* Adjust spacing */
}

/******6******/
/* 🌕 FIX: Dropdown menu items not clickable */

.main-navigation ul ul {
  z-index: 9999 !important;
  position: absolute;
  background: #fffdf0; /* Light background for submenu */
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.main-navigation ul li:hover > ul {
  display: block;
}

.main-navigation ul ul li {
  display: block;
  margin: 5px 0;
}

.main-navigation ul ul a {
  color: #1B4D3E !important; /* Match your dark green */
  font-size: 15px;
  padding: 6px 12px;
  display: block;
  white-space: nowrap;
}

.site-header,
.storefront-primary-navigation {
  z-index: 9999 !important;
}

/******7******/
/* 🌕 FORCE DROPDOWN VISIBILITY & ALIGNMENT */

.main-navigation ul li {
  position: relative; /* Needed for submenu positioning */
}

.main-navigation ul.sub-menu {
  display: none;        /* Default: hidden */
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 9999;
}

.main-navigation ul li:hover > .sub-menu {
  display: block !important;  /* Show on hover */
}

/* Optional: animate dropdown */
.main-navigation ul.sub-menu {
  transition: opacity 0.3s ease, top 0.3s ease;
  opacity: 0;
}

.main-navigation ul li:hover > .sub-menu {
  opacity: 1;
  top: 100%;
}

/******8******/
/* 🌕 FINAL UNBLOCKING: Force dropdown to show and be clickable */

.main-navigation ul.sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0;
  background-color: #fffdf0;
  z-index: 99999 !important;
  padding: 12px 0;
  min-width: 180px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.main-navigation ul li {
  position: relative !important;
}

.main-navigation ul.menu > li:hover > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/******9******/
/* 🌕 UNIVERSAL DROPDOWN UNBLOCKER – STORE-FRIENDLY */

.storefront-primary-navigation ul.menu ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  min-width: 180px;
  background-color: #fffdf0;
  padding: 10px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.storefront-primary-navigation ul.menu li:hover > ul.sub-menu {
  display: block !important;
}

.storefront-primary-navigation ul.menu ul.sub-menu li {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
}

.storefront-primary-navigation ul.menu ul.sub-menu li a {
  color: #1B4D3E !important;
  font-size: 15px;
  text-decoration: none;
}

/* Ensure header doesn't block dropdown visibility */
.site-header {
  overflow: visible !important;
  z-index: 9999 !important;
}

.main-navigation {
  overflow: visible !important;
}

/******9******/
/* 🌕 UNIVERSAL DROPDOWN UNBLOCKER – STORE-FRIENDLY */

.storefront-primary-navigation ul.menu ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  min-width: 180px;
  background-color: #fffdf0;
  padding: 10px 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.storefront-primary-navigation ul.menu li:hover > ul.sub-menu {
  display: block !important;
}

.storefront-primary-navigation ul.menu ul.sub-menu li {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
}

.storefront-primary-navigation ul.menu ul.sub-menu li a {
  color: #1B4D3E !important;
  font-size: 15px;
  text-decoration: none;
}

/* Ensure header doesn't block dropdown visibility */
.site-header {
  overflow: visible !important;
  z-index: 9999 !important;
}

.main-navigation {
  overflow: visible !important;
}


/******10******/
/* 🌕 FINAL UNLOCKER: Prevent overflow clipping dropdown */

.site-header,
.storefront-primary-navigation,
.main-navigation,
.main-navigation ul.menu,
.main-navigation ul.sub-menu,
.site {
  overflow: visible !important;
  z-index: 99999 !important;
  position: relative !important;
}

/******11******/
/* 🌙 Refine Dropdown Position + Style */

.main-navigation ul.sub-menu {
  top: 45px !important; /* Bring it closer to the nav bar */
  background-color: #fffdf0 !important; /* Match your warm palette */
  border-radius: 6px;
  padding: 10px 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.main-navigation ul.sub-menu li a {
  font-size: 15px;
  padding: 8px 20px;
  display: block;
  color: #1B4D3E !important;
}

.main-navigation ul.sub-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}

/******12******/
/* 🌙 Only show submenus when hovered */

.main-navigation ul.sub-menu {
  display: none !important;         /* Hide by default */
  position: absolute;
  top: 45px;
  background-color: #fffdf0;
  border-radius: 6px;
  padding: 10px 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 9999;
}

.main-navigation li:hover > ul.sub-menu {
  display: block !important;        /* Show on hover only */
}

.main-navigation ul.sub-menu li a {
  font-size: 15px;
  padding: 8px 20px;
  display: block;
  color: #1B4D3E !important;
}

.main-navigation ul.sub-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}



/******13******/
/* 🌙 Main Page Title on the Middle */


.hentry.type-page .entry-header {
	text-align: center !important;
}

/******14******/
/* 🚀 MOBILE & TABLET: MENUS UPPERCASE */
/* Force uppercase only in mobile / tablet view */
@media screen and (max-width: 1024px) {
  /* Your mobile menu structure: div.menu > ul > li > a */
  div.menu ul li > a,
  div.menu ul li > span {
    text-transform: uppercase !important;
    letter-spacing: 0.04em; /* optional: makes ALL CAPS nicer */
  }
}

/******15******/
/* 🚀 MOBILE & TABLET: MENUS */

@media screen and (max-width: 1024px) {
  .menu-toggle {
    position: fixed !important;
    top: 16px;
    left: 16px !important; /* 🌿 Move it to the left */
    right: auto !important;
    z-index: 10001;
    background-color: #fffdf0;
    color: #1B4D3E;
    padding: 10px 14px;
    font-size: 18px;
    border: 1px solid #1B4D3E;
    border-radius: 4px;
  }
}

/* Changing the pages from horizontal to vertical in handheld mobile*/

@media screen and (max-width: 1024px) {
  .handheld-navigation {
    display: block !important;
    position: fixed !important;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: rgba(255, 253, 230, 0.95);
    padding: 20px;
  }

  .handheld-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .handheld-navigation ul li {
    width: 100%;
    margin: 0;
  }

  .handheld-navigation ul li a {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: #1B4D3E !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .handheld-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.3);
    text-decoration: underline;
  }
}

/* Make the Mobile Page Items Invisible When Hamburguer Menu Is Not Toggled */

/* 🌙 Hide handheld menu when collapsed */
@media screen and (max-width: 1024px) {
  .handheld-navigation {
    display: none !important;
  }

  .toggled .handheld-navigation {
    display: block !important;
  }
}

/******16*******/
/* 🌕 Gentle green focus ring for image links */
div[style*="flex: 1 1 300px"] a:focus,
div[style*="flex: 1 1 300px"] a:active,
div[style*="flex: 1 1 300px"] img:focus,
div[style*="flex: 1 1 300px"] img:active {
  outline: 2px solid #3c7037; /* Moss Light */
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(252, 238, 181, 0.5); /* Golden Cream glow */
}

/*****17*****/
/* 🌙 Soft green focus glow for main nav links */
.main-navigation a:focus,
.main-navigation a:active {
  outline: 2px solid #6f8d5f !important; /* Sage Whisper */
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(249, 242, 198, 0.5); /* Sunveil glow */
}

/*****18*****/
/* SHOP page remove repeated categories*/
page-id-2212 .storefront-sorting:nth-of-type(2),
.page-id-2212 .site-main > .products + .products,
.page-id-2212 .woocommerce-loop-category__title + .products {
display: none !important;
}