.navbar-mobile-bar,
.mobile-actions,
.mobile-menu-toggle,
.mobile-logo,
.mobile-action-link,
.mobile-nav-backdrop,
.mobile-store-link {
	display: none;
}



@media (max-width: 900px) {
	/* without this, there is a dark green line at the top of the page. */
	#announcement-spacer {
		height: 1px;
		margin: 0;
	}

	.bodyhead {
		padding-top: 0;
	}

	.content-table {
		width: 95%;
		padding-left: 3%;
	}

	.desktop-only,
	.layout-gutter,
	#bodyrule,
	.layout-banner-row,
	.navbar-logo-block,
	.topcontrols-row {
		display: none;
	}

	/* Mobile navbar styles */
	.navbar-mobile-bar,
	.mobile-actions,
	.mobile-menu-toggle,
	.mobile-logo,
	.mobile-action-link,
	.mobile-store-link {
		display: flex;
	}

	.navbar-mobile-bar {
		background: #395139;
		padding: 0.75rem 1rem;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		box-sizing: border-box;
		z-index: 1100;
	}

	body#canvas {
		padding-top: 68px;
	}

	.mobile-menu-toggle {
		align-items: center;
		background: transparent;
		border: 0;
		cursor: pointer;
		height: 44px;
		justify-content: center;
		padding: 0;
		width: 44px;
		transition: transform 0.3s ease;
	}

	.mobile-menu-icon {
		background: #fde23d;
		display: block;
		height: 2px;
		position: relative;
		width: 22px;
		transition: background 0.2s ease;
	}

	.mobile-menu-icon::before,
	.mobile-menu-icon::after {
		background: #fde23d;
		content: "";
		height: 2px;
		left: 0;
		position: absolute;
		width: 22px;
		transition: transform 0.3s ease, top 0.3s ease;
	}

	.mobile-menu-icon::before {
		top: -6px;
	}

	.mobile-menu-icon::after {
		top: 6px;
	}

	.mobile-logo {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.mobile-logo-image {
		max-height: 44px;
		width: auto;
		max-width: 52px;
	}

	.mobile-actions {
		align-items: center;
		gap: 0.5rem;
	}

	.mobile-action-link {
		color: #fde23d;
		font-size: 0.85rem;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.navbar-logo-block {
		margin-bottom: 1.5rem;
	}

	.mobile-store-link {
		align-items: center;
		border: 1px solid rgba(253, 226, 61, 0.5);
		border-radius: 999px;
		color: #fde23d;
		display: inline-flex;
		height: 32px;
		justify-content: center;
		padding: 0.25rem;
		width: 32px;
	}

	.mobile-action-icon {
		height: 25px;
		width: 25px;
	}

	.sr-only {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}


	/* Mobile nav drawer slides in under the sticky header */
	.navmenu {
		background: #395139;
		bottom: 0;
		display: block;
		left: 0;
		overflow-y: auto;
		padding: 1.5rem;
		position: fixed;
		top: 60px;
		z-index: 1002;
		transform: translateX(-100%);
		transition: transform 0.35s ease;
		pointer-events: none;
		max-width: 320px;
		right: auto;
		box-shadow: 4px 0 12px rgba(0,0,0,0.25);
	}

	.navmenu.is-open {
		transform: translateX(0);
		pointer-events: auto;
	}

	.navmenu ul {
		margin-left: 0;
		padding-left: 0;
	}

	.mobile-nav-backdrop.is-visible {
		background: rgba(0, 0, 0, 0.55);
		bottom: 0;
		display: block;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 1000;
	}

	.mobile-menu-toggle.is-open .mobile-menu-icon {
		background: transparent;
	}

	.mobile-menu-toggle.is-open .mobile-menu-icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.mobile-menu-toggle.is-open .mobile-menu-icon::after {
		top: 0;
		transform: rotate(-45deg);
	}


	/* Adjustments to the landing page */
	#content_box {
		box-sizing: border-box;
	}


	#top_text_contained {
		width: 100%;
		padding: 0;
		text-align: center;
	}

	.top_text {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem;
		line-height: 1.6;
	}

	/* Force Select2 widgets to respect the mobile column width on retreats */
	.select2-container {
		width: 100% !important;
	}

	#content_box {
		padding: 0 1rem 1.5rem;
	}

	#content_box_inner {
		width: 100%;
		height: auto;
		margin: 1.25rem 0 0;
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(2, minmax(120px, 1fr));
		justify-items: center;
		margin-bottom: 1.5rem;
		justify-content: center;
	}



	/* Landing icon grid switches to centered cards on tablets */
	#content_box_inner > div {
		margin: 0;
	}

	#welc_dharma_seed {
		text-align: center;
		padding: 0;
		font-size: 24px;
		line-height: 110%;
		width: 100%;
	}

	#welc_dharma_seed, #index_don_btm {
		margin-top: 0;
		margin-bottom: 0;
		width: 100%;
	}

	#welc_dharma_seed img, #index_don_btm img {
		max-width: calc(100vw - 2rem);
	}

	#page_footer, #landing_text {
		width: 95%;
	}

	/* Images on news and faq */
	img.left {
		max-width: 100%;
		height: auto;
	}
}