/**
 * Responsive Menu Display – Default Stylesheet
 * Version: 0.0.3
 *
 * All selectors use the .rmd- prefix.
 * Override anything in Appearance → Responsive Menu → Custom CSS.
 *
 * CSS class reference
 * ─────────────────────────────────────────────────────────────
 * .rmd-menu-wrapper              Outer wrapper div
 * .rmd-is-modal                  Added to wrapper when mobile_style="modal"
 * .rmd-hamburger-pos-{pos}       Wrapper modifier: positions hamburger
 *   Values: top-left | top-center | top-right
 *           bottom-left | bottom-center | bottom-right
 * .rmd-hamburger                 Toggle button (hidden on desktop)
 * .rmd-hamburger-bar             Each CSS bar inside the default icon
 * .rmd-nav                       <nav> element (all modes)
 * .rmd-nav-desktop               <nav> copy shown on desktop in modal mode
 * .rmd-nav-modal                 <nav> copy inside the modal panel
 * .rmd-menu                      Top-level <ul>
 * .rmd-menu-item                 Every <li>
 * .rmd-menu-item-has-children    Items with a sub-menu
 * .rmd-menu-link                 Every <a>
 * .rmd-submenu                   Nested <ul>
 * .rmd-submenu-toggle            Button to open/close a sub-menu
 * .rmd-submenu-arrow             Arrow icon inside the toggle
 * .rmd-submenu-active            Added to <li> when its sub-menu is open
 * .rmd-is-mobile                 Added to wrapper in mobile view (JS)
 * .rmd-is-tablet                 Added to wrapper in tablet view (JS)
 * .rmd-menu-open                 Added to wrapper when mobile menu is open (JS)
 * .rmd-modal-overlay             Semi-transparent backdrop (modal mode)
 * .rmd-modal-panel               Floating nav drawer (modal mode)
 * .rmd-modal-panel.rmd-modal-open  Panel in its visible/open state
 * .rmd-modal-close               Close ✕ button inside the panel
 * ─────────────────────────────────────────────────────────────
 */

/* ── Reset / base ─────────────────────────────────────────────── */

.rmd-menu-wrapper *,
.rmd-menu-wrapper *::before,
.rmd-menu-wrapper *::after {
	box-sizing: border-box;
}

.rmd-menu-wrapper {
	position: relative;
	font-family: inherit;
}

/* ── Hamburger button ─────────────────────────────────────────── */

.rmd-hamburger {
	display: none;            /* Hidden on desktop; shown at breakpoints below */
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	width: 2.25rem;           /* 36px */
	height: 1.75rem;          /* 28px */
	padding: 0.25rem;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 201;
}

.rmd-hamburger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}

.rmd-hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate bars to ✕ when inline menu is open */
.rmd-menu-open:not(.rmd-is-modal) .rmd-hamburger .rmd-hamburger-bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.rmd-menu-open:not(.rmd-is-modal) .rmd-hamburger .rmd-hamburger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.rmd-menu-open:not(.rmd-is-modal) .rmd-hamburger .rmd-hamburger-bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────
   Hamburger position modifiers
   Wrapper class .rmd-hamburger-pos-{value} controls alignment.
   ──────────────────────────────────────────────────────────── */

.rmd-is-mobile,
.rmd-is-tablet {
	position: relative;
}

/* Reveal hamburger on mobile / tablet */
.rmd-is-mobile .rmd-hamburger,
.rmd-is-tablet .rmd-hamburger {
	display: flex;
	position: relative;
}

/* Top-left (default: in document flow, left-aligned) */
.rmd-hamburger-pos-top-left.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-top-left.rmd-is-tablet .rmd-hamburger {
	margin-left: 0;
	margin-right: auto;
}

/* Top-center */
.rmd-hamburger-pos-top-center.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-top-center.rmd-is-tablet .rmd-hamburger {
	margin-left: auto;
	margin-right: auto;
}

/* Top-right */
.rmd-hamburger-pos-top-right.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-top-right.rmd-is-tablet .rmd-hamburger {
	margin-left: auto;
	margin-right: 0;
}

/* Bottom positions: fixed to the viewport bottom edge */
.rmd-hamburger-pos-bottom-left.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-bottom-left.rmd-is-tablet .rmd-hamburger,
.rmd-hamburger-pos-bottom-center.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-bottom-center.rmd-is-tablet .rmd-hamburger,
.rmd-hamburger-pos-bottom-right.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-bottom-right.rmd-is-tablet .rmd-hamburger {
	position: fixed;
	bottom: 1.5rem;
	z-index: 300;
}

.rmd-hamburger-pos-bottom-left.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-bottom-left.rmd-is-tablet .rmd-hamburger {
	left: 1.5rem;
}

.rmd-hamburger-pos-bottom-center.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-bottom-center.rmd-is-tablet .rmd-hamburger {
	left: 50%;
	transform: translateX(-50%);
}

.rmd-hamburger-pos-bottom-right.rmd-is-mobile .rmd-hamburger,
.rmd-hamburger-pos-bottom-right.rmd-is-tablet .rmd-hamburger {
	right: 1.5rem;
}

/* ── Desktop navigation (all non-modal modes + modal desktop copy) ── */

.rmd-nav {
	width: 100%;
}

.rmd-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.rmd-menu-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.rmd-menu-link {
	display: block;
	padding: 0.65rem 1rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.rmd-menu-link:hover,
.rmd-menu-link:focus {
	text-decoration: underline;
}

.rmd-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0 0.3rem;
	color: inherit;
	font-size: 0.65em;
	line-height: 1;
	vertical-align: middle;
}

.rmd-submenu-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.rmd-submenu-active > .rmd-submenu-toggle .rmd-submenu-arrow {
	transform: rotate(180deg);
}

/* ── Sub-menu (desktop: absolute drop-down) ──────────────────── */

.rmd-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 190px;
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
	border-top: 2px solid #0073aa;
}

.rmd-menu-item-has-children:hover > .rmd-submenu,
.rmd-menu-item-has-children:focus-within > .rmd-submenu,
.rmd-menu-item-has-children.rmd-submenu-active > .rmd-submenu {
	display: block;
}

.rmd-submenu .rmd-menu-item {
	width: 100%;
}

.rmd-submenu .rmd-menu-link {
	white-space: normal;
	padding: 0.5rem 1rem;
}

.rmd-submenu .rmd-submenu {
	top: 0;
	left: 100%;
}

/* ─────────────────────────────────────────────────────────────
   Modal mode – desktop state
   On desktop (.rmd-is-modal without .rmd-is-mobile / .rmd-is-tablet):
     - .rmd-nav-desktop is visible as a normal horizontal menu.
     - .rmd-hamburger is hidden (display:none default).
     - .rmd-modal-panel stays off-screen (transform keeps it invisible).
   ──────────────────────────────────────────────────────────── */

/*
 * Hide the desktop nav copy when the mobile/tablet hamburger is active.
 * The modal copy inside the panel takes over instead.
 */
.rmd-is-modal.rmd-is-mobile .rmd-nav-desktop,
.rmd-is-modal.rmd-is-tablet .rmd-nav-desktop {
	display: none;
}

/* ── Mobile / Tablet: inline modes (slide, fade, dropdown) ───── */
/*
 * JS adds .rmd-is-tablet or .rmd-is-mobile to the wrapper.
 * These rules apply to NON-modal wrappers only.
 * We scope with :not(.rmd-is-modal) to avoid accidentally hiding
 * the .rmd-nav-modal inside the panel.
 */

.rmd-is-tablet:not(.rmd-is-modal) .rmd-nav,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-nav {
	width: 100%;
	overflow: hidden;
}

/* Collapsed by default; JS adds .rmd-nav-open to reveal */
.rmd-is-tablet:not(.rmd-is-modal) .rmd-nav:not(.rmd-nav-open),
.rmd-is-mobile:not(.rmd-is-modal) .rmd-nav:not(.rmd-nav-open) {
	display: none;
}

.rmd-is-tablet:not(.rmd-is-modal) .rmd-nav.rmd-nav-open,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-nav.rmd-nav-open {
	display: block;
}

/* Stack items vertically on mobile/tablet */
.rmd-is-tablet:not(.rmd-is-modal) .rmd-menu,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-menu {
	flex-direction: column;
	flex-wrap: nowrap;
}

.rmd-is-tablet:not(.rmd-is-modal) .rmd-menu-item,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-menu-item {
	width: 100%;
}

/* Sub-menus: static positioning (no absolute drop-down) */
.rmd-is-tablet:not(.rmd-is-modal) .rmd-submenu,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-submenu {
	position: static;
	box-shadow: none;
	border-top: none;
	padding-left: 1rem;
	min-width: 0;
}

/* Disable hover-open on mobile/tablet; use toggle button only */
.rmd-is-tablet:not(.rmd-is-modal) .rmd-menu-item-has-children:hover > .rmd-submenu,
.rmd-is-tablet:not(.rmd-is-modal) .rmd-menu-item-has-children:focus-within > .rmd-submenu,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-menu-item-has-children:hover > .rmd-submenu,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-menu-item-has-children:focus-within > .rmd-submenu {
	display: none;
}

.rmd-is-tablet:not(.rmd-is-modal) .rmd-menu-item-has-children.rmd-submenu-active > .rmd-submenu,
.rmd-is-mobile:not(.rmd-is-modal) .rmd-menu-item-has-children.rmd-submenu-active > .rmd-submenu {
	display: block;
}

/* Slide animation helpers (added/removed by JS) */
.rmd-nav-sliding {
	transition: max-height var(--rmd-speed, 300ms) ease,
	            opacity    var(--rmd-speed, 300ms) ease;
	overflow: hidden;
}

.rmd-nav-fading {
	transition: opacity var(--rmd-speed, 300ms) ease;
}

/* ─────────────────────────────────────────────────────────────
   Modal overlay mode – mobile/tablet panel + backdrop
   ──────────────────────────────────────────────────────────── */

/* Backdrop: full-viewport, behind the panel */
.rmd-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--rmd-speed, 300ms) ease;
}

/* Show backdrop when wrapper has .rmd-menu-open */
.rmd-menu-open .rmd-modal-overlay {
	display: block;
	opacity: 1;
}

/*
 * Panel: always in the DOM, starts off-screen to the left.
 * Visibility is controlled PURELY by CSS transform + opacity + .rmd-modal-open.
 * No HTML `hidden` attribute is used, which means:
 *   (a) The nav inside is never blocked by hidden-element rendering.
 *   (b) The nav inside never needs .rmd-nav-open to be visible.
 *
 * On desktop the panel is unreachable (off-screen, pointer-events:none)
 * so users can't accidentally interact with it.
 */
.rmd-modal-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: #fff;
	z-index: 999;
	overflow-y: auto;
	padding: 3rem 1rem 1.5rem; /* Extra top padding for the close button */
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);

	/* Off-screen / invisible by default */
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;        /* Not interactive while hidden */
	transition: transform var(--rmd-speed, 300ms) ease,
	            opacity   var(--rmd-speed, 300ms) ease;
}

/* Visible state – JS adds .rmd-modal-open to the panel */
.rmd-modal-panel.rmd-modal-open {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}

/* Close button */
.rmd-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: 1px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: background 0.15s ease;
}

.rmd-modal-close:hover,
.rmd-modal-close:focus-visible {
	background: #f0f0f0;
}

/*
 * Nav INSIDE the modal panel (.rmd-nav-modal):
 *
 * KEY FIX: .rmd-nav-modal must NEVER be hidden by the
 * .rmd-is-mobile .rmd-nav:not(.rmd-nav-open) { display:none } rule.
 * We achieve this by scoping those rules with :not(.rmd-is-modal) above,
 * and by explicitly ensuring .rmd-nav-modal is always displayed here.
 *
 * The nav is stacked (column) regardless of viewport width because it
 * lives inside the narrow panel.
 */
.rmd-modal-panel .rmd-nav-modal {
	display: block !important; /* Override any inherited display:none */
	width: 100%;
	overflow: visible;
}

.rmd-modal-panel .rmd-menu {
	flex-direction: column;
	flex-wrap: nowrap;
}

.rmd-modal-panel .rmd-menu-item {
	width: 100%;
}

/* Sub-menus inside panel: static, indented */
.rmd-modal-panel .rmd-submenu {
	position: static;
	box-shadow: none;
	border-top: none;
	padding-left: 1rem;
	min-width: 0;
	display: none;
}

/* Disable hover/focus-within open inside panel; use toggle button only */
.rmd-modal-panel .rmd-menu-item-has-children:hover > .rmd-submenu,
.rmd-modal-panel .rmd-menu-item-has-children:focus-within > .rmd-submenu {
	display: none;
}

/* Open via JS toggle */
.rmd-modal-panel .rmd-menu-item-has-children.rmd-submenu-active > .rmd-submenu {
	display: block;
}

/* ── Accessibility ────────────────────────────────────────────── */

.rmd-menu-link:focus:not(:focus-visible) {
	outline: none;
}

.rmd-menu-item.current-menu-item > .rmd-menu-link,
.rmd-menu-item.current_page_item > .rmd-menu-link {
	font-weight: bold;
}