/*
 * Spark CST Menu styles.
 *
 * Organized into base, desktop (>=1281px), tablet/small desktop (<=1280px),
 * and mobile (<=768px) sections. Markup is rendered in
 * includes/class-spark-cst-menu-plugin.php and behavior in
 * assets/js/spark-cst-menu.js.
 *
 * BREAKPOINT: the desktop/burger switch is 1280/1281 and appears in FIVE media
 * queries below AND in the matchMedia() call at the top of
 * assets/js/spark-cst-menu.js. That JS gates desktop-hover versus mobile-tap
 * behavior in 15 places, so if the two ever disagree the menu stays visually
 * desktop while behaving as mobile (or the reverse). Change them together.
 *
 * Raised from 1024/1025 to 1280/1281 on 2026-09-21: 1024 only ever matched the
 * discontinued 9.7" iPad in landscape. Every current iPad is 1180-1376 wide in
 * landscape and so fell through to the desktop nav, where the seven top-level
 * items need ~896-929px and the 1320px-capped container gives them ~896-928px,
 * i.e. zero or negative slack. 1280 keeps 1366x768 laptops on the desktop nav.
 */

/* Base shared styles. */
.spark-dynamic-header {
	background: #fff;
	color: #000;
	position: relative;
	width: 100%;
	z-index: 999;
}

.spark-dynamic-header,
.spark-dynamic-header * {
	box-sizing: border-box;
}

.spark-dynamic-header a,
.spark-dynamic-header button,
.spark-dynamic-header input {
	font-family: "Votorantim Typeface", Arial, sans-serif;
}

.spark-dynamic-header a {
	text-decoration: none;
}

.spark-dynamic-header button {
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	padding: 0;
}

.spark-dynamic-header.is-sticky {
	position: sticky;
	top: 0;
}

.spark-header-inner {
	margin: 0 auto;
	max-width: 1320px;
	padding: 0 24px;
	width: 100%;
}

.spark-logo-link {
	align-items: center;
	display: inline-flex;
	max-width: 100%;
}

.spark-logo-image {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.spark-logo-text-link {
	color: #0508a8;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.spark-menu,
.spark-menu .sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.spark-menu {
	align-items: center;
	display: flex;
	gap: 28px;
}

.spark-menu > li {
	position: relative;
}

.spark-menu a,
.spark-top-links a {
	align-items: center;
	color: #000;
	display: inline-flex;
	font-size: 16px;
	font-weight: 400;
	/* gap: 10px; */
	line-height: 1.3;
	/* padding: 5px 5px 0 5px; */
	transition: color 0.2s ease;
}

.spark-menu a:hover,
.spark-menu a:focus-visible,
.spark-top-links a:hover,
.spark-top-links a:focus-visible {
	color: #0508a8;

}

.spark-search-toggle:focus-visible,
.spark-mobile-toggle:focus-visible,
.spark-mobile-close:focus-visible,
.spark-mobile-back:focus-visible,
.spark-submenu-toggle:focus-visible,
.spark-menu a:focus-visible,
.spark-top-links a:focus-visible {
	outline: 2px solid #89f023;
	outline-offset: 3px;
}

.spark-desktop-header,
.spark-responsive-header {
	align-items: center;
	width: 100%;
}

.spark-responsive-header,
.spark-mobile-overlay {
	display: none;
}

.spark-top-links {
	align-items: center;
	display: flex;
	gap: 18px;
}

.spark-search-toggle {
	align-items: center;
	color: #000000 !important;
	display: inline-flex;
	font-size: 16px !important;
	justify-content: center;
	line-height: 1;
	min-height: 38px;
	min-width: 38px;
}

/* Real text in the DOM (not CSS content:), so TranslatePress can translate
   it like any other visible string ("Search" -> "Recherche" on /fr). */
.spark-search-toggle-label {
	font-size: 16px;
}

.spark-responsive-search-toggle {
	border: 1px solid #d1d5db !important;
	border-radius: 10px !important;
	height: 44px;
	width: 44px;
}

/* Full-screen overlay search (dark scrim + giant centered input). */
.spark-search-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	max-width: 100%;
	opacity: 0;
	overflow: hidden auto;
	padding: clamp(24px, 5vw, 64px);
	position: fixed;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	visibility: hidden;
	z-index: 10000;
}

.spark-search-modal[hidden] {
	display: none;
}

.spark-search-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.spark-search-modal-backdrop {
	background: rgba(0, 0, 0, 0.78);
	cursor: pointer;
	inset: 0;
	position: absolute;
}

.spark-search-modal-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 auto;
	max-width: 1100px;
	padding: 0 clamp(20px, 5vw, 48px);
	position: relative;
	width: 100%;
	z-index: 1;
}

.spark-search-modal-close {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	cursor: pointer;
	display: inline-flex !important;
	font-size: 32px;
	height: 48px;
	justify-content: center;
	line-height: 1;
	opacity: 0.85;
	padding: 0 !important;
	position: absolute;
	right: clamp(16px, 4vw, 40px);
	top: clamp(20px, 5vh, 48px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	width: 48px;
	z-index: 2;
}

.spark-search-modal-close:hover,
.spark-search-modal-close:focus-visible {
	opacity: 1;
	transform: scale(1.05);
}

.spark-search-modal-content {
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
	width: 100%;
}

/* Visually hidden title (still announced to assistive tech). */
.spark-search-modal-title {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.spark-search-modal .search-form {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 auto;
	max-width: 900px;
	padding: 0 0 8px;
	position: relative;
	width: 100%;
}

.spark-search-modal .search-form > label {
	display: contents;
}

.spark-search-modal .search-field {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	flex: 1 1 auto;
	font-size: clamp(36px, 7vw, 72px);
	font-weight: 300;
	letter-spacing: 0.5px;
	line-height: 1.1;
	min-height: 0;
	min-width: 0;
	outline: none !important;
	padding: 16px 8px;
	text-align: center;
	width: 100%;
}

.spark-search-modal .search-field::placeholder {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 300;
	opacity: 1;
}

.spark-search-modal .search-field::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.spark-search-modal .search-field:focus {
	outline: none;
}

.spark-search-modal .search-submit {
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.85) !important;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 0;
	height: 48px;
	min-height: 0;
	overflow: hidden;
	padding: 0 !important;
	position: relative;
	transition: color 0.2s ease, transform 0.2s ease;
	width: 48px;
}

.spark-search-modal .search-submit::before {
	content: "\2192"; /* right arrow */
	display: inline-flex;
	font-size: 28px;
	line-height: 1;
}

.spark-search-modal .search-submit:hover,
.spark-search-modal .search-submit:focus-visible {
	color: #fff !important;
	transform: translateX(2px);
}

.spark-search-modal label.screen-reader-text,
.spark-search-modal .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.spark-desktop-top-links, .search-submit, .spark-search-modal-close {
    display: none !important;
}

.spark-search-toggle::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 17px;
	background-image: url('/wp-content/uploads/sites/13/2024/12/search.svg-1.svg');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 0px;
	vertical-align: text-bottom;
}

/* Customizer: Search Settings > Upload Search Icon — when set, the uploaded
   <img> (spark-search-icon-image) replaces the default CSS-drawn icon
   above, so hide the ::before on that specific button instead of showing
   both at once. */
.spark-search-toggle.has-custom-icon::before {
	display: none;
}

.spark-search-toggle .spark-search-icon-image {
	display: inline-block;
	height: 17px;
	object-fit: contain;
	vertical-align: text-bottom;
	width: 20px;
}

@media (max-width: 640px) {
	.spark-search-modal .search-field {
		font-size: clamp(28px, 9vw, 44px);
		padding: 12px 4px;
	}

	.spark-search-modal-close {
		font-size: 28px;
		height: 40px;
		right: 14px;
		top: 14px;
		width: 40px;
	}

	.spark-search-modal .search-submit {
		height: 40px;
		width: 40px;
	}

	.spark-search-modal .search-submit::before {
		font-size: 22px;
	}
}

body.spark-menu-open,
body.spark-search-open {
	overflow: hidden;
}

/* Root mobile menu: hide back row (Elementor/theme often overrides [hidden] on buttons). */
.spark-dynamic-header .spark-mobile-overlay .spark-mobile-panel-meta:not(.is-submenu-level),
.spark-dynamic-header .spark-mobile-overlay .spark-mobile-panel-meta[hidden] {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	max-height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

.spark-dynamic-header .spark-mobile-overlay .spark-mobile-back:not(.is-back-visible),
.spark-dynamic-header .spark-mobile-overlay .spark-mobile-back[hidden] {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
	width: 0 !important;
}

.homepage{
	padding-left: 20px !important;
}

/* Per-menu-item icon (Appearance > Menus > "Icon" field on any item) —
   only ever present in the markup when an icon is actually assigned
   (see inject_menu_item_icon()), so items without one show nothing extra,
   no placeholder, no reserved space. Works for any menu item on any site
   sharing this plugin, without needing a new ::before rule hardcoded per
   slug like the ones above. */
.spark-menu-item-icon {
	display: inline-block;
	width: 20px;
	height: 17px;
	margin-right: 5px;
	object-fit: contain;
	vertical-align: text-bottom;
}

/* Desktop layout: logo left, menu system right. */
@media (min-width: 1281px) {
	.spark-desktop-header {
		display: flex !important;
		gap: 40px;
		justify-content: space-between;
		min-height: 96px;
	}

	.spark-desktop-logo {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		min-width: 180px;
	}

	.spark-desktop-menu-section {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		gap: 14px;
		min-width: 0;
	}

	.spark-desktop-top-row {
		align-items: center;
		display: flex;
		gap: 28px;
		justify-content: flex-end;
		min-width: 0;
	}

	.spark-desktop-primary-nav {
		align-items: center;
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	.spark-menu-primary {
		justify-content: flex-end;
	}

	.spark-dropdown-nav .spark-menu {
		gap: 18px;
	}

	.spark-top-bar-nav .spark-menu {
		gap: 26px;
        line-height: 0;
	}

	.spark-menu .sub-menu {
		background: #fff;
		border: 2px solid #000000;
		box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
		display: block !important;
		left: 0;
		min-width: 320px;
		opacity: 0;
		/* padding: 10px 0 !important; */
		position: absolute;
		top: calc(100% + 8px);
		transform: translateY(10px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		visibility: hidden;
		z-index: 50;
	}

    .spark-menu-dropdown li:hover .sub-menu li, .spark-menu-primary .menu-item:hover .sub-menu li {
        border-bottom: 1px solid #d9d9d9;
    }

	.spark-menu .sub-menu .sub-menu {
		left: 100%;
		top: 0;
	}

	.spark-menu .menu-item-has-children:hover > .sub-menu,
	.spark-menu .menu-item-has-children.is-submenu-open > .sub-menu {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	/* Keep dropdown closed after a submenu link is clicked (hover would otherwise reopen it). */
	.spark-desktop-header .menu-item-has-children.spark-suppress-hover > .sub-menu,
	.spark-desktop-header .menu-item-has-children.spark-suppress-hover:hover > .sub-menu {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateY(10px) !important;
		visibility: hidden !important;
	}

	.spark-menu .sub-menu a {
		display: flex;
		padding: 12px 22px;
		width: 100%;
	}


    [type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
        background-color: #0000bf00 !important;
		color: #000000 !important;
        /* text-decoration: none;
        border-radius: 5px; */
    }

	.spark-menu .sub-menu a:hover,
	.spark-menu .sub-menu a:focus-visible {
		background: #0508a8;
		color: #fff;
		transform: scale(1.03);
        transition: transform 0.3s ease;
        background-image: url(/wp-content/uploads/sites/13/2023/09/Vector.png);
        background-position: 92%;
        background-repeat: no-repeat;
	}

	.spark-submenu-toggle {
		align-items: center;
		color: #000000 !important;
		display: inline-flex !important;
		height: 22px;
		justify-content: center;
		margin-left: 4px;
		position: relative;
		width: 22px;
	}

	.spark-submenu-toggle .screen-reader-text,
	.spark-submenu-toggle .spark-submenu-icon {
		display: none;
	}

	.spark-submenu-toggle::before {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		content: "";
		height: 7px;
		transform: rotate(45deg) translateY(-2px);
		width: 7px;
	}

	/* Sub-menu rows that themselves have children (mega-menu flyout columns):
	   the anchor above is width:100%, so the toggle button has no room on
	   the same line and wraps onto its own row, showing up as a stray arrow.
	   Pin it on top of the row instead of letting it flow to a new line. */
	.spark-menu .sub-menu li.menu-item-has-children {
		position: relative;
	}

	.spark-menu .sub-menu li.menu-item-has-children > a {
		padding-right: 44px;
	}

	.spark-menu .sub-menu li.menu-item-has-children > .spark-submenu-toggle {
		margin-left: 0;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
	}

	/* The flyout already opens on hover, so the arrow is redundant once hovered/open, hide it then. */
	.spark-menu .sub-menu li.menu-item-has-children:hover > .spark-submenu-toggle,
	.spark-menu .sub-menu li.menu-item-has-children.is-submenu-open > .spark-submenu-toggle {
		display: none !important;
	}

    .spark-menu #menu-item-4233 .sub-menu {
        height: 500px;
        overflow-y: auto;
    }

	.spark-menu-with-icons > li[class*="spark-icon-"] > a::before {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		flex: 0 0 28px;
		height: 28px;
		width: 28px;
	}

	.spark-menu-with-icons > li.spark-icon-ethics > a::before {
		background-image: url("../images/icon-ethics-line.svg");
	}

	.spark-menu-with-icons > li.spark-icon-contact > a::before {
		background-image: url("../images/icon-contact.svg");
	}

	.spark-responsive-header,
	.spark-mobile-overlay {
		display: none !important;
	}
}

/* Tablet and small desktop layout. */
@media (max-width: 1280px) {
    /* .spark-menu-item-icon{
        display: none;
    } */
	.spark-header-inner {
		padding: 0 18px;
	}

	.spark-desktop-header {
		display: none !important;
	}

	.spark-responsive-header {
		display: flex !important;
		gap: 18px;
		justify-content: space-between;
		min-height: 76px;
	}

	.spark-responsive-logo {
		align-items: center;
		display: flex;
		flex: 0 1 auto;
		min-width: 0;
	}

	.spark-responsive-actions {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		gap: 18px;
		justify-content: flex-end;
		min-width: 0;
	}

    .spark-menu .sub-menu .sub-menu {
        height: 500px;
        overflow-y: auto;
    }

	.spark-responsive-dropdown-nav,
	.spark-responsive-top-bar-nav {
		min-width: 0;
	}

	.spark-responsive-dropdown-nav .spark-menu,
	.spark-responsive-top-bar-nav .spark-menu {
		gap: 18px;
	}

	.spark-responsive-top-bar-nav .spark-menu-text-only > li > a::before {
		display: none !important;
	}

	.spark-responsive-top-bar-nav .spark-menu > li:nth-child(n+3) {
		display: none;
	}

	.spark-responsive-actions .spark-menu a {
		font-size: 15px;
		white-space: nowrap;
	}

	.spark-responsive-top-bar-nav .sub-menu {
		display: none !important;
	}

	.spark-responsive-top-bar-nav .spark-submenu-toggle,
	.spark-mobile-panel-topbar .spark-submenu-toggle {
		display: none !important;
	}

	/* Responsive dropdown nav: click parent to open a popup-style dropdown. */
	.spark-responsive-dropdown-nav .spark-menu > li.menu-item-has-children {
		position: relative;
	}

	.spark-responsive-dropdown-nav .spark-menu > li.menu-item-has-children > a {
		cursor: pointer;
	}

	.spark-responsive-dropdown-nav .sub-menu {
		background: #fff;
		border: 1px solid #d9d9d9;
		border-radius: 10px;
		box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
		display: block !important;
		left: 0;
		list-style: none !important;
		margin: 0 !important;
		min-width: 220px;
		opacity: 0;
		padding: 8px 0 !important;
		position: absolute;
		right: auto;
		top: calc(100% + 8px);
		transform: translateY(8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		visibility: hidden;
		z-index: 200;
	}

	.spark-responsive-dropdown-nav .sub-menu .sub-menu {
		left: 0;
		position: relative;
		top: auto;
		transform: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0 0 0 14px !important;
	}

	.spark-responsive-dropdown-nav .menu-item-has-children.is-submenu-open > .sub-menu {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.spark-responsive-dropdown-nav .menu-item-has-children.spark-suppress-hover > .sub-menu,
	.spark-responsive-dropdown-nav .menu-item-has-children.spark-suppress-hover:hover > .sub-menu {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateY(8px) !important;
		visibility: hidden !important;
	}

	.spark-responsive-dropdown-nav .sub-menu li {
		display: block;
	}

	.spark-responsive-dropdown-nav .sub-menu a {
		color: #0508a8 !important;
		display: block !important;
		font-size: 15px;
		padding: 8px 5px !important;
		white-space: normal;
		width: 100%;
	}

	.spark-responsive-dropdown-nav .sub-menu a:hover,
	.spark-responsive-dropdown-nav .sub-menu a:focus-visible {
		background: #f1f5fb;
	}

	.spark-responsive-dropdown-nav .spark-submenu-toggle {
		color: #0508a8 !important;
	}

	.spark-mobile-toggle {
		align-items: center;
		border: 1px solid #d1d5db !important;
		border-radius: 10px !important;
		display: inline-flex !important;
		flex: 0 0 44px;
		height: 44px;
		justify-content: center;
		width: 44px;
	}

	[type=button].spark-submenu-toggle {
        background-color: transparent !important;
        color: #000000 !important;
    }

	.spark-hamburger,
	.spark-hamburger::before,
	.spark-hamburger::after {
		background: #0508a8;
		content: "";
		display: block;
		height: 2px;
		position: relative;
		transition: transform 0.2s ease, opacity 0.2s ease;
		width: 22px;
	}

	.spark-hamburger::before,
	.spark-hamburger::after {
		left: 0;
		position: absolute;
	}

	.spark-hamburger::before {
		top: -7px;
	}

	.spark-hamburger::after {
		top: 7px;
	}

	.spark-mobile-toggle[aria-expanded="true"] .spark-hamburger {
		background: transparent;
	}

	.spark-mobile-toggle[aria-expanded="true"] .spark-hamburger::before {
		transform: translateY(7px) rotate(45deg);
	}

	.spark-mobile-toggle[aria-expanded="true"] .spark-hamburger::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	.spark-mobile-overlay {
		background: #0508a8;
		color: #fff;
		display: block;
		inset: 0;
		max-width: 100%;
		opacity: 0;
		overflow: hidden;
		position: fixed;
		transform: translateX(100%);
		transition: transform 0.32s ease, opacity 0.25s ease, visibility 0.32s ease;
		visibility: hidden;
		z-index: 9999;
	}

	.spark-mobile-overlay.is-open {
		opacity: 1;
		transform: translateX(0);
		visibility: visible;
	}

	/* overflow-y was hidden until 2026-09-22, which clipped the region trigger
	   off the bottom on short screens (iPhone SE, phones in landscape). It now
	   scrolls as a last resort, once .spark-mobile-panel-main has shrunk to its
	   min-height; on screens where everything fits nothing scrolls. */
	.spark-mobile-overlay-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
	}

	/* While the GDPR cookie banner is showing (flag and height set by
	   spark-cst-menu.js), end the panel at the banner's top edge so the region
	   trigger stays tappable. Height, not padding: padding sits inside the
	   scroll area, so content behind the banner would never scroll clear. */
	html.spark-has-cookie-bar .spark-mobile-overlay-inner {
		height: calc(100% - var(--spark-cookie-bar-offset, 0px));
	}

	.spark-mobile-panel-header {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		justify-content: space-between;
		min-height: 82px;
		padding: 18px 24px;
	}

	.spark-mobile-logo-image {
		height: auto;
		max-height: 48px;
		max-width: 210px;
		width: auto;
	}

	.spark-mobile-logo-text {
		color: #fff;
	}

	.spark-mobile-close {
		align-items: center;
		color: #fff !important;
		display: inline-flex !important;
		font-size: 38px !important;
		height: 44px;
		justify-content: center;
		line-height: 1;
		width: 44px;
	}

	.spark-mobile-close-image {
		height: 24px;
		width: 24px;
	}

	.spark-mobile-panel-search {
		flex: 0 0 auto;
		/* padding: 4px 24px 22px; */
	}

	.spark-mobile-search-trigger {
		align-items: center;
		/* background: rgba(255, 255, 255, 0.12) !important; */
		/* border: 1px solid rgba(255, 255, 255, 0.35) !important; */
		/* border-radius: 999px !important; */
		color: #fff !important;
		cursor: pointer;
		display: inline-flex !important;
		font-size: 16px;
		font-weight: 600;
		gap: 12px;
		justify-content: flex-start;
		/* min-height: 48px; */
		/* padding: 10px 18px !important; */
		text-align: left;
		transition: background 0.2s ease, border-color 0.2s ease;
		width: 100%;
	}

	.spark-mobile-search-trigger:hover,
	.spark-mobile-search-trigger:focus-visible {
		background: rgba(255, 255, 255, 0.2) !important;
		border-color: rgba(255, 255, 255, 0.6) !important;
	}

	.spark-mobile-search-icon {
		font-size: 20px;
		line-height: 1;
	}

	.spark-mobile-search-icon .spark-search-icon-image {
		display: inline-block;
		height: 20px;
		object-fit: contain;
		vertical-align: middle;
		width: 20px;
	}

	.spark-mobile-search-label {
		flex: 1 1 auto;
	}

	.spark-mobile-panel-meta {
		align-items: center;
		display: none;
		flex: 0 0 auto;
		gap: 14px;
		min-height: 0;
		padding: 0;
	}

	.spark-mobile-panel-meta.is-submenu-level {
		display: flex;
		min-height: 46px;
		padding: 0 24px 10px;
	}

	.spark-mobile-panel-meta[hidden] {
		display: none !important;
	}

	.spark-mobile-back[hidden],
	.spark-mobile-back:not(.is-back-visible) {
		display: none !important;
		visibility: hidden !important;
	}

	.spark-mobile-back.is-back-visible {
		display: inline-flex !important;
		visibility: visible !important;
	}

	.spark-mobile-back {
		color: #89f023 !important;
		font-size: 28px;
		line-height: 1;
	}

	.spark-mobile-back:hover {
		background-color: transparent !important;
	}
	
	.spark-mobile-current-title {
		color: #89f023;
		font-size: 28px;
		font-weight: 600;
		line-height: 1.2;
	}

	/* min-height was 260px, which forced a 600px-tall panel on a 568px iPhone
	   SE. It only applies when space is short; where the panel fits, flex-grow
	   makes the list taller than this anyway. */
	.spark-mobile-panel-main {
		flex: 1 1 auto;
		min-height: 160px;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	.spark-mobile-panel-main .spark-menu,
	.spark-mobile-panel-main .sub-menu {
		align-items: stretch;
		background: #0508a8;
		display: block !important;
		height: 100%;
		left: 0;
		opacity: 0;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 24px 18px !important;
		pointer-events: none;
		position: absolute;
		top: 0;
		transform: translateX(100%);
		transition: transform 0.32s ease, opacity 0.25s ease, visibility 0.32s ease;
		visibility: hidden;
		width: 100%;
		z-index: 1;
	}

	.spark-mobile-panel-main .spark-menu.is-level-active,
	.spark-mobile-panel-main .sub-menu.is-level-active {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
		visibility: visible;
		z-index: 3;
	}

	.spark-mobile-panel-main .spark-menu.is-level-prev,
	.spark-mobile-panel-main .sub-menu.is-level-prev {
		opacity: 1;
		pointer-events: none;
		transform: translateX(0);
		visibility: visible;
		z-index: 2;
	}

	.spark-mobile-panel-main .spark-menu > li,
	.spark-mobile-panel-main .sub-menu > li {
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		display: flex;
		gap: 12px;
		justify-content: space-between;
		min-width: 0;
		padding: 16px 0;
		position: static;
	}

	.spark-mobile-panel-main .menu-item-has-children.spark-mobile-has-submenu {
		cursor: pointer;
	}

	.spark-mobile-panel-main .menu-item-has-children.spark-mobile-has-submenu > a {
		cursor: pointer;
	}

	/* .sub-menu li a:hover {
        color: rgb(255, 255, 255);
        background-color: #0f4fd3;
        transform: scale(1.03);
        transition: transform 0.3s ease;
        background-image: url(/wp-content/uploads/sites/13/2023/09/Vector.png);
        background-position: 92%;
        background-repeat: no-repeat;
    } */

	.spark-mobile-panel-main .spark-menu a,
	.spark-mobile-panel-main .sub-menu a {
		color: #fff;
		flex: 1 1 auto;
		font-size: 24px;
		line-height: 1.25;
		min-width: 0;
		overflow-wrap: anywhere;
		padding: 0;
		pointer-events: auto;
		position: relative;
		word-break: break-word;
		z-index: 2;
	}

	.spark-mobile-panel-main .is-level-active .spark-submenu-toggle {
		flex-shrink: 0;
		pointer-events: auto;
		position: relative;
		z-index: 3;
	}

	.spark-mobile-panel-main .spark-submenu-toggle {
		align-items: center;
		color: #fff !important;
		display: inline-flex !important;
		flex: 0 0 34px;
		height: 34px;
		justify-content: center;
		position: relative;
		width: 34px;
	}

	.spark-mobile-panel-main .spark-submenu-toggle .screen-reader-text,
	.spark-mobile-panel-main .spark-submenu-toggle .spark-submenu-icon {
		display: none;
	}

	.spark-mobile-panel-main .spark-submenu-toggle::before {
		border-bottom: 3px solid currentColor;
		border-right: 3px solid currentColor;
		content: "";
		height: 12px;
		transform: rotate(-45deg);
		width: 12px;
	}

	.spark-mobile-panel-divider {
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		flex: 0 0 auto;
		margin: 12px 24px;
	}

	.spark-mobile-panel-topbar {
		flex: 0 0 auto;
		max-height: 28vh;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 24px 22px;
		width: 100%;
	}

	.spark-mobile-panel-topbar .spark-menu {
		align-items: stretch;
		display: flex;
		flex-direction: row;
		gap: 2;
	}

	.spark-mobile-panel-topbar .spark-menu > li {
		border-bottom: 0;
		padding: 7px 0;
	}

	.spark-mobile-panel-topbar .spark-menu a {
		color: #fff;
		font-size: 18px;
		padding: 4px 0;
		gap:7px;
	}

	.spark-mobile-panel-topbar .spark-menu a::before {
		display: none !important;
	}

	/* Per-item icons sit on the dark panel at every width the overlay is
	   used (up to 1280px), so render them white here. The themes only did
	   this at <=767px, which left blue icons on tablet. Scoped to the
	   topbar so the region popup's colored brand icons are unaffected. */
	.spark-mobile-panel-topbar .spark-menu-item-icon {
		filter: brightness(0) saturate(100%) invert(100%);
	}
}

/* Mobile layout keeps the same behavior with tighter spacing. */
@media (max-width: 768px) {
	.spark-header-inner {
		padding: 0 14px;
	}

	.spark-search-toggle {
		display: none !important;
	}

	.spark-responsive-header {
		gap: 12px;
		min-height: 68px;
	}

	.spark-logo-image {
		max-width: 150px !important;
	}

	.spark-responsive-actions {
		gap: 10px;
	}

	.spark-responsive-top-bar-nav {
		display: none;
	}

	.spark-responsive-dropdown-nav .spark-menu {
		gap: 10px;
        /* border: 1px solid; */
	}

	.spark-responsive-actions .spark-menu > li > a {
		font-size: 14px;
		max-width: 36vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.spark-responsive-dropdown-nav .sub-menu a {
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}

	.spark-responsive-dropdown-nav .sub-menu {
		left: auto;
		max-width: 90vw;
		min-width: 150px;
		right: 0;
	}

	.spark-mobile-panel-header {
		min-height: 72px;
		padding: 14px 18px;
	}

	.spark-mobile-panel-search {
		padding: 2px 18px 18px;
	}

	.spark-mobile-panel-search .search-form {
		flex-direction: column;
	}

	.spark-mobile-panel-search .search-submit {
		width: 100%;
	}

	.spark-mobile-panel-meta.is-submenu-level {
		padding: 0 18px 8px;
	}

	.spark-mobile-current-title {
		font-size: 24px;
	}

	.spark-mobile-panel-main .spark-menu,
	.spark-mobile-panel-main .sub-menu {
		padding: 0 18px 16px !important;
	}

	.spark-mobile-panel-main .spark-menu > li,
	.spark-mobile-panel-main .sub-menu > li {
		padding: 15px 0;
	}

	.spark-mobile-panel-main .spark-menu a,
	.spark-mobile-panel-main .sub-menu a {
		font-size: 22px;
	}

	.spark-mobile-panel-divider {
		margin: 10px 18px;
	}

	.spark-mobile-panel-topbar {
		padding: 0 18px 18px;
	}
}

@media (min-width: 320px) and (max-width: 767px) {
    .homepage { 
        background-position: left !important;
    }
}

/* Mobile overlay: bottom region sheet (opens upward). */
@media (max-width: 1280px) {
	.spark-mobile-region-sheet {
		flex: 0 0 auto;
		margin-top: auto;
		position: relative;
		width: 100%;
		z-index: 5;
	}

	.spark-mobile-region-panel {
		--spark-region-horizontal-padding: 20px;
		--spark-region-icon-size: 28px;
		background: #89f023;
		box-sizing: border-box;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.38s ease, opacity 0.28s ease;
		width: 100%;
	}

	/* Opt-in fix, scoped to this one new class so it can't affect anything
	   else on any other site sharing this plugin: previously the panel grew
	   in normal document flow, which needed extra vertical space from
	   .spark-mobile-overlay-inner (a fixed-height, overflow:hidden flex
	   column already filled by the header/menu/search/top-bar rows above
	   it) — there usually wasn't any room left, so opening the panel just
	   got clipped invisible instead of appearing. Positioning it absolutely,
	   anchored just above its trigger button, makes it overlay on top of
	   the existing content instead, so it no longer depends on leftover
	   flex space to be visible. */
	.spark-mobile-region-panel-floating {
		bottom: 100%;
		left: 0;
		position: absolute;
		right: 0;
		z-index: 6;
	}

	.spark-mobile-region-sheet.is-open .spark-mobile-region-panel {
		max-height: min(52vh, 420px);
		opacity: 1;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .spark-menu {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .spark-menu > li {
		/* border-bottom: 1px solid rgba(0, 0, 0, 0.12); */
		padding: 0;
	}

	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .spark-menu > li:last-child {
		border-bottom: 0;
	}

	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .spark-menu a {
		align-items: center;
		box-sizing: border-box;
		color: #000 !important;
		display: flex;
		font-size: 17px;
		font-weight: 400;
		gap: 14px;
		line-height: 2.25;
		padding: 5px var(--spark-region-horizontal-padding) !important;
		width: 100%;
	}

	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .spark-menu a:hover,
	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .spark-menu a:focus-visible {
		background: rgba(255, 255, 255, 0.35);
		color: #000 !important;
	}

	.spark-mobile-region-sheet .spark-dropdown-nav.spark-responsive-dropdown-nav .sub-menu,
	.spark-mobile-region-sheet .spark-submenu-toggle {
		display: none !important;
	}

	.spark-mobile-region-trigger {
		align-items: center;
		background: #89f023 !important;
		border: 0 !important;
		box-sizing: border-box;
		color: #000 !important;
		cursor: pointer;
		display: flex !important;
		gap: 12px;
		justify-content: flex-start;
		/* min-height: 56px; */
        font-weight: 400 !important;
		padding: 5px var(--spark-region-horizontal-padding) !important;
		width: 100% !important;
	}

	.spark-mobile-region-trigger:hover,
	.spark-mobile-region-trigger:focus-visible {
		filter: brightness(1.03);
	}

	/* .spark-mobile-region-trigger-icon {
		background: radial-gradient(circle at 30% 30%, #6ecfff 0%, #0508a8 45%, #0508a8 100%);
		border: 2px solid rgba(255, 255, 255, 0.85);
		border-radius: 50%;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
		flex: 0 0 28px;
		height: 28px;
		width: 28px;
	} */

	.spark-mobile-region-trigger-icon {
		background-image: url("/wp-content/uploads/sites/13/2024/03/Frame-28.webp");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border: 2px solid rgba(255, 255, 255, 0.85);
		border-radius: 50%;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
		flex: 0 0 var(--spark-region-icon-size);
		height: var(--spark-region-icon-size);
		width: var(--spark-region-icon-size);
	}

	.spark-mobile-region-trigger-label {
		flex: 1 1 auto;
		font-size: 17px;
		font-weight: 400;
		line-height: 2.2;
	}

	.spark-mobile-region-trigger-chevron {
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		height: 22px;
		justify-content: center;
		width: 22px;
	}

	.spark-mobile-region-trigger-chevron::after {
		border-bottom: 2px solid #000;
		border-right: 2px solid #000;
		content: "";
		display: block;
		height: 10px;
		margin-top: -4px;
		transform: rotate(45deg);
		transition: transform 0.25s ease;
		width: 10px;
	}

	.spark-mobile-region-sheet.is-open .spark-mobile-region-trigger-chevron::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}
}

/* Short-viewport fix: scroll only the sub-sub-menu flyout on screens with limited height.
   The first-level sub-menu is intentionally left untouched so its absolutely-positioned
   children are never clipped. Only the deepest flyout column gets a height cap. */
@media (min-width: 1281px) and (max-height: 850px) {
	.spark-menu .sub-menu .sub-menu {
		max-height: calc(100vh - 130px);
		overflow-x: hidden;
		overflow-y: auto;
	}
}

/* "Ready Mix Concrete Solutions" flyout (menu-item-4233) has a very long product
   list that runs off the bottom of the viewport even on tall screens. Scoped to
   this one menu item's ID only, this plugin is shared across every subsite, and
   the generic .spark-menu .sub-menu .sub-menu rule above must stay untouched so
   other sites' shorter flyouts aren't affected. */
@media (min-width: 1281px) {
	#menu-item-4233 > .sub-menu {
		max-height: calc(100vh - 160px);
		overflow-x: hidden;
		overflow-y: auto;
	}
}

/* ==========================================================================
   Language switcher dropdown
   ========================================================================== */

/* Single plain text link (URL sourced from TranslatePress's own shortcode
   output, see render_language_switcher()) — no wrapper, no list, no dropdown
   chrome, just one <a> styled like the surrounding header links. */
.spark-lang-switcher-trp {
	border-bottom: 2px solid transparent;
	color: inherit;
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease, border-bottom-color 0.2s ease;
	white-space: nowrap;
}

.spark-lang-switcher-trp:hover,
.spark-lang-switcher-trp:focus-visible {
	color: #0508a8;
	border-bottom: 2px solid rgb(246 189 71);
}

@media (max-width: 480px) {
	.spark-lang-switcher-trp {
		font-size: 14px;
	}
}