/* Dropdown Menu - theme independent.
   Everything is scoped under .ddm-parent / .ddm-panel, and the colours come
   from custom properties set by the JavaScript, so no theme is overridden.

   The floating/inline switch is driven by .ddm-mode-floating / .ddm-mode-inline
   on the parent item rather than a media query, because the breakpoint is
   configurable and media queries cannot read a custom property. */

.ddm-parent {
	position: relative;
}

/* Container created for themes whose links are not inside an <li>. It has to be
   invisible to the theme's own layout: a <span> stays inline like the anchor it
   wraps, and a <li> keeps whatever list styling the theme already applies. */
.ddm-item {
	display: inline-block;
}

li.ddm-item {
	display: list-item;
}

.ddm-toggle {
	cursor: pointer;
}

/* Small caret, drawn with borders so it needs no font or image. */
.ddm-toggle::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.4em;
	vertical-align: middle;
	border-left: 0.28em solid transparent;
	border-right: 0.28em solid transparent;
	border-top: 0.32em solid currentColor;
	opacity: 0.65;
	transition: transform 0.15s ease;
}

.ddm-open > .ddm-toggle::after,
.ddm-mode-floating.ddm-navigate:hover > .ddm-toggle::after,
.ddm-mode-floating.ddm-navigate:focus-within > .ddm-toggle::after {
	transform: rotate(180deg);
}

.ddm-panel {
	display: none;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: var(--ddm-bg, #1e252d);
	color: var(--ddm-text, #ffffff);
}

.ddm-parent.ddm-open > .ddm-panel {
	display: block;
}

/* Children inside the panel are plain links: no bullet, no inherited indent. */
.ddm-panel > .ddm-child {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Themes very often guard their nav links with `color: ... !important`, so the
   panel needs the same flag to honour the configured colours. In inherit mode
   this is still the theme's own background, just with a contrast-safe text. */
.ddm-panel > .ddm-child > a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--ddm-text, #ffffff) !important;
	text-decoration: none;
	white-space: nowrap;
}

/* Accent (or the configured colour) only on hover. Resting and visited states
   keep the panel text colour so they stay readable. */
.ddm-panel > .ddm-child > a:visited {
	color: var(--ddm-text, #ffffff) !important;
}

.ddm-panel > .ddm-child > a:hover,
.ddm-panel > .ddm-child > a:focus {
	color: var(--ddm-accent, #d80000) !important;
}

/* The child that matches the current page is marked with a left bar instead of
   a colour, so it never competes with the hover accent. */
.ddm-panel > .ddm-child.ddm-current > a {
	box-shadow: inset 3px 0 0 0 var(--ddm-accent, #d80000);
}

/* Desktop: the panel floats over the page. */
.ddm-parent.ddm-mode-floating > .ddm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 10rem;
	box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
}

.ddm-parent.ddm-mode-floating > .ddm-panel.ddm-up {
	top: auto;
	bottom: 100%;
}

/* Open state. In navigate mode the click goes to the parent page, so hover is
   what opens the panel; keyboard users still reach it through focus-within.
   Mobile: the panel opens inline, pushing the content down instead of floating,
   which is what works inside a collapsed hamburger menu.
   Hover is deliberately absent at this size. A touch device fires hover on the
   first tap, but a tap is also what follows the parent link, so an open-on-hover
   rule would let the browser leave for the parent in the same gesture and the
   children would never be seen. Above the breakpoint the parent link is out of
   reach of a hover that leaves the page, so there it stays: the rule below is
   scoped to .ddm-mode-floating. */
.ddm-parent.ddm-mode-inline > .ddm-panel,
.ddm-parent.ddm-mode-floating.ddm-navigate:hover > .ddm-panel,
.ddm-parent.ddm-mode-floating.ddm-navigate:focus-within > .ddm-panel {
	display: block;
}

.ddm-parent.ddm-mode-inline > .ddm-panel {
	position: static;
	width: 100%;
	box-shadow: none;
}

.ddm-parent.ddm-mode-inline > .ddm-panel > .ddm-child > a {
	padding-left: 1.75rem;
}