/** mobile menu **/

body .mm-menu {
    --mm-size: 100vw;
    /* The width or height of the menu. */
    --mm-min-size: 240px;
    /* The minimum width or height of the menu. */
    --mm-max-size: 560px;
    /* The maximum width or height of the menu. */
    --mm-color-background: #f3f3f3;
    /* The background-color for the menu. */
    --mm-color-background-emphasis: rgba(0,0,0,0);
    /* The background-color for emphasized listitems. */
    --mm-color-background-highlight: rgba(255, 255, 255, 0.25);
    /* The background-color for highlighted listitems. */
    --mm-color-border: rgba(0, 0, 0, 0);
    /* The border-color for navbars, listitems, etc. */
    --mm-color-icon: var(--bs-info);
    /* The color for buttons. */
    --mm-color-text: var(--bs-info);
    /* The text-color for the menu. */
    --mm-color-text-dimmed: var(--bs-info);
    /* The text-color for dimmed out elements in the menu. (navbar title, etc.) */
    --mm-lineheight: 22px;
    /* The line-height for the menu. */
    --mm-listitem-size: 78px;
    /* The height for the listitems. */
    --mm-navbar-size: 50px;
    /* The height for the navbars. */
    --mm-toggle-size: 34px;
    /* The height for toggles. */
    --mm-carets-size: 12px;
    /* The size for the next/prev carets. */
    --bs-nav-link-color: var(--bs-info);
    /* The color for navbar links. */
    --bs-nav-link-font-size: 24px;
    /* The font size for navbar links. */
    /* Plugin core */
}

.mm-listitem__text {
    font-size: var(--bs-nav-link-font-size);
    font-weight: 400;
}

#mm-1 .mm-listitem__text {
    font-size: 36px;
    font-weight: 300;
}

.mm-listitem::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--mm-color-background-highlight);
	left: 20px;
    transition: width 0.3s ease-in;
}

.mm-listitem:hover::before,
.mm-listitem.mm-listitem--selected::before {
    width: calc(100% - 20px);
}


.mm-btn--next::after,
.mm-btn--prev::before {
    width: var(--mm-carets-size, 8px);
    height: var(--mm-carets-size, 8px);
}

#menu-mobile.mm-menu.mm-menu--offcanvas {
    --mm-panel-padding-bottom: 140px;
	display: block !important;
	/* max-height: calc(100vh - var(--wp-admin--admin-bar--height)); */
}

#menu-mobile.mm-menu.mm-menu--offcanvas .mm-panel {
	overflow: auto;
	padding-bottom: calc(30px + var(--mm-panel-padding-bottom));
}

.admin-bar #menu-mobile {
    top: var(--wp-admin--admin-bar--height);
}

.mm-navbar__title > span:first-child {
	display: block;
	width: 100%;
	white-space: normal;
}

.mm-blocker {
    position: fixed;
}

.mm-navbar__title,
.mm-btn--prev.mm-hidden+.mm-navbar__title {
    /* display: none; */
}

.mm-btn.mm-hidden+.mmenu-row .back-label {
    display: none;
}

.mm-btn--prev:not(.mm-hidden)+.mm-navbar__title {
    display: flex;
    padding-right: 10px !important;
}

.mm-btn--prev:not(.mm-hidden)+.mm-navbar__title+.mmenu-row .col.mmenu-logo,
.mm-btn--prev:not(.mm-hidden)+.mmenu-row .col.mmenu-logo {
    display: none;
}

.second_navbar+.mm-btn,
.second_navbar+.mm-btn.mm-hidden+.mm-navbar__title {
    display: none;
}

.second_navbar+.mm-btn+.mm-navbar__title {
    font-family: 'Merriweather', Georgia, serif;
    display: block;
    width: 100%;
    text-align: left;
    padding: 25px 20px;
    font-size: 32px;
    font-weight: lighter;
    line-height: 1.2;
}

.second_navbar+.mm-btn+.mm-navbar__title span:first-child {
    padding: 0 10px;
}

/* cover the navbar with the pseudo-element */
.mm-btn.mm-btn--prev.mm-navbar__btn::after {
    content: "";
    display: block;
    height: 100%;
    width: calc(var(--mm-size) - 48px);
    position: absolute;
    left: 0;
}


.mm-navbars--bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 1000;
}

.bottom-navbar::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 1px;
	width: 57px;
	background: currentColor;
	left: 20px;
}

.open-search-mobile a::before {
	content: attr(aria-label);
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 10%;
}