/**
 * Custom Menu Styles
 *
 * Industries mega menu, styled from the "Industries open" state of the
 * Mideco-Main-Navigation wireframe.
 *
 * Markup source: Flatsome UX Block "industries-mega-menu" (post ID 18791)
 *   [section class="industry-sub-menu"]
 *     [col class="top-header-menu"]  -> heading + "View all industries"
 *     [col class="link-group"]       -> 4 columns x 5 industry links
 *
 * Enqueued from functions.php.
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	--mideco-blue: #00aeef;
	--mideco-blue-dark: #016082;
	--mideco-text: #414042;
	--mideco-rule: rgba(1, 96, 130, 0.25);
	--mideco-rule-light: rgba(0, 0, 0, 0.07);
	--mideco-panel-pad: 30px;
}

/* ==========================================================================
   Panel shell
   ========================================================================== */

.industry-sub-menu {
	background: #fff;
	box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
	padding: var(--mideco-panel-pad);
	color: var(--mideco-text);
	box-sizing: border-box;
}

/* Flatsome sections add their own padding wrapper; neutralise it so the
   panel padding above is the single source of truth. */
.industry-sub-menu .section-content {
	padding: 0;
}

.industry-sub-menu .row {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ==========================================================================
   Header row: "Industries we serve" + "View all industries"
   ========================================================================== */

.industry-sub-menu .top-header-menu {
	padding: 0 0 10px;
	border-bottom: 1px solid var(--mideco-rule);
	margin: 0 0 16px;
	width: 100%;
	max-width: none;
	flex-basis: 100%;
}

/* Flatsome nests .col > .col-inner > .row; the inner row is the flex line. */
.industry-sub-menu .top-header-menu > .col-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	max-width: none;
}

.industry-sub-menu .top-header-menu .col,
.industry-sub-menu .top-header-menu .col-inner {
	padding: 0;
	margin: 0;
	width: auto;
	max-width: none;
	flex: 0 1 auto;
}

.industry-sub-menu .top-header-menu h2,
.industry-sub-menu .top-header-menu .label{
	font: 700 15px/1 Poppins, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mideco-blue-dark);
	margin: 0;
   width: auto;
}

.industry-sub-menu .top-header-menu a,
.industry-sub-menu .top-header-menu .button,
.industry-sub-menu .top-header-menu .button span {
	color: var(--mideco-blue);
	font: 600 12.8px/1 Poppins, sans-serif;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0;
	background: none;
}

.industry-sub-menu .top-header-menu .button:hover span{
	color: #016082 !important;
	cursor: pointer;
}

.industry-sub-menu .top-header-menu a:hover,
.industry-sub-menu .top-header-menu .button:hover {
	color: var(--mideco-blue-dark);
}

/* ==========================================================================
   Link grid: 4 columns x 5 industries
   ========================================================================== */

.industry-sub-menu .link-group {
	padding: 0;
	width: 100%;
	max-width: none;
	flex-basis: 100%;
}

/* The grid lives on the nested .row (a grandchild of .link-group). */
.industry-sub-menu .link-group > .col-inner > .row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 34px;
	margin: 0;
	max-width: none;
}

.industry-sub-menu .link-group .col {
	padding: 0;
	max-width: none;
	flex: none;
	width: auto;
}

.industry-sub-menu .link-group .col-inner {
	padding: 0;
}
.nav-dropdown { border-radius: 0 !important; overflow: hidden; }
.industry-sub-menu .link-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.industry-sub-menu .link-group li {
	margin: 0;
}
.menu-item-has-block .nav-dropdown .industry-sub-menu .col-inner ul:not(.nav.nav-vertical) li:not(.tab):not([class^=bullet-]) {
   margin: 0 !important;
}

.industry-sub-menu .link-group li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	font: 500 14px/1.3 Poppins, sans-serif;
	color: var(--mideco-text);
	text-decoration: none;
	border-bottom: 1px solid var(--mideco-rule-light);
}

.industry-sub-menu .link-group li a:hover {
	color: var(--mideco-blue);
}

/* The Powder Coating / Agriculture links wrap their label in nested spans. */
.industry-sub-menu .link-group li a .sc-interp {
	display: inline;
}
.nav-dropdown-default .nav-column li>a, .nav-dropdown.nav-dropdown-default>li>a {
   font: 500 14px/1.3 Poppins, sans-serif;
}
.nav-dropdown-default .nav-column li>a, .nav-dropdown.nav-dropdown-default>li>a:hover {
   color: var(--mideco-blue);
}
/* ==========================================================================
   Status badges (New / Fix / Page not live yet)
   ========================================================================== */

.industry-sub-menu .menu-badge {
	flex: none;
	font: 700 11px/1 Poppins, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
	padding: 4px 8px;
	white-space: nowrap;
}

.industry-sub-menu .menu-badge--new {
	background: #627d47;
	color: #fff;
}

.industry-sub-menu .menu-badge--fix {
	background: #f6b519;
	color: #000;
}

.industry-sub-menu .menu-badge--planned {
	background: #d7d7d7;
	color: var(--mideco-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.industry-sub-menu .link-group > .col-inner > .row {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 24px;
	}
}

@media (max-width: 549px) {
	.industry-sub-menu {
		padding: 20px;
	}

	.industry-sub-menu .link-group > .col-inner > .row {
		grid-template-columns: 1fr;
	}

	.industry-sub-menu .top-header-menu > .col-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
   Mobile drawer (wireframe item 06 — "Mobile drawer, 390px")
   --------------------------------------------------------------------------
   Flatsome renders the drawer as:
     .off-canvas-left > .mfp-content > #main-menu.mobile-sidebar
       > .sidebar-menu > ul.nav-sidebar > li.menu-item
   Submenu toggles (a.toggle > i.icon-angle-*) are injected by flatsome.js
   into every li.menu-item-has-children.
   ========================================================================== */

@media (max-width: 849px) {
   .mfp-ready .mfp-close {
      color: rgb(65, 64, 66);
      display: none !important;
   }
   .header-search-form {
      display: none !important;
      opacity: 0 !important;
   }

	/* --- Panel: 334px of the 390px frame, white, hard shadow --- */

	:root {
		--drawer-width: 334px;
	}

	.off-canvas-left .mfp-content,
	.off-canvas-right .mfp-content {
		background-color: #fff;
		box-shadow: 6px 0 26px rgba(0, 0, 0, 0.35);
	}

	/* Dim the page behind the drawer (wireframe uses a .55 scrim).
	   .mfp-bg is a sibling of .off-canvas, not a descendant; the menu
	   icon tags it with data-bg="main-menu-overlay". */
	.mfp-bg.main-menu-overlay.mfp-ready {
		background: #000;
		opacity: 0.55;
	}

	/* The drawer panel is a fixed-height viewport column. Constraining
	   height (not just min-height) is what lets the nav scroll and the
	   footer group stay pinned - with min-height alone the nav just grows
	   and pushes the footer off-screen. */
	.off-canvas-left .mfp-content,
	.off-canvas-right .mfp-content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	#main-menu.mobile-sidebar {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		height: 100%;
	}

	#main-menu .sidebar-menu {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		height: 100%;
		padding: 0;
	}


	/* The nav fills the drawer and is the scroll container, so the pinned
	   footer group below stays visible while the menu rows scroll. */
	#main-menu .nav-sidebar {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		padding: 6px 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- Logo row: 68px header with a divider --- */

	#main-menu .nav-sidebar > li.html.custom {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 68px;
		padding: 0 18px;
		margin: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* Close button, injected beside the logo by functions.php. */
	#main-menu .drawer-close {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0;
		margin-right: -10px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 50%;
		color: #1b1b1b;
		cursor: pointer;
		line-height: 0;
		min-height: 0;
		box-shadow: none;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	#main-menu .drawer-close:hover,
	#main-menu .drawer-close:focus-visible {
		background: rgba(0, 0, 0, 0.06);
		color: var(--mideco-blue);
	}

	#main-menu .drawer-close svg {
		display: block;
		width: 16px;
		height: 16px;
	}

	#main-menu .nav-sidebar > li.html.custom img {
		max-width: 150px !important;
		margin-bottom: 0 !important;
	}

	/* --- Top-level rows: 52px, uppercase --- */

	/* Flatsome's sidebar <li> is content-box, so side padding adds to the
	   100% width and overflows the fixed-width drawer. border-box keeps
	   every row inside the panel. */
	#main-menu .nav-sidebar > li,
	#main-menu .nav-sidebar > li > a,
	#main-menu .nav-sidebar .sub-menu li,
	#main-menu .nav-sidebar .sub-menu a {
		box-sizing: border-box;
	}

	#main-menu .nav-sidebar > li.menu-item {
		display: block;
		flex: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	/* The row padding lives on the <li>; the link fills it edge to edge. */
	#main-menu .nav-sidebar > li.menu-item > a {
		padding-left: 0;
		padding-right: 0;
	}

	#main-menu .nav-sidebar > li.menu-item > a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 0 18px;
		font: 500 14.5px/1.3 Poppins, sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #1b1b1b;
		text-decoration: none;
	}

	#main-menu .nav-sidebar > li.menu-item > a:hover {
		color: var(--mideco-blue);
	}

	/* --- Accordion toggle: blue chevron on the right of the row --- */

	#main-menu .nav-sidebar > li.menu-item-has-children,
	#main-menu .nav-sidebar .sub-menu > li.menu-item-has-children {
		position: relative;
	}

	/* flatsome.js injects <button class="toggle"> as a sibling of the
	   <ul>, and tracks open state with aria-expanded on the <li>. */
	#main-menu .nav-sidebar > li > .toggle {
		position: absolute !important;
		top: 0 !important;
		right: 0;
		left: auto !important;
		width: 52px !important;
		height: 52px;
		margin: 0 !important;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--mideco-blue);
	}

	#main-menu .nav-sidebar > li > .toggle i {
		font-size: 20px;
		margin: 0;
		color: var(--mideco-blue);
		transition: transform 0.2s ease;
	}

	/* Keep the label clear of the toggle. */
	#main-menu .nav-sidebar > li.menu-item-has-children > a {
		padding-right: 52px;
	}

	/* --- Expanded panel: grey inset, 46px rows --- */

	#main-menu .nav-sidebar .sub-menu {
		background: #f7f7f7;
		padding: 8px 0 12px;
		margin: 0 -20px;
      width: auto;
	}

	#main-menu .nav-sidebar .sub-menu li {
		margin: 0;
		border: 0;
	}

	#main-menu .nav-sidebar .sub-menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-height: 46px;
		padding: 0 18px;
		font: 500 14px/1.3 Poppins, sans-serif;
		text-transform: none;
		letter-spacing: 0;
		color: var(--mideco-text);
		text-decoration: none;
	}

	#main-menu .nav-sidebar .sub-menu a:hover {
		color: var(--mideco-blue);
	}

	/* Group headings ("Branded products", "Dust control solutions") are
	   non-linking custom items that head a nested list. */
	#main-menu .nav-sidebar .sub-menu > li.menu-item-has-children > a[href="#"],
	#main-menu .nav-sidebar .sub-menu > li.menu-item-has-children > .menu-plaintext-text {
		font: 700 13px/1 Poppins, sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--mideco-blue-dark);
		padding: 10px 18px 10px;
		min-height: 0;
		pointer-events: none;
        margin-top: 7px;
		display: block;
	}

	/* Headings are labels, not accordions - hide their injected toggle. */
	#main-menu .nav-sidebar .sub-menu > li.menu-item-has-children > .toggle {
		display: none !important;
	}

	/* A nested list under a heading is always visible — no second accordion. */
	#main-menu .nav-sidebar .sub-menu .sub-menu {
		display: block !important;
		background: none;
		padding: 0;
      margin: 0;
	}

	/* ----------------------------------------------------------------
	   Pinned footer: "Contact us" pill + contact details.

	   Both are <li>s inside .nav-sidebar (the pill is injected by
	   functions.php just before the contact list), lifted into
	   .drawer-footer so the menu rows above scroll while this group
	   stays pinned to the bottom of the drawer.
	   ---------------------------------------------------------------- */

	/* functions.php lifts the footer <li>s out of the scrolling <ul>
	   into this sibling wrapper, so the list scrolls beneath a footer
	   that stays fixed to the bottom of the drawer. */
	#main-menu .drawer-footer {
		flex: none;
		list-style: none;
		margin: 0;
		padding: 16px 18px 20px;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}

	#main-menu .drawer-footer > li {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	/* The drawer has no search field in the wireframe; the element is
	   still registered in Customizer > Header > Mobile Sidebar, so it is
	   hidden here rather than removed from the header config. */
	#main-menu li.header-search-form {
		display: none;
	}

	#main-menu .drawer-footer > li.drawer-contact-item {
		margin-bottom: 12px;
	}

	#main-menu .drawer-contact-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		background: var(--mideco-blue);
		color: #fff;
		font: 700 10.88px/1 Poppins, sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.3264px;
		border-radius: 99px;
		text-decoration: none;
	}

	#main-menu .drawer-contact-btn:hover {
		background: var(--mideco-blue-dark);
		color: #fff;
	}

	#main-menu .header-contact {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		border: 0;
	}

	#main-menu .header-contact li {
		width: 100%;
		border: 0 !important;
		margin: 0;
	}

	#main-menu .header-contact li a {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 0;
		padding: 0;
		font: 400 12px/1.4 Poppins, sans-serif;
		text-transform: none;
		letter-spacing: 0;
		color: var(--mideco-text);
	}
}

/* ==========================================================================
   Products mega menu — typography and clickable cards
   (wireframe item 02, "Products open")
   --------------------------------------------------------------------------
   Layout is left as-is; this only restyles the headings and card text,
   and extends each card's existing link over the whole card.
   ========================================================================== */

/* --- Section headings: "Branded products" / "Dust control solutions" ---
   Only the first heading carries .menu-item-heading, so both the wrapper
   and the bare h2 are targeted. */

.product-submenu-item .menu-item-heading,
.product-submenu-item .menu-item-heading h2,
.product-submenu-item h2,
.product-submenu-item .label{
	font: 700 15px/1 Poppins, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mideco-blue-dark);
	margin: 0;
}

.product-submenu-item .menu-item-heading,
.product-submenu-item > .section-content > .row > .col > .col-inner > .label {
	padding: 0 0 10px;
	border-bottom: 1px solid var(--mideco-rule);
	margin: 0 0 18px;
}

/* The wrapper already carries the rule; don't double it on the inner h2. */
.product-submenu-item .menu-item-heading h2 {
	padding: 0;
	border: 0;
}

/* --- Card title --- */

.product-submenu-item h3,
.product-submenu-item .menu-title {
	font: 700 18px/1.2 'Univers Condensed', 'Archivo Narrow', 'Arial Narrow', sans-serif;
	color: #000;
	text-transform: none;
	letter-spacing: 0;
	margin: 10px 0 4px;
	transition: color 0.2s ease;
}

/* --- Card description --- */

.product-submenu-item .col-inner > .text p {
	font: 400 12px/19.2px Poppins, sans-serif;
	color: var(--mideco-text);
	margin: 0;
	line-height: 1.3;
}

/* --- Whole card clickable ---
   Each card ships a single <a class="fill"> buried inside
   .banner > .banner-inner > .banner-layers, all of which are absolutely
   positioned - so the link can only ever cover the image, and .banner
   must keep its positioning or the 3:2 image breaks.

   functions.php therefore adds a sibling <a class="card-link"> as a
   direct child of .col-inner, which this rule stretches over the whole
   card. Nothing about the banner is touched. */

.product-submenu-item .col-inner {
	position: relative;
}

.product-submenu-item .col-inner > .card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* No visual change; purely a hit target. */
	background: none;
	border: 0;
}

/* Hover the card only.
   .col-inner matches both the 13 cards AND the two pane wrappers that
   contain them, so `.col-inner:hover h3` would recolour every title in a
   pane at once. :has(> .banner) narrows it to card-level wrappers, and
   `> .text h3` keeps the change to that card's own title. */
.product-submenu-item .col-inner:has(> .banner):hover > .text h3 {
	color: var(--mideco-blue);
}

/* ==========================================================================
   Header nav — resting state (wireframe item 01, "Desktop, resting")
   --------------------------------------------------------------------------
   The live header already matches most of the spec: 500 12.8px Poppins,
   uppercase, .256px tracking, white on the transparent hero, a 71px row
   and a 3px #00aeef active underline. Only the item spacing and the
   dropdown caret differ, so only those are adjusted here.
   ========================================================================== */

@media (min-width: 850px) {

	/* Wireframe: 13px between items plus 4px padding each side (21px
	   visual). Flatsome's nav-spacing-xlarge puts 13px on BOTH sides of
	   every <li>, which reads as a 26px gap. */
	.header-nav-main.nav-spacing-xlarge > li {
		margin: 0 4px;
	}

	.header-nav-main.nav-spacing-xlarge > li + li {
		margin-left: 17px;
	}

	/* Wireframe caret: 7px, .85 opacity, tight to the label.
	   Flatsome ships a 16px icon at .6. */
	.header-nav-main > li.menu-item-has-children > a > i.icon-angle-down {
		font-size: 16px;
		opacity: 0.85;
		margin-left: 5px;
	}

	/* Wireframe turns the hovered label blue; Flatsome keeps it white and
	   shows only the underline. The 3px #00aeef bar already matches.

	   .nav-dark .nav>li>a:hover sets white for transparent headers, so
	   the override matches that specificity (.nav-dark + .nav + >li>a). */
	/* .nav-dark .nav.header-nav-main > li > a:hover,
	.nav-dark .nav.header-nav-main > li:hover > a,
	.header:not(.transparent) .header-nav-main.nav > li > a:hover {
		color: var(--mideco-blue);
	} */

	/* .nav-dark .nav.header-nav-main > li:hover > a > i.icon-angle-down {
		color: var(--mideco-blue);
	} */
   .header-main .nav > li > a {
      font: 500 14px/1.3 Poppins, sans-serif;
   }
/*    .menu-item-40 .nav-dropdown {
      border-radius: 0 !important;
   } */
   .product-submenu-item  .row .row:not(.row-collapse) {
      max-width: none !important;
   }
}

@media(max-width: 1359px) {
	#menu-item-18684 {
		display: none;
	}
}

@media (max-width: 850px) {
	#menu-item-18684 {
		display: block;
	}
}

@media screen and (min-width: 850px) {
	.grid-5cols {
		max-width: 72%
	}
	.grid-2cols {
		flex-basis: 28%;
		max-width: 28%
	}
	.grid-5cols .large-3 {
		max-width: 20%;
	}
}

.header-top .nav-dropdown,
.mobile-nav .nav-dropdown {
	padding: 0px;
	width: 82px !important;
}
.mobile-nav .nav-top-link,
.header-top .nav-top-link {
	min-width: 65px;
}