/* css/menu-search.css */

.menu-search-wrapper {
  position: relative; /* Ensure positioning context for z-index */
  overflow: visible; /* Override potential overflow:hidden from theme/builder */
  z-index: 9999; /* High z-index for the entire wrapper */
}

.menu-container {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 1;
  transform: translateY(0);
  position: relative;
  z-index: 100;
  display: flex; 
  align-items: center;
  justify-content: flex-start;
  float: right;
  margin-right: 15px;
}

/* Style the menu itself (adjust selectors as needed based on your theme) */
.menu-container .primary-menu {
  display: flex; 
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.menu-container .primary-menu li {
  margin-right: 15px; /* Example spacing */
  position: relative; /* Context for absolute positioned sub-menu */
  /* Add this if Divi's default li styling interferes */
  overflow: visible;
}

/* Add styling for menu links if needed */
.menu-container .primary-menu li a {
    display: block;
    padding: 10px 5px; /* Example padding */
    text-decoration: none;
    color: inherit; /* Or your specific link color */
}


.menu-container .primary-menu li:last-child {
  margin-right: 0;
}

/* --- Sub-Menu Styles --- */

/* Hide sub-menus by default */
/* WordPress uses .sub-menu class for dropdowns */
.menu-container .primary-menu ul.sub-menu {
    display: none; /* Hide visually */
    position: absolute;
    top: 100%; /* Position below the parent item */
    left: 0;
    background-color: white;
    padding: 0;
    margin: 0; /* Reset margin */
    list-style: none;
    min-width: 180px; /* Example width */
    z-index: 999; /* High z-index for the dropdown itself */
    border: 1px solid #ccc; /* Example border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Example shadow */
    /* Add this if Divi section styling clips the dropdown */
    overflow: visible;
}

/* Style sub-menu list items and links */
.menu-container .primary-menu .sub-menu li {
    margin: 0; /* Reset margin for sub-items */
    width: 100%;
}

.menu-container .primary-menu .sub-menu li a {
    padding: 8px 12px; /* Adjust padding for sub-menu links */
    white-space: nowrap; /* Prevent wrapping */
    border-bottom: 1px solid #ddd; /* Example separator */
    color: #333; /* Example link color */
}
.menu-container .primary-menu .sub-menu li:last-child a {
    border-bottom: none; /* Remove border from last item */
}
.menu-container .primary-menu .sub-menu li a:hover {
    background-color: #ddd; /* Example hover background */
}


/* Show sub-menu on hover/focus of parent LI */
/* This targets the direct child .sub-menu when the parent li is hovered or contains focus */
.menu-container .primary-menu li:hover > ul.sub-menu,
.menu-container .primary-menu li:focus-within > ul.sub-menu {
    display: block;
    /* Ensure overflow is visible when shown */
    overflow: visible;
}

/* Optional: Style for parent menu items that have sub-menus (adds an indicator) */
/* WordPress adds the .menu-item-has-children class */
.menu-container .primary-menu .menu-item-has-children > a::after {
    content: ' ▼'; /* Simple dropdown indicator */
    font-size: 0.7em;
    display: inline-block;
    margin-left: 5px;
}

/* Handle nested sub-menus (optional, if you have multiple levels) */
.menu-container .primary-menu ul.sub-menu ul.sub-menu {
    top: 0; /* Position next to the parent */
    left: 100%;
}

/* --- End Sub-Menu Styles --- */


/* Style the search icon */
.search-toggle-icon {
  cursor: pointer;
  margin-left: 15px; /* Space between last menu item and icon */
  font-size: 1.2em; /* Adjust size */
  display: inline-block; /* Align with menu items */
  vertical-align: middle;
  /* Ensure icon is clickable above other things if needed */
  position: relative;
  z-index: 101;
}

.search-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Or your desired background */
  padding: 10px;
  box-sizing: border-box;
  transform: translateY(100%); /* Start below the view */
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 10000; /* Highest z-index for the search overlay */
  display: block !important; /* Override display:none set inline for transition */
}

.search-container .close-search-icon {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8em;
    cursor: pointer;
    line-height: 1;
    color: #555;
}
.search-container .close-search-icon:hover {
    color: #000;
}
.search-container form {
    width: 97%;
}

/* Animation states */
.menu-search-wrapper.search-active .menu-container {
  transform: translateY(-100%); /* Move menu up */
  opacity: 0;
  pointer-events: none; /* Prevent interaction when hidden */
}

.menu-search-wrapper.search-active .search-container {
  transform: translateY(0); /* Move search in */
  opacity: 1;
  visibility: visible; /* Ensure it's truly visible */
  display: block !important; /* Ensure it stays block */
}

/* Initially hide search container visually but keep it in DOM for JS */
.menu-search-wrapper:not(.search-active) .search-container {
    visibility: hidden;
}