/**
 * Mobile menu panel (cws-suite/menu-panel.php), modelled on the old dentico.hr mobile menu.
 *
 * Selectors are scoped under the panel so they beat the Elementor kit's
 * button / link rules (0,1,1) without !important.
 */

.mobile-menu-custom-panel .dentico-menu {
	--dentico-menu-bg: #082970;
	--dentico-menu-sub-bg: var(--e-global-color-primary, #07388d);
	--dentico-menu-text: #ffffff;
	--dentico-menu-icon: var(--e-global-color-5f4b1037, #6e7078);
	--dentico-menu-inset: 36px;
	--dentico-menu-bar-pad: 24px;
	--dentico-menu-logo: 260px;

	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: var(--dentico-menu-bg);
	color: var(--dentico-menu-text);
}

/* Header bar: same box as the site header (60px on tablet and mobile), so the header appears to stay in place. */
.mobile-menu-custom-panel .dentico-menu__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
	min-height: 60px;
	padding: 0 var(--dentico-menu-bar-pad);
	background: #ffffff;
	border-bottom: 1px solid #f2f2f5;
}

.mobile-menu-custom-panel .dentico-menu__logo {
	display: block;
	width: var(--dentico-menu-logo);
	max-width: 100%;
	margin-top: 3px; /* lines the logo up with the one in the site header */
	line-height: 0;
}

.mobile-menu-custom-panel .dentico-menu__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.mobile-menu-custom-panel .dentico-menu__close,
.mobile-menu-custom-panel .dentico-menu__close:hover,
.mobile-menu-custom-panel .dentico-menu__close:focus {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 -12px 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dentico-menu-icon);
	cursor: pointer;
}

.mobile-menu-custom-panel .dentico-menu__close-icon {
	display: block;
	line-height: 0;
}

.mobile-menu-custom-panel .dentico-menu__body {
	flex: 1 0 auto;
	padding: 16px 0 40px;
}

/* Navigation */
.mobile-menu-custom-panel .dentico-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu-custom-panel .dentico-menu__item {
	margin: 0;
	padding: 0;
}

.mobile-menu-custom-panel .dentico-menu__link,
.mobile-menu-custom-panel .dentico-menu__link:hover,
.mobile-menu-custom-panel .dentico-menu__link:focus {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 8px var(--dentico-menu-inset) 8px 24px;
	color: var(--dentico-menu-text);
	font-family: var(--e-global-typography-14bcbbe5-font-family, "Barlow Semi Condensed"), sans-serif;
	font-size: 22.4px;
	font-style: italic;
	font-weight: 400;
	line-height: 32px;
	text-align: right;
	text-decoration: none;
	text-transform: lowercase;
}

.mobile-menu-custom-panel .dentico-menu__chevron {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	transition: transform 250ms ease;
}

.mobile-menu-custom-panel .dentico-menu__item.is-open > .dentico-menu__link .dentico-menu__chevron {
	transform: rotate(180deg);
}

/* Submenu: opens in place. The grid row animates from 0 to the content height. */
.mobile-menu-custom-panel .dentico-menu__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms ease;
}

.mobile-menu-custom-panel .dentico-menu__item.is-open > .dentico-menu__sub {
	grid-template-rows: 1fr;
}

.mobile-menu-custom-panel .dentico-menu__sub-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 300ms;
}

.mobile-menu-custom-panel .dentico-menu__item.is-open > .dentico-menu__sub > .dentico-menu__sub-inner {
	visibility: visible;
	transition-delay: 0s;
}

.mobile-menu-custom-panel .dentico-menu__list--level-2 {
	margin: 10px 0;
	padding: 24px 0;
	background: var(--dentico-menu-sub-bg);
}

.mobile-menu-custom-panel .dentico-menu__list--level-2 .dentico-menu__item {
	margin-bottom: 24px;
}

.mobile-menu-custom-panel .dentico-menu__list--level-2 .dentico-menu__link,
.mobile-menu-custom-panel .dentico-menu__list--level-2 .dentico-menu__link:hover,
.mobile-menu-custom-panel .dentico-menu__list--level-2 .dentico-menu__link:focus {
	min-height: 32px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 20px;
}

/* Deeper levels, should the menu ever get them. */
.mobile-menu-custom-panel .dentico-menu__list--level-2 .dentico-menu__list {
	margin: 24px 0 0;
	padding: 24px 0 0;
	background: rgba(0, 0, 0, 0.15);
}

.mobile-menu-custom-panel .dentico-menu__link:focus-visible,
.mobile-menu-custom-panel .dentico-menu__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Contact links and the optional extra block (Elementor templates picked in the widget). */
.mobile-menu-custom-panel .dentico-menu__contact {
	margin-top: 40px;
	padding: 0 var(--dentico-menu-inset) 0 24px;
}

.mobile-menu-custom-panel .dentico-menu__extra {
	padding: 0 var(--dentico-menu-inset) 16px 24px;
}

/* Elementor mobile breakpoint: the site header switches to 16px side padding and a 170px logo. */
@media (max-width: 767px) {
	.mobile-menu-custom-panel .dentico-menu {
		--dentico-menu-bar-pad: 16px;
		--dentico-menu-logo: 170px;
	}
}

/*
 * Opening: the panel appears in place under the header instead of sliding in
 * from the side. Applies only when this panel is in use; browsers without
 * :has() keep the widget's own slide.
 */
.mobile-menu-wrap .mobile-menu-content.mobile-menu-content:has(> .mobile-menu-custom-panel > .dentico-menu) {
	left: 0;
	right: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.mobile-menu-wrap .mobile-menu-content.mobile-menu-content.active:has(> .mobile-menu-custom-panel > .dentico-menu) {
	left: 0;
	right: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease, visibility 0s;
}

.mobile-menu-content:has(> .mobile-menu-custom-panel > .dentico-menu) .dentico-menu__body {
	transform: translateY(-12px);
	transition: transform 300ms ease;
}

.mobile-menu-content.active:has(> .mobile-menu-custom-panel > .dentico-menu) .dentico-menu__body {
	transform: none;
}

/*
 * Hamburger: the old site's three lines of different length. The widget's own
 * icon stays in the markup (it is the click target) and is only made transparent.
 * Remove this block to get the widget's icon and its colour control back.
 */
.mobile-menu-wrap:has(.dentico-menu) .mobile-menu-trigger .icon.open-menu {
	display: block;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 27'%3E%3Cpath fill='%236e7078' d='M0 0h54v2.9H0zM0 11.9h33v3H0zM0 23.9h48.1v2.9H0z'/%3E%3C/svg%3E") right center / 30px auto no-repeat;
	cursor: pointer;
}

.mobile-menu-wrap:has(.dentico-menu) .mobile-menu-trigger .icon.open-menu svg {
	display: block;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu-custom-panel .dentico-menu__sub,
	.mobile-menu-custom-panel .dentico-menu__sub-inner,
	.mobile-menu-custom-panel .dentico-menu__chevron,
	.mobile-menu-custom-panel .dentico-menu__body,
	.mobile-menu-wrap .mobile-menu-content.mobile-menu-content:has(> .mobile-menu-custom-panel > .dentico-menu) {
		transition: none;
	}
}