/* JSONSwitcher SEO Patch — header menu (ASAP theme, menu "JSONSwitcher Main Menu").
   Same design as csvshift-seo-patch 1.0.2 (one line, card dropdowns) in the site's teal.
   Desktop only above ASAP's 1050px breakpoint; the theme's off-canvas menu is kept on mobile.
   Note: the theme sets header links to #FFFFFF on a white header, so colours are forced. */

@media (min-width: 1051px) {
	.site-header .site-header-content { max-width: 1140px; }
	.site-header { border-bottom: 1px solid #ECEAE6; }
	.site-header .site-logo { margin-right: 40px; flex-shrink: 0; }

	#menu > ul.header-menu {
		display: flex; align-items: center; justify-content: flex-end;
		flex-wrap: nowrap; white-space: nowrap; font-size: 15px;
	}
	#menu > ul.header-menu > li { margin: 0 0 0 24px; line-height: 68px; position: relative; }
	#menu > ul.header-menu > li:first-child { margin-left: 0 !important; }
	#menu > ul.header-menu > li > a { color: #1C1C1E !important; font-weight: 400; letter-spacing: -.005em; transition: color .15s; }
	#menu > ul.header-menu > li:hover > a,
	#menu > ul.header-menu > li.current-menu-ancestor > a,
	#menu > ul.header-menu > li.current-menu-item > a { color: #0EA882 !important; }

	/* Active category: underline on the label (li::after is the theme's chevron). */
	#menu > ul.header-menu > li.current-menu-ancestor > a,
	#menu > ul.header-menu > li.current-menu-item:not(:last-child) > a {
		text-decoration: underline; text-decoration-color: #0EA882;
		text-decoration-thickness: 2px; text-underline-offset: 9px;
	}

	#menu > ul.header-menu .menu-item-has-children > a { padding-right: 6px; }
	#menu > ul.header-menu > .menu-item-has-children::after {
		padding: 2.5px; border-width: 0 1.5px 1.5px 0 !important; border-color: #8A857D !important; top: -3px;
	}
	#menu > ul.header-menu > .menu-item-has-children:hover::after,
	#menu > ul.header-menu > .menu-item-has-children.current-menu-ancestor::after { border-color: #0EA882 !important; }

	/* "All tools" as an outline pill (last item). */
	#menu > ul.header-menu > li:last-child:not(.menu-item-has-children) > a {
		display: inline-block; line-height: 1; padding: 9px 16px; border-radius: 999px;
		border: 1.5px solid #0EA882; color: #0EA882 !important; font-weight: 600;
	}
	#menu > ul.header-menu > li:last-child:not(.menu-item-has-children) > a:hover { background: #0EA882; color: #fff !important; }

	/* Dropdowns: card style. */
	#menu > ul.header-menu > li > ul.sub-menu {
		top: 58px; left: -14px !important; right: auto !important; width: auto; min-width: 230px;
		margin: 0; padding: 8px; border-radius: 12px;
		background: #fff; border: 1px solid #ECEAE6;
		box-shadow: 0 12px 32px rgba(28, 28, 30, .14), 0 2px 6px rgba(28, 28, 30, .06);
		white-space: nowrap;
	}
	/* ASAP's JS writes inline left/right on open, hence !important.
	   Last three dropdowns open towards the left so they never leave the screen. */
	#menu > ul.header-menu > li:nth-last-child(-n+3) > ul.sub-menu { left: auto !important; right: -14px !important; }
	/* Long lists (9+ tools) in two columns. */
	#menu > ul.header-menu > li > ul.sub-menu:has(> li:nth-child(9)) { columns: 2; column-gap: 6px; width: 470px; }

	#menu > ul.header-menu > li > ul.sub-menu > li {
		float: none; display: block; width: auto; line-height: 1.4;
		break-inside: avoid; border-radius: 8px; background: transparent;
	}
	#menu > ul.header-menu > li > ul.sub-menu > li:hover { background: #EDFAF5; }
	#menu > ul.header-menu > li > ul.sub-menu > li > a {
		display: block; padding: 8px 12px !important; border-radius: 8px;
		font-size: 14px !important; font-weight: 400; color: #1C1C1E !important;
	}
	#menu > ul.header-menu > li > ul.sub-menu > li > a:hover,
	#menu > ul.header-menu > li > ul.sub-menu > li.current-menu-item > a { color: #0C9472 !important; }
	#menu > ul.header-menu > li > ul.sub-menu > li.current-menu-item { background: #EDFAF5; }
}

@media (min-width: 1051px) and (max-width: 1240px) {
	#menu > ul.header-menu { font-size: 14px; }
	#menu > ul.header-menu > li { margin-left: 16px; }
	#menu > ul.header-menu > li:last-child:not(.menu-item-has-children) > a { padding: 8px 12px; }
}

/* Mobile off-canvas: single column, readable colours. */
@media (max-width: 1050px) {
	#menu ul.header-menu ul.sub-menu { columns: 1; width: auto; }
}