/* The added navigation item exists in the menu markup but is visible only on phones. */
#main-nav .mmoit-mobile-archive-link,
.mmoit-mobile-highlights {
	display: none;
}

@media (max-width: 767px) {
	#main-nav {
		width: 100%;
		height: 36px;
		padding: 0 !important;
		margin: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	#main-nav > .container {
		max-width: 100%;
		width: 100%;
		height: 36px;
		padding: 0;
		overflow: hidden;
	}

	#main-nav ul.root {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		margin: 0;
		padding: 0 12px;
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
		height: 36px;
		gap: 4px;
		scrollbar-width: thin;
		white-space: nowrap;
	}

	/* The theme's mobile rule targets every ul, including dropdowns. */
	#main-nav ul.root ul {
		display: none !important;
	}

	#main-nav ul.root > li {
		margin: 0;
		padding: 0;
		min-width: 0;
		height: 36px;
		flex: 0 0 auto;
	}

	#main-nav ul.root > li > a {
		width: auto !important;
		height: 36px;
		min-width: 0;
		float: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 13px;
		font-size: 13px;
		line-height: 20px;
		box-sizing: border-box;
	}

	#main-nav .mmoit-mobile-archive-link {
		display: list-item;
	}

	#main {
		padding: 16px 12px 24px;
	}

	#primary,
	#primary #content {
		min-width: 0;
	}

	.mmoit-mobile-highlights {
		display: block;
		margin: 8px -12px 24px;
		padding: 0 0 0 12px;
		max-width: calc(100% + 24px);
		box-sizing: border-box;
		overflow: hidden;
		clear: both;
	}

	.mmoit-mobile-highlights-header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding-right: 12px;
		margin-bottom: 12px;
		border-bottom: 2px solid #f38630;
	}

	#content .mmoit-mobile-highlights-header h2 {
		margin: 0;
		padding: 0 0 8px;
		font-size: 19px;
		line-height: 1.3;
		font-weight: 700;
		color: #00bceb;
	}

	.mmoit-mobile-highlights-header span {
		font-size: 12px;
		color: #00b8e6;
		white-space: nowrap;
	}

	.mmoit-mobile-highlights-track {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 0 12px 8px 0;
		scrollbar-width: thin;
	}

	.mmoit-mobile-highlight {
		flex: 0 0 min(82vw, 390px);
		min-width: 0;
		padding: 0;
		box-sizing: border-box;
		scroll-snap-align: start;
		border-radius: 0;
		overflow: hidden;
		background: rgba(0, 0, 25, .85) !important;
		border: 1px solid rgba(190, 216, 234, .22);
	}

	.mmoit-mobile-highlight a {
		display: block;
		color: #f38630;
		text-decoration: none;
	}

	.mmoit-mobile-highlight a:focus-visible {
		outline: 3px solid #00bceb;
		outline-offset: -3px;
	}

	.mmoit-mobile-highlight-image {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 0;
		border-radius: 0;
		object-fit: cover;
	}

	#content .mmoit-mobile-highlight h3 {
		margin: 0;
		padding: 12px 10px 16px;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		min-height: 3.1em;
		font-size: 18px;
		line-height: 1.45;
		font-weight: 700;
		font-variant: small-caps;
		color: #f38630;
	}

	/* The home feed remains readable at the browser's normal text scale. */
	body.blog #content .post,
	body.home #content .post {
		zoom: 1;
		padding: 0 0 18px;
		margin: 0 0 20px;
		border-bottom: 0;
	}

	body.blog #primary .post .entry-title,
	body.blog #primary .post .entry-title a,
	body.home #primary .post .entry-title,
	body.home #primary .post .entry-title a {
		margin-left: 0;
		letter-spacing: 0;
		font-size: 20px;
		line-height: 1.35;
	}

	body.blog #primary .post .entry-header,
	body.home #primary .post .entry-header {
		padding: 0 2px;
	}

	body.blog #primary .post .entry-meta-bar,
	body.home #primary .post .entry-meta-bar {
		background: transparent;
		border: 0;
	}

	body.blog #primary .post .entry-content,
	body.home #primary .post .entry-content {
		font-size: 14px;
		line-height: 1.6;
		padding: 8px 2px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}
}