/*
 * Oprafix Core – minimal helper styles.
 * Only scoped "opx-" classes that Elementor (free) cannot express. Colours use the
 * Elementor Global Colours, so changing them in Site Settings updates these too.
 */

/* Brand highlight words inside headings: <span class="opx-hl">…</span> */
.opx-hl { color: var(--e-global-color-primary, #043cb7); }
.opx-hl-green { color: var(--e-global-color-secondary, #02b441); }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Sticky header (HFE header wrapper; HFE's own ".ehf-header #masthead" rule sets it to relative). */
body.ehf-header #masthead, #masthead { position: sticky; top: 0; z-index: 990; }
body.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead { top: 46px; } }

/* Header navigation (HFE menu widget, class "opx-header-nav"): keep the collapsed
   dropdown out of the layout so it never causes sideways scrolling. */
.opx-header-nav { min-width: 0; }
@media (max-width: 1024px) {
	.opx-header-nav .hfe-nav-menu__layout-horizontal { position: absolute; }
	/* Collapsed menu takes no width, so it can never push the page sideways on small phones. */
	.opx-header-nav .hfe-nav-menu__layout-horizontal:not(.menu-is-active) { width: 0 !important; overflow: hidden; }
	.opx-header-nav .hfe-menu-item::before, .opx-header-nav .hfe-menu-item::after { display: none !important; }

	/* Menu button: 44px rounded square (icons, colours and radius are set in the widget). Blue while open. */
	.opx-header-nav .hfe-nav-menu__toggle { cursor: pointer; }
	.opx-header-nav .hfe-nav-menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		transition: background-color .2s ease;
	}
	.opx-header-nav .hfe-active-menu .hfe-nav-menu-icon { background-color: var(--e-global-color-primary, #043cb7) !important; }
	.opx-header-nav .hfe-active-menu .hfe-nav-menu-icon svg { fill: #fff !important; }

	/* Open panel: attached to the bottom of the header, rounded lower corners, page dimmed below. */
	.opx-header-nav nav.hfe-dropdown.menu-is-active {
		border-top: 1px solid var(--e-global-color-opx_border, #e2e8f0);
		border-radius: 0 0 18px 18px !important;
		box-shadow: 0 18px 36px rgba(11, 26, 63, 0.16) !important;
	}
	.opx-header-nav nav.hfe-dropdown.menu-is-active > ul.hfe-nav-menu { padding: 6px 0 10px; border-radius: 0 0 18px 18px; overflow: hidden; }
	.opx-header-nav nav.hfe-dropdown.menu-is-active::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 100vh;
		background: rgba(7, 26, 69, 0.38);
		animation: opx-fade .2s ease;
	}
	@keyframes opx-fade { from { opacity: 0; } }

	/* Items: Poppins labels, comfortable touch height, light separators. */
	.opx-header-nav nav.hfe-dropdown li a.hfe-menu-item {
		font-family: var(--e-global-typography-opx_label-font-family, "Poppins"), sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		min-height: 52px;
		align-items: center;
	}
	/* Current page (or its parent): blue text, light-blue background, green accent bar. */
	.opx-header-nav nav.hfe-dropdown li.current-menu-item > a.hfe-menu-item,
	.opx-header-nav nav.hfe-dropdown li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
	.opx-header-nav nav.hfe-dropdown li.current-menu-parent > .hfe-has-submenu-container > a.hfe-menu-item {
		color: var(--e-global-color-primary, #043cb7) !important;
		background-color: var(--e-global-color-opx_light, #eef4ff) !important;
		box-shadow: inset 3px 0 0 var(--e-global-color-secondary, #02b441);
	}
	/* "Services" while its submenu is open (the widget flips the arrow itself). */
	.opx-header-nav nav.hfe-dropdown .hfe-has-submenu-container.sub-menu-active > a.hfe-menu-item {
		color: var(--e-global-color-primary, #043cb7) !important;
		background-color: var(--e-global-color-opx_light, #eef4ff) !important;
	}

	/* Nested service links: indented under Services with a green dot. */
	.opx-header-nav nav.hfe-dropdown ul.sub-menu { box-shadow: none !important; border: 0 !important; }
	.opx-header-nav nav.hfe-dropdown ul.sub-menu li a.hfe-sub-menu-item {
		padding-left: 44px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		min-height: 48px;
		display: flex;
		align-items: center;
		background-color: #f8faff !important;
		background-image: radial-gradient(circle, var(--e-global-color-secondary, #02b441) 3px, transparent 3.5px);
		background-repeat: no-repeat;
		background-position: 24px center;
		background-size: 8px 8px;
	}
	.opx-header-nav nav.hfe-dropdown ul.sub-menu li a.hfe-sub-menu-item:hover,
	.opx-header-nav nav.hfe-dropdown ul.sub-menu li a.hfe-sub-menu-item-active {
		color: var(--e-global-color-primary, #043cb7) !important;
		background-color: var(--e-global-color-opx_light, #eef4ff) !important;
	}
}

/* Home hero (class "opx-hero-home"): full-screen below the sticky header (64px on phones/tablets, 71px on
   desktop); svh keeps it inside the visible area when mobile browser bars are shown. The slideshow and the
   text colours are set in Elementor (Oprafix Hero Slides widget + the hero's own widgets). */
.opx-hero-home {
	min-height: max(560px, calc(100vh - 71px)) !important;
	min-height: max(560px, calc(100svh - 71px)) !important;
}
.opx-hero-home .opx-hero-copy h1,
.opx-hero-home .opx-hero-copy p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); }
@media (max-width: 1024px) {
	.opx-hero-home {
		min-height: calc(100vh - 64px) !important;
		min-height: calc(100svh - 64px) !important;
	}
}
/* Phones only: copy is centred in the hero (Elementor mobile settings); type scales with the screen,
   buttons share one width, and an even overlay keeps text readable wherever it sits on the photo. */
@media (max-width: 767px) {
	.opx-hero-home .opx-hero-copy .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(30px, 8.4vw, 37px); line-height: 1.14; }
	.opx-hero-home .opx-hero-copy .elementor-widget-button,
	.opx-hero-home .opx-hero-copy .elementor-widget-button .elementor-button { width: 100%; }
	.opx-hero-home .opx-hero-copy .elementor-widget-button .elementor-button { justify-content: center; }
	.opx-hero-home .opx-hs-overlay {
		background: linear-gradient(180deg, rgba(7, 26, 69, 0.5) 0%, rgba(7, 26, 69, 0.74) 18%, rgba(7, 26, 69, 0.74) 62%, rgba(7, 26, 69, 0.9) 100%);
	}
	.opx-hero-home .opx-hero-copy .elementor-heading-title { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
}

/* Linked images inside "opx-cover" widgets fill their box. */
.opx-cover a { display: block; }

/* No trailing gap after the last paragraph in text widgets. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Keyboard focus visibility. */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .e-n-accordion-item-title:focus-visible {
	outline: 3px solid var(--e-global-color-secondary, #02b441);
	outline-offset: 2px;
}

/* Pill badges for icon lists (service areas). Add class "opx-pills" to an Icon List widget. */
.opx-pills .elementor-icon-list-items { gap: 10px; }
.opx-pills .elementor-icon-list-item {
	background: #fff;
	border: 1px solid var(--e-global-color-opx_border, #e2e8f0);
	border-radius: 999px;
	padding: 7px 14px !important;
	margin: 0 !important;
}
.opx-pills .elementor-icon-list-item::after { display: none !important; }

/* Cards: keep CTA buttons aligned to the bottom of equal-height cards. Add class "opx-card-body" to the card's text container. */
.opx-card-body > .elementor-widget-button:last-child { margin-top: auto; }

/* Images: cover their box (class "opx-cover" on an Image widget with a fixed height). */
.opx-cover img { width: 100%; object-fit: cover; }

/* Mobile: small floating WhatsApp icon (Button widget, class "opx-wa-float", phones only). */
@media (max-width: 767px) {
	/* End-of-page space for the icon lives in the footer's own mobile padding (Elementor), so no white strip appears. */
	/* When the browser scrolls a focused field/button into view, keep it clear of the icon. */
	html { scroll-padding-bottom: 80px; }
	.opx-wa-float .elementor-button {
		width: 56px;
		height: 56px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.opx-wa-float .elementor-button-content-wrapper { gap: 0; }
	.opx-wa-float .elementor-button-icon { margin: 0; font-size: 28px; }
	.opx-wa-float .elementor-button-icon svg { width: 28px; height: 28px; }
	/* Label stays available to screen readers but is not shown. */
	.opx-wa-float .elementor-button-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

}

/* ==========================================================================
   Site-wide finish: browser surfaces, type rendering, buttons and the
   homepage section helpers (classes set in Elementor → Advanced → CSS Classes).
   ========================================================================== */

/* Browser surfaces in brand colours. */
html { accent-color: var(--e-global-color-primary, #043cb7); scrollbar-color: #b9c7e4 #f6f9ff; }
::selection { background: rgba(4, 60, 183, 0.16); color: var(--e-global-color-accent, #0b1a3f); }
input, textarea { caret-color: var(--e-global-color-primary, #043cb7); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p { text-wrap: pretty; }
a { text-underline-offset: 3px; }

/* Buttons: one consistent, quiet response everywhere. */
.elementor-button {
	transition: background-color .2s ease, color .2s ease, box-shadow .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1);
}
.elementor-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(7, 26, 69, 0.55); }
.elementor-button:active { transform: translateY(0); box-shadow: none; }
.opx-wa-float .elementor-button:hover { transform: translateY(-2px) scale(1.04); }

/* Left-aligned section header: heading and supporting copy side by side. */
.opx-split-head .elementor-widget-text-editor { max-width: 56ch; }

/* Facts strip under the hero: hairline dividers, no boxes. */
.opx-trust-band { border-bottom: 1px solid var(--e-global-color-opx_border, #e2e8f0); }
.opx-facts > .opx-fact { padding: 6px 28px; }
.opx-facts > .opx-fact:first-child { padding-left: 0; }
.opx-facts > .opx-fact + .opx-fact { border-left: 1px solid var(--e-global-color-opx_border, #e2e8f0); }
@media (max-width: 1024px) {
	.opx-facts { row-gap: 20px !important; }
	.opx-facts > .opx-fact, .opx-facts > .opx-fact:first-child { padding: 0 20px 0 0; }
	.opx-facts > .opx-fact + .opx-fact { border-left: 0; }
}
@media (max-width: 767px) {
	.opx-facts { row-gap: 0 !important; }
	.opx-facts > .opx-fact, .opx-facts > .opx-fact:first-child { padding: 14px 0; }
	.opx-facts > .opx-fact + .opx-fact { border-top: 1px solid var(--e-global-color-opx_border, #e2e8f0); }
}

/* Service photo tiles. */
.opx-tile {
	isolation: isolate;
	box-shadow: 0 14px 34px -22px rgba(7, 26, 69, 0.55);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
.opx-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -28px rgba(7, 26, 69, 0.6); }
.opx-tile .elementor-heading-title a { color: inherit; }
.opx-tile .elementor-heading-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.opx-tile .elementor-widget-text-editor { max-width: 52ch; }

/* Benefits next to the team photo. */
.opx-benefit { padding-top: 18px; border-top: 1px solid var(--e-global-color-opx_border, #e2e8f0); }

/* Process: numbered steps joined by a line on wide screens. */
.opx-steps { position: relative; }
.opx-step-num .elementor-heading-title {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--e-global-color-secondary, #02b441);
	border-radius: 50%;
	background: var(--e-global-color-opx_dark, #071a45);
}
@media (min-width: 1025px) {
	.opx-steps::before {
		content: "";
		position: absolute;
		top: 24px;
		left: 48px;
		right: 12%;
		height: 1px;
		background: linear-gradient(90deg, rgba(2, 180, 65, 0.7), rgba(255, 255, 255, 0.14));
	}
}

/* Larger area badges on the homepage. */
.opx-pills-lg .elementor-icon-list-item { padding: 10px 18px !important; }
.opx-pills-lg .elementor-icon-list-text { font-size: 15px; font-weight: 600; }

/* FAQ: intro stays in view beside the questions on desktop. */
@media (min-width: 1025px) {
	.opx-faq-intro { position: sticky; top: 112px; }
}
.e-n-accordion-item-title { transition: border-color .2s ease, color .2s ease, background-color .2s ease; }

/* Final enquiry section. */
.opx-final-enquiry .opx-contact-list a { color: inherit; }
.opx-final-enquiry .opx-contact-list a:hover .elementor-icon-list-text { text-decoration: underline; }
.opx-final-enquiry .e-con.e-child:last-child { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55) !important; }


/* Enquiry form widget. */
.opx-form .opx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.opx-form .opx-full { grid-column: 1 / -1; }
.opx-form .opx-field { display: flex; flex-direction: column; gap: 6px; }
.opx-form label { font-size: 14px; font-weight: 600; color: var(--e-global-color-accent, #0b1a3f); }
.opx-form .opx-req { color: #c53030; }
.opx-form .opx-input {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: #1a202c;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
}
.opx-form textarea.opx-input { min-height: 104px; resize: vertical; }
.opx-form .opx-input[aria-invalid="true"] { border-color: #c53030; }
.opx-form .opx-error { min-height: 0; font-size: 13px; color: #c53030; }
.opx-form .opx-error:empty { display: none; }
.opx-form .opx-submit {
	width: 100%;
	margin-top: 16px;
	min-height: 50px;
	border: 0;
	border-radius: 8px;
	background: var(--e-global-color-secondary, #02b441);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color .2s ease;
}
.opx-form .opx-submit:hover, .opx-form .opx-submit:focus-visible { background: var(--e-global-color-opx_green_dark, #019a3c); }
.opx-form .opx-submit[disabled] { opacity: .7; cursor: progress; }
.opx-form .opx-status { margin-top: 12px; font-size: 15px; font-weight: 600; }
.opx-form .opx-status:empty { display: none; }
.opx-form .opx-status.is-success { padding: 12px 14px; border-radius: 8px; background: #dcf7e6; color: #0b6b33; }
.opx-form .opx-status .opx-wa-link { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.opx-form .opx-status.is-error { padding: 12px 14px; border-radius: 8px; background: #fde8e8; color: #9b1c1c; }
.opx-form .opx-note { margin-top: 10px; font-size: 13px; color: #64748b; }
.opx-form .opx-note p { margin: 0; }
.opx-form .opx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .opx-form .opx-grid { grid-template-columns: 1fr; } }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}