/**
 * Lemvig Custom Menu Stylesheet
 * BEM naming convention: .lb-custom-menu, .lb-desktop-menu, .lb-mobile-overlay, etc.
 *
 * Structure:
 * 1. Base
 * 2. Scoped Mobile CSS Reset
 * 3. Screen reader helper
 * 4. Desktop menu
 * 5. Desktop dropdown
 * 6. Desktop dropdown arrows
 * 7. Mobile/tablet layout
 * 8. Mobile accordion (Slider Panels)
 * 9. Active states
 * 10. Focus states
 * 11. Reduced motion
 */

/* ==========================================================================
   1. Base
   ========================================================================== */
.lb-custom-menu {
	/* Brand Color Palette Variables */
	--lb-black: #111111;
	--lb-graphite: #1E2328;
	--lb-red: #E5322C;
	--lb-red-hover: #C92520;
	--lb-concrete: #D9D7D2;
	--lb-light-concrete: #ECE7DE;
	--lb-offwhite: #F5F4F1;
	--lb-steel: #6F767C;
	--lb-green: #3F6B4F;

	position: relative;
	width: 100%;
}

.lb-custom-menu * {
	box-sizing: border-box;
}

/* Ensure overlay is positioned relative to screen */
body.lb-mobile-menu-active {
	overflow: hidden;
}

/* ==========================================================================
   2. Scoped Mobile CSS Reset - Protect against theme/Elementor global styling
   ========================================================================== */
.lb-mobile-overlay button {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
}

.lb-mobile-overlay a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   3. Screen reader helper
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   4. Desktop menu
   ========================================================================== */
.lb-custom-menu__desktop {
	display: block;
}

.lb-desktop-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end; /* Overridden by Elementor Alignment Control */
	gap: clamp(18px, 2vw, 28px);
}

.lb-desktop-menu__item {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lb-desktop-menu__link {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding-block: 14px;
	color: var(--lb-black);
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms ease;
}

/* Underline slide effect on desktop */
.lb-desktop-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px; /* Overridden by Elementor */
	background: var(--lb-red); /* Overridden by Elementor */
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
}

.lb-desktop-menu__link:hover::after,
.lb-desktop-menu__link:focus-visible::after,
.lb-desktop-menu__item--current > .lb-desktop-menu__link::after,
.lb-desktop-menu__item--ancestor > .lb-desktop-menu__link::after {
	transform: scaleX(1);
}

.lb-desktop-menu__link:hover,
.lb-desktop-menu__link:focus-visible {
	color: var(--lb-red);
}

/* ==========================================================================
   5. Desktop dropdown
   ========================================================================== */
.lb-desktop-menu__submenu {
	list-style: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: clamp(260px, 24vw, 340px); /* Overridden by Elementor */
	padding: 8px; /* Overridden by Elementor */
	margin: 0;
	background: #FFFFFF; /* Overridden by Elementor */
	border: 1px solid var(--lb-concrete); /* Overridden by Elementor */
	border-radius: 2px; /* Overridden by Elementor */
	box-shadow: 0 18px 45px rgba(17, 17, 17, 0.12); /* Overridden by Elementor */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
	z-index: 1000;
}

/* Open dropdown on hover / keyboard focus-within */
.lb-desktop-menu__item:hover > .lb-desktop-menu__submenu,
.lb-desktop-menu__item:focus-within > .lb-desktop-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lb-desktop-menu__submenu-item {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lb-desktop-menu__submenu-link {
	display: block;
	padding: 12px 14px; /* Overridden by Elementor */
	color: var(--lb-black); /* Overridden by Elementor */
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: 14px; /* Overridden by Elementor */
	font-weight: 500; /* Overridden by Elementor */
	line-height: 1.35; /* Overridden by Elementor */
	text-decoration: none;
	transition: color 150ms ease, background-color 150ms ease;
	border-radius: 2px;
}

.lb-desktop-menu__submenu-link:hover,
.lb-desktop-menu__submenu-link:focus-visible {
	color: var(--lb-red); /* Overridden by Elementor */
	background: var(--lb-offwhite); /* Overridden by Elementor */
}

/* Flat nesting of grandchildren in dropdown */
.lb-desktop-menu__submenu .lb-desktop-menu__submenu {
	position: static;
	width: auto;
	box-shadow: none;
	border: none;
	padding: 0 0 0 16px;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
}

/* ==========================================================================
   6. Desktop dropdown arrows
   ========================================================================== */
.lb-desktop-menu__link--has-children {
	display: inline-flex;
	align-items: center;
	gap: 0.45em; /* Overridden by Elementor */
}

.lb-desktop-menu__arrow {
	width: 0.42em; /* Overridden by Elementor */
	height: 0.42em; /* Overridden by Elementor */
	border-right: 2px solid currentColor; /* Overridden by Elementor */
	border-bottom: 2px solid currentColor; /* Overridden by Elementor */
	transform: translateY(-0.12em) rotate(45deg);
	transition: transform 180ms ease, color 180ms ease;
	flex: 0 0 auto;
}

/* Desktop Arrow rotation on Hover/Focus */
.lb-desktop-menu__item:hover > .lb-desktop-menu__link .lb-desktop-menu__arrow,
.lb-desktop-menu__item:focus-within > .lb-desktop-menu__link .lb-desktop-menu__arrow {
	transform: translateY(0.05em) rotate(225deg);
}

/* ==========================================================================
   7. Mobile/tablet layout
   ========================================================================== */
.lb-custom-menu .lb-mobile-trigger {
	display: none; /* Hidden on desktop viewports */
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 44px;
	height: 38px;
	padding: 12px 10px;
	border: 1px solid var(--lb-concrete);
	border-radius: 2px;
	background: transparent;
	color: var(--lb-black);
	cursor: pointer;
}

.lb-custom-menu .lb-mobile-trigger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transition: transform 180ms ease, opacity 180ms ease;
}

/* Hamburger state */
.lb-custom-menu .lb-mobile-trigger span:nth-child(2) {
	width: 80%;
	align-self: flex-start;
}

/* Fullscreen dark slide-in overlay */
.lb-mobile-overlay {
	position: fixed;
	inset: 0 0 0 auto;
	width: 100%;
	max-width: 100vw; /* Overridden by Elementor */
	height: 100vh;
	z-index: 99999;
	background: radial-gradient(circle at 86% 8%, rgba(229, 50, 44, 0.1), transparent 34%),
		linear-gradient(145deg, #111111, #1E2328); /* Overridden by Elementor */
	color: #FFFFFF; /* Overridden by Elementor */
	display: flex;
	flex-direction: column;

	/* Slide transition details */
	transform: translate3d(100%, 0, 0);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 480ms cubic-bezier(.19, 1, .22, 1),
		opacity 480ms cubic-bezier(.19, 1, .22, 1),
		visibility 480ms cubic-bezier(.19, 1, .22, 1);
}

.lb-mobile-overlay.is-open {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Mobile Header & Close button */
.lb-mobile-overlay__header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 58px;
	padding: 1rem clamp(1rem, 4vw, 1.5rem) 0.5rem;
	flex: 0 0 auto;
}

.lb-mobile-overlay .lb-mobile-close {
	position: relative;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.16); /* Overridden by Elementor */
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF; /* Overridden by Elementor */
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.lb-mobile-overlay .lb-mobile-close:hover,
.lb-mobile-overlay .lb-mobile-close:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Close icon lines (X shape) */
.lb-mobile-overlay .lb-mobile-close__line {
	position: absolute;
	width: 16px;
	height: 2px;
	background-color: currentColor;
}
.lb-mobile-overlay .lb-mobile-close__line--one {
	transform: rotate(45deg);
}
.lb-mobile-overlay .lb-mobile-close__line--two {
	transform: rotate(-45deg);
}

/* When the widget is set in mobile view, swap views */
.lb-custom-menu--mobile .lb-custom-menu__desktop {
	display: none !important;
}

.lb-custom-menu--mobile .lb-mobile-trigger {
	display: inline-flex;
}

/* ==========================================================================
   8. Mobile accordion (Slider Panels)
   ========================================================================== */
.lb-mobile-overlay .lb-mobile-slider {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.lb-mobile-overlay .lb-mobile-slider__track {
	height: 100%;
	display: flex;
	width: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform 420ms cubic-bezier(.19, 1, .22, 1);
	will-change: transform;
}

.lb-mobile-overlay .lb-mobile-panel {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 0.75rem clamp(1rem, 4vw, 1.5rem) 1.25rem; /* Overridden by Elementor */
}

/* Hidden by default except active slider panel */
.lb-mobile-overlay .lb-mobile-panel[aria-hidden="true"] {
	visibility: hidden;
	pointer-events: none;
}
.lb-mobile-overlay .lb-mobile-panel[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

/* Root list layout */
.lb-mobile-overlay .lb-mobile-nav {
	display: grid;
	gap: 0.25rem;
	padding-top: 0.35rem;
}

.lb-mobile-overlay .lb-mobile-nav__item {
	width: 100%;
	min-height: 62px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Overridden by Elementor */
	background: transparent;
	color: rgba(255, 255, 255, 0.72); /* Overridden by Elementor */
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: clamp(28px, 8vw, 42px); /* Overridden by Elementor */
	font-weight: 700; /* Overridden by Elementor */
	line-height: 0.95; /* Overridden by Elementor */
	letter-spacing: -0.04em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms ease;
}

.lb-mobile-overlay .lb-mobile-nav__item:hover,
.lb-mobile-overlay .lb-mobile-nav__item:focus-visible {
	color: #FFFFFF; /* Overridden by Elementor */
}

.lb-mobile-overlay .lb-mobile-nav__arrow {
	color: rgba(255, 255, 255, 0.4); /* Overridden by Elementor */
	flex: 0 0 auto;
	transition: transform 150ms ease;
}

.lb-mobile-overlay .lb-mobile-nav__item:hover .lb-mobile-nav__arrow {
	transform: translateX(4px);
}

/* Child panel back button */
.lb-mobile-overlay .lb-mobile-panel__top {
	margin-bottom: 0.5rem;
}

.lb-mobile-overlay .lb-mobile-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 32px;
	padding: 0.3rem 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.58);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: color 150ms ease;
}

.lb-mobile-overlay .lb-mobile-back:hover,
.lb-mobile-overlay .lb-mobile-back:focus-visible {
	color: #FFFFFF;
}

/* Heading section of child panels */
.lb-mobile-overlay .lb-mobile-panel__heading {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lb-mobile-overlay .lb-mobile-panel__eyebrow {
	display: block;
	margin-bottom: 0.35rem;
	color: rgba(255, 255, 255, 0.42); /* Overridden by Elementor */
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lb-mobile-overlay .lb-mobile-panel__heading h2 {
	margin: 0;
	color: #FFFFFF; /* Overridden by Elementor */
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: clamp(28px, 7vw, 42px); /* Overridden by Elementor */
	font-weight: 700; /* Overridden by Elementor */
	line-height: 1;
	letter-spacing: -0.04em;
}

.lb-mobile-overlay .lb-mobile-panel__parent-link {
	display: inline-flex;
	width: fit-content;
	margin-top: 0.75rem;
	padding-bottom: 0.18rem;
	color: var(--lb-red); /* Overridden by Elementor */
	border-bottom: 1px solid rgba(229, 50, 44, 0.45);
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: color 150ms ease, border-bottom-color 150ms ease;
}

.lb-mobile-overlay .lb-mobile-panel__parent-link:hover,
.lb-mobile-overlay .lb-mobile-panel__parent-link:focus-visible {
	color: #FFFFFF;
	border-bottom-color: #FFFFFF;
}

/* Links inside child panels */
.lb-mobile-overlay .lb-mobile-panel__content {
	display: grid;
	gap: 0.35rem;
}

.lb-mobile-overlay .lb-mobile-panel__link,
.lb-mobile-overlay .lb-mobile-panel__group-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Overridden by Elementor */
	color: rgba(255, 255, 255, 0.78); /* Overridden by Elementor */
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: 16px; /* Overridden by Elementor */
	font-weight: 600; /* Overridden by Elementor */
	line-height: 1.25;
	text-decoration: none;
	transition: color 150ms ease;
}

.lb-mobile-overlay .lb-mobile-panel__link:hover,
.lb-mobile-overlay .lb-mobile-panel__link:focus-visible,
.lb-mobile-overlay .lb-mobile-panel__group-title:hover,
.lb-mobile-overlay .lb-mobile-panel__group-title:focus-visible {
	color: #FFFFFF; /* Overridden by Elementor */
}

/* Nested grandchildren link layout */
.lb-mobile-overlay .lb-mobile-panel__group {
	display: grid;
	gap: 0;
}

.lb-mobile-overlay .lb-mobile-panel__group-links {
	display: grid;
	gap: 0;
}

.lb-mobile-overlay .lb-mobile-panel__link--nested {
	padding-left: 1rem;
	font-size: 15px; /* Overridden by Elementor */
	font-weight: 500;
	color: rgba(255, 255, 255, 0.68);
}

/* Footer & CTA */
.lb-mobile-overlay__footerbar {
	padding: 0.75rem clamp(1rem, 4vw, 1.5rem) 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(17, 17, 17, 0.38);
	backdrop-filter: blur(8px);
	flex: 0 0 auto;
}

.lb-mobile-overlay .lb-mobile-overlay__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	width: 100%;
	padding: 0 1.35rem;
	border-radius: 2px; /* Overridden by Elementor */
	background: #FFFFFF; /* Overridden by Elementor */
	color: #111111; /* Overridden by Elementor */
	font-family: 'Inter', sans-serif; /* Overridden by Elementor */
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.lb-mobile-overlay .lb-mobile-overlay__cta:hover,
.lb-mobile-overlay .lb-mobile-overlay__cta:focus-visible {
	background-color: var(--lb-red);
	color: #FFFFFF;
}

.lb-mobile-overlay__footer {
	margin-top: 0.65rem;
	color: rgba(255, 255, 255, 0.48); /* Overridden by Elementor */
	font-size: 12px;
}

/* ==========================================================================
   9. Active states
   ========================================================================== */
.lb-desktop-menu__item--current > .lb-desktop-menu__link,
.lb-desktop-menu__item--ancestor > .lb-desktop-menu__link,
.lb-desktop-menu__submenu-item--current > .lb-desktop-menu__submenu-link,
.lb-desktop-menu__submenu-item--ancestor > .lb-desktop-menu__submenu-link,
.lb-mobile-overlay .lb-mobile-nav__item--current,
.lb-mobile-overlay .lb-mobile-nav__item--ancestor,
.lb-mobile-overlay .lb-mobile-panel__link--current,
.lb-mobile-overlay .lb-mobile-panel__link--ancestor {
	color: var(--lb-red) !important;
}

.lb-desktop-menu__item--current > .lb-desktop-menu__link::after,
.lb-desktop-menu__item--ancestor > .lb-desktop-menu__link::after {
	transform: scaleX(1);
}

/* ==========================================================================
   10. Focus states
   ========================================================================== */
.lb-desktop-menu__link:focus-visible,
.lb-desktop-menu__submenu-link:focus-visible,
.lb-mobile-trigger:focus-visible,
.lb-mobile-overlay .lb-mobile-close:focus-visible,
.lb-mobile-overlay .lb-mobile-back:focus-visible,
.lb-mobile-overlay .lb-mobile-nav__item:focus-visible,
.lb-mobile-overlay .lb-mobile-panel__link:focus-visible,
.lb-mobile-overlay .lb-mobile-overlay__cta:focus-visible {
	outline: 2px solid var(--lb-red) !important;
	outline-offset: -2px !important;
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lb-mobile-overlay,
	.lb-mobile-overlay *,
	.lb-desktop-menu__submenu,
	.lb-desktop-menu__arrow,
	.lb-mobile-overlay .lb-mobile-slider__track,
	.lb-desktop-menu__link::after {
		transition: none !important;
		transition-duration: 0.01ms !important;
		animation: none !important;
	}
}