/**
 * Public front-end mobile layout.
 *
 * Loaded only on non-Admin pages (see @layout.latte), which is exactly where MenuControl
 * renders the top bar and drawer this sheet styles. Admin pages keep their own mobile
 * navigation in admin-responsive.css - bottom tabs, not a drawer, deliberately.
 *
 * Breakpoint: 767px, matching admin-responsive.css.
 */

:root {
	--mobile-topbar-height: 3em;
	/* The minimum tap target the admin sheet already established. */
	--mobile-touch-target: 44px;
}

/* The drawer chrome exists in the DOM on every front-end page; desktop simply never shows it. */
.mobile-topbar {
	display: none;
}

.menu-scrim {
	display: none;
}

@media screen and (max-width: 767px) {
	/* style.css floors the body at 800px and lays the page out as three side-by-side
	   columns. Below the breakpoint the floor goes and the columns stack. */
	html,
	body {
		min-width: auto;
	}

	body {
		flex-direction: column;
		padding-top: var(--mobile-topbar-height);
	}

	body.menu-drawer-open {
		overflow: hidden;
	}

	/* ===================================== */
	/* Top bar                               */
	/* ===================================== */
	.mobile-topbar {
		display: flex;
		align-items: center;
		gap: 0.25em;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--mobile-topbar-height);
		background-color: var(--dark-color);
		border-bottom: 2px solid var(--light-color);
		z-index: 900;
	}

	.mobile-topbar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--mobile-touch-target);
		height: var(--mobile-touch-target);
		padding: 0;
		background: none;
		border: 0;
		color: var(--light-text-color);
		font-size: 1.5rem;
		cursor: pointer;
	}

	.mobile-topbar-brand {
		color: var(--light-text-color);
		font-weight: bold;
		text-decoration: none;
	}

	/* ===================================== */
	/* Drawer                                */
	/* ===================================== */
	/* Scrim and drawer clear .cookie-consent (z-index 9999), which is fixed to the bottom
	   of the viewport and would otherwise sit over the drawer's last items. */
	.menu-scrim {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 35, 71, 0.6);
		z-index: 10000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}

	body.menu-drawer-open .menu-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s ease, visibility 0s;
	}

	/* visibility, not just the transform: an element translated off-screen still has a
	   bounding box, so it would stay in the tab order and count as on-screen. */
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 15em;
		max-width: 80vw;
		/* An explicit height rather than top:0 + bottom:0, because .menu carries
		   align-self:flex-start from the desktop rail and a fixed flex child with that
		   shrinks to its content instead of stretching between the two edges. */
		height: 100%;
		overflow-y: auto;
		z-index: 10001;
		transform: translateX(-100%);
		visibility: hidden;
		/* visibility is held back until the slide-out finishes, but flips the instant the
		   drawer opens. Transitioning it like the transform would leave the panel formally
		   invisible for the whole slide-in, and an invisible element cannot take focus. */
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	body.menu-drawer-open .menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}

	.menu li {
		height: auto;
	}

	.menu a {
		/* The rail sizes its links to a fixed-height li; here they size to their own text,
		   floored at a tap target. Without dropping the inherited height:100% the first link
		   stretches over the whole drawer once the drawer has a definite height. */
		height: auto;
		text-align: left;
		padding: 0.9em 1em;
		min-height: var(--mobile-touch-target);
		border-right: none;
		border-bottom: 1px solid var(--main-color);
	}

	/* The desktop submenu-collapse toggle; there is no side column to collapse here. */
	.menu .menuToggle {
		display: none;
	}

	/* ===================================== */
	/* Submenu becomes a full-width band     */
	/* ===================================== */
	/* It carries the search form, the page filters and the watched/watchlist buttons,
	   so it stacks above the content rather than being hidden the way admin hides it. */
	.submenu {
		width: 100%;
		z-index: auto;
	}

	/* Static, so the top submenu-scroll.js writes while sticky has no effect.
	   overflow:hidden stays - it is what contains the floated items. */
	.submenu-inner {
		position: static;
	}

	/* The item widths are absolute fractions of the 21em column. wide-all alone is 336px,
	   already wider than a 320px phone, so below the breakpoint they go proportional. */
	.submenu li.wide-all,
	.submenu li.wide-all-small,
	.submenu .flash {
		width: 100%;
	}

	.submenu li.wide-half,
	.submenu li.wide-half-small {
		width: 50%;
	}

	.submenu li.wide-third {
		width: 33.333%;
	}

	/* Legacy flyout anchored at left:100% of the side column. */
	.submenu .popup {
		display: none;
	}

	.content-inner {
		padding: 1em;
	}

	/* ===================================== */
	/* Content sized for a desktop column    */
	/* ===================================== */
	/* Every rule in style.css that declares a width wider than a phone. Without these the
	   page still scrolls sideways and the drawer buys nothing. Known offenders, not an
	   audit - individual pages may still need their own tuning. */
	/* .content is a column flex container, so its children take flex's automatic minimum
	   size: they refuse to shrink below their min-content width and push the page sideways
	   however narrow the column gets. */
	.content > * {
		min-width: 0;
	}

	/* width, not just max-width: a percentage max-width is ignored when the browser works
	   out an element's intrinsic contribution, so a declared 40em keeps widening whatever
	   contains it even while the element itself is capped. */
	.btn-main,
	.form-row input[type="submit"] {
		width: 100%;
		max-width: 100%;
	}

	/* Its margin:0 auto opts the form out of the flex stretch, leaving it fit-content. */
	.base-form {
		width: 100%;
	}

	/* The form rows put a 19em label beside a 19em field - 608px of unwrappable min-content
	   before padding. Stacked and full-width, they fit any phone. */
	.form-row label,
	.form-row select,
	.form-row input[type="text"],
	.form-row input[type="email"],
	.form-row input[type="password"],
	.form-row input[type="date"],
	.form-row input[type="file"] {
		display: block;
		float: none;
		width: 100%;
	}

	.feed-row,
	.blog-detail {
		width: 100%;
	}

	.vote li a {
		min-width: 0;
		max-width: 100%;
	}

	.texy-editor,
	.watched-episode-link,
	.calendar .item,
	.calendar .calendar-item {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu,
	.menu-scrim,
	body.menu-drawer-open .menu,
	body.menu-drawer-open .menu-scrim {
		transition: none;
	}
}