/**
 * 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 */
}

/* 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:hover>.rph-submenu-panel,
li.rph-menu-item:focus-within>.rph-submenu-panel,
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):hover>.rph-submenu-panel,
li.rph-menu-item:not(:first-child):not(:last-child):focus-within>.rph-submenu-panel,
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: #f0f0f0; */
}

/* 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;
}

/* --- Nested Group Details/Summary Styling --- */
details.rph-submenu-group-details>summary {
    list-style: none;
    /* Hide default marker */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-weight: 600;
    /* Make headers bold essentially */
}

details.rph-submenu-group-details>summary::-webkit-details-marker {
    display: none;
    /* Hide Chrome/Safari marker */
}

/* Custom Chevron Rotation */
.rph-group-chevron {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

details.rph-submenu-group-details[open]>summary .rph-group-chevron {
    transform: rotate(180deg);
}

/* Hide content animation not trivial with Details, but needed? */
.rph-submenu-group-content {
    /* Margin for content */
    margin-bottom: 15px;
}

/* Static items within custom parent (like Blog, About) - match group header style */
.rph-submenu-static-item {
    padding: 8px 0;
}

.rph-submenu-static-item a,
.rph-submenu-mixed-container .rph-submenu-static-item a,
.rph-submenu-panel .rph-submenu-static-item a {
    font-weight: 600 !important;
    display: block;
    color: var(--rph-menu-link-color, #333);
}

.rph-submenu-static-item a:hover,
.rph-submenu-static-item a:focus,
.rph-submenu-mixed-container .rph-submenu-static-item a:hover,
.rph-submenu-mixed-container .rph-submenu-static-item a:focus {
    color: var(--rph-menu-link-hover-color, #0073aa);
}