/**
 * Copla Mega Menu
 *
 * This file holds the shared and desktop styling. The mobile styling lives in a
 * per-instance @media block printed by the widget, so the correct layout is in
 * effect at first paint instead of after JavaScript runs.
 */

/* -------------------------------------------------------------------------
 * Root + defaults
 * ---------------------------------------------------------------------- */

.copla-mm {
	--copla-mm-z: 9998;
	--copla-mm-offset: 0px;
	--copla-mm-transition: 260ms;

	--copla-mm-bar-align: center;
	--copla-mm-item-gap: 8px;
	--copla-mm-item-padding: 10px 16px;
	--copla-mm-item-radius: 999px;
	--copla-mm-item-color: #0f1115;
	--copla-mm-item-bg: transparent;
	--copla-mm-item-color-hover: #0f1115;
	--copla-mm-item-bg-hover: rgba(15, 17, 21, 0.05);
	--copla-mm-item-color-active: #0f1115;
	--copla-mm-item-bg-active: rgba(15, 17, 21, 0.07);
	--copla-mm-arrow-size: 14px;
	--copla-mm-arrow-gap: 6px;

	--copla-mm-panel-bg: #fff;
	--copla-mm-panel-padding: 32px 32px 40px;
	--copla-mm-panel-radius: 0 0 24px 24px;
	--copla-mm-panel-content-width: 1400px;

	--copla-mm-burger-size: 28px;
	--copla-mm-burger-color: #0f1115;
	--copla-mm-drawer-bg: #fff;
	--copla-mm-drawer-padding: 16px 20px 40px;
	--copla-mm-drawer-divider: rgba(15, 17, 21, 0.08);

	position: relative;
	display: flex;
	align-items: center;
	justify-content: var(--copla-mm-bar-align);
	width: 100%;
}

.copla-mm__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Menu bar
 * ---------------------------------------------------------------------- */

.copla-mm__list {
	display: flex;
	align-items: center;
	gap: var(--copla-mm-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Items must stay unpositioned: the panel is absolutely positioned against the
 * <nav>, which is what lets it break out to full width.
 */
.copla-mm__item {
	position: static;
	margin: 0;
	padding: 0;
}

/*
 * Deliberately two classes deep.
 *
 * Toggles and the burger are real <button> elements, and global button styling
 * targets bare buttons: Elementor's Site Settings -> Buttons emits
 * `.elementor-kit-N button` and most themes ship something equivalent. That is
 * specificity (0,1,1), so a single `.copla-mm__link` (0,1,0) loses and every
 * menu item renders as a themed button. (0,2,0) beats it.
 *
 * Everything a global button rule typically sets is reset explicitly here, not
 * just the properties we happen to use.
 */
.copla-mm .copla-mm__link {
	display: inline-flex;
	align-items: center;
	gap: var(--copla-mm-arrow-gap);
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--copla-mm-item-padding);
	border: 0;
	border-radius: var(--copla-mm-item-radius);
	background-color: var(--copla-mm-item-bg);
	background-image: none;
	color: var(--copla-mm-item-color);
	font: inherit;
	line-height: 1.2;
	letter-spacing: inherit;
	text-align: left;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color calc(var(--copla-mm-transition) * 0.8) cubic-bezier(0.4, 0, 0.2, 1),
		color calc(var(--copla-mm-transition) * 0.8) cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * :focus and :active are listed explicitly. Global button styling ships its own
 * `button:focus` / `button:active` rules (Elementor's Site Settings does), and
 * covering only :focus-visible left plain focus - what you get after a click -
 * showing the theme's button colours instead of ours.
 */
.copla-mm .copla-mm__link:hover,
.copla-mm .copla-mm__link:focus,
.copla-mm .copla-mm__link:focus-visible,
.copla-mm .copla-mm__link:active {
	background-color: var(--copla-mm-item-bg-hover);
	background-image: none;
	color: var(--copla-mm-item-color-hover);
	box-shadow: none;
}

/* Keyboard focus stays visible; mouse focus does not draw a ring. */
.copla-mm .copla-mm__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.copla-mm .copla-mm__link:focus:not(:focus-visible) {
	outline: none;
}

.copla-mm .copla-mm__item.is-open > .copla-mm__link {
	background-color: var(--copla-mm-item-bg-active);
	background-image: none;
	color: var(--copla-mm-item-color-active);
}

.copla-mm__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--copla-mm-arrow-size);
	height: var(--copla-mm-arrow-size);
	transition: transform var(--copla-mm-transition) cubic-bezier(0.22, 1, 0.36, 1);
}

.copla-mm__arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

.copla-mm__item.is-open > .copla-mm__link .copla-mm__arrow {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
 * Desktop panel
 *
 * Absolute (not fixed) so it keeps tracking the header even when the header is
 * sticky or transformed. JS supplies the anchor top and the full-bleed geometry.
 * ---------------------------------------------------------------------- */

.copla-mm__panel {
	position: absolute;
	top: calc(var(--copla-mm-anchor-top, 100%) + var(--copla-mm-offset));
	left: var(--copla-mm-bleed-left, 0px);
	width: var(--copla-mm-bleed-width, 100%);
	z-index: var(--copla-mm-z);
	box-sizing: border-box;
	background: var(--copla-mm-panel-bg);
	border-radius: var(--copla-mm-panel-radius);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	pointer-events: none;

	/*
	 * Leaving: ease-in, so it starts drifting away gently rather than snapping.
	 * The exit runs a little longer than the entrance, which reads as softer.
	 */
	transition:
		opacity calc(var(--copla-mm-transition) * 1.15) cubic-bezier(0.4, 0, 0.6, 1),
		transform calc(var(--copla-mm-transition) * 1.15) cubic-bezier(0.4, 0, 0.6, 1),
		visibility 0s linear calc(var(--copla-mm-transition) * 1.15);
}

.copla-mm__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;

	/* Entering: decelerating curve, quick to appear then settling softly. */
	transition:
		opacity var(--copla-mm-transition) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--copla-mm-transition) cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}

/*
 * Hover bridge.
 *
 * The panel hangs from the bottom of the header, but the menu items end at the
 * bottom of the <nav> - the header's own padding sits between the two. That
 * strip belongs to no menu item, so travelling from a link down into the panel
 * left the item, armed the close timer, and any hesitation on the way shut the
 * dropdown. The close delay was only ever hiding how narrow the escape was.
 *
 * Filling the strip with a transparent child of the open item closes the hole.
 * Items are position: static, so it lands in the <nav>'s coordinate space - the
 * same one the panel is measured in - while still counting as inside the item,
 * which is what keeps mouseleave from firing at all.
 *
 * Height is the panel's own top offset less the nav's height, so it tracks a
 * sticky header that shrinks and honours the "Extra gap" control. A negative
 * result - the gap dialled below zero, or the panel anchored to the menu bar
 * rather than the header, where there is no strip to cover - clamps to 0.
 *
 * Hover triggers only: in click mode the strip is where a click is meant to
 * fall through and dismiss the panel.
 */
.copla-mm[data-trigger="hover"] .copla-mm__item--has-panel.is-open::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: calc(var(--copla-mm-anchor-top, 100%) + var(--copla-mm-offset) - 100%);
}

.copla-mm__panel-scroll {
	max-height: var(--copla-mm-panel-max-height, none);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.copla-mm__panel-inner {
	box-sizing: border-box;
	padding: var(--copla-mm-panel-padding);
}

.copla-mm[data-width-mode="boxed"] .copla-mm__panel-inner {
	max-width: var(--copla-mm-panel-content-width);
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
 * Overlay (appended to <body> by JS, so it is never trapped by a transformed
 * header; the widget's CSS variables are copied onto it on open)
 * ---------------------------------------------------------------------- */

.copla-mm-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--copla-mm-overlay-bg, rgba(15, 17, 21, 0.4));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity calc(var(--copla-mm-transition, 260ms) * 1.15) cubic-bezier(0.4, 0, 0.6, 1),
		visibility 0s linear calc(var(--copla-mm-transition, 260ms) * 1.15);
}

.copla-mm-overlay.has-blur {
	-webkit-backdrop-filter: blur(var(--copla-mm-overlay-blur, 0px));
	backdrop-filter: blur(var(--copla-mm-overlay-blur, 0px));
}

.copla-mm-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--copla-mm-transition, 260ms) cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}

/* Scroll lock */
html.copla-mm-locked,
html.copla-mm-locked body {
	overflow: hidden;
}

html.copla-mm-locked body {
	position: fixed;
	width: 100%;
	top: var(--copla-mm-scroll-top, 0px);
}

/* -------------------------------------------------------------------------
 * Burger
 * ---------------------------------------------------------------------- */

/* Same global-button defence as .copla-mm__link above. */
.copla-mm .copla-mm__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: calc(var(--copla-mm-burger-size) + 12px);
	height: calc(var(--copla-mm-burger-size) + 12px);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: var(--copla-mm-burger-color);
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * The interactive states, for the same reason the base rule above exists - and
 * they are needed separately, because a global rule that carries a pseudo-class
 * outranks one that does not.
 *
 * Elementor's Site Settings -> Buttons emits `.elementor-kit-N button:hover`
 * and `:focus`, specificity (0,2,1), against the (0,2,0) of the rule above. It
 * wins, and on this site it repainted the burger with a dark gradient and the
 * kit's link colour the moment the pointer touched it - and left it that way
 * after a click, since a clicked button stays focused. Themes ship their own
 * `button:hover` on top of that.
 *
 * The burger is a bare glyph: pointing at it or pressing it must not change how
 * it looks. Listing the states at (0,3,0) puts it back in our hands.
 */
.copla-mm .copla-mm__burger:hover,
.copla-mm .copla-mm__burger:focus,
.copla-mm .copla-mm__burger:focus-visible,
.copla-mm .copla-mm__burger:active {
	background-color: transparent;
	background-image: none;
	color: var(--copla-mm-burger-color);
	border: 0;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	opacity: 1;
	transform: none;
	filter: none;
}

/*
 * Keyboard focus is the exception: it still draws a ring, because it is the
 * only cue a keyboard user gets that the burger is the thing Enter will press.
 * A mouse click leaves no mark.
 */
.copla-mm .copla-mm__burger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.copla-mm .copla-mm__burger:focus:not(:focus-visible) {
	outline: none;
}

/* Custom menu / close icons (Style -> Mobile drawer). */
.copla-mm .copla-mm__burger-icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--copla-mm-burger-size);
	height: var(--copla-mm-burger-size);
	color: currentColor;
}

.copla-mm .copla-mm__burger-icon--open {
	display: inline-flex;
}

.copla-mm.is-drawer-open .copla-mm__burger-icon--open {
	display: none;
}

.copla-mm.is-drawer-open .copla-mm__burger-icon--close {
	display: inline-flex;
}

.copla-mm .copla-mm__burger-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Elementor icon fonts render as <i>, which sizes by font-size, not width. */
.copla-mm .copla-mm__burger-icon i {
	font-size: var(--copla-mm-burger-size);
	line-height: 1;
	color: currentColor;
}

/*
 * A media library image. `contain` rather than `cover` so a non-square upload
 * is letterboxed instead of cropped, and max-width is reset because themes
 * routinely cap images at 100% of a container that is not the one we mean.
 */
.copla-mm .copla-mm__burger-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.copla-mm__burger-box {
	position: relative;
	display: block;
	width: var(--copla-mm-burger-size);
	height: var(--copla-mm-burger-size);
}

.copla-mm__burger-bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--copla-mm-transition) ease, opacity 120ms ease;
}

.copla-mm__burger-bar:nth-child(1) {
	top: 25%;
}

.copla-mm__burger-bar:nth-child(2) {
	top: calc(50% - 1px);
}

.copla-mm__burger-bar:nth-child(3) {
	top: calc(75% - 2px);
}

.copla-mm.is-drawer-open .copla-mm__burger-bar:nth-child(1) {
	transform: translateY(calc(var(--copla-mm-burger-size) * 0.25)) rotate(45deg);
}

.copla-mm.is-drawer-open .copla-mm__burger-bar:nth-child(2) {
	opacity: 0;
}

.copla-mm.is-drawer-open .copla-mm__burger-bar:nth-child(3) {
	transform: translateY(calc(var(--copla-mm-burger-size) * -0.25)) rotate(-45deg);
}
/* -------------------------------------------------------------------------
 * Mobile mode
 *
 * The mobile rules are NOT here. They are emitted per widget instance inside a
 * real @media query (see Copla_Mega_Menu_Widget::render_mobile_styles), because
 * the breakpoint is a widget setting. Driving them from a JS-set attribute made
 * phones paint the full desktop menu first and swap to the burger afterwards.
 * ---------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
 * Sticky-header copies
 *
 * Elementor Pro's sticky effect leaves a hidden copy of the header in the
 * document flow as a spacer, and rebuilds that copy from the live DOM on every
 * viewport change - toggling the bookmarks bar or rotating a phone is enough.
 * A copy taken while a dropdown was open keeps `is-open`, and nothing is bound
 * to it, so it can never close again.
 *
 * The spacer is `visibility: hidden`, which ought to hide the copy with it, but
 * visibility is inherited and `.is-open` sets `visibility: visible` - which
 * wins. So the dead copy paints a second dropdown, and its `pointer-events:
 * auto` then swallows the hover that would have closed the real one.
 *
 * JavaScript sweeps these copies as well; this keeps them from ever painting,
 * without waiting for a frame.
 * ---------------------------------------------------------------------- */

.elementor-sticky__spacer .copla-mm__panel,
.elementor-sticky__spacer .copla-mm__list {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: none !important;
}

/* -------------------------------------------------------------------------
 * Editor + motion preferences
 * ---------------------------------------------------------------------- */

/* Inside Elementor the preview panel must be visible even before JS runs. */
.copla-mm[data-editor="1"] .copla-mm__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.copla-mm *,
	.copla-mm-overlay {
		transition-duration: 1ms !important;
	}
}