/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/* --- Optional: Style a potential parent container --- */
/* If your menu is inside a div, you might style it like this */
/* .your-menu-container {
  display: flex;
  align-items: center; /* Vertically align title and grid */
/*  background-color: #424258; /* Dark background */
/*  padding: 20px;
} */

/* --- Style the "Печати" Title --- */
/* Target the specific list item for the title */
#menu-item-9662 {
  list-style: none; /* Remove bullet if any */
  margin-right: 30px; /* Space between title and grid */
  padding: 0; /* Reset padding */
  /* Make it not behave like a grid item if it was inheriting */
  background-color: transparent !important; 
}

#menu-item-9662 a {
  color: white;
  font-size: 28px; /* Larger font size for the title */
  font-weight: normal; /* Adjust as needed */
  text-decoration: none;
  position: relative; /* Needed for the underline */
  padding-bottom: 8px; /* Space for the underline */
  display: inline-block; /* Allows padding-bottom */
  text-transform: none; /* Override any potential uppercase */
}

/* Create the blue underline */
#menu-item-9662 a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* Full width underline */
  height: 4px; /* Thickness of the underline */
  background-color: #4a90e2; /* Blue color */
}

/* --- Style the Grid Container (the UL) --- */
#menu-levoe-menyu {
  display: grid;
  /* Create 5 equal columns */
  grid-template-columns: repeat(5, 1fr); 
  /* Create gaps between grid items */
  gap: 3px; 
  list-style: none; /* Remove default list bullets */
  padding: 0;
  margin: 0;
  /* If the UL is not inside a flex container with the title,
     you might need flex-grow: 1; or width: auto; depending on layout */
}

/* --- Style the Grid Items (LI elements, excluding the title) --- */
/* We style the <a> tag directly for better control over background and click area */
#menu-levoe-menyu li:not(#menu-item-9662) {
   /* The background and padding will be on the <a> tag */
   margin: 0;
   padding: 0;
}

/* --- Style the Links within the Grid Items --- */
#menu-levoe-menyu li:not(#menu-item-9662) a {
  display: flex; /* Use flexbox for centering text */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
  background-color: #707088; /* Button background color (picked from image) */
  color: white;
  text-decoration: none;
  padding: 12px 8px; /* Adjust padding as needed (vertical, horizontal) */
  text-align: center;
  font-size: 13px; /* Adjust font size */
  text-transform: uppercase; /* Make text uppercase */
  height: 100%; /* Ensure link fills the list item height */
  box-sizing: border-box; /* Include padding in height/width calculation */
  transition: background-color 0.2s ease; /* Smooth hover effect */
}

/* --- Optional: Hover effect for grid items --- */
#menu-levoe-menyu li:not(#menu-item-9662) a:hover {
  background-color: #5e5e74; /* Slightly darker shade on hover */
}

/* --- Reset specific classes from the HTML if they interfere --- */
/* These classes might add unwanted styles from a theme */
.wd-nav-secondary, .wd-style-default, .wd-gap-s, .wd-offsets-calculated {
  /* Reset properties if needed, e.g.: */
  /* gap: 3px !important; */
}
.menu-item {
  /* Reset properties if needed */
  /* margin: 0 !important; */
}
.woodmart-nav-link {
  /* Reset properties if needed */
  /* padding: 0 !important; */
}