/**
 * RPH Menu Builder - Common Styles
 * Applies to both desktop and mobile menus.
 */

/* Use CSS Variables defined in inline style */
:root {
	--rph-menu-font-family: inherit;
	--rph-menu-font-weight: normal;
	--rph-menu-link-color: #333;
	--rph-menu-link-hover-color: #0073aa;
	--rph-menu-bg-color: #fff;
}

/* Basic Reset for Menu Elements */
.rph-menu-desktop-wrapper *,
.rph-menu-mobile-wrapper *,
.rph-menu-desktop-wrapper *::before,
.rph-menu-mobile-wrapper *::before,
.rph-menu-desktop-wrapper *::after,
.rph-menu-mobile-wrapper *::after {
	box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Apply base font family higher up */
.rph-menu-desktop-wrapper,
.rph-menu-mobile-wrapper {
    font-family: var(--rph-menu-font-family, inherit);
}

.rph-menu-desktop-wrapper ul,
.rph-menu-mobile-wrapper ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Common Link Styles */
.rph-menu-desktop-wrapper a,
.rph-menu-mobile-wrapper a {
	/* font-family inherited */
	font-weight: var(--rph-menu-font-weight, normal);
	color: var(--rph-menu-link-color, #333);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
	display: inline-block; /* Ensures padding/margin apply correctly */
    vertical-align: middle;
}

.rph-menu-desktop-wrapper a:hover,
.rph-menu-desktop-wrapper a:focus,
.rph-menu-mobile-wrapper a:hover,
.rph-menu-mobile-wrapper a:focus {
	color: var(--rph-menu-link-hover-color, #0073aa);
    outline: 2px solid transparent; /* Basic focus outline */
    outline-offset: 2px;
}
.rph-menu-desktop-wrapper a:focus-visible,
.rph-menu-mobile-wrapper a:focus-visible {
     outline-color: var(--rph-menu-link-hover-color, #0073aa); /* Better focus visibility */
}


/* Common Button Styles (for dropdowns/accordions) */
.rph-menu-desktop-wrapper button,
.rph-menu-mobile-wrapper button {
	font-family: inherit; /* Inherit font family */
	font-weight: var(--rph-menu-font-weight, normal);
	color: var(--rph-menu-link-color, #333);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-align: left;
	display: inline-block;
    transition: color 0.2s ease-in-out;
    vertical-align: middle; /* Align with text */
    font-size: inherit; /* Inherit font size */
}

.rph-menu-desktop-wrapper button:hover,
.rph-menu-desktop-wrapper button:focus,
.rph-menu-mobile-wrapper button:hover,
.rph-menu-mobile-wrapper button:focus {
	color: var(--rph-menu-link-hover-color, #0073aa);
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.rph-menu-desktop-wrapper button:focus-visible,
.rph-menu-mobile-wrapper button:focus-visible {
    outline-color: var(--rph-menu-link-hover-color, #0073aa); /* Better focus visibility */
}


/* Common Indicator Styles (Top Level Dropdown / Accordion) */
.rph-dropdown-indicator,
.rph-accordion-indicator {
    display: inline-block;
    margin-left: 0.4em;
    font-size: 0.8em; /* Adjust size */
    line-height: 1;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* Visually hidden class for accessibility text */
.rph-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* Prevent line breaks */
}

/* --- Styles for Location Parent Children Toggle (COMMON parts) --- */

/* Style the toggle button itself */
.rph-location-child-toggle {
    background: none;
    border: none;
    color: inherit; /* Match link color */
    cursor: pointer;
    padding: 5px 8px; /* Tappable area */
    margin-left: 5px; /* Space from link */
    display: inline-flex; /* Keep inline, align chevron */
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* Align with link */
    line-height: 1; /* Prevent extra space */
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.3s ease;
    position: relative; /* Context if needed */
    flex-shrink: 0; /* Prevent shrinking */
}

.rph-location-child-toggle:hover,
.rph-location-child-toggle:focus {
    opacity: 1;
    outline: 1px dotted currentColor; /* Simple focus */
    outline-offset: 1px;
}

.rph-location-child-toggle .rph-submenu-child-indicator {
    margin-left: 0; /* Indicator is the button content */
    font-size: 1.1em; /* Make chevron slightly bigger maybe */
    transition: transform 0.3s ease;
    display: inline-block; /* Ensure indicator takes space */
}

/* Rotate chevron when open */
.rph-location-child-toggle[aria-expanded="true"] .rph-submenu-child-indicator {
    transform: rotate(90deg); /* Point down */
}

/* Hide/Show the child list (using max-height for transitions) */
.rph-location-parent-item > ul.rph-submenu-child-list {
    /* display: none; <-- Avoid display:none for transitions */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out, margin 0.35s ease-out;
    margin-top: 0; /* Start hidden */
    padding-top: 0;
    padding-bottom: 0;
    list-style: none; /* Ensure no bullets */
    /* Ensure it takes block space for height calc */
    display: block;
}

/* State when open */
.rph-location-parent-item.is-location-children-open > ul.rph-submenu-child-list:not([hidden]) {
    max-height: 1000px; /* Adjust if extremely long lists possible */
    transition: max-height 0.4s ease-in, padding 0.4s ease-in, margin 0.4s ease-in;
    margin-top: 5px; /* Space when open */
    margin-bottom: 10px;
    padding-top: 5px; /* Padding when open */
    padding-bottom: 5px;
}

/* Remove the old direct link indicator rule if it exists */
.rph-submenu-item > a > .rph-submenu-child-indicator {
    display: none; /* Hide indicator if accidentally added directly to link */
}