/* Mobile header (below 783px) + the full-screen menu overlay it opens.
   Desktop is untouched — the toggle button and the overlay itself are
   both display:none above the breakpoint. See inc/mobile-menu.php for
   the markup/data this styles. */

#nonotami-mobile-menu-toggle {
	display: none;
}

@media (max-width: 782px) {
	/* Title + hamburger as a row; subtitle and the horizontal nav (both
	   replaced by the overlay here) are hidden rather than removed from
	   the DOM, so nothing else has to change per breakpoint. */
	#site-header {
		justify-content: space-between;
	}

	.nonotami-site-subtitle,
	#site-nav {
		display: none;
	}

	/* Sticky follows the same "Sticky header" customizer control as
	   desktop (inc/sticky.php sets --nonotami-sticky-header) — that var
	   was only ever consumed inside the ≥783px block before; this is the
	   same rule, just for this breakpoint instead. */
	#site-header {
		position: var( --nonotami-sticky-header, sticky );
		top: 0;
	}

	#nonotami-mobile-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		flex: 0 0 auto;
	}

	#nonotami-mobile-menu-toggle span {
		display: block;
		height: 2px;
		background: currentColor;
	}
}

/* The overlay itself: hidden off-screen until <body> gets
   .nonotami-mobile-menu-open (js/mobile-menu.js), then centered at 90%
   of the viewport in both dimensions. display:none outright above the
   breakpoint — it has nothing to do on desktop regardless of the body
   class. */
.nonotami-mobile-menu {
	display: none;
}

@media (max-width: 782px) {
	.nonotami-mobile-menu {
		display: flex;
		/* A column flex container, not a plain block: justify-content:
		   center vertically centers everything it holds (topbar, controls,
		   categories) as a group when it's shorter than the box — e.g. a
		   menu with only a couple of items — instead of them sitting at
		   the top with empty space below. align-items stays the default
		   (stretch), so each child keeps its full width; horizontal
		   centering of what's *inside* each row (icon + text) is each
		   row's own rule (.nonotami-mm-term), unaffected by this. Still
		   scrolls normally once content is taller than the box — a flex
		   container with overflow-y: auto behaves the same as a block one
		   there, centering only ever applies to the short case. */
		flex-direction: column;
		justify-content: center;
		position: fixed;
		/* vh, not %, for the overlay's own box — percentages are relative
		   to the containing block, and some mobile browsers resize that
		   unreliably as their own chrome (address bar) shows/hides;
		   viewport units don't have that ambiguity. */
		top: 5vh;
		left: 5%;
		width: 90%;
		height: 90vh;
		z-index: 200;
		background: var( --nonotami-color-bg, #fff );
		border: 1px solid currentColor;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		box-sizing: border-box;
		padding: 1rem;
		opacity: 0;
		pointer-events: none;
		transform: scale( 0.98 );
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	/* `position: fixed` on <body> itself (not just overflow: hidden) is
	   the reliable cross-browser way to stop the page scrolling behind
	   the overlay — on several mobile browsers, overflow: hidden alone on
	   <body> still lets a touch-drag scroll it (and can fight with the
	   overlay's own touch-scrolling above), fixed can't. `top` is set to
	   the page's own scroll position (js/mobile-menu.js), negated, so the
	   page doesn't visually jump when it's pinned, and restored on close. */
	body.nonotami-mobile-menu-open {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	body.nonotami-mobile-menu-open .nonotami-mobile-menu {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

.nonotami-mm-topbar {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* The search box itself (.nonotami-search-form) is styled once, shared
   with the "Nonotami: Search" widget — see css/search-form.css. This
   just lets it grow to fill the row next to the close button. */
.nonotami-mm-topbar .nonotami-search-form {
	flex: 1 1 auto;
}

#nonotami-mobile-menu-close {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: none;
	background: none;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.nonotami-mm-controls {
	margin: 1.5rem 0;
}

.nonotami-mm-categories {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.nonotami-mm-group {
	border: 1px solid currentColor;
	padding: 1.5rem 1rem;
}

/* A term row: icon + name. The top-level row inside a group is centered
   (also what a childless top-level term's own, standalone row looks
   like — there's no children grid underneath it in that case, just this).
   A child row (inside .nonotami-mm-children, below) overrides this to
   left-align instead. */
.nonotami-mm-term {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

/* No bottom margin by default — a childless item's row is the group's
   whole content, so nothing should reserve space below it. Only a group
   that actually has a children grid underneath needs the gap. */
.nonotami-mm-group:has( > .nonotami-mm-children ) > .nonotami-mm-term {
	margin-bottom: 1.5rem;
}

/* Circle is the default/fallback shape (unscoped rule below), same as
   this always looked before the crop setting existed — Nonotami →
   Category Management → Images, "Image crop" (inc/category-images.php).
   The 3:2/square body classes override width and border-radius only;
   everything else about the icon box is shared. */
.nonotami-mm-term-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	border: 1px solid currentColor;
}

.nonotami-mm-icon-crop-square .nonotami-mm-term-icon {
	border-radius: 4px;
}

.nonotami-mm-icon-crop-3-2 .nonotami-mm-term-icon {
	width: 3.75rem;
	border-radius: 4px;
}

.nonotami-mm-children {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 0.75rem;
}

/* Left column: icon then name, left-aligned. Right column: name then
   icon (row-reverse), right-aligned — a mirror image of the left, not
   just the same left-aligned row shifted into the second track. */
.nonotami-mm-children .nonotami-mm-term {
	justify-self: stretch;
	width: 100%;
	box-sizing: border-box;
	justify-content: flex-start;
	text-align: left;
}

.nonotami-mm-children .nonotami-mm-term:nth-child(2n) {
	flex-direction: row-reverse !important;
	justify-content: flex-end !important;
	text-align: right !important;
}

/* A lone last item in an odd-count grid spans both columns and goes back
   to centered, instead of sitting alone in the left column. */
.nonotami-mm-children .nonotami-mm-term:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-content: center;
}

.nonotami-mm-children .nonotami-mm-term-icon {
	width: 2rem;
	height: 2rem;
}

.nonotami-mm-icon-crop-3-2 .nonotami-mm-children .nonotami-mm-term-icon {
	width: 3rem;
}

.nonotami-mm-children .nonotami-mm-term-name {
	white-space: normal;
	overflow-wrap: break-word;
}