/*
Theme Name: Anglesey Golf Club
Description: Anglesey Golf Club Theme
Theme URI:   https://galactig.com
Author: Galactig
Author URI:  https://galactig.com
Template: salient
Version: 1.0
*/

/* 1. Main Container Appearance */
.menu-course-container {
  background-color: #f4f3f0; 
  padding: 20px !important;
  font-family: "Playfair Display", Georgia, serif; 
  display: flex !important;
  justify-content: center !important;
}

/* 2. Force Flex Layout on the UL */
.menu-course-container ul {
  display: flex !important; 
  flex-direction: row !important; 
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important; 
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px; 
}

/* 3. List Items - Force inline behavior, kill theme clears/floats, and strip bullets */
.menu-course-container ul li {
  display: inline-flex !important; 
  width: auto !important; 
  margin: 0 !important;
  padding: 0 !important;
  float: none !important; 
  clear: none !important; 
  list-style: none !important;
  background-image: none !important; 
}

/* 4. Kill Salient's custom pseudo-element bullets */
.menu-course-container ul li::before,
.menu-course-container ul li::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 5. Links */
.menu-course-container ul a {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  text-decoration: none !important;
  color: #333333 !important; 
  font-size: 16px;
  transition: all 0.2s ease;
  background: transparent; 
}

/* 6. Hover & Active States */
.menu-course-container ul a:hover {
  background-color: #e8e6e1 !important; 
}

.menu-course-container ul li.current-menu-item a,
.menu-course-container ul li.current_page_item a {
  background-color: #192a25 !important; 
  color: #ffffff !important;
}

/* 7. Text Dividers (OUT / IN) */
.menu-course-container ul .divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 10px;
  color: #555555;
  font-size: 14px;
  letter-spacing: 1px;
}