/**
 * MorphTech Labs — site-wide design fixes.
 * Loaded after Elementor's generated CSS (see functions.php) so these
 * rules reliably win without needing to touch individual widget settings.
 */

/* -----------------------------------------------------------------------
 * Buttons: rectangular corners instead of full pill shape.
 * Scoped to actual button widgets only (The Plus Addons "tp-button" widget
 * and native Elementor buttons) so badges/pills/logo cards are untouched.
 * Arrow/icon markup is unaffected — only the corner radius changes.
 * --------------------------------------------------------------------- */
.elementor-widget-tp-button,
.elementor-widget-tp-button .pt_plus_button,
.elementor-button,
.elementor-button-wrapper .elementor-button,
.e-button-base {
	border-radius: 8px !important;
}

/* Buttons: remove stray underline under button text (icons/arrows are
 * SVG/font-icons and are never affected by text-decoration). */
.elementor-widget-tp-button a,
.elementor-widget-tp-button .button-link-wrap,
.elementor-button,
.e-button-base,
.pt_plus_button .button-link-wrap {
	text-decoration: none !important;
}

/* -----------------------------------------------------------------------
 * Section / container borders: use the brand primary purple instead of
 * the current subtle grey/white "glass" border.
 * Scoped to structural containers/sections only (not buttons or form
 * fields), matching the rounded cards visible throughout the site.
 * --------------------------------------------------------------------- */
.e-con,
.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.elementor-widget {
	border-color: var(--e-global-color-primary) !important;
}

/* -----------------------------------------------------------------------
 * Header nav: keep all links on a single row on desktop.
 * Only applies above the existing tablet/mobile breakpoints already used
 * by the header template, so responsive/mobile behavior is untouched.
 * --------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.elementor-widget-navigation-menu .hfe-nav-menu-layout,
	.elementor-widget-navigation-menu nav.hfe-dropdown-expandible {
		flex-wrap: nowrap !important;
	}
}

/* -----------------------------------------------------------------------
 * Header nav: mobile hamburger dropdown panel.
 * The HFE mobile flyout renders with a transparent background by default,
 * which lets it visually overlap/blend with whatever hero content sits
 * underneath it. Give it a solid, properly stacked panel instead.
 * Scoped below the 1024px breakpoint only — desktop nav is untouched.
 * --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.hfe-nav-menu__layout-horizontal.hfe-dropdown {
		position: fixed !important;
		top: 176px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		background-color: rgb(28, 29, 35) !important;
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 24px 32px !important;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
		max-height: calc(100vh - 176px) !important;
		overflow-y: auto !important;
		z-index: 9999 !important;
	}
	.hfe-nav-menu__layout-horizontal.hfe-dropdown li {
		padding: 12px 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
		width: 100% !important;
	}
	.hfe-nav-menu__layout-horizontal.hfe-dropdown li:last-child {
		border-bottom: none !important;
	}
	.hfe-nav-menu__layout-horizontal.hfe-dropdown a {
		display: block !important;
		width: 100% !important;
	}
}

/* -----------------------------------------------------------------------
 * Header nav: desktop hover dropdown for items with sub-pages (Services).
 * Same transparency problem as the mobile flyout above — give the
 * per-item .sub-menu panel a solid card treatment instead of floating
 * transparent text over the hero.
 * --------------------------------------------------------------------- */
.hfe-nav-menu .sub-menu {
	background-color: rgb(28, 29, 35) !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
	padding: 8px 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.hfe-nav-menu .sub-menu a {
	padding: 12px 20px !important;
}
.hfe-nav-menu .sub-menu li:hover > a {
	color: rgb(139, 92, 246) !important;
}

/* -----------------------------------------------------------------------
 * Sitewide purple ambient glow — REMOVED.
 * This fixed-position radial-gradient wash rendered behind every page,
 * including behind the floating header pill and page-title/hero sections
 * (whose backgrounds are semi-transparent), producing an unwanted purple
 * bleed-through behind the header and page titles on every route.
 * --------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * Page title bar (Hello Elementor default page template) — REMOVED.
 * Superseded by the "header embedded in hero" redesign below: the nav
 * now sits directly inside each page's hero card, so the standalone
 * ".page-header > h1.entry-title" bar above it (About, Contact, every
 * /services/* subpage) is no longer part of the design. The page is
 * still identified by the heading inside its hero card content.
 * --------------------------------------------------------------------- */
.page-header {
	display: none !important;
}

/* -----------------------------------------------------------------------
 * Header nav: mobile hamburger rendering outside the pill.
 * The logo container (elementor-element-66283641) has an explicit
 * responsive width set for Desktop (9.096%) and Tablet (35%), but no
 * Mobile (<768px) override was ever set. With nothing defined for that
 * breakpoint, Elementor's container width falls back to ~100% of the
 * available space, so the logo balloons to fill almost the entire pill
 * and shoves the nav toggle button out past the pill's right edge.
 * Forcing the logo container back to its natural content size on mobile
 * (matching how Tablet/Desktop already behave) keeps the toggle inside
 * the pill, next to the logo, where it belongs.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-element-66283641 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
}

/* -----------------------------------------------------------------------
 * Header: remove the empty band above the pill nav.
 * Elementor's auto-generated ".e-con-inner" wrapper inside the header's
 * outer container carries a top padding (45px desktop / 30px tablet /
 * 50px mobile) that isn't visible on ".elementor-element-642e0653"
 * itself, only on its inner wrapper. With the sitewide purple glow
 * removed, this padding rendered as a flat empty strip above the pill
 * on every page. The pill nav itself (and its own 9px margin-top) is
 * untouched — only the extra dead space above it is removed.
 * --------------------------------------------------------------------- */
.elementor-element-642e0653 > .e-con-inner {
	padding-top: 0 !important;
}

/* =========================================================================
 * Header embedded inside the hero card (design update).
 * Reworks the header from a separate floating pill sitting above each
 * page's hero into a nav row that lives INSIDE the same rounded hero
 * card, with a thin divider line under it — matching the reference
 * design supplied. Three parts:
 *   1. Strip the pill's own border/background/radius so the nav sits
 *      flush on the hero card behind it, plus add the divider line.
 *   2. Increase the header's overlap into the next section so the full
 *      nav row (142px tall on every breakpoint) sits inside the hero
 *      card instead of just partially overlapping it.
 *   3. Give the Home page's hero container (the only hero on the site
 *      that isn't already a bordered/rounded card) matching card
 *      styling and enough top padding to clear the nav row.
 * ======================================================================= */

/* 1. Strip the pill chrome — no divider line either, nav sits flush on
      the card background with nothing marking where it ends. */
.elementor-element-41ba8a96 {
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* 2. Full-height overlap so the nav row sits inside the hero card.
      142px is the header's actual rendered height, consistent across
      desktop/tablet/mobile — confirmed live, no per-breakpoint value
      needed. */
.elementor-element-642e0653 {
	margin-bottom: -142px !important;
}

/* 2c. Match the header's own outer side padding to the hero's outer
       padding at every breakpoint. Above 1024px this doesn't visibly
       matter (the fixed 1400px width centers identically regardless of
       outer padding), but at tablet/mobile the inner content stretches
       to 100% of the available space, so a padding mismatch directly
       shows up as misaligned left/right edges between the nav and the
       card beneath it. Values taken from the hero container's own
       responsive padding (identical on Home and every subpage). */
.elementor-element-642e0653 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-642e0653 {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}
@media (max-width: 767px) {
	.elementor-element-642e0653 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* 3. Home hero card: every other page's hero is a boxed card (1400px,
      centered, with visible margin to the viewport edge). Home's hero
      container renders full-bleed edge-to-edge by default, so it didn't
      match. Box it to the same 1400px width with the same border/radius
      treatment so Home looks identical to every subpage. */
.elementor-element-340bee5a {
	border-radius: 30px !important;
	border: 1px solid rgb(157, 108, 255) !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.elementor-element-340bee5a > .e-con-inner {
	padding-top: 160px !important;
}

/* =========================================================================
 * Home page: "Ready to stop managing vendors..." closing CTA section.
 * This was rendering as a bare, edge-to-edge block — no card border, no
 * centering, left-aligned text, and a native Elementor button stretched
 * to the full section width in an off-brand blue. Every other section on
 * the page uses a centered, bordered card (1400px, 30px radius, purple
 * border) with centered content, so this brought the CTA in line with
 * that same language instead of standing out as unstyled.
 * ======================================================================= */
.elementor-element-9ddbdb0 {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 60px !important;
	margin-bottom: 80px !important;
	border-radius: 30px !important;
	border: 1px solid rgb(157, 108, 255) !important;
	padding: 80px 60px !important;
	align-items: center !important;
	text-align: center !important;
	gap: 20px !important;
}
.elementor-element-9ddbdb0 h2,
.elementor-element-9ddbdb0 p {
	text-align: center !important;
}
.elementor-element-9ddbdb0 > a.e-button-base {
	display: inline-flex !important;
	width: auto !important;
	align-self: center !important;
	padding: 16px 40px !important;
	margin-top: 12px !important;
	background-color: rgb(139, 92, 246) !important;
}
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-element-9ddbdb0 {
		padding: 60px 30px !important;
		margin-top: 40px !important;
		margin-bottom: 60px !important;
	}
}
@media (max-width: 767px) {
	.elementor-element-9ddbdb0 {
		padding: 50px 20px !important;
		margin-top: 30px !important;
		margin-bottom: 40px !important;
	}
	.elementor-element-9ddbdb0 > a.e-button-base {
		width: 100% !important;
	}
}