/**
 * WLRE Theme — Mobile Bottom Navigation.
 *
 * Figma: 6167-226925 (+ variants across every mobile screen).
 * Spec:
 *   - 5 tabs, full-width fixed at viewport bottom
 *   - 70px tall bar + safe-area inset for iOS home-indicator
 *   - Top corners rounded 12px, top shadow 0 -4px 7px -1px rgba(99,99,99,0.04)
 *   - Active tab = navy (#0A2438) + Lato Bold 700
 *   - Inactive tab = grey (#666) + Lato Regular 400
 *   - Icon 24×24, 4px gap to label, label 12px/1.48
 *   - Logged-in state swaps 5th tab icon from hamburger to initials avatar
 */

.wlre-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 201; /* above mobile menu (200) and its backdrop (199) */
	background: var(--wlre-color-white);
	border-top-left-radius: var(--wlre-radius-md);
	border-top-right-radius: var(--wlre-radius-md);
	box-shadow: 0 -4px 7px -1px rgba(99, 99, 99, 0.04);
	display: none; /* shown only on mobile via media query below */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.wlre-bottom-nav__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 70px;
}

.wlre-bottom-nav__item {
	flex: 1;
	min-width: 0;
}

.wlre-bottom-nav__item a,
.wlre-bottom-nav__item button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wlre-space-4);
	height: 100%;
	width: 100%;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-s);
	font-weight: 400;
	line-height: var(--wlre-line-height-body);
	color: var(--wlre-color-neutral-600);
	text-decoration: none;
	background: none;
	border: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	padding: var(--wlre-space-8) var(--wlre-space-4);
	transition: color 0.2s ease;
}


.wlre-bottom-nav__item a > span,
.wlre-bottom-nav__item button > span:not(.wlre-bottom-nav__avatar) {
	width: 66px;
	max-width: 100%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wlre-bottom-nav__item--active a,
.wlre-bottom-nav__item--active button {
	color: var(--wlre-color-brand-900);
	font-weight: 700;
}

.wlre-bottom-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wlre-space-24);
	height: var(--wlre-space-24);
	flex-shrink: 0;
}

.wlre-bottom-nav__icon svg {
	width: 100%;
	height: 100%;
}

/* Active icon carries the same navy colour as the label. */
.wlre-bottom-nav__item--active .wlre-bottom-nav__icon {
	color: var(--wlre-color-brand-900);
}

/* Logged-in 5th tab: initials avatar replaces hamburger icon. */
.wlre-bottom-nav__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wlre-space-24);
	height: var(--wlre-space-24);
	border-radius: 50%;
	background: var(--wlre-color-neutral-400);
	color: var(--wlre-color-neutral-600);
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-s);
	line-height: 1;
	flex-shrink: 0;
}

.wlre-bottom-nav__item--active .wlre-bottom-nav__avatar,
.wlre-bottom-nav__item [data-toggle="mobile-menu"][aria-expanded="true"] .wlre-bottom-nav__avatar {
	box-shadow: 0 0 0 3px var(--wlre-color-white), 0 0 0 4.5px var(--wlre-color-brand-900);
}

/* === Show on mobile === */
@media (max-width: 767px) {
	:root {
		--wlre-bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
		--wlre-bottom-nav-height: calc(70px + var(--wlre-bottom-nav-safe-area));
	}

	.wlre-bottom-nav {
		display: block;
		padding-bottom: var(--wlre-bottom-nav-safe-area);
	}

	body {
		/* 70px bar + iOS safe area; matches Figma bottombar + home-indicator. */
		padding-bottom: var(--wlre-bottom-nav-height);
	}
}