/*
 * Mobile navigation restyle (BBC.com-inspired).
 * Uses the theme's existing CSS custom properties only, so dark mode /
 * light mode / custom accent color switching keeps working unchanged.
 * Scoped to the same breakpoint the theme already uses for its mobile
 * header, and the <link> is enqueued with a matching "media" attribute
 * so desktop visitors never pay for it as a render-blocking request.
 */
@media (max-width: 1024px) {

	/* Persistent top bar stays visible above the full-height panel */
	.header-mobile-wrap {
		position: relative;
		z-index: 2;
	}

	.collapse-activated .header-mobile-wrap {
		box-shadow: none;
		border-bottom: 1px solid var(--nav-color-10, var(--flex-gray-15));
	}

	/* "Menu" / "Close" label next to the burger icon, BBC-style
	   (the search trigger reuses .mobile-menu-trigger too, so exclude it) */
	.mobile-menu-trigger:not(.mobile-search-icon) {
		gap: 7px;
	}

	.mobile-menu-trigger:not(.mobile-search-icon):after {
		font-family: var(--btn-family), sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .04em;
		content: 'Menu';
		text-transform: uppercase;
		white-space: nowrap;
	}

	html.collapse-activated .mobile-menu-trigger:not(.mobile-search-icon):after {
		content: 'Close';
	}

	/* Full-height slide panel */
	.mobile-collapse {
		background: var(--submbnav-bg, var(--subnav-bg));
	}

	.collapse-holder {
		height: 100%;
	}

	.collapse-inner {
		padding-top: 0;
	}

	.collapse-inner > *:last-child {
		padding-bottom: 60px;
	}

	/* Kill the decorative dashed rule for a cleaner, denser list */
	.collapse-sections:before {
		display: none;
	}

	/* Search sits in its own flush row at the top of the panel */
	.mobile-search-form {
		padding-top: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--submbnav-color-10, var(--subnav-color-10));
	}

	/* Flat, dense, full-width list of top-level sections */
	.mobile-menu {
		display: flex;
		flex-flow: column nowrap;
	}

	.mobile-menu > li {
		border-bottom: 1px solid var(--submbnav-color-10, var(--subnav-color-10));
	}

	.mobile-menu > li.menu-item-has-children:not(:first-child) {
		margin-top: 0;
	}

	.mobile-menu > li > a {
		font-family: var(--h4-family), sans-serif;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.3;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 2px;
		letter-spacing: -.01em;
	}

	/* Chevron cue only on rows that actually open a dropdown - a row
	   with no sub-menu has nothing to expand, so it gets no chevron.
	   The whole row (not just the chevron) is the tap target that
	   opens it, and the chevron rotates with the open state. */
	.mobile-menu > li.menu-item-has-children > a {
		cursor: pointer;
	}

	.mobile-menu > li.menu-item-has-children > a:after {
		font-family: 'mtaawasaba-icon';
		font-size: 13px;
		font-weight: 400;
		flex-shrink: 0;
		margin-left: 10px;
		content: '\e924';
		opacity: .35;
		transition: transform .25s var(--timing, ease);
	}

	.mobile-menu > li.menu-item-has-children.sub-menu-open > a:after {
		transform: rotate(180deg);
	}

	body.rtl .mobile-menu > li.menu-item-has-children > a:after {
		display: inline-block;
		transform: scale(-1, 1);
	}

	body.rtl .mobile-menu > li.menu-item-has-children.sub-menu-open > a:after {
		transform: scale(-1, 1) rotate(180deg);
	}

	/* Sub-menu: collapsed by default. JS sets an explicit max-height
	   (to the measured content height) on the open item so it slides
	   smoothly instead of just popping open/closed. */
	.mobile-menu .sub-menu {
		display: flex;
		flex-flow: column nowrap;
		overflow: hidden;
		max-height: 0;
		padding: 0;
		border-top: none;
		transition: max-height .3s var(--timing, ease);
	}

	.mobile-menu > li.sub-menu-open > .sub-menu {
		padding: 0 0 12px 0;
	}

	.mobile-menu .sub-menu > * {
		flex: 0 0 100%;
	}

	.mobile-menu .sub-menu a {
		font-family: var(--body-family), sans-serif;
		font-size: 15px;
		font-weight: 400;
		padding: 9px 0;
		opacity: .85;
	}

	.mobile-menu .sub-menu a:hover,
	.mobile-menu .sub-menu a:focus {
		opacity: 1;
	}

	/* Quick-access strip reads like BBC's secondary rail under the fold */
	.mobile-qview {
		border-top: 1px solid var(--submbnav-color-10, var(--nav-color-10));
	}

	/* Socials / login footer stays flush with the same divider language */
	.mobile-socials:not(:first-child),
	.mobile-login,
	.collapse-footer {
		border-color: var(--submbnav-color-10, var(--flex-gray-15));
	}
}