/* =========================================================
   MerKit Addons for Elementor — Frontend Styles
   ========================================================= */

/* Header fallback wrapper */
.merkit-header-fallback {
	position: relative;
	z-index: 9999;
	width: 100%;
}

/* Footer fallback wrapper */
.merkit-footer-fallback {
	position: relative;
	width: 100%;
}

/* Nav Menu widget */
.merkit-nav-menu {
	position: relative;
	width: 100%;
}
.merkit-nav-menu__list,
.merkit-nav-menu__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Horizontal layout */
.merkit-nav-menu--horizontal > .merkit-nav-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.merkit-nav-menu--horizontal > .merkit-nav-menu__list > li {
	position: relative;
}

/* Vertical layout */
.merkit-nav-menu--vertical > .merkit-nav-menu__list {
	display: flex;
	flex-direction: column;
}

/* Links */
.merkit-nav-menu a {
	position: relative;
	display: block;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.4;
	transition: color 0.2s, background-color 0.2s, border-radius 0.2s;
}

/* Sensible default spacing so a freshly dropped widget looks right before
   the user touches the Padding control (which overrides this via {{WRAPPER}}). */
.merkit-nav-menu > ul > li > a {
	padding: 10px 16px;
}

/* Hover effect: underline/pointer — the ::after bar is only reserved
   when the "Underline" hover effect is selected, so other effects don't
   pay for an invisible pseudo-element. */
.merkit-nav-menu--hover-underline > .merkit-nav-menu__list > li > a::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 2px;
	height: 2px;
	background-color: currentColor;
	transform: scaleX( 0 );
	transform-origin: center;
	transition: transform 0.25s ease;
}
.merkit-nav-menu--hover-underline > .merkit-nav-menu__list > li > a:hover::after,
.merkit-nav-menu--hover-underline > .merkit-nav-menu__list > li.current-menu-item > a::after {
	transform: scaleX( 1 );
}

/* Dropdown */
.merkit-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	background: #fff;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	border-top: 2px solid currentColor;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
	z-index: 999;
}
.merkit-nav-menu .sub-menu a {
	padding: 8px 16px;
}
.merkit-nav-menu .menu-item-has-children:hover > .sub-menu,
.merkit-nav-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/* Dropdown divider between items — toggled by the "Divider Between Items"
   control, which just sets the border-bottom-color via inline selector. */
.merkit-nav-menu .sub-menu li:not(:last-child) {
	border-bottom: 1px solid transparent;
}

/* Mega menu — flows a top-level dropdown's items into N columns instead of
   a single vertical list. Applies to first-level dropdowns only; nested
   (grandchild) submenus stay single-column since they're usually short. */
.merkit-nav-menu--mega-2 > .merkit-nav-menu__list > li > .sub-menu,
.merkit-nav-menu--mega-3 > .merkit-nav-menu__list > li > .sub-menu,
.merkit-nav-menu--mega-4 > .merkit-nav-menu__list > li > .sub-menu {
	min-width: 320px;
	column-gap: 0;
}
.merkit-nav-menu--mega-2 > .merkit-nav-menu__list > li > .sub-menu { column-count: 2; }
.merkit-nav-menu--mega-3 > .merkit-nav-menu__list > li > .sub-menu { column-count: 3; }
.merkit-nav-menu--mega-4 > .merkit-nav-menu__list > li > .sub-menu { column-count: 4; }
.merkit-nav-menu--mega-2 > .merkit-nav-menu__list > li > .sub-menu > li,
.merkit-nav-menu--mega-3 > .merkit-nav-menu__list > li > .sub-menu > li,
.merkit-nav-menu--mega-4 > .merkit-nav-menu__list > li > .sub-menu > li {
	break-inside: avoid;
}

/* Sticky header — becomes position:sticky once enabled; the "stuck" class
   is toggled by JS once the nav actually reaches the top of the viewport,
   so background/shadow/padding transitions (set via widget controls) only
   kick in once it's really pinned rather than on every page load. */
.merkit-nav-menu--sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9000;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

/* Dropdown arrow */
.merkit-nav-menu__arrow {
	display: inline-block;
	margin-left: 4px;
	font-size: 10px;
	transition: transform 0.2s;
}
.merkit-nav-menu .menu-item-has-children:hover > a .merkit-nav-menu__arrow {
	transform: rotate( 180deg );
}

/* Mobile toggle button */
.merkit-nav-menu__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.merkit-nav-menu__toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s, opacity 0.2s;
}

@media ( max-width: 768px ) {
	.merkit-nav-menu__toggle {
		display: flex;
	}
	.merkit-nav-menu--horizontal .merkit-nav-menu__list {
		display: none;
		flex-direction: column;
		gap: 8px;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		padding: 16px 0;
		background: #fff;
		box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.1 );
		z-index: 9999;
	}
	.merkit-nav-menu--horizontal .merkit-nav-menu__list.is-open {
		display: flex;
	}
	.merkit-nav-menu--horizontal .merkit-nav-menu__list > li + li {
		margin-left: 0 !important;
	}
	.merkit-nav-menu--horizontal > .merkit-nav-menu__list a {
		padding: 12px 16px;
	}
	.merkit-nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: #f9f9f9;
		display: none;
	}
	.merkit-nav-menu .sub-menu.is-open {
		display: block;
	}

	/* The collapsed horizontal menu shrinks to the toggle button, so the open
	   panel is stretched to the real viewport width by JS (frontend.js sets
	   inline left/width from the widget's actual position) — no pure-CSS offset
	   works for a widget that isn't horizontally centered on the page. */
}

/* Site Logo widget */
.merkit-site-logo {
	display: inline-block;
}
.merkit-site-logo img {
	height: auto;
	display: block;
}
.merkit-site-logo a {
	display: inline-block;
	text-decoration: none;
}
.merkit-site-logo__title {
	margin: 0;
	font-weight: 700;
	font-size: 20px;
}