/* Instagram/Facebook-style bottom tab bar. Visible only on mobile-width
   viewports; markup is always rendered, so there is no device-detection JS. */

.srsst-bottom-nav {
	display: none;
}

@media (max-width: 782px) {
	body {
		/* leave room so page content never sits under the fixed bar */
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	.srsst-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		height: calc(56px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--wp--preset--color--temple-ivory, #fffaf0);
		border-top: 2px solid var(--wp--preset--color--temple-gold, #c9972a);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
	}

	.srsst-bottom-nav__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		text-decoration: none;
		color: var(--wp--preset--color--temple-ink, #2b1b0e);
		min-width: 44px;
		min-height: 44px;
	}

	.srsst-bottom-nav__icon {
		width: 24px;
		height: 24px;
	}

	.srsst-bottom-nav__label {
		font-size: 0.68rem;
		line-height: 1;
	}

	.srsst-bottom-nav__item.is-active,
	.srsst-bottom-nav__item:active {
		color: var(--wp--preset--color--temple-maroon, #6b1414);
	}

	.srsst-bottom-nav__item.is-active .srsst-bottom-nav__icon {
		color: var(--wp--preset--color--temple-maroon, #6b1414);
	}

	/* On mobile, the desktop header's left/right nav rows are replaced by
	   the bottom bar + a slim top bar (logo + language switch only). */
	.srsst-header__primary-nav {
		display: none;
	}
}