/*--------------------------------------------------------------
# Classic Polo — header, navigation and dropdown
#
# Overrides for the Elementor header (template 12) and the nav menu
# widget shipped in emts-addons. Kept here rather than edited in the
# plugin so plugin updates do not wipe it.
--------------------------------------------------------------*/

/*
 * 1. Typography globals
 *
 * The saved Elementor kit still names the previous family on all thirteen
 * typography globals, and that family is no longer fetched, so anything
 * driven by these variables fell back to the browser's default sans. The
 * navigation is one of them.
 *
 * Defined on body[class*="elementor-kit-"] so it outweighs the kit's own
 * .elementor-kit-NNNN block, and so it survives the kit id changing when a
 * kit is imported. Once a kit naming IBM Plex Sans is imported this block
 * simply repeats what the kit already says.
 */
body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family   : "IBM Plex Sans";
	--e-global-typography-secondary-font-family : "IBM Plex Sans";
	--e-global-typography-text-font-family      : "IBM Plex Sans";
	--e-global-typography-accent-font-family    : "IBM Plex Sans";
	--e-global-typography-e76bfbb-font-family   : "IBM Plex Sans";
	--e-global-typography-998f465-font-family   : "IBM Plex Sans";
	--e-global-typography-8849c99-font-family   : "IBM Plex Sans";
	--e-global-typography-7ef83ac-font-family   : "IBM Plex Sans";
	--e-global-typography-924371b-font-family   : "IBM Plex Sans";
	--e-global-typography-8e60e8d-font-family   : "IBM Plex Sans";
	--e-global-typography-cpdisplay-font-family : "IBM Plex Sans";
	--e-global-typography-cpeyebrow-font-family : "IBM Plex Sans";
	--e-global-typography-cplede-font-family    : "IBM Plex Sans";
}

/*
 * 1b. Elements the kit names a font on directly
 *
 * The kit does not use a variable for headings and buttons; it writes
 * font-family:"Outfit" straight into .elementor-kit-NNNN h1 and friends, so
 * overriding the variables above does not reach them.
 *
 * The body prefix takes this to (0,1,2) against the kit's (0,1,1), which
 * means it wins on weight and does not depend on which stylesheet the
 * browser happens to read last.
 */
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] h5,
body[class*="elementor-kit-"] h6,
body[class*="elementor-kit-"] button,
body[class*="elementor-kit-"] input,
body[class*="elementor-kit-"] select,
body[class*="elementor-kit-"] textarea,
body[class*="elementor-kit-"] .elementor-button {
	font-family: "IBM Plex Sans", sans-serif;
}

/*
 * 2. Light-on-dark corrections
 *
 * The kit sets a colour on h1-h6 at (0,1,1). Several theme rules that put
 * headings on a dark ground are written at the same weight, and the kit's
 * CSS is printed after the theme's, so those headings lost their colour and
 * went dark on dark. The page title banner is the visible one.
 *
 * These restate the theme's own intent one notch heavier rather than
 * introducing a new colour.
 */
body .cus-breadcrumb h1,
body .cus-breadcrumb .cus-page-title .entry-title {
	color: var( --accenttxtcolor, #fff );
}

body .ajax-post-search-form h4 {
	color: var( --accenttxtcolor, #fff );
}

/*
 * 3. The header bar
 *
 * White navigation needs a dark ground. The logo already carries a navy
 * field baked into the image, so the bar takes the same navy and the logo
 * sits on it without a visible edge.
 *
 * The element id below is the header's outer container in Elementor
 * template 12. If the header is ever rebuilt, update this one selector.
 */
@media screen and ( min-width: 1281px ) {

	body .elementor-12 .elementor-element.elementor-element-dcda785:not( .elementor-motion-effects-element-type-background ) {
		background-color: var( --e-global-color-primary, #0F2A5F );
	}

	/* Top level only. Dropdown items sit on a white panel and stay dark. */
	body .elementor-12 .elementor-element.elementor-element-aa4e201 .emts-menu > li.menu-item > a {
		color: #fff;
	}

	body .elementor-12 .elementor-element.elementor-element-aa4e201 .emts-menu > li.menu-item > a:hover,
	body .elementor-12 .elementor-element.elementor-element-aa4e201 .emts-menu > li.menu-item.current-menu-item > a,
	body .elementor-12 .elementor-element.elementor-element-aa4e201 .emts-menu > li.menu-item > a[aria-current="page"] {
		color: var( --e-global-color-accent, #F2B705 );
	}

	/*
	 * 4. The dropdown
	 *
	 * Was a 20px-radius balloon with 20px of dead vertical padding and no
	 * shadow, which read as a generic component rather than part of this
	 * site. Square corners match the buttons and section rules used
	 * everywhere else; the shadow does the lifting instead of the radius.
	 */
	body nav.emts-nav-menu ul.emts-menu > li.menu-item > ul.sub-menu:not( :has( .emts-megamenu-wrapper ) ),
	body nav.emts-nav-menu ul.emts-menu > li.menu-item > ul.sub-menu:not( :has( .emts-megamenu-wrapper ) ) ul.sub-menu {
		width: 264px;
		padding: 6px 0;
		border: 1px solid var( --bordercolor, #E5E7EB );
		border-top: 2px solid var( --e-global-color-accent, #F2B705 );
		border-radius: 0;
		background-color: #fff;
		box-shadow: 0 14px 32px rgba( 15, 42, 95, 0.16 );
	}

	body nav.emts-nav-menu ul.sub-menu > li.menu-item > a {
		display: block;
		width: auto;
		padding: 11px 20px;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.4;
		color: var( --e-global-color-primary, #0F2A5F );
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	body nav.emts-nav-menu ul.sub-menu > li.menu-item > a:hover,
	body nav.emts-nav-menu ul.sub-menu > li.menu-item.current-menu-item > a {
		background-color: #F4F6FA;
		color: var( --e-global-color-secondary, #1F4ED8 );
	}

	/* The caret on parent items, sized down to match the smaller labels. */
	body nav.emts-nav-menu > ul > li:has( ul.sub-menu ) > a:after {
		height: 6px;
		width: 6px;
		border-width: 0 2px 2px 0;
	}
}

/*
 * Below 1281px the menu becomes a white off-canvas panel, so links there
 * keep the dark colour. Stated explicitly so the rule above can never leak
 * white text onto a white panel.
 */
@media screen and ( max-width: 1280px ) {
	body .elementor-12 .elementor-element.elementor-element-aa4e201 .emts-menu > li.menu-item > a {
		color: var( --e-global-color-primary, #0F2A5F );
	}
}