/*
 * InTouchDesign Companion Pro - the `shop` module: the bottom bar on phones (Home, Search, Cart,
 * Contact), printed by ITDCompanion_Shop_Mobile_Bar at the end of the page.
 *
 * Loaded with media="(max-width: 781px)" and wrapped in the same query, so it only ever applies on
 * a phone: at 781px and below WordPress's columns stack into one. The bar is printed with the
 * `hidden` attribute and this sheet is what shows it; without the sheet (or wider than 781px) the
 * browser keeps it hidden.
 *
 * Colours only from the theme's palette, var( --wp--preset--color--{slot} ), and its aliases
 * (--itd-border = line), like shop.css: no hex value, so a demo that recolours the palette
 * recolours the bar. Contrast: labels and icons in `muted` (the current one in `primary`) on
 * `base`, the theme's text pairs; the count's badge `base` on `primary`; focus ring the theme's
 * (2px `secondary`); the search field's border in `muted`. The bar's top line is `line`, a
 * decoration: each item is told by its label and its icon.
 *
 * Stacking: z-index 900, over the theme's sticky header (100) and its sub-menus (110), under the
 * "added to your cart" notice (1000, shop.css), the product gallery's lightbox (1500) and the
 * admin bar (99999).
 *
 * @package InTouchDesign_Companion
 */

@media ( max-width: 781px ) {

	:root {
		/* The bar's own height, without the phone's safe area (a package may read it). */
		--itd-mobile-bar-height: 3.75rem;
	}

	/* Room at the bottom, so the footer and the last lines are never under the bar; and a
	   focused or scrolled-to element stops above it. */
	body.itd-has-mobile-bar {
		padding-bottom: calc( var( --itd-mobile-bar-height ) + env( safe-area-inset-bottom, 0px ) );
	}

	html:has( body.itd-has-mobile-bar ) {
		scroll-padding-bottom: calc( var( --itd-mobile-bar-height ) + env( safe-area-inset-bottom, 0px ) );
	}

	.itd-mobile-bar {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		box-sizing: border-box;
		padding-bottom: env( safe-area-inset-bottom, 0px );
		background-color: var( --wp--preset--color--base );
		border-top: 1px solid var( --itd-border );
		box-shadow: 0 -8px 24px -16px color-mix( in srgb, var( --wp--preset--color--primary ) 35%, transparent );
		color: var( --wp--preset--color--muted );
		font-family: inherit;
	}

	.itd-mobile-bar__list {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.itd-mobile-bar__item {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}

	/* Links and the search button alike: the whole cell is the target (at least 44 x 44px; the
	   cells are 59px high and a quarter of 320px is 80px wide). */
	.itd-mobile-bar__link {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.1875rem;
		box-sizing: border-box;
		width: 100%;
		/* The bar is this plus its 1px top line: exactly --itd-mobile-bar-height. */
		min-height: calc( var( --itd-mobile-bar-height ) - 1px );
		margin: 0;
		padding: 0.375rem 0.25rem;
		border: 0;
		border-radius: 0;
		background: none;
		color: inherit;
		font: inherit;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.01em;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.itd-mobile-bar__link:hover,
	.itd-mobile-bar__link[aria-current="page"],
	.itd-mobile-bar__toggle[aria-expanded="true"] {
		color: var( --wp--preset--color--primary );
	}

	/* The current page: its colour, and a short rule over the icon. */
	.itd-mobile-bar__link[aria-current="page"]::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 1.75rem;
		height: 3px;
		margin-left: -0.875rem;
		border-radius: 0 0 3px 3px;
		background-color: var( --wp--preset--color--primary );
	}

	/* The theme's focus ring (main.css: 2px `secondary`), inside the cell so the screen edge and
	   the neighbours never clip it. */
	.itd-mobile-bar__link:focus {
		outline: none;
	}

	.itd-mobile-bar__link:focus-visible {
		outline: 2px solid var( --wp--preset--color--secondary );
		outline-offset: -4px;
		border-radius: 8px;
	}

	.itd-mobile-bar__icon {
		display: block;
		flex: none;
		width: 1.5rem;
		height: 1.5rem;
	}

	.itd-mobile-bar__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The cart count: a badge on the bag, and the Cart link's name in words for a screen reader
	   (the visible label is hidden from it). */
	.itd-mobile-bar__badge {
		position: absolute;
		top: 0.25rem;
		left: calc( 50% + 0.3125rem );
		box-sizing: border-box;
		min-width: 1.25rem;
		height: 1.25rem;
		padding: 0 0.3125rem;
		border: 2px solid var( --wp--preset--color--base );
		border-radius: 9999px;
		background-color: var( --wp--preset--color--primary );
		color: var( --wp--preset--color--base );
		font-size: 0.6875rem;
		font-weight: 700;
		line-height: 1rem;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}

	.itd-mobile-bar__sr,
	.itd-mobile-bar .screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	/* Search: a panel above the bar with WooCommerce's product search form. */
	.itd-mobile-bar__panel {
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		box-sizing: border-box;
		padding: var( --wp--preset--spacing--30, 1rem );
		background-color: var( --wp--preset--color--base );
		border-top: 1px solid var( --itd-border );
		box-shadow: 0 -12px 24px -16px color-mix( in srgb, var( --wp--preset--color--primary ) 35%, transparent );
	}

	.itd-mobile-bar__panel[hidden] {
		display: none;
	}

	.itd-mobile-bar__panel .woocommerce-product-search {
		display: flex;
		gap: 0.5rem;
		margin: 0;
	}

	.itd-mobile-bar__panel .search-field {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 2.75rem;
		box-sizing: border-box;
		margin: 0;
		padding: 0.625rem 1rem;
		border: 1px solid var( --wp--preset--color--muted );
		border-radius: 12px;
		background-color: var( --wp--preset--color--base );
		color: var( --wp--preset--color--contrast );
		/* 16px: iOS zooms the page into a smaller field. */
		font: inherit;
		font-size: 1rem;
	}

	.itd-mobile-bar__panel .search-field:focus {
		outline: 2px solid var( --wp--preset--color--secondary );
		outline-offset: 1px;
	}

	/* The theme's button (theme.json elements.button, class wp-element-button), as tall as the field. */
	.itd-mobile-bar__panel button[type="submit"] {
		flex: none;
		min-height: 2.75rem;
		margin: 0;
		padding: 0.5rem 1.25rem;
		font-size: 0.9375rem;
	}

	/* Without JavaScript the search button could not open its panel: it is left out. */
	@media ( scripting: none ) {
		.itd-mobile-bar__item--search {
			display: none;
		}
	}
}