/**
 * Bottom nav (parts/bottom-nav.html) — mobile-only persistent tab bar
 * (Home / Shop / Deals / Cart / Account) replacing the old header hamburger
 * + duplicated mobile account link. Two of its five buttons are the same
 * hooks the header used to own outright — .zozia-nav-toggle (opens
 * #zozia-category-bar, see assets/js/header.js) and .zozia-my-bag (opens
 * #zozia-cart-drawer, see assets/js/cart-drawer.js) — so this file only
 * resets their old header-specific look rather than redefining behaviour.
 *
 * Hidden entirely above 860px, the same breakpoint the header's own mobile
 * layout switches on: desktop already has the category bar and header
 * actions inline, so a second nav would be redundant there.
 */
.zozia-bottom-nav {
	display: none;
	/* Core ships `:where(.wp-block-group.has-background) { padding: 1.25em
	   2.375em; }` (wp-includes/blocks/group/theme.css) for any group block
	   with a background color set — this block has one (has-white-background-
	   color). Its `:where()` wrapper is zero-specificity, so this plain class
	   selector overrides it, but without this the extra ~20px top/bottom
	   padding stacks on top of the 60px-tall .zozia-bottom-nav__link tabs,
	   inflating the bar and pushing its icons down instead of centering them. */
	padding: 0;
}

/* Reserved even above the breakpoint so nothing jumps if the viewport is
   resized across it — collapses to 0 automatically once the bar itself is
   display:none. */
body.zozia-has-bottom-nav {
	padding-bottom: 0;
}

@media (max-width: 860px) {
	.zozia-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		align-items: stretch;
		justify-content: space-between;
		border-top: 1px solid var(--wp--preset--color--border-light);
		box-shadow: 0 -4px 16px rgba(36, 16, 25, 0.08);
		/* iOS home-indicator safe area — without this the row sits flush
		   under the gesture bar on notched devices. */
		padding-bottom: env(safe-area-inset-bottom);
		transition: transform 0.25s ease;
	}

	/* Reserves room at the bottom of the page so the fixed bar never covers
	   the last bit of content (e.g. the footer's last links). Applied via a
	   body class (see zozia_beauty_body_class() in functions.php) rather
	   than unconditionally, so pages that don't render this template part
	   — currently just checkout, kept distraction-free on purpose — don't
	   carry dead space at the bottom. */
	body.zozia-has-bottom-nav {
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	/* Scroll-direction hide (assets/js/bottom-nav.js) and the single-product
	   sticky-add-to-cart handoff (assets/js/sticky-add-to-cart.js) both just
	   slide the bar out of the way — kept as separate classes since the two
	   scripts have no reason to know about each other. */
	.zozia-bottom-nav.is-hidden,
	.zozia-bottom-nav.zozia-bottom-nav--yield {
		transform: translateY(100%);
	}
}

/* Shared layout for all five tabs. */
.zozia-bottom-nav__link {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	height: 60px;
	border: none;
	margin: 0;
	background: none;
	padding: 6px 4px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	position: relative;
	/* Home/Deals/Account are <a> tags (content-box by default); Shop/Cart
	   are <button> tags (border-box by default in browsers' UA styles).
	   Without pinning this explicitly, the two groups compute a different
	   total height from the same `height: 60px` — the height + this rule's
	   own padding for the <a>s, just the height for the <button>s — which
	   left the button tabs' centered icon+label sitting visibly higher. */
	box-sizing: border-box;
}

.zozia-bottom-nav__link:hover,
.zozia-bottom-nav__link:focus-visible,
.zozia-bottom-nav__link.is-active {
	color: var(--wp--preset--color--primary);
}

.zozia-bottom-nav__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Reset the header's pill-button look on the Shop tab's .zozia-nav-toggle —
   here it's just one of five plain tabs. assets/js/header.js only ever
   toggles the .is-active class; the open/close icon swap itself is CSS,
   defined here rather than the header (there's no pill button left there
   to own it). */
.zozia-bottom-nav .zozia-nav-toggle {
	display: flex;
	flex-direction: column;
	height: 60px;
	min-width: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	padding: 6px 4px;
}

.zozia-bottom-nav .zozia-nav-toggle.is-active {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

.zozia-bottom-nav .zozia-nav-toggle__label {
	display: none;
}

.zozia-bottom-nav .zozia-nav-toggle__icon-close {
	display: none;
}

.zozia-bottom-nav .zozia-nav-toggle.is-active .zozia-nav-toggle__icon-open {
	display: none;
}

.zozia-bottom-nav .zozia-nav-toggle.is-active .zozia-nav-toggle__icon-close {
	display: block;
}

/* Reset the header's row layout on the Cart tab's .zozia-my-bag — here it's
   icon-over-label like the other four tabs, not an inline pill. */
.zozia-bottom-nav .zozia-my-bag {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-radius: 0;
	background: none;
	padding: 6px 4px;
}

.zozia-bottom-nav__icon-wrap {
	position: relative;
	display: inline-flex;
}

.zozia-bottom-nav__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}

.zozia-bottom-nav__badge[hidden] {
	display: none;
}