/* ============================================
   EMS Header — plugin-owned, EMS-owned pages only
   Tokens: ems-design-system.css
   Breakpoint md: 768px (--ems-breakpoint-md)
   ============================================ */

.ems-layout {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--ems-bg);
}

.ems-layout .ems-plugin-scope {
	color: var(--ems-text-primary);
	font-family: var(--ems-font-montserrat);
}

.ems-layout .ems-skip-link {
	position: absolute;
	left: var(--ems-space-md);
	top: calc(var(--ems-space-md) * -10);
	z-index: calc(var(--ems-z-header) + 1);
	padding: var(--ems-space-sm) var(--ems-space-md);
	background: var(--ems-header-bg);
	color: var(--ems-header-link);
	border-radius: var(--ems-radius-sm);
	font-family: var(--ems-font-montserrat);
	font-size: var(--ems-font-size-sm);
}

.ems-layout .ems-skip-link:focus {
	top: var(--ems-space-md);
}

.ems-layout .ems-header {
	display: block;
	position: relative;
	z-index: var(--ems-z-header);
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--ems-header-bg);
	border: 0;
	border-bottom: var(--ems-border-width) solid var(--ems-header-border);
	box-shadow: var(--ems-shadow-sm);
	font-family: var(--ems-font-montserrat);
	color: var(--ems-header-link);
}

.ems-layout .ems-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ems-space-md);
	width: 100%;
	max-width: var(--ems-container-width);
	margin-inline: auto;
	padding-inline: var(--ems-container-padding);
	min-height: var(--ems-header-height);
	box-sizing: border-box;
}

.ems-layout .ems-header__brand {
	flex: 0 1 auto;
	min-width: 0;
}

.ems-layout .ems-header__logo-link,
.ems-layout .ems-header a.ems-header__logo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ems-space-sm);
	color: var(--ems-header-link);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: none;
	font-family: var(--ems-font-family);
	font-weight: var(--ems-font-weight-semibold);
	font-size: var(--ems-font-size-lg);
	line-height: var(--ems-line-height-base);
}

.ems-layout .ems-header__logo-image,
.ems-layout .ems-header img.ems-header__logo-image {
	display: block;
	max-height: var(--ems-header-logo-height);
	width: auto;
	height: auto;
	max-width: var(--ems-header-logo-max-width);
	border: 0;
	box-shadow: none;
}

.ems-layout .ems-header__site-name {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: var(--ems-header-site-name-max);
	color: var(--ems-header-link);
}

.ems-layout .ems-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ems-space-sm);
	margin: 0;
	margin-left: auto;
	padding: var(--ems-space-sm) var(--ems-space-md);
	background: transparent;
	color: var(--ems-header-link);
	border: var(--ems-border-width) solid var(--ems-header-border);
	border-radius: var(--ems-radius-md);
	font-family: var(--ems-font-montserrat);
	font-size: var(--ems-font-size-sm);
	font-weight: var(--ems-font-weight-medium);
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.ems-layout .ems-header__toggle-icon {
	display: block;
	width: var(--ems-space-lg);
	height: var(--ems-link-underline-height);
	background: currentColor;
	position: relative;
}

.ems-layout .ems-header__toggle-icon::before,
.ems-layout .ems-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--ems-link-underline-height);
	background: currentColor;
}

.ems-layout .ems-header__toggle-icon::before {
	top: calc(var(--ems-space-sm) * -1);
}

.ems-layout .ems-header__toggle-icon::after {
	top: var(--ems-space-sm);
}

.ems-layout .ems-navigation {
	display: none;
	flex: 1 1 100%;
	width: 100%;
}

.ems-layout .ems-navigation.ems-navigation--open {
	display: block;
	position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    background: #fff;
    height: 100vh;
    z-index: 1000;
}

.ems-layout .ems-navigation__list,
.ems-layout .ems-navigation__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ems-layout .ems-navigation__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-block: var(--ems-space-sm);
}

.ems-layout .ems-navigation__item {
	position: relative;
	margin: 0;
	padding: 0;
}

.ems-layout .ems-navigation__link,
.ems-layout .ems-navigation a.ems-navigation__link {
	display: block;
	padding: var(--ems-space-sm) var(--ems-space-md);
	color: var(--ems-header-link);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: none;
	font-family: var(--ems-font-montserrat);
	font-size: var(--ems-font-size-base);
	font-weight: var(--ems-font-weight-medium);
	line-height: var(--ems-line-height-base);
	text-transform: none;
	letter-spacing: normal;
}

.ems-layout .ems-navigation__link:hover,
.ems-layout .ems-navigation__link:focus {
	color: var(--ems-header-link-hover);
}

.ems-layout .ems-navigation__item--current > .ems-navigation__link {
	color: var(--ems-header-link-active);
	font-weight: var(--ems-font-weight-semibold);
}

.ems-layout .ems-navigation__item--has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ems-layout .ems-navigation__item--has-children > .ems-navigation__link {
	flex: 1 1 auto;
}

.ems-layout .ems-navigation__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ems-space-xl);
	height: var(--ems-space-xl);
	margin: 0 var(--ems-space-sm) 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ems-header-link);
	cursor: pointer;
	box-shadow: none;
}

.ems-layout .ems-navigation__submenu-toggle-icon {
	width: var(--ems-space-sm);
	height: var(--ems-space-sm);
	background: transparent;
	border-right: var(--ems-border-width) solid currentColor;
	border-bottom: var(--ems-border-width) solid currentColor;
	transform: rotate(45deg);
}

.ems-layout .ems-navigation__item--open > .ems-navigation__submenu-toggle .ems-navigation__submenu-toggle-icon {
	transform: rotate(225deg);
}

.ems-layout .ems-navigation__submenu {
	display: none;
	flex: 1 1 100%;
	width: 100%;
	padding-left: var(--ems-space-md);
	background: var(--ems-header-submenu-bg);
}

.ems-layout .ems-navigation__item--open > .ems-navigation__submenu {
	display: block;
}

.ems-layout .ems-main {
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* Desktop: inline nav, hover dropdowns. 768px = --ems-breakpoint-md */
@media (min-width: 768px) {
	.ems-layout .ems-header__toggle {
		display: none;
	}

	.ems-layout .ems-header__container {
		flex-wrap: nowrap;
	}

	.ems-layout .ems-navigation,
	.ems-layout .ems-navigation.ems-navigation--open {
		display: flex;
		flex: 1 1 auto;
		width: auto;
		justify-content: flex-end;
	}

	.ems-layout .ems-navigation__list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: var(--ems-space-xs);
		padding-block: 0;
	}

	.ems-layout .ems-navigation__item--has-children {
		flex-wrap: nowrap;
	}

	.ems-layout .ems-navigation__submenu-toggle {
		display: none;
	}

	.ems-layout .ems-navigation__submenu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: auto;
		min-width: var(--ems-header-submenu-min-width);
		width: auto;
		padding: var(--ems-space-sm) 0;
		border: var(--ems-border-width) solid var(--ems-header-border);
		border-radius: var(--ems-radius-md);
		box-shadow: var(--ems-shadow-dropdown);
		z-index: var(--ems-z-dropdown);
	}

	.ems-layout .ems-navigation__item--has-children:hover > .ems-navigation__submenu,
	.ems-layout .ems-navigation__item--has-children:focus-within > .ems-navigation__submenu {
		display: block;
	}
}

body.admin-bar .ems-layout .ems-header {
	scroll-margin-top: var(--wp-admin--admin-bar--height, 32px);
}