/*
 * Mobile bottom tab bar and search sheet, below 783px. Adapted
 * from the SparkleStock theme (f32/assets/css/mobile-bar.css).
 *
 * The bar stays available while reading; progress belongs to the header.
 *
 * Pixel values left: 1px borders, 44px touch targets, the 22px icons.
 */

.pst-mobile-bar,
.pst-search-sheet {
	display: none;
}

/* Same-origin page transitions: the bar stays still while the page changes. */
@media (max-width: 782px) and (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.pst-mobile-chrome {
		view-transition-name: pst-mobile-bar;
	}

	html::view-transition-group(*) {
		animation-duration: 160ms;
	}

	html::view-transition-group(pst-mobile-bar) {
		animation: none;
		z-index: 1;
	}

	html::view-transition-old(pst-mobile-bar) {
		display: none;
	}

	html::view-transition-new(pst-mobile-bar) {
		animation: none;
		opacity: 1;
	}
}

@media (max-width: 782px) {
	:root {

		/* A 44px tab plus the strip's padding and its 1px top border. */
		--pst-mobile-bar-height: calc(44px + 2 * var(--wp--preset--spacing--20) + 1px);
	}

	.pst-mobile-chrome {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--wp--custom--z-index--header);
		display: block;
		padding-block: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom, 0px));
		padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
		border-top: 1px solid var(--wp--preset--color--line);
		background-color: var(--wp--preset--color--base);
	}

	.pst-mobile-bar {
		display: flex;
	}

	.pst-mobile-bar__tab {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--10);
		min-height: 44px;
		color: var(--wp--preset--color--muted);
		font-size: 0.6875rem; /* Tab labels: smaller than the x-small preset, so five fit a 320px phone. */
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}

	.pst-mobile-bar__tab:hover {
		text-decoration: none;
	}

	.pst-mobile-bar__icon {
		display: block;
		stroke-width: 1.8;
	}

	.pst-mobile-bar__tab:active {
		background-color: var(--wp--preset--color--surface);
	}

	.pst-mobile-bar__tab[aria-current] {
		color: var(--wp--preset--color--action);
		font-weight: 600;
	}

	.pst-mobile-bar__tab:focus-visible {
		outline: 2px solid var(--wp--preset--color--action);
		outline-offset: -4px;
		border-radius: var(--wp--preset--border-radius--sm);
	}

	body {
		padding-bottom: calc(var(--pst-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
	}

	/* Search sheet: a panel docked above the bar (or above the keyboard). */
	.pst-search-sheet[open],
	.pst-search-sheet:target {
		position: fixed;
		inset: 0 0 max(calc(var(--pst-mobile-bar-height) + env(safe-area-inset-bottom, 0px)), var(--pst-search-lift, 0px));
		z-index: var(--wp--custom--z-index--modal);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background-color: rgba(14, 15, 18, 0.5);
		animation: pst-scrim-in 160ms ease-out;
	}

	.pst-search-sheet__panel {
		display: block;
		max-height: 100%;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--gutter) + env(safe-area-inset-right, 0px)) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--gutter) + env(safe-area-inset-left, 0px));
		border-top: 1px solid var(--wp--preset--color--line);
		background-color: var(--wp--preset--color--base);
		animation: pst-sheet-in 180ms cubic-bezier(0.32, 0.72, 0, 1);
	}

	.pst-search-sheet__search {
		min-width: 0;
	}

	.pst-search-sheet__close {
		display: inline-flex;
		align-items: center;
		flex: none;
		min-height: 44px;
		color: var(--wp--preset--color--action);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
	}

	:root[data-pst-search="open"] {
		overflow: hidden;
	}
}

@keyframes pst-scrim-in {
	from { background-color: rgba(14, 15, 18, 0); }
}

@keyframes pst-sheet-in {
	from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	html::view-transition-group(*),
	html::view-transition-old(*),
	html::view-transition-new(*) {
		animation: none;
	}

	.pst-mobile-bar,
	.pst-mobile-chrome .wp-block-pst-step-bar__dock,
	.pst-search-sheet[open],
	.pst-search-sheet:target,
	.pst-search-sheet__panel {
		animation: none;
		transition: none;
	}
}