/* ============================================================
   Elko Local Menu Style — Divi main menu treatment
   Toggles are body classes: .emn-brand-font .emn-uppercase
   .emn-underline .emn-ribbon .emn-dropdowns .emn-mobile
   .emn-scroll-shadow (+ .emn-scrolled added on scroll)
   ============================================================ */
:root {
	--emn-navy: #1B2A4A;
	--emn-navy-deep: #14213C;
	--emn-accent: #E87722;
	--emn-active: #9C2F1E;
	--emn-cream: #F6EFE1;
	--emn-line: #E2DACA;
	--emn-shadow: 0 2px 4px rgba(20,33,60,.07), 0 10px 26px rgba(20,33,60,.12);
	--emn-ease: cubic-bezier(.33,1,.68,1);
}

/* ---------- Top-level links ---------- */
.emn-brand-font #top-menu > li > a,
.emn-brand-font .et_mobile_menu li a {
	font-family: "Bitter", "Iowan Old Style", "Georgia", serif !important;
}
#top-menu > li > a {
	color: var(--emn-navy) !important;
	font-weight: 700 !important;
	transition: color .18s var(--emn-ease), text-decoration-color .2s var(--emn-ease);
}
.emn-uppercase #top-menu > li > a {
	text-transform: uppercase;
	font-size: 14px !important;
	letter-spacing: .08em;
}
#top-menu > li > a:hover { color: var(--emn-accent) !important; opacity: 1 !important; }

/* ---------- Underline (native text-decoration: always hugs the text,
   no matter what box sizes Divi gives its menu links) ---------- */
.emn-underline #top-menu > li > a {
	text-decoration-line: underline !important;
	text-decoration-color: transparent !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 7px;
}
.emn-underline #top-menu > li > a:hover {
	text-decoration-color: var(--emn-accent) !important;
}
.emn-underline #top-menu > li.current-menu-item > a,
.emn-underline #top-menu > li.current-menu-ancestor > a,
.emn-underline #top-menu > li.current_page_item > a {
	text-decoration-color: var(--emn-active) !important;
}
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a { color: var(--emn-navy) !important; }

/* ---------- Brand ribbon under the header ---------- */
.emn-ribbon #main-header {
	border-bottom: 0 !important;
	background-image: linear-gradient(90deg, var(--emn-navy) 0 62%, var(--emn-accent) 62% 84%, var(--emn-active) 84% 100%) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 4px !important;
	background-position: bottom left !important;
}

/* ---------- Scroll elevation ---------- */
.emn-scroll-shadow #main-header { transition: box-shadow .25s var(--emn-ease) !important; }
.emn-scroll-shadow.emn-scrolled #main-header { box-shadow: var(--emn-shadow) !important; }

/* ---------- Card dropdowns ---------- */
.emn-dropdowns #top-menu li ul.sub-menu {
	border: 0 !important;
	border-radius: 12px;
	box-shadow: var(--emn-shadow) !important;
	padding: 14px 0 10px !important;
	background:
		linear-gradient(90deg, var(--emn-accent), var(--emn-active)) top left / 100% 4px no-repeat,
		#fff !important;
	overflow: hidden;
	animation: emn-drop .22s var(--emn-ease);
}
@keyframes emn-drop {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
.emn-dropdowns #top-menu li li a {
	color: var(--emn-navy) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 9px 15px !important;
	width: 184px !important;
	margin: 2px 8px;
	border-radius: 9px;
	position: relative;
	border-left: 3px solid transparent;
	transition: border-color .16s var(--emn-ease), background .16s var(--emn-ease), color .16s var(--emn-ease), padding-left .16s var(--emn-ease);
}
.emn-dropdowns #top-menu li li a:hover {
	background: var(--emn-cream) !important;
	border-left-color: var(--emn-accent);
	color: var(--emn-active) !important;
	padding-left: 20px !important;
	opacity: 1 !important;
}
.emn-dropdowns #top-menu li li.current-menu-item > a {
	border-left-color: var(--emn-active);
	background: #FBF7EE !important;
}

/* ---------- CTA menu item (add class "elko-cta" to a menu item) ---------- */
#top-menu > li.elko-cta > a {
	background: linear-gradient(180deg, #F2853A 0%, var(--emn-accent) 45%, #C2600F 100%);
	color: #fff !important;
	border-radius: 999px;
	padding: 10px 22px !important;
	box-shadow: 0 1px 2px rgba(20,33,60,.15), inset 0 1px 0 rgba(255,255,255,.28);
	transition: transform .14s var(--emn-ease), box-shadow .14s var(--emn-ease), filter .14s;
}
#top-menu > li.elko-cta > a:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(232,119,34,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
#top-menu > li.elko-cta > a { text-decoration: none !important; }
.et_mobile_menu li.elko-cta > a {
	background: linear-gradient(180deg, #F2853A, #C2600F) !important;
	color: #fff !important;
	border-radius: 999px;
	margin: 8px 12px;
	text-align: center;
	font-weight: 800 !important;
}

/* ---------- Mobile menu ---------- */
.emn-mobile .mobile_menu_bar::before { color: var(--emn-accent) !important; }
.emn-mobile .et_mobile_menu {
	background: linear-gradient(170deg, #2A3D66 0%, var(--emn-navy) 45%, var(--emn-navy-deep) 100%) !important;
	border-top: 4px solid var(--emn-accent) !important;
	border-radius: 0 0 14px 14px;
	box-shadow: var(--emn-shadow) !important;
	padding: 6px 0 12px !important;
}
.emn-mobile .et_mobile_menu li a {
	color: #EDF1F8 !important;
	font-weight: 600 !important;
	border-bottom: 1px solid rgba(255,255,255,.08) !important;
	border-left: 3px solid transparent;
	transition: background .16s var(--emn-ease), border-color .16s var(--emn-ease), padding-left .16s var(--emn-ease);
}
.emn-mobile .et_mobile_menu li a:hover {
	background: rgba(255,255,255,.07) !important;
	border-left-color: var(--emn-accent);
	padding-left: 8%;
	opacity: 1 !important;
}
.emn-mobile .et_mobile_menu li.current-menu-item > a {
	border-left-color: var(--emn-accent);
	color: #fff !important;
	background: rgba(232,119,34,.14) !important;
}
.emn-mobile .et_mobile_menu .menu-item-has-children > a { background: transparent !important; }

/* ---------- Keyboard focus ---------- */
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible,
.mobile_menu_bar:focus-visible {
	outline: 3px solid var(--emn-accent) !important;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Generic (non-Divi) fallbacks ---------- */
.emn-brand-font .main-navigation a { font-family: "Bitter", "Georgia", serif; }
.main-navigation a { color: var(--emn-navy); font-weight: 700; }
.main-navigation a:hover { color: var(--emn-accent); }

@media (prefers-reduced-motion: reduce) {
	#top-menu a, #top-menu a::after, #top-menu li ul.sub-menu,
	.et_mobile_menu li a, #main-header { transition: none !important; animation: none !important; }
}

/* ---------- Account row: small utility links top-right, main menu below ----------
   (Placed ABOVE the main items so dropdowns — which open downward — can never
   cover them, and they stay clear of the ribbon at the header's bottom edge.) */
#top-menu li.emn-break { display: none; }
/* Desktop only (981px+): below that, Divi's hamburger menu takes over and the
   forced flex display must NOT fight Divi's responsive hiding of #top-menu. */
@media (min-width: 981px) {
	.emn-account-row #et-top-navigation #top-menu {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-content: center;
		align-items: center;
		row-gap: 10px;
	}
	.emn-account-row #top-menu li.emn-break {
		display: block;
		order: -1;               /* the break sits between account row and main row */
		flex-basis: 100%;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
	}
	.emn-account-row #top-menu li.emn-break a { display: none !important; }
	.emn-account-row #top-menu > li.emn-account-item {
		order: -2;               /* account links go to the first (top) line */
		padding-right: 18px;
	}
	.emn-account-row #top-menu > li.emn-account-item:last-child { padding-right: 0; }
	.emn-account-row #top-menu > li.emn-account-item > a {
		font-size: 12.5px !important;
		letter-spacing: .08em;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		color: #5A6274 !important;
	}
	.emn-account-row #top-menu > li.emn-account-item > a:hover { color: var(--emn-accent) !important; }
	.emn-account-row.emn-underline #top-menu > li.emn-account-item > a {
		text-decoration-thickness: 2px !important;
		text-underline-offset: 5px;
	}
	.emn-account-row.emn-underline #top-menu > li.emn-account-item.current-menu-item > a {
		text-decoration-color: var(--emn-active) !important;
		color: var(--emn-navy) !important;
	}
}

/* Mobile: account links get a divider line above them instead */
.emn-mobile .et_mobile_menu li.emn-break {
	display: block; height: 1px;
	background: rgba(255,255,255,.16);
	margin: 8px 16px;
	padding: 0 !important;
}
.emn-mobile .et_mobile_menu li.emn-break a { display: none !important; }
.et_mobile_menu li.emn-break a { display: none; }


/* ---------- Tablet & phone header sizing ---------- */
@media (max-width: 980px) {
	#logo { max-height: 56px !important; width: auto !important; }
	#main-header { padding: 6px 0 !important; }
	#et-top-navigation { padding-top: 10px !important; }
}
