/* Mobile menu - a category opens where it stands.

   The theme opened a sub-menu as a second screen: a fixed panel over the whole
   drawer, faded in, with the list jumping to the top and a back-bar taking over
   the title. Here the sub-menu stays under its parent, unrolls to its own height
   and its items slide in from the side, one after another.

   Everything is scoped to #group-icon-header (the mobile drawer) and to the
   theme's own breakpoint, so the desktop mega menu is untouched. */

@media only screen and (max-width: 767px) {

	/* ---- the panel becomes a drawer inside the list -------------------- */

	#group-icon-header .mobile-menu-wrapper .ts-menu-drop-icon + ul.sub-menu {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		z-index: auto !important;
		display: block !important;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		overflow: hidden !important;
		height: 0;
		transition: height 0.44s cubic-bezier(0.32, 0.72, 0, 1);
		-webkit-animation: none !important;
		animation: none !important;
	}

	/* the hairline that shows how deep an item sits */
	#group-icon-header .mobile-menu-wrapper .ts-menu-drop-icon + ul.sub-menu:before {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 12px;
		right: 6px; /* rtl */
		inset-inline-start: 6px;
		width: 1px;
		background: var(--loobek-menu-mobile-border-color, rgba(0, 0, 0, 0.14));
	}

	/* ---- the items inside ---------------------------------------------- */

	#group-icon-header .mobile-menu-wrapper ul.sub-menu > li.menu-item {
		padding-right: 22px !important; /* rtl */
		padding-inline-start: 22px !important;
		border-width: 0 !important;
	}
	#group-icon-header .mobile-menu-wrapper ul.sub-menu > li.menu-item:first-child {
		padding-top: 4px;
	}
	#group-icon-header .mobile-menu-wrapper ul.sub-menu > li.menu-item:last-child {
		padding-bottom: 10px;
	}
	#group-icon-header .mobile-menu-wrapper ul.sub-menu > li.menu-item > a {
		padding: 10px 0 !important;
		font-size: calc(var(--loobek-menu-font-size, 16px) * 0.875);
		opacity: 0.86;
	}
	#group-icon-header .mobile-menu-wrapper ul.sub-menu > li.menu-item > a:hover,
	#group-icon-header .mobile-menu-wrapper ul.sub-menu > li.menu-item > a:focus {
		opacity: 1;
	}

	/* the brand blurbs belong on the desktop mega menu, not in a phone list */
	#group-icon-header .mobile-menu-wrapper .menu-desc {
		display: none !important;
	}

	/* ---- the key that opens it ----------------------------------------- */

	/* The theme parked the key at the very top of its row - a 20px box against a
	   50px line, so the plus floated fifteen pixels above the word next to it.
	   Giving it the anchor's own box (the same 15px padding over the same
	   inherited line) makes the two share one centre line, whatever the reader
	   has done to the font size. */
	#group-icon-header .mobile-menu-wrapper li.menu-item > span.ts-menu-drop-icon {
		top: 0;
		bottom: auto;
		width: 44px;
		height: auto;
		padding: 15px 0;
		line-height: inherit;
		display: flex;
		align-items: center;
		justify-content: flex-end; /* rtl: the drawer's left edge */
		-webkit-tap-highlight-color: transparent;
	}
	#group-icon-header .mobile-menu-wrapper span.ts-menu-drop-icon:after {
		display: inline-block;
		line-height: inherit;
		transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1),
		            color 0.25s ease;
	}

	/* A category is a switch here, not a link, so it should feel like one -
	   and the switch is the whole line, not the few letters in it: the row is
	   a flex line, so without this the tap area stops where the word does. */
	#group-icon-header .mobile-menu-wrapper li.menu-item > a {
		flex: 1 1 auto;
	}
	#group-icon-header .mobile-menu-wrapper li.menu-item-has-children > a {
		cursor: pointer;
	}
	#group-icon-header .mobile-menu-wrapper li.tb-on > span.ts-menu-drop-icon:after {
		transform: rotate(45deg);
		color: var(--loobek-menu-mobile-hover-color, #c39348);
	}
	#group-icon-header .mobile-menu-wrapper li.tb-on > a > .menu-label {
		color: var(--loobek-menu-mobile-hover-color, #c39348);
		transition: color 0.25s ease;
	}

	/* ---- the drawer has to be able to scroll --------------------------- */

	/* The theme hangs the drawer between the header and the bottom of the
	   screen, and then lets the list inside it be as tall as it likes. On a
	   tall phone that happens to fit and nobody notices. On a short one - or
	   once a category is opened, which is the whole point of the thing - the
	   list runs past the bottom edge and the last rows simply cannot be
	   reached: on a 620px screen "About" sat 146px below the glass.

	   And a drag does not rescue it, because .mobile-menu-wrapper is marked
	   overflow-y:scroll while having nothing of its own to scroll. A finger
	   landing there is claimed by that element, and a browser does not hand
	   the leftover movement up to the panel above - so the list just refuses
	   to move. That is the scrolling that "does not continue".

	   The fix is to say plainly which box scrolls. The drawer becomes a
	   column: the title stays put and the list beneath it takes whatever
	   height is left and scrolls on its own. min-height:0 is what lets a flex
	   child shrink below its content - without it the column grows to fit the
	   list again and nothing has changed. */

	#group-icon-header .ts-sidebar-content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	#group-icon-header .ts-sidebar-content > .sidebar-content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}
	#group-icon-header .mobile-menu-wrapper {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto !important;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		/* a drag that reaches the end of the list stays in the list, instead
		   of pulling the page behind it */
		overscroll-behavior: contain;
	}
	/* the boxes between the wrapper and the rows must not hold a height of
	   their own, or the wrapper never sees anything to scroll */
	#group-icon-header .mobile-menu-wrapper > .mobile-menu,
	#group-icon-header .mobile-menu-wrapper nav {
		height: auto !important;
		overflow: visible !important;
	}

	@media (prefers-reduced-motion: reduce) {
		#group-icon-header .mobile-menu-wrapper .ts-menu-drop-icon + ul.sub-menu,
		#group-icon-header .mobile-menu-wrapper span.ts-menu-drop-icon:after {
			transition: none !important;
		}
	}
}