/*
 * KD Category Menu — styles for the rail + panel layout built by
 * js/kd-category-menu.js. See the header of that file for why.
 *
 * Everything is scoped to #mega-menu-wrap-primary and to desktop widths
 * (Max Mega Menu's mobile accordion starts at 991px). The ids give these rules
 * enough weight to beat Max Mega Menu's own reset, which is written against
 * the same ids.
 *
 * 0.3.0 DARK (Shannon, 2026-11-10: "make the menu dark and more like KD
 * Machinery brand colors"). Colours come from the theme's own brand variables,
 * read from the live site: --primary-dark #222222 (header, nav bar, footer),
 * --primary-light #CBCBCB (the header's grey text), --primary-accent #32ADFB
 * (the logo blue; the CONTACT US button is dark with blue text). Each is used
 * with the measured value as fallback, so a theme colour change carries
 * through. They are gathered once into --kd-cm-* properties on the menu row
 * so a future colour change is one place, not twelve.
 *
 * 0.3.3 (Shannon, 2026-11-10: "make subcategories white, make the box and
 * text in general larger"): subcategory names white; text up ~2px (parents
 * 17, subcategories 16 / 15 compact, View all 15, bottom links 14), rail
 * 290px, roomier padding and row gap.
 *
 * 🪤 The theme's uppercase/colour rules for these links are written against
 * the ORIGINAL nesting (li.mega-menu-column ... ul.hf-dyn-category-menu ...).
 * Once the script moves the links out of that nesting those rules stop
 * matching, so every look the links had is restated here.
 */
@media (min-width: 992px) {
	#mega-menu-wrap-primary #mega-menu-primary li.kd-cm-replaced {
		display: none;
	}

	#mega-menu-wrap-primary #mega-menu-primary li.kd-cm {
		--kd-cm-bg: var(--primary-dark, #222222);
		--kd-cm-rail: #181818;
		--kd-cm-active: #2e2e2e;
		--kd-cm-line: #3a3a3a;
		--kd-cm-text: var(--primary-light, #cbcbcb); /* the three bottom links */
		--kd-cm-sub: #ffffff; /* subcategory names: white (Shannon, 0.3.3) */
		--kd-cm-head: #ffffff;
		--kd-cm-accent: var(--primary-accent, #32adfb);
		background: var(--kd-cm-bg);
		display: flex;
		align-items: stretch;
		width: 100%;
		padding: 0;
		list-style: none;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-rail {
		flex: 0 0 290px;
		background: var(--kd-cm-rail);
		border-right: 1px solid var(--kd-cm-line);
		padding: 8px 0;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-rail {
		display: flex;
		flex-direction: column;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-item a.hf-dyn-menu-item-a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding: 14px 24px;
		white-space: nowrap;
		color: var(--kd-cm-head);
		font-weight: 600;
		font-size: 17px;
		line-height: 1.4;
		text-transform: uppercase;
		text-decoration: none;
	}

	/* Active parent: lifted grey row, logo-blue text and a blue bar on the
	   left, like the site's dark CONTACT US button with blue text. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-item.is-active a.hf-dyn-menu-item-a {
		background: var(--kd-cm-active);
		color: var(--kd-cm-accent);
		box-shadow: inset 3px 0 0 var(--kd-cm-accent);
	}

	/*
	 * 0.3.2 FIXED HEIGHT (Shannon, 2026-11-10): the box must not grow or shrink
	 * as the visitor hovers from one parent to the next. All four panes are
	 * stacked in the SAME grid cell, so the box is always as tall as the
	 * tallest one (Other Equipment, 28 names), with no JavaScript measuring.
	 * The inactive panes are visibility:hidden, not display:none: they still
	 * take up room, but can't be seen, clicked or tabbed to.
	 * ⛔ Don't go back to display:none here; that is what made the box resize.
	 */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-panes {
		display: grid;
		flex: 1 1 auto;
		min-width: 0;
		padding: 26px 36px 20px;
		/* 0.4.8 (Shannon 2026-11-13: "make the whole section a white
		   background"): the right-hand panel (categories, logos, View all) is
		   white; the left rail stays dark. Text in it is dark (below). */
		background: #fff;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane {
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		min-width: 0;
		visibility: hidden;
	}

	/* 🔴 inherit, NEVER visible (0.3.6, Shannon 2026-11-10: "if i hover over
	   the menu then bring my mouse off … then to the middle it pops up").
	   When the menu closes, Max Mega Menu hides the dropdown with
	   visibility:hidden + opacity:0, but it stays in place. A hard "visible"
	   here beat that, so the active list sat invisible in the middle of the
	   page, caught the mouse and reopened the menu. "inherit" takes the
	   dropdown's own state: shown when it is open, hidden when it is closed. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane.is-active {
		visibility: inherit;
	}

	/*
	 * Columns are as wide as their longest name (max-content) so nothing wraps.
	 * The script picks 3, 2 or 1 columns, whichever is the most that fits.
	 * kd-cm-cols-3 is also the default before the script has measured.
	 */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane ul.hf-dyn-category-submenu {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		justify-content: space-between;
		gap: 10px 36px;
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
		position: static;
		/* inherit, not visible: Max Mega Menu hides sub-menus, so this must
		   undo that, but a hard "visible" would also override the hidden
		   inactive panes (0.3.2) and show all four lists on top of each other. */
		visibility: inherit;
		opacity: 1;
		width: auto;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane ul.hf-dyn-category-submenu.kd-cm-cols-2 {
		grid-template-columns: repeat(2, max-content);
		justify-content: start;
		column-gap: 64px;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane ul.hf-dyn-category-submenu.kd-cm-cols-1 {
		grid-template-columns: max-content;
		justify-content: start;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane ul.hf-dyn-category-submenu {
		margin-bottom: 16px;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane li.hf-dyn-submenu-item {
		margin: 0;
		padding: 0;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane a.hf-dyn-submenu-item-a {
		color: #222; /* 0.4.8: dark on the white panel (was white on dark, 0.3.3) */
		font-weight: 500;
		font-size: 16px;
		line-height: 1.4;
		text-transform: uppercase;
		text-decoration: none;
		/* HF sets pre-line, which honours a hard line break inside
		   "Granulators - Shredders -
 Pulverizers". nowrap ignores it. */
		white-space: nowrap;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane a.hf-dyn-submenu-item-a:hover,
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane a.hf-dyn-submenu-item-a:focus {
		color: var(--kd-cm-accent);
	}

	/* "View all" sits at the bottom of the box for every parent, so it is
	   always in the same place (margin-top:auto in the flex column pane).
	   The list's margin-bottom keeps at least 16px above it. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane a.kd-cm-all {
		display: inline-block;
		margin-top: auto;
		padding-top: 12px;
		border-top: 1px solid #e3e5e8;
		width: 100%;
		color: var(--kd-cm-accent);
		font-weight: 600;
		font-size: 15px;
		text-transform: uppercase;
		text-decoration: none;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane a.kd-cm-all:hover {
		color: #000; /* 0.4.8: was white, which vanishes on the white panel */
	}

	/*
	 * 0.4.0 FEATURED BRANDS (Shannon 2026-11-12): 8 logos, 2 rows of 4, like the
	 * competitor menu she sent (0.4.6: moved ABOVE "View all", inside the box). The menu is dark, and most
	 * brand logos are dark ink (Okuma navy, Hurco black), so each logo sits on
	 * its own light tile. The block has a FIXED height, and a pane with no
	 * logos keeps the same space empty, so "View all" stays at one spot on
	 * every parent (0.3.2 rule).
	 */
	/* 0.4.6 (Shannon 2026-11-13: "move them into the same box as the
	   categories above the view all"): the block is pushed to the bottom of the
	   pane (margin-top:auto) and "View all" follows it, so logos line up at one
	   spot on every parent and "View all" stays at the bottom. A pane with no
	   logos keeps "View all" at the bottom by its own margin-top:auto. */
	/* 0.4.7 (Shannon 2026-11-13: "make that portion of the menu a white
	   background so the logos can be larger and not in a box"): the block is a
	   full-width white band (negative margins cancel the panes' 36px side
	   padding), logos sit straight on it with no tiles, rows 70px tall. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-brands {
		/* 0.4.8 (Shannon 2026-11-13: "make them show up closer to the
		   categories text"): logos follow the category list directly; "View all"
		   keeps its own auto top margin and stays at the bottom. Fixed height so the
		   logos start at the same distance under every list. */
		height: 190px;
		margin-top: 22px;
		padding-top: 16px;
		border-top: 1px solid #e3e5e8;
		box-sizing: border-box;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane .kd-cm-brands + a.kd-cm-all {
		margin-top: auto;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-brands-label {
		margin: 0 0 10px;
		color: #555;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		opacity: 1;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-brands-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 70px;
		gap: 6px 18px;
	}

	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 14px;
		background: #f4f5f7;
		border: 2px solid transparent;
		border-radius: 6px;
		overflow: hidden;
		text-decoration: none;
		transition: border-color 0.15s;
	}

	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand:hover,
	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand:focus {
		border-color: var(--kd-cm-accent);
	}

	/*
	 * 0.4.5 (2026-11-13, seen live): every brand page's image is a 300x365 CARD,
	 * logo across the top and a machine photo underneath, not a bare logo. Shown
	 * whole, the logo was a few pixels tall. So each tile shows only the TOP 30%
	 * of the card (0.4.7: aspect 300:92, about the top 25%, cropped from the top; 300:110 left machine bits under Doosan/Fadal), which holds the logo on
	 * all 23 brands checked. A white tile matches the card's white background.
	 */
	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand:not(.is-text) {
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand:not(.is-text):hover img,
	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand:not(.is-text):focus img {
		opacity: 0.75;
	}

	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand img {
		display: block;
		height: 100%;
		width: auto;
		max-width: 100%;
		aspect-ratio: 300 / 92;
		object-fit: cover;
		object-position: center top;
	}

	/* 0.5.0: once the script has measured a card, the logo shows through a
	   window cut to the logo's own band (see frameLogo in the JS). The image
	   inside is the full card, positioned so only the logo is in view. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-logo-win {
		position: relative;
		display: block;
		overflow: hidden;
		max-height: 100%;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-logo-win img.is-framed {
		position: absolute;
		left: 0;
		width: 100%;
		height: auto;
		max-width: none;
		aspect-ratio: auto;
		object-fit: fill;
	}

	#mega-menu-wrap-primary #mega-menu-primary a.kd-cm-brand.is-text {
		color: #222;
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* New Arrivals / Recently Reduced / Popular Manufacturers, moved from the
	   blue bar under the menu into the left column.
	   0.3.1 (Shannon, 2026-11-10): they sit right under the four parents and
	   NEVER move. They used margin-top:auto (pinned to the bottom of the rail),
	   and the rail stretches to the tallest panel, so hovering Other Equipment
	   (28 subcategories) dropped them lower. ⛔ Don't pin them to the bottom. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-extras {
		margin-top: 8px;
		padding: 10px 0 4px;
		border-top: 1px solid var(--kd-cm-line);
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-extras a {
		display: block;
		padding: 8px 24px;
		color: var(--kd-cm-text);
		font-size: 14px;
		font-weight: 600;
		line-height: 1.4;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		background: none;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-extras a:hover,
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-extras a:focus {
		color: var(--kd-cm-accent);
	}

	/*
	 * The site's ">" chevron (Shannon, 2026-11-10: "match the rest of the
	 * site"). It is the same glyph the theme puts after New Arrivals etc. in the
	 * old blue bar: Font Awesome 5 Free, solid weight, chevron-right \f054.
	 * The theme's own rule is tied to the old blue-bar nesting, so it is
	 * restated here for every link that should carry it. Font Awesome is
	 * loaded by the theme on every page.
	 */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-item a.hf-dyn-menu-item-a::after,
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane a.kd-cm-all::after,
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-extras a::after {
		content: "\f054";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 12px;
		display: inline-block;
		padding-left: 10px;
		vertical-align: baseline;
	}

	/* Parent rows: chevron at the right-hand end, like the CRM menu. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-item a.hf-dyn-menu-item-a::after {
		padding-left: 0;
		font-size: 13px;
	}

	/*
	 * The dropdown box around our row is Max Mega Menu's own ul, white by
	 * default, and the open "Machine Categories" tab turns white too. Both are
	 * darkened only when our row is inside (:has), so if the script bails out
	 * the old white menu is left exactly as it was. A browser without :has
	 * just shows a thin white edge; nothing breaks.
	 */
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu:has(> li.kd-cm) {
		background: var(--primary-dark, #222222);
		border: 1px solid #3a3a3a;
		border-top: 0;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	}

	/*
	 * 0.3.4 TOP NAV (Shannon, 2026-11-10): "sometimes when i hover off the menu
	 * it shows the white box … i also want those other menu items to turn blue
	 * and not do the white box."
	 * Max Mega Menu paints EVERY top item (Machine Categories, Machine Locator,
	 * Auctions, …) white with navy text on :hover, on :focus AND while open
	 * (.mega-toggle-on). 0.3.0 only covered hover + open, so after a click the
	 * link kept :focus and flashed white as the mouse left. Now all three states
	 * on every top item are blue text with no box. Machine Categories, while
	 * open, gets the dark menu colour so the tab joins the dropdown.
	 * "body" adds one notch of weight: Max Mega Menu's rule has the same ids
	 * and classes, and its stylesheet may load after ours.
	 * Applies whether or not the category script ran (it is the plain nav bar).
	 */
	/* Mouse focus (left behind by a click): no box and the normal white text,
	   so a clicked item doesn't stay blue after the mouse has gone. */
	body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
		background: transparent;
		color: #ffffff;
		border-color: transparent;
	}

	/* Pointed at, open, or reached with the keyboard: blue, no box. */
	body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
	body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
	body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
		background: transparent;
		color: var(--primary-accent, #32adfb);
		border-color: transparent;
	}

	body #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu.mega-toggle-on:has(li.kd-cm) > a.mega-menu-link {
		background: var(--primary-dark, #222222);
	}

	/* One notch smaller, tried by the script before it drops a column. */
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane ul.hf-dyn-category-submenu.kd-cm-compact {
		column-gap: 20px;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-pane ul.hf-dyn-category-submenu.kd-cm-compact a.hf-dyn-submenu-item-a {
		font-size: 15px;
	}
}

/* Smaller desktops (the header container is 936px wide below 1200px): give
   the panel more room so it can keep two columns. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-rail {
		flex-basis: 220px;
	}

	#mega-menu-wrap-primary #mega-menu-primary .kd-cm-panes {
		padding: 16px 24px 12px;
	}
}