/*
 * Spark CST Menu styles.
 *
 * Organized into base, desktop (>=1025px), tablet/small desktop (<=1024px),
 * and mobile (<=768px) sections. Markup is rendered in
 * includes/class-spark-cst-menu-plugin.php and behavior in
 * assets/js/spark-cst-menu.js.
 */

/* 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/9/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: 1025px) {
	.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/9/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: 1024px) {
    /* .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;
	}

	.spark-mobile-overlay-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
		max-width: 100%;
		overflow: hidden;
		width: 100%;
	}

	.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;
	}

	.spark-mobile-panel-main {
		flex: 1 1 auto;
		min-height: 260px;
		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/9/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 1024px), 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: 1024px) {
	.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/9/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: 1025px) 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: 1025px) {
	#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;
	}
}