/**
 * Periscope Mobile Navigation — full-screen, scrollable mobile menu.
 *
 * Applies at the GeneratePress mobile breakpoint (hamburger shown at
 * ≤1024px). The open menu list becomes a fixed panel filling the screen
 * below the header with its own scroll area; mobile-nav.js locks the page
 * behind it (html.periscope-mobile-nav-open) and sets the panel's top edge
 * (--periscope-mobile-nav-top) to the header's real bottom edge.
 */

@media (max-width: 1024px) {

	/* Page behind the open menu can't scroll, so scrolling moves the menu
	   instead of closing it (the theme closes the menu on page scroll). */
	html.periscope-mobile-nav-open,
	html.periscope-mobile-nav-open body {
		overflow: hidden;
	}

	/* GeneratePress's auto-hide sticky header sets an inline transform
	   (translateY) on #sticky-navigation; any transform turns the header into
	   the containing block for position: fixed, trapping the menu inside the
	   ~50px header. The header doesn't slide while the menu is open (the
	   page is locked), so the transform can go. */
	html.periscope-mobile-nav-open #sticky-navigation.toggled,
	html.periscope-mobile-nav-open #site-navigation.toggled {
		transform: none !important;
	}

	/* The open menu: fixed, fills the screen below the header, scrolls. */
	#site-navigation.toggled .inside-navigation #primary-menu > ul.menu,
	#sticky-navigation.toggled .inside-navigation #primary-menu > ul.menu {
		position: fixed;
		top: var(--periscope-mobile-nav-top, 80px);
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		max-height: none;
		display: flex;
		flex-direction: column;
		/* The site's menu styles let items wrap; in a fixed-height column
		   that pushed overflowing items into an off-screen second column. */
		flex-wrap: nowrap !important;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: #ffffff;
		border-top: solid 1px rgba(0, 0, 0, 0.08);
		z-index: 999;
	}

	#site-navigation.toggled .inside-navigation #primary-menu > ul.menu > li,
	#sticky-navigation.toggled .inside-navigation #primary-menu > ul.menu > li {
		flex-shrink: 0;
	}

	/* Book a Demo pinned to the bottom of the menu, always reachable. */
	#site-navigation.toggled .inside-navigation #primary-menu > ul.menu > li.algst-contact-nav-item,
	#sticky-navigation.toggled .inside-navigation #primary-menu > ul.menu > li.algst-contact-nav-item {
		position: sticky;
		bottom: 0;
		margin-top: auto;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
		background: #ffffff;
		box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
		z-index: 2;
	}

	#site-navigation.toggled .inside-navigation #primary-menu ul.menu li.menu-item.algst-contact-nav-item > a,
	#sticky-navigation.toggled .inside-navigation #primary-menu ul.menu li.menu-item.algst-contact-nav-item > a {
		width: 100%;
		justify-content: center;
		margin: 0;
	}

	/* Datasets: one column in the body weight — quicker to scan than two
	   columns of bold links. */
	#site-navigation .algst_mobile-mega-nav-item .algst_mobile-mega-nav-grid,
	#sticky-navigation .algst_mobile-mega-nav-item .algst_mobile-mega-nav-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	#site-navigation .algst_mobile-mega-nav-item .algst_mobile-mega-nav-grid a,
	#sticky-navigation .algst_mobile-mega-nav-item .algst_mobile-mega-nav-grid a {
		font-weight: 400;
	}

	/* "View all Datasets" stays a heading-style link above the list. */
	#site-navigation .algst_mobile-mega-nav-item .algst_mobile-mega-nav-grid > p:first-child a,
	#sticky-navigation .algst_mobile-mega-nav-item .algst_mobile-mega-nav-grid > p:first-child a {
		font-weight: 600;
	}

	/* Single-link sections (e.g. Licensing) are plain links, not toggles —
	   mobile-nav.js swaps the button for a link. Arrow instead of chevron. */
	/* As a link it would inherit the menu's white link colour and the body
	   font; match the section buttons beside it instead (they use the
	   browser's default button font). */
	#site-navigation .inside-navigation #primary-menu ul.menu .algst_mobile-mega-nav-item a.periscope-mobile-nav-direct,
	#sticky-navigation .inside-navigation #primary-menu ul.menu .algst_mobile-mega-nav-item a.periscope-mobile-nav-direct {
		color: #30394f;
		font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
		text-decoration: none;
	}

	#site-navigation .inside-navigation #primary-menu ul.menu .algst_mobile-mega-nav-item a.periscope-mobile-nav-direct:hover,
	#sticky-navigation .inside-navigation #primary-menu ul.menu .algst_mobile-mega-nav-item a.periscope-mobile-nav-direct:hover {
		color: var(--newgrove-green);
	}

	#site-navigation .algst_mobile-mega-nav-item .periscope-mobile-nav-direct::after,
	#sticky-navigation .algst_mobile-mega-nav-item .periscope-mobile-nav-direct::after {
		transform: rotate(-45deg);
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	#site-navigation.toggled .inside-navigation #primary-menu > ul.menu,
	#sticky-navigation.toggled .inside-navigation #primary-menu > ul.menu {
		scroll-behavior: auto;
	}
}