/**
 * RPH Menu Builder - Desktop Styles
 */

.rph-menu-desktop-wrapper {
	position: relative; /* Context for absolute positioned submenus */
	width: 100%;
}

.rph-menu-nav.rph-menu-desktop {
	display: flex;
	justify-content: center; /* Or left, right depending on theme */
	width: 100%;
}

ul.rph-menu-top-level {
	display: flex;
	flex-wrap: wrap; /* Allow wrapping on smaller desktop screens if needed */
	align-items: center;
	width: 100%;
    max-width: 1200px; /* Example max width, adjust as needed */
    margin: 0 auto; /* Center the menu container */
    padding: 0 15px; /* Padding on the sides */
}

li.rph-menu-item {
	position: relative; /* Each top-level item is a positioning context */
	margin: 0 5px; /* Spacing between top-level items */
    border-bottom: 0px solid #eee !important;
}

/* Style top-level links and buttons */
li.rph-menu-item > a,
li.rph-menu-item > button {
	padding: 15px 10px;
	display: flex;
    align-items: center;
    position: relative;
    /* font-weight inherited from dynamic css */
}

/* Underline effect */
li.rph-menu-item > a::after,
li.rph-menu-item > button::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Adjust position of underline */
    left: 10px;
    right: 10px;
    height: 2px;
    background-color: var(--rph-menu-link-hover-color, #0073aa);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: center;
}

li.rph-menu-item > a:hover::after,
li.rph-menu-item > a:focus::after,
li.rph-menu-item > button:hover::after,
li.rph-menu-item > button:focus::after,
li.rph-menu-item.rph-submenu-open > button::after { /* Keep underline when open */
    transform: scaleX(1);
}


/* Top-level Dropdown Indicator */
li.rph-menu-item > button .rph-dropdown-indicator {
    transition: transform 0.3s ease;
}
li.rph-menu-item.rph-submenu-open > button .rph-dropdown-indicator {
    transform: rotate(180deg); /* Point up when open */
}


/* Submenu Panel */
.rph-submenu-panel {
	position: absolute;
	top: 100%;
	left: 0;
    width: max-content; /* Let content determine width */
    min-width: 200px; /* Ensure a minimum width */
    max-width: calc(100vw - 40px); /* Prevent overflow */
	background-color: var(--rph-menu-bg-color, #fff);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	padding: 20px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
    transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
    border-top: 3px solid var(--rph-menu-link-hover-color, #0073aa);
    border-radius: 0 0 4px 4px;
}

/* Adjust left position for items not on the far left - attempt centering */
li.rph-menu-item:not(:first-child):not(:last-child) > .rph-submenu-panel {
     left: 50%;
     transform: translateX(-50%) translateY(10px); /* Center, then slide */
}
/* Reset transform for first child */
li.rph-menu-item:first-child > .rph-submenu-panel {
    transform: translateY(10px);
}

/* Right align last item's submenu */
li.rph-menu-item:last-child > .rph-submenu-panel {
    left: auto;
    right: 0;
    transform: translateY(10px); /* Reset horizontal transform */
}


/* Show submenu on hover/focus */
li.rph-menu-item.rph-submenu-open > .rph-submenu-panel {
	opacity: 1;
	visibility: visible;
    /* Adjust transform based on position */
    transform: translateY(0); /* Base case */
}
li.rph-menu-item:not(:first-child):not(:last-child).rph-submenu-open > .rph-submenu-panel {
    transform: translateX(-50%) translateY(0); /* Centered reveal */
}

/* Submenu List & Columns */
ul.rph-submenu-list {
	display: grid;
	grid-template-columns: repeat(var(--rph-submenu-cols, 3), minmax(180px, 1fr));
	gap: 15px 25px; /* Row and Column gap */
}

/* Individual Submenu Items */
li.rph-submenu-item {
    break-inside: avoid; /* Prevent items breaking across columns */
    position: relative; /* Context for toggle button */
}

li.rph-submenu-item > a {
	display: inline-block; /* Adjust if full width block needed */
	padding: 8px 0;
    font-size: 0.95em;
    vertical-align: middle; /* Align with button */
}

li.rph-submenu-item > a:hover,
li.rph-submenu-item > a:focus {
    /* Optional: Add background or underline on hover */
    background-color: #ffffff00;
}

/* Location parent item specific styles */
li.rph-submenu-item.rph-location-parent-item {
    /* Maybe add margin if toggle causes layout shift */
}
li.rph-submenu-item.rph-location-parent-item > a {
    /* Link styles */
}

/* --- START: Add Space Before Desktop Location Toggle --- */
.rph-menu-desktop-wrapper .rph-location-parent-item > .rph-location-child-toggle {
    /* Base margin is 5px (from common), add 10px for total of 15px */
    margin-left: 15px;
}
/* --- END: Add Space --- */


/* Nested Child Lists (Dynamic Categories - always visible) */
li.rph-submenu-item:not(.rph-location-parent-item) ul.rph-submenu-child-list {
	margin-top: 8px;
	padding-left: 15px;
    border-left: 2px solid #eee;
    list-style: none; /* Ensure no bullets */
}
li.rph-submenu-item:not(.rph-location-parent-item) ul.rph-submenu-child-list li a {
    padding: 5px 0;
    font-size: 0.9em;
     color: #555; /* Slightly muted color for children */
}
li.rph-submenu-item:not(.rph-location-parent-item) ul.rph-submenu-child-list li a:hover,
li.rph-submenu-item:not(.rph-location-parent-item) ul.rph-submenu-child-list li a:focus {
     color: var(--rph-menu-link-hover-color, #0073aa);
}

/* Location Child List Specific Desktop Styles */
.rph-menu-desktop-wrapper .rph-location-parent-item > ul.rph-submenu-child-list {
	padding-left: 20px; /* Desktop indentation */
    /* Inherits hide/show transition from common.css */
}
.rph-menu-desktop-wrapper .rph-location-parent-item > ul.rph-submenu-child-list a {
    padding: 5px 0;
    font-size: 0.9em;
    color: #555;
}
.rph-menu-desktop-wrapper .rph-location-parent-item > ul.rph-submenu-child-list a:hover,
.rph-menu-desktop-wrapper .rph-location-parent-item > ul.rph-submenu-child-list a:focus {
    color: var(--rph-menu-link-hover-color, #0073aa);
}


@media only screen and (max-width: 1024px) {
	.rph-menu-desktop-wrapper .rph-menu-nav a{
		color: #ffffff;
	}
    
    .rph-menu-desktop-wrapper .rph-menu-nav button{
    	color: #ffffff;
    }
    
    .rph-menu-desktop-wrapper .rph-submenu-panel .rph-submenu-item a{
        color: #444444 !important;
	}
    
    .rph-menu-desktop-wrapper button:hover,
    .rph-menu-desktop-wrapper button:focus,
    .rph-menu-desktop-wrapper a:hover,
    .rph-menu-desktop-wrapper a:focus{
    	color: #fff !important;
    	background-color: #ffffff00 !important;
    }
    
    li.rph-menu-item > a::after,
    li.rph-menu-item > button::after {
        background-color: #fff;
    }

}