/*
 * Mobile menu (Phase 3, replaces SuperSide Me). Markup: includes/mobile-menu.php.
 * Same look as the plugin: 1194 px and below, 260 px white panel from the
 * right, links #7395a6 15 px bold, grey close row, 300 ms slide.
 * Changes (D50): slide-over with a dim backdrop, rows at least 44 px,
 * no animation with prefers-reduced-motion.
 */

.exl-mm-button,
.exl-mm-panel,
.exl-mm-backdrop {
	display: none;
}

@media (max-width: 1194px) {

	/*
	 * Same rule the plugin printed: hide the desktop menus at this width.
	 * :where() keeps the specificity of a plain "nav" selector, so other
	 * navs that override it today (Events Calendar photo nav) still do.
	 */
	nav:where(:not(.exl-mm-nav)),
	#nav,
	.nav-primary,
	.nav-secondary,
	.menu-toggle {
		display: none;
	}

	/* Menu button (same box as the plugin button: 61 x 64 px). */
	.exl-mm-button {
		display: block;
		position: absolute;
		right: 0;
		z-index: 900;
		margin: 0;
		padding: 14px;
		border: none;
		border-radius: 0;
		background-color: #fff;
		color: #7395a6;
		text-align: center;
		cursor: pointer;
	}

	.exl-mm-button::before,
	.exl-mm-close::before,
	.exl-mm-sub-toggle::before {
		display: inline-block;
		font-family: "Font Awesome 5 Free", "FontAwesome";
		font-style: normal;
		font-variant: normal;
		font-weight: 900;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.exl-mm-button::before {
		content: "\f0c9";
		font-size: 20px;
	}

	.exl-mm-button__label {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Dim backdrop behind the panel; tapping it closes the menu. */
	.exl-mm-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1099;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.exl-mm-backdrop.is-open {
		opacity: 1;
	}

	/* Panel. */
	.exl-mm-panel {
		display: block;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1100;
		width: 260px;
		max-width: 100%;
		height: 100%;
		padding-bottom: 46px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: #fff;
		color: #7395a6;
		font-size: 15px;
		font-weight: bold;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	.exl-mm-panel.is-open {
		transform: translateX(0);
	}

	.exl-mm-panel[hidden],
	.exl-mm-backdrop[hidden],
	.exl-mm-subscribe[hidden] {
		display: none;
	}

	.admin-bar .exl-mm-panel {
		top: 32px;
		height: calc(100% - 32px);
	}

	/* Close row. */
	.exl-mm-close {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 12px 24px;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background-color: rgba(0, 0, 0, 0.1);
		color: #7395a6;
		cursor: pointer;
	}

	.exl-mm-close::before {
		content: "\f00d";
		padding-right: 12px;
		font-size: 16px;
	}

	/* Search. */
	.exl-mm-search {
		position: relative;
		width: 100%;
	}

	.exl-mm-search .search-form {
		margin: 0;
		width: 100%;
	}

	.exl-mm-search .search-form input[type="search"] {
		margin: 0;
		padding: 16px 50px 16px 12px;
		width: 100%;
	}

	.exl-mm-search .search-form input[type="submit"] {
		position: absolute !important;
		right: 0;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	/* Menu list. */
	.exl-mm-nav {
		display: block;
	}

	.exl-mm-menu,
	.exl-mm-menu .sub-menu {
		margin: 0;
		padding: 0;
	}

	.exl-mm-menu li {
		position: relative;
		clear: both;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.exl-mm-menu a,
	.exl-mm-subscribe__button {
		display: block;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		min-height: 44px;
		padding: 10px 15px;
		border-top: 1px solid rgba(250, 250, 250, 0.1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: none;
		color: #7395a6;
		text-align: left;
		text-decoration: none;
	}

	.exl-mm-menu a:hover {
		color: #e5e5e5;
	}

	.exl-mm-menu .menu-item-has-children > a {
		padding-right: 48px;
	}

	.exl-mm-menu .sub-menu {
		display: none;
		clear: both;
		position: static;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.exl-mm-menu .is-open > .sub-menu {
		display: block;
	}

	.exl-mm-menu .sub-menu a {
		padding-left: 30px;
	}

	/* Sub-menu toggle (arrow) on the right of each parent row. */
	.exl-mm-sub-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100;
		width: 48px;
		height: 44px;
		margin: 0;
		padding: 0 14px;
		border: none;
		box-shadow: none;
		background-color: transparent;
		color: #7395a6;
		cursor: pointer;
	}

	.exl-mm-sub-toggle::before {
		content: "\f107";
		font-size: 16px;
	}

	.exl-mm-sub-toggle[aria-expanded="true"]::before {
		content: "\f106";
	}

	/* Newsletter (D50 / P3-06). */
	.exl-mm-subscribe {
		margin: 0;
	}

	.exl-mm-subscribe__button {
		margin: 0;
		border-right: none;
		border-left: none;
		border-radius: 0;
		background: none;
		font: inherit;
		cursor: pointer;
	}

	/* Visible keyboard focus (the theme removes outlines on buttons). */
	.exl-mm-button:focus-visible,
	.exl-mm-panel :focus-visible {
		outline: 1px dashed #7395a6;
		outline-offset: -2px;
	}

	/* No page scroll behind the open menu. */
	html.exl-mm-open,
	html.exl-mm-open body {
		overflow: hidden;
	}
}

@media (max-width: 782px) {
	.admin-bar .exl-mm-panel {
		top: 46px;
		height: calc(100% - 46px);
	}
}

/* Same button position as the plugin on phones (theme rule for .slide-nav-link). */
@media (max-width: 768px) {
	.exl-mm-button {
		top: 50%;
		right: 12px;
		margin-top: -24px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.exl-mm-panel,
	.exl-mm-backdrop {
		transition: none;
	}
}