/**
 * Afrobeats Wire - mobile navigation overlay.
 *
 * The theme ships .c-mobile-menu__list / __nav / __actions rules, but
 * wp_nav_menu() renders .c-nav--mobile / .c-nav__item / .c-nav__link, so none
 * of them ever matched. The links fell through to the desktop .c-nav rules -
 * a 12px horizontally-scrolling strip - inside a full-screen overlay. At 414px
 * that put 839px of nav in 412px of space and hid the last four items.
 *
 * Everything here is scoped below the theme's 46.25em breakpoint so the
 * desktop `display:none!important` still wins on wide screens.
 */

@keyframes afw-mm-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 46.24em) {

	/* ---------------------------------------------------------- shell */

	.c-mobile-menu {
		/* Was a hardcoded 100px. --afw-mm-top is measured from the real
		   sticky header by mobile-nav.js, so the first link always clears
		   it whatever the logo/strapline do. */
		padding-top: 0;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.c-mobile-menu.is-active {
		display: flex !important;
		flex-direction: column;
		padding-top: var(--afw-mm-top, 88px);
		padding-left: var(--grid-margin, 1.25rem);
		padding-right: var(--grid-margin, 1.25rem);
		padding-bottom: calc(var(--space-24, 1.5rem) + env(safe-area-inset-bottom, 0px));
		animation: afw-mm-in .22s ease both;
	}

	/* ------------------------------------------------------ nav list */

	/* The overlay itself is the scroll container (the theme sets overflow-y
	   on it). Giving the list its own scroller as well made it a flex item
	   that shrank to fit, clipping the last four entries behind a scrollbar
	   with no affordance - so it must stay visible and unshrinkable. */
	.c-mobile-menu .c-nav--mobile {
		flex: 0 0 auto;
		flex-direction: column;
		flex-wrap: nowrap;
		overflow: visible;
		gap: 0;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.c-mobile-menu .c-nav__item,
	.c-mobile-menu .c-nav__item:not(:first-child) {
		display: block;
		width: 100%;
		padding-left: 0 !important;
		font-size: 1.0625rem;
		line-height: 1.3;
		font-weight: var(--font-weight-semibold, 600);
		letter-spacing: .04em;
		white-space: normal;
		border-bottom: 1px solid var(--color-border-secondary, rgba(255, 255, 255, .12));
	}

	/* The desktop bar separates items with a vertical pipe. Stacked, every
	   item would carry a stray rule down its left edge. */
	.c-mobile-menu .c-nav__item:not(:first-child)::before {
		display: none !important;
	}

	.c-mobile-menu .c-nav__link {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 52px;          /* comfortable thumb target */
		padding: .8rem 0;
		text-decoration: none;
	}

	.c-mobile-menu .c-nav__link:hover,
	.c-mobile-menu .c-nav__link:focus-visible {
		text-decoration: none;
		opacity: .72;
	}

	/* Desktop paints the current item as a solid accent block. Full-bleed on
	   a stacked list that reads as a selected row, so use a left marker. */
	.c-mobile-menu .c-nav__link--current {
		background-color: transparent;
		color: var(--color-accent, #f5c518);
		box-shadow: inset 3px 0 0 0 var(--color-accent, #f5c518);
		padding-left: .75rem;
	}

	/* ------------------------------------------------------- search */

	.c-mobile-menu form {
		flex: 0 0 auto;
		display: flex;
		gap: .5rem;
		width: 100%;
		margin: var(--space-16, 1rem) 0 0;
	}

	.c-mobile-menu form label,
	.c-mobile-menu form .screen-reader-text {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.c-mobile-menu form input[type="search"],
	.c-mobile-menu form input[type="text"] {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 48px;
		padding: 0 .875rem;
		font-size: 16px;           /* < 16px makes iOS Safari zoom on focus */
		color: var(--color-text-primary, #fff);
		background: transparent;
		border: 1px solid var(--color-border-secondary, rgba(255, 255, 255, .22));
		border-radius: 2px;
	}

	.c-mobile-menu form input::placeholder { color: var(--color-text-secondary, rgba(255, 255, 255, .55)); }

	.c-mobile-menu form input[type="submit"],
	.c-mobile-menu form button {
		flex: 0 0 auto;
		min-height: 48px;
		padding: 0 1rem;
		cursor: pointer;
		font-weight: var(--font-weight-semibold, 600);
	}

	/* ---------------------------------------------------------- CTA */

	.c-mobile-menu__cta {
		flex: 0 0 auto;
		/* Sits at the bottom when the menu is shorter than the screen, and
		   simply follows the content when it is taller. */
		margin-top: auto;
		padding-top: var(--space-24, 1.5rem);
		width: 100%;
	}

	.c-mobile-menu__cta .c-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 50px;
	}

	/* Sign in / Your desk. The header's account link is u-hidden-on-mobile,
	   so before this the only way in from a phone was the footer. Injected
	   by mobile-nav.js. */
	.c-mobile-menu__account {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		margin-top: .625rem;
		font-size: .9375rem;
		font-weight: var(--font-weight-semibold, 600);
		letter-spacing: .04em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--color-text-primary, #fff);
		border: 1px solid var(--color-border-secondary, rgba(255, 255, 255, .28));
		border-radius: 2px;
	}

	.c-mobile-menu__account:hover,
	.c-mobile-menu__account:focus-visible { opacity: .78; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
	.c-mobile-menu.is-active { animation: none; }
}