/* =========================================================
   i-Mark custom responsive header (logo + primary nav) for Divi 4
   Desktop: logo left, multi-level hover dropdown menu right
   Mobile:  logo left, hamburger right, menu drops below full-width
   Theme via the CSS variables in :root. Breakpoint 980px = Divi default.
   ========================================================= */

:root {
	--imk-nav-text:        #2b2b2b;
	--imk-nav-text-hover:  #2ea3f2;
	--imk-nav-bar-bg:      transparent;
	--imk-nav-dropdown-bg: #ffffff;
	--imk-nav-mobile-bg:   #ffffff;
	--imk-nav-border:      rgba(0, 0, 0, .08);
	--imk-nav-shadow:      0 8px 24px rgba(0, 0, 0, .10);
	--imk-nav-item-px:     18px;
	--imk-nav-item-py:     16px;
	--imk-logo-height:     54px;    /* tweak logo size here */
	--imk-bar-px:          0px;     /* horizontal padding of the header bar */
}

.imk-nav { position: relative; font-size: 15px; }
.imk-nav ul,
.imk-nav li { list-style: none !important; margin: 0; padding: 0; }
.imk-nav li::before,
.imk-nav li::marker { content: none !important; }
.imk-nav a { display: block; text-decoration: none; color: var(--imk-nav-text); line-height: 1.4; }
.imk-nav a:hover,
.imk-nav a:focus { color: var(--imk-nav-text-hover); }
.imk-nav__toggle,
.imk-nav__submenu-toggle { font-family: inherit; }

/* header bar */
.imk-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--imk-bar-px);
	background: var(--imk-nav-bar-bg);
}
.imk-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.imk-nav__logo {
	display: block;
	height: var(--imk-logo-height) !important;  /* beat Divi's img{height:auto!important} */
	width: auto !important;
	max-width: none !important;
}
.imk-nav__logo-text { font-size: 22px; font-weight: 700; color: var(--imk-nav-text); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ===================== DESKTOP (>= 981px) ===================== */
@media (min-width: 981px) {
	.imk-nav__toggle,
	.imk-nav__submenu-toggle { display: none; }
	.imk-nav__panel { display: block !important; }

	.imk-nav__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
	}
	.imk-nav__list > li { position: relative; }
	.imk-nav__list > li > a {
		padding: var(--imk-nav-item-py) var(--imk-nav-item-px);
		white-space: nowrap;
	}

	.imk-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--imk-nav-dropdown-bg);
		border: 1px solid var(--imk-nav-border);
		box-shadow: var(--imk-nav-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
		z-index: 999;
	}
	.imk-nav .sub-menu li { position: relative; }
	.imk-nav .sub-menu a { padding: 11px var(--imk-nav-item-px); white-space: nowrap; }

	.imk-nav li:hover > .sub-menu,
	.imk-nav li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.imk-nav .sub-menu .sub-menu { top: -1px; left: 100%; }

	/* keep the rightmost dropdowns inside the viewport */
	.imk-nav__list > li:last-child > .sub-menu { left: auto; right: 0; }
	.imk-nav__list > li:last-child .sub-menu .sub-menu { left: auto; right: 100%; }

	.imk-nav__list > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		margin-left: 8px;
		vertical-align: middle;
		border: 5px solid transparent;
		border-top-color: currentColor;
		position: relative; top: 2px;
	}
	.imk-nav .sub-menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 14px; top: 50%;
		margin-top: -5px;
		border: 5px solid transparent;
		border-left-color: currentColor;
	}
}

/* ===================== MOBILE (<= 980px) ===================== */
@media (max-width: 980px) {
	.imk-nav__toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 46px; height: 46px;
		padding: 11px;
		background: transparent;
		border: 0; cursor: pointer;
		flex: 0 0 auto;
	}
	.imk-nav__toggle-bar {
		display: block; height: 2px; width: 100%;
		background: var(--imk-nav-text);
		transition: transform .25s ease, opacity .2s ease;
	}
	.imk-nav__toggle[aria-expanded="true"] .imk-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.imk-nav__toggle[aria-expanded="true"] .imk-nav__toggle-bar:nth-child(2) { opacity: 0; }
	.imk-nav__toggle[aria-expanded="true"] .imk-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* menu panel drops below the bar as a full-width overlay */
	.imk-nav__panel {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		z-index: 999;
		background: var(--imk-nav-mobile-bg);
		border-top: 1px solid var(--imk-nav-border);
		box-shadow: var(--imk-nav-shadow);
	}
	.imk-nav__panel.is-open { display: block; }

	.imk-nav a { text-align: left; }
	.imk-nav__list > li > a,
	.imk-nav .sub-menu a {
		padding: 14px var(--imk-nav-item-px);
		border-bottom: 1px solid var(--imk-nav-border);
	}

	/* parent rows: link + toggle button side by side, submenu wraps below */
	.imk-nav .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.imk-nav .menu-item-has-children > a { flex: 1 1 auto; min-width: 0; }
	.imk-nav .menu-item-has-children > a::after { display: none; }

	.imk-nav__submenu-toggle {
		flex: 0 0 54px;
		position: relative;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--imk-nav-border);
		border-left: 1px solid var(--imk-nav-border);
		cursor: pointer;
		font-size: 0;
	}
	.imk-nav__submenu-toggle::before {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 9px; height: 9px;
		border-right: 2px solid var(--imk-nav-text);
		border-bottom: 2px solid var(--imk-nav-text);
		transform: translate(-50%, -70%) rotate(45deg);
		transition: transform .2s ease;
	}
	.imk-nav__submenu-toggle[aria-expanded="true"]::before {
		transform: translate(-50%, -30%) rotate(-135deg);
	}

	.imk-nav .sub-menu {
		flex: 1 1 100%;
		display: none;
		background: rgba(0, 0, 0, .03);
	}
	.imk-nav .sub-menu.is-open { display: block; }
	.imk-nav .sub-menu a                     { padding-left: calc(var(--imk-nav-item-px) + 16px); }
	.imk-nav .sub-menu .sub-menu a           { padding-left: calc(var(--imk-nav-item-px) + 32px); }
	.imk-nav .sub-menu .sub-menu .sub-menu a { padding-left: calc(var(--imk-nav-item-px) + 48px); }
}