/* =========================================================================
   mobile-bar.css — the phone bottom bar.

   PHONES ONLY, AND IT TAKES AN EXPLICIT `display: none` TO SAY SO.

   An earlier version of this file put every rule inside one
   `max-width: 47.9375em` block and argued that outside it the bar "has no rules
   at all", so there was nothing to hide. That was simply wrong, and it shipped:
   NO RULES MEANS BROWSER DEFAULTS, NOT INVISIBLE. A <nav> holding a <ul> of
   five links renders perfectly happily with no CSS — and that is exactly what
   every desktop visitor got, a bare bulleted list of underlined links dumped
   under the footer of every page on the site.

   So the base rule below hides it, unconditionally, and the media query turns
   it back on. The order matters: hidden is the default state and phone-sized is
   the exception, which is the opposite of how the rest of this theme is written
   and correct here, because this component exists only on phones.

   THE HEIGHT IS A TOKEN, NOT A NUMBER. --bedi-bottombar-h is declared in
   base.css at 0px and set to its real value here. Three other things need to sit
   clear of this bar — the product page's buy bar, the consultation dock and the
   toast layer — and each reads the token. Changing the bar's height is one edit
   in one place and everything above it moves with it.
   ========================================================================= */

/*
 * THE LOAD-BEARING LINE IN THIS FILE.
 *
 * Outside the phone breakpoint the bottom bar does not exist as far as the page
 * is concerned. Not transparent, not off-screen, not zero-height — gone, taking
 * no space and no place in the tab order, because a desktop visitor tabbing
 * through the footer should not land on five navigation links they cannot see.
 */
.bedi-bottombar {
	display: none;
}

@media (max-width: 47.9375em) {

	:root {
		/*
		 * 56px is the thumb-reach figure: a 44px minimum target plus the label
		 * under it, which is what makes the difference between five icons a
		 * visitor has to decode and five destinations they can read.
		 */
		--bedi-bottombar-h: 56px;

		/*
		 * The consultation dock floats above BOTH bars rather than behind them.
		 *
		 * Without the first term it lands on the რჩეულები tab. Without the second
		 * it lands on the add-to-cart button of the product page's buy bar, which
		 * is the one control on that page that must never be obstructed —
		 * --bedi-buybar-h is 0px until that bar is actually up, so the dock only
		 * moves on the page and at the moment it has to.
		 *
		 * NO env() TERM HERE. dock.css already adds the safe-area inset to
		 * whatever this token says; including it again would push the dock up by
		 * a second home-indicator's worth on exactly the phones that have one.
		 */
		--bedi-dock-offset: calc(var(--bedi-bottombar-h) + var(--bedi-buybar-h, 0px) + var(--bedi-space-3));
	}

	/*
	 * THE PAGE HAS TO END ABOVE THE BAR.
	 *
	 * The bar is fixed, so it takes no space in flow and the last of the footer
	 * scrolls underneath it — on a shop that is the copyright line and the
	 * payment strip, which is exactly the kind of thing nobody notices is
	 * missing. The padding goes on the site wrapper rather than on body so the
	 * footer's own background still reaches the bottom of the viewport.
	 */
	.bedi-site {
		padding-block-end: calc(var(--bedi-bottombar-h) + env(safe-area-inset-bottom, 0px));
	}

	.bedi-bottombar {
		background-color: var(--bedi-surface);
		/* Undoing the base `display: none` above. Without this the media query
		   styles a box that is still not being laid out. */
		display: block;
		/*
		 * A hairline, not a shadow. The bar sits at the bottom of a scrolling
		 * page and a shadow there reads as a second, softer edge below the real
		 * one — two lines where the design has one.
		 */
		border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
		inset-block-end: 0;
		inset-inline: 0;
		/* The safe-area inset is mandatory or the tabs sit under the iOS home
		   indicator, where a swipe dismisses the app instead of pressing them. */
		padding-block-end: env(safe-area-inset-bottom, 0px);
		position: fixed;
		z-index: var(--bedi-z-bottombar, 90);
	}

	.bedi-bottombar__list {
		align-items: stretch;
		display: grid;
		/*
		 * Equal columns, from the count rather than a hardcoded 5. Two of the
		 * five tabs are conditional — the wishlist needs a URL from a filter and
		 * the profile needs the WooCommerce account page — so a shop with
		 * neither renders three tabs and they still fill the bar.
		 */
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		list-style: none;
		margin: 0;
		min-block-size: var(--bedi-bottombar-h);
		padding: 0;
	}

	.bedi-bottombar__item {
		display: flex;
		margin: 0;
		min-inline-size: 0;
	}

	.bedi-bottombar__tab {
		align-items: center;
		-webkit-appearance: none;
		appearance: none;
		background: none;
		border: 0;
		color: var(--bedi-ink-muted);
		cursor: pointer;
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		font-family: var(--bedi-font-body);
		font-size: var(--bedi-text-xs);
		font-weight: 500;
		gap: 3px;
		justify-content: center;
		line-height: 1;
		min-inline-size: 0;
		/*
		 * No horizontal padding. The tabs are a fifth of a 375px screen each and
		 * the longest label needs every pixel of that 75px — the 2px a side this
		 * used to have was the difference between კატეგორიები fitting and
		 * კატეგორ… . The gutter between tabs comes from the labels being shorter
		 * than their column, which is the honest place for it.
		 */
		padding: var(--bedi-space-1) 0;
		position: relative;
		text-decoration: none;
		/*
		 * Colour only, and fast. A tab is pressed and left behind in the same
		 * gesture; anything slower than the micro duration is still animating
		 * when the next page paints.
		 */
		transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
	}

	/*
	 * PRESSED, NOT HOVERED. There is no hover on a phone, and :hover on a touch
	 * device sticks after the tap — the tab a visitor last pressed stays lit
	 * while they read the page they navigated to.
	 */
	.bedi-bottombar__tab:active .bedi-bottombar__icon {
		transform: scale(0.88);
	}

	.bedi-bottombar__tab:focus-visible {
		border-radius: var(--bedi-radius-sm);
		outline: var(--bedi-focus-width) solid var(--bedi-accent);
		outline-offset: -3px;
	}

	.bedi-bottombar__icon {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		position: relative;
		transition: transform var(--bedi-dur-micro) var(--bedi-ease-out);
	}

	.bedi-bottombar__label {
		/*
		 * 10px, NOT THE --bedi-text-xs THE REST OF THE THEME WOULD USE.
		 *
		 * This is the one deliberate departure from the type scale in this file,
		 * and it is measured rather than eyeballed. კატეგორიები is eleven
		 * Georgian characters and has 75px to live in: 85px at 12px, 78 at 11,
		 * 70.8 at 10. Anything above 10px is an ellipsis on the site's primary
		 * navigation, and truncated navigation reads as a broken page rather
		 * than as a tight one.
		 *
		 * 10px is also what every native tab bar uses for exactly this reason,
		 * so it is the convention here and not a compromise.
		 */
		font-size: 10px;
		/*
		 * The ellipsis stays as a backstop. Nothing needs it at 10px today; it
		 * is here so a sixth tab, a longer word or a different font metric
		 * degrades to a clip rather than to a second line — which would make one
		 * tab taller than its neighbours and shunt its icon up.
		 */
		max-inline-size: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* ---------------------------------------------------------------------
	   Active
	   ------------------------------------------------------------------ */

	.bedi-bottombar__tab.is-active {
		color: var(--bedi-accent-strong);
	}

	/*
	 * The indicator is a 2px bar sitting ON the top rule, not above or below it,
	 * so the two read as one line that changes colour under the current tab.
	 * ::after on the tab rather than a real element: it is decoration, and a span
	 * in the markup for it would be a span every screen reader has to skip.
	 */
	.bedi-bottombar__tab.is-active::after {
		background-color: var(--bedi-accent-strong);
		block-size: 2px;
		border-end-end-radius: 3px;
		border-end-start-radius: 3px;
		content: "";
		inline-size: 26px;
		inset-block-start: calc(var(--bedi-border-width) * -1);
		inset-inline-start: 50%;
		position: absolute;
		transform: translateX(-50%);
	}

	/* ---------------------------------------------------------------------
	   The wishlist count
	   ------------------------------------------------------------------ */

	.bedi-bottombar__count {
		background-color: var(--bedi-accent);
		block-size: 16px;
		border: 2px solid var(--bedi-surface);
		border-radius: var(--bedi-radius-pill);
		color: #fff;
		font-size: 10px;
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		inline-size: auto;
		inset-block-start: -5px;
		inset-inline-start: 11px;
		line-height: 12px;
		min-inline-size: 16px;
		padding-inline: 3px;
		position: absolute;
		text-align: center;
	}

	/*
	 * data-empty is the same attribute the header's two badges use, so all three
	 * disappear at zero by the same contract and wishlist.js does not have to
	 * know which of them it is writing to.
	 */
	.bedi-bottombar__count[data-empty="true"] {
		display: none;
	}

	/* ---------------------------------------------------------------------
	   Out of the way when something is over the page
	   ------------------------------------------------------------------ */

	/*
	 * THE BAR DROPS OUT WHILE ANYTHING IS OVER THE PAGE.
	 *
	 * .bedi-scroll-locked on <html> is the theme's existing shared protocol —
	 * header.js, nav.js and search.js all raise it through one reference-counted
	 * helper, so the category panel, the mega-search and the cart drawer are all
	 * covered by this single selector and a fourth overlay written next year is
	 * covered by it too.
	 *
	 * It has to drop out, not merely sit below: all three are full-height
	 * overlays whose own bottom edge is the viewport, so a 56px bar floating on
	 * top would put five navigation tabs over a keyboard and a list of search
	 * results.
	 *
	 * translateY rather than display: none so it comes back by sliding, and
	 * visibility so it leaves the tab order while it is gone.
	 */
	.bedi-scroll-locked .bedi-bottombar {
		opacity: 0;
		pointer-events: none;
		transform: translateY(100%);
		visibility: hidden;
	}

	.bedi-bottombar {
		transition:
			opacity var(--bedi-dur) var(--bedi-ease-out),
			transform var(--bedi-dur) var(--bedi-ease-out),
			visibility var(--bedi-dur) var(--bedi-ease-out);
	}

	/*
	 * The dock GLIDES out of the buy bar's way rather than teleporting.
	 *
	 * --bedi-buybar-h goes from 0 to ~68px the instant the buy bar is revealed,
	 * and an untransitioned dock jumps 68px in one frame while the bar it is
	 * making room for is still sliding up. Matching --bedi-dur to the buy bar's
	 * own reveal makes the two read as one movement.
	 */
	/*
	 * (0,2,0), because dock.css sets `transition` on `.bedi-dock.is-ready` —
	 * also (0,2,0) — and dock.css is enqueued first. A bare `.bedi-dock` here
	 * at (0,1,0) lost outright, so the dock teleported 69px the instant the buy
	 * bar appeared instead of gliding out of its way. Matching the class count
	 * and relying on source order is enough: both files are this theme's, both
	 * are enqueued from Assets::enqueue(), and mobile-bar is unconditionally
	 * after dock there.
	 */
	.bedi-dock.is-ready,
	.bedi-dock {
		transition: inset-block-end var(--bedi-dur) var(--bedi-ease-out);
	}
}

@media (max-width: 47.9375em) and (prefers-reduced-motion: reduce) {
	.bedi-bottombar,
	.bedi-bottombar__icon {
		transition: none;
	}

	.bedi-bottombar__tab:active .bedi-bottombar__icon {
		transform: none;
	}
}