/* Artmark dropdown buttons: a button that opens a small menu of links or
   downloads under itself. Shared by Artmark Hero (Video) and Artmark
   Manufacturers & Downloads; driven by assets/js/artmark-hero-dd.js.
   Moved here unchanged from artmark-hero.css, which now loads this file
   as a dependency. */

/* ---------------------------------------------------------------- */
/* Dropdown buttons                                                  */
/* ---------------------------------------------------------------- */

/* A hero button of type "Dropdown". The menu is out of flow, and while open
   artmark-hero-dd.js moves it into a portal on <body>, because .am-hero clips
   its overflow for the video and would cut the menu off at the hero's bottom
   edge. Either way it never adds height to the section. The portal mirrors the
   Elementor document + widget classes, so the {{WRAPPER}} control CSS below
   keeps applying to the moved menu. */
.am-hero__dd {
	position: relative;
	display: inline-flex;
}

.am-hero__dd-toggle {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.am-dd-portal {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: visible;
}

.am-dd-portal > .am-dd-portal__scope,
.am-dd-portal > .am-dd-portal__scope.elementor-element {
	position: static;
	width: 0;
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
	transform: none;
	opacity: 1;
}

.am-hero__dd-menu {
	--am-dd-offset: 8px;
	--am-dd-align: left;
	--am-dd-match: 0;
	--am-dd-c: #020713;
	--am-dd-c-h: #020713;
	--am-dd-ibg: transparent;
	--am-dd-ibg-h: #d3edfe;
	--am-dd-ic: #0080b8;
	--am-dd-ic-h: #0080b8;
	--am-dd-div-c: transparent;
	--am-dd-div-w: 0px;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9990;
	box-sizing: border-box;
	min-width: 260px;
	max-width: calc(100vw - 16px);
	margin: 0;
	padding: 4px;
	border: 0 solid transparent;
	border-radius: 0;
	background-color: #ffffff;
	box-shadow: 0 12px 32px 0 rgba(2, 7, 19, 0.18);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.am-hero__dd-menu[hidden] {
	display: none;
}

/* Position is measured with the transform off so the slide-in can't skew it. */
.am-hero__dd-menu.is-measuring {
	transform: none;
	transition: none;
}

.am-hero__dd-menu.is-open {
	opacity: 1;
	transform: none;
}

/* Grouped state list: themes colour a:hover / a:focus with selectors that beat
   a bare class, so every state is pinned and colours ride custom properties. */
.am-hero__dd-item,
.am-hero__dd-item:hover,
.am-hero__dd-item:focus,
.am-hero__dd-item:focus-visible,
.am-hero__dd-item:active,
.am-hero__dd-item:visited {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	color: var(--am-dd-c);
	background-color: var(--am-dd-ibg);
	border: 0;
	box-shadow: none;
	outline: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.am-hero__dd-item + .am-hero__dd-item {
	border-top: var(--am-dd-div-w) solid var(--am-dd-div-c);
}

.am-hero__dd-item:hover,
.am-hero__dd-item:focus-visible {
	color: var(--am-dd-c-h);
	background-color: var(--am-dd-ibg-h);
}

.am-hero__dd-item:focus-visible {
	outline: 2px solid var(--am-dd-ic);
	outline-offset: -2px;
}

.am-hero__dd-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--am-dd-ic);
	transition: color 0.15s ease;
}

.am-hero__dd-item:hover .am-hero__dd-icon,
.am-hero__dd-item:focus-visible .am-hero__dd-icon {
	color: var(--am-dd-ic-h);
}

.am-hero__dd-icon svg,
.am-hero__dd-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.am-hero__dd-label {
	min-width: 0;
}

@media (max-width: 767px) {
	.am-hero__dd {
		max-width: 100%;
	}

	.am-hero__dd-item,
	.am-hero__dd-item:hover,
	.am-hero__dd-item:focus,
	.am-hero__dd-item:active {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.am-hero__dd-menu {
		transform: none;
		transition: none;
	}
}