/* Drilldown Mobile Menu — skin. Override these custom properties from your theme's CSS to restyle without touching this file. */
:root {
	--dmm-width: 300px;
	--dmm-bg: #ffffff;
	--dmm-text: #222222;
	--dmm-border: #ececec;
	--dmm-accent: #222222;
	--dmm-label-color: #999999;
	--dmm-item-height: 50px;
	--dmm-toggle-bar-color: #222222;
}

/* Toggle button (hamburger).
   position + z-index are needed because most theme headers have their own
   positioned elements (logo, nav wrapper, sticky header, etc.) that can sit
   on top of this button in the stacking order and swallow its clicks even
   though it's visible. Raise the z-index further if your theme's header
   still overlaps it. */
.dmm-toggle {
	display: none;
	position: relative;
	z-index: 10;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.dmm-toggle-bars,
.dmm-toggle-bars::before,
.dmm-toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--dmm-toggle-bar-color);
	content: "";
}

.dmm-toggle-bars {
	position: relative;
}

.dmm-toggle-bars::before {
	position: absolute;
	top: -7px;
}

.dmm-toggle-bars::after {
	position: absolute;
	top: 7px;
}

/* The drilldown panel itself.
   Deliberately scoped by the .zeynep class, not the #dmm-drilldown-menu id:
   zeynep.min.css toggles state with class-only selectors like .zeynep.opened
   and .zeynep .submenu.opened, and an id selector here would outrank those
   and keep the panel permanently closed regardless of the .opened class. */
.zeynep {
	width: var(--dmm-width);
	max-width: 90vw;
	background-color: var(--dmm-bg);
	color: var(--dmm-text);
	right: auto;
	left: 0;
	transform: translateX(-100%) translateZ(0);
}

.dmm-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--dmm-item-height);
	padding: 0 16px;
	border-bottom: 1px solid var(--dmm-border);
}

.dmm-panel-title {
	font-weight: bold;
}

.dmm-close {
	position: relative;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	cursor: pointer;
}

.dmm-close::before,
.dmm-close::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background-color: var(--dmm-accent);
	content: "";
}

.dmm-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.dmm-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Reset for both the top-level <ul> and every nested submenu <ul> —
   the walker doesn't add a class to any of them. */
.zeynep ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zeynep ul > li {
	position: relative;
}

.zeynep ul > li > a {
	display: block;
	padding: 0 16px;
	line-height: var(--dmm-item-height);
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--dmm-border);
}

.zeynep ul > li.has-submenu > a {
	padding-right: 44px;
	background-image: url(images/submenu-arrow.svg);
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 7px 12px;
}

.zeynep ul > li.has-submenu > a:hover,
.zeynep ul > li.has-submenu > a:focus {
	background-image: url(images/submenu-arrow-active.svg);
}

/* Separate submenu-opener button used when the item's own link is a real URL */
.dmm-submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: var(--dmm-item-height);
	background: url(images/submenu-arrow.svg) no-repeat center / 7px 12px;
	border: 0;
	border-bottom: 1px solid var(--dmm-border);
	cursor: pointer;
}

.dmm-submenu-toggle:hover,
.dmm-submenu-toggle:focus {
	background-image: url(images/submenu-arrow-active.svg);
}

/* Submenu panels.
   z-index is required on the opened state: none of the top-level <li>s or
   the .submenu divs have their own z-index, so without this, later top-level
   items (later in DOM order) paint over an open submenu instead of behind it,
   letting the top-level menu show through. */
.zeynep .submenu {
	width: 100%;
	background-color: var(--dmm-bg);
	left: 100%;
}

.zeynep .submenu.opened {
	z-index: 1;
}

.zeynep .submenu-header {
	position: relative;
	height: var(--dmm-item-height);
	border-bottom: 1px solid var(--dmm-border);
	cursor: pointer;
}

.zeynep .submenu-header > a {
	display: block;
	height: 100%;
	padding-left: 40px;
	line-height: var(--dmm-item-height);
	color: inherit;
	text-decoration: none;
	background: url(images/menu-back.svg) no-repeat left 16px center / 7px 12px;
}

.zeynep .submenu > label {
	display: block;
	margin: 16px 0 4px;
	padding: 0 16px;
	color: var(--dmm-label-color);
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

/* Current page highlighting, carried over from WP core nav menu classes */
.zeynep ul > li.current-menu-item > a,
.zeynep ul > li.current-menu-ancestor > a {
	font-weight: bold;
}

/* .dmm-toggle's mobile display:inline-flex is set by the inline <style>
   the plugin outputs in wp_head, so it always matches DMM_BREAKPOINT. */