/**
 * Services hover mega menu (plan item 2.1b).
 *
 * Everything below exists because of a specific Blocksy behaviour. Each was
 * found by reading the parent theme, and each caused a visible bug when
 * ignored. Please read before changing:
 *
 * 1. POSITIONING IS OURS, NOT BLOCKSY'S.
 *    Do not add `ct-mega-menu-centered` / `ct-mega-menu-custom-width`. Those
 *    are styled by Blocksy PRO, which is not installed. The free theme has no
 *    CSS positioning a centered mega menu, so with those classes the panel
 *    fell back to the far LEFT of the viewport. We center it here instead.
 *
 * 2. THE <li> MUST BE THE POSITIONING CONTEXT.
 *    Blocksy only sets `position: relative` on the li via `[data-submenu]`,
 *    which its JS does not apply to mega menus. Without it, our absolute
 *    panel resolves against the page, not the item. We set it explicitly.
 *
 * 3. HOVER CLOSES ON THE li's `mouseleave` (static/js/frontend/header/menu.js).
 *    So the panel must never sit outside the li's hit area. Rather than a JS
 *    delay, the panel carries TRANSPARENT PADDING on top that physically
 *    bridges the gap to the menu bar. The pointer therefore stays inside the
 *    li the whole way down, at any cursor speed.
 *
 * 4. COLOURS ASSUME A DARK DROPDOWN.
 *    uploads/blocksy/css/global.css sets, 4 selectors deep:
 *      .sub-menu .ct-menu-link { --theme-link-initial-color: <white> }
 *      .sub-menu { --dropdown-divider: 1px dashed rgba(255,255,255,.1) }
 *    Our panel is white, so every colour is set explicitly below, including
 *    on :hover (the theme's generic link hover was washing the CTA out).
 *
 * 5. ANIMATION type-3 fades `.sub-menu > li` while not .ct-active. Our whole
 *    panel is one such li, so it is opted out and the wrapper animates.
 */

/* ---------------------------------------------------------------
   Panel shell + positioning
   --------------------------------------------------------------- */

.ct-header [data-id="menu"] li.olarep-has-mega {
	/* FIX 2: make the item the containing block for the panel. */
	position: relative;
}

.ct-header [data-id="menu"] .olarep-has-mega > .sub-menu.olarep-mm {
	--olarep-mm-gap: var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 15px));

	position: absolute;
	top: 100%;
	z-index: 100;

	/* FIX 1: align the panel to the HEADER BOX, not to the item.
	   "Services" sits well left of centre, so centring the panel on the item
	   overflows the viewport's left edge at every width (measured: -6px at
	   1920, -201px at 1280). The offset between the item and the header box
	   cannot be known in CSS, so assets/mega-menu.js measures it and sets
	   --olarep-mm-shift on the item. The fallback below (left: 0) is what
	   renders if JS has not run yet: flush to the item, never off-screen. */
	left: 0;
	right: auto;
	transform: translateX(calc(var(--olarep-mm-shift, 0px) * -1));

	width: var(--olarep-mm-width, min(1180px, calc(100vw - 60px)));
	max-width: calc(100vw - 40px);

	/* FIX 3: transparent top padding is the hover bridge. It is part of the
	   panel, which is inside the li, so crossing it never fires mouseleave.
	   `margin-top` is zeroed because that gap would NOT be hoverable. */
	margin-top: 0;
	padding: var(--olarep-mm-gap) 0 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;

	/* Reset dark-dropdown assumptions inherited from global.css. */
	--dropdown-divider: none;
}



/* FIX 5: the shell li holds the whole panel, so it must not be faded by the
   type-3 per-row animation. The .sub-menu wrapper still fades in. */
.ct-header [data-id="menu"] .olarep-has-mega > .sub-menu.olarep-mm > li.olarep-mm__shell,
.ct-header [data-id="menu"] .olarep-has-mega:not(.ct-active) > .sub-menu.olarep-mm > li.olarep-mm__shell {
	opacity: 1;
	transform: none;
	transition: none;
}

/* The visible card. The shell carries the background/shadow so the padded
   bridge above stays invisible. */
.ct-header [data-id="menu"] li.olarep-mm__shell {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-top: 0;
	border-radius: 26px;
	background-color: #fff;
	box-shadow: 0 24px 60px -12px rgba(17, 21, 24, 0.22),
		0 8px 20px -8px rgba(17, 21, 24, 0.12);
	overflow: hidden;
}

.ct-header [data-id="menu"] .olarep-mm__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: stretch;
	gap: 0;
}

/* ---------------------------------------------------------------
   Service links
   --------------------------------------------------------------- */

.ct-header [data-id="menu"] .olarep-mm__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 30px;
	padding: 40px 40px 44px;
	align-content: start;
}

.ct-header [data-id="menu"] .olarep-mm__col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ct-header [data-id="menu"] .olarep-mm .olarep-mm__item {
	/* Presentational only: the panel describes the services on hover, the CTA
	   is the single clickable action. Not a link, so no pointer cursor. */
	cursor: default;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 16px;
	text-decoration: none;
	color: #111518;
	background-color: transparent;
	transition: background-color 0.18s ease;
}

.ct-header [data-id="menu"] .olarep-mm .olarep-mm__item:hover {
	background-color: #fcf2f0;
	color: #111518;
	opacity: 1;
}

.ct-header [data-id="menu"] .olarep-mm__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #111518;
	color: #fff;
	flex-shrink: 0;
	transition: background-color 0.18s ease;
}

.ct-header [data-id="menu"] .olarep-mm .olarep-mm__item:hover .olarep-mm__icon-wrap {
	/* palette color 2 */
	background-color: #ff7354;
}

.ct-header [data-id="menu"] .olarep-mm__icon {
	width: 20px;
	height: 20px;
}

.ct-header [data-id="menu"] .olarep-mm__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-top: 2px;
}

.ct-header [data-id="menu"] .olarep-mm__title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: #111518;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
}

.ct-header [data-id="menu"] .olarep-mm__desc {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #51565a;
	text-transform: none;
}

/* ---------------------------------------------------------------
   CTA panel
   --------------------------------------------------------------- */

.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 44px 38px 38px;
	/* palette color 2 */
	background-color: #ff7354;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	opacity: 1;
	transition: background-color 0.2s ease;
}

/* FIX 4: the theme's generic link hover was lightening this. Pin every hover
   state explicitly - colour, opacity and background. */
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:hover,
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:focus,
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:focus-visible,
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:active {
	/* palette color 1, darker than the color-2 base so hover still reads */
	background-color: #fe4a22;
	color: #fff;
	opacity: 1;
}

.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:focus-visible {
	outline: 2px solid #111518;
	outline-offset: -4px;
}

/* Text must stay solid white on hover too. */
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:hover .olarep-mm__cta-heading,
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:hover .olarep-mm__cta-label,
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:focus .olarep-mm__cta-heading,
.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:focus .olarep-mm__cta-label {
	color: #fff;
	opacity: 1;
}

/* Decorative outlined arcs. */
.ct-header [data-id="menu"] .olarep-mm__cta::before,
.ct-header [data-id="menu"] .olarep-mm__cta::after {
	content: '';
	position: absolute;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.ct-header [data-id="menu"] .olarep-mm__cta::before {
	width: 190px;
	height: 190px;
	right: -30px;
	top: 78px;
}

.ct-header [data-id="menu"] .olarep-mm__cta::after {
	width: 300px;
	height: 300px;
	right: -110px;
	bottom: -120px;
}

.ct-header [data-id="menu"] .olarep-mm__cta-heading {
	position: relative;
	z-index: 1;
	display: block;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff;
	opacity: 1;
	text-transform: none;
}

.ct-header [data-id="menu"] .olarep-mm__cta-foot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.ct-header [data-id="menu"] .olarep-mm__cta-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	max-width: 170px;
	color: #fff;
	opacity: 1;
	text-transform: none;
}

.ct-header [data-id="menu"] .olarep-mm__cta-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #111518;
	color: #fff;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.ct-header [data-id="menu"] .olarep-mm__cta-arrow svg {
	width: 18px;
	height: 18px;
}

.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta:hover .olarep-mm__cta-arrow {
	transform: translate(3px, -3px);
}

/* ---------------------------------------------------------------
   Narrow desktop
   --------------------------------------------------------------- */

@media (max-width: 1260px) {
	.ct-header [data-id="menu"] .olarep-mm__inner {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.ct-header [data-id="menu"] .olarep-mm__grid {
		gap: 2px 20px;
		padding: 30px 28px 34px;
	}

	.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta {
		padding: 34px 28px 30px;
	}

	.ct-header [data-id="menu"] .olarep-mm__cta-heading {
		font-size: 21px;
	}
}

@media (max-width: 1100px) {
	.ct-header [data-id="menu"] .olarep-mm__title {
		white-space: normal;
	}

	.ct-header [data-id="menu"] .olarep-mm__desc {
		font-size: 12.5px;
	}
}

/* Blocksy swaps to the offcanvas menu below this width. */
@media (max-width: 999px) {
	.ct-header [data-id="menu"] .olarep-mm__inner {
		grid-template-columns: 1fr;
	}

	.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-header [data-id="menu"] .olarep-mm .olarep-mm__item,
	.ct-header [data-id="menu"] .olarep-mm a.olarep-mm__cta,
	.ct-header [data-id="menu"] .olarep-mm__cta-arrow,
	.ct-header [data-id="menu"] .olarep-mm__icon-wrap {
		transition: none;
	}
}