/* ============================================
   tabbar.css | SitesHive™ Site
   Version: v1.2.0
   ============================================
   v1.1.0 MINOR — .tabbar__icon stops sizing an <svg> box and instead sets the icons.css --icon-size knob, because the markup is now a masked <span> (partials/tabbar-site.php v1.3.0).
   ============================================
   Mobile-only sticky bottom tab bar (Round 2 of mobile chrome).
   Hidden ≥992px. Hides when drawer is open (CSS via body class).

   Component-scoped vars (Rule #13 partial-pattern):
     --tabbar-shadow — upward-projecting variant of --shadow-m
       (theme-aware via the light-theme override below)

   Glass backdrop-filter consumes the Site-level --surface-glass-blur
   declared in base.css :root (shared with .header and .header__drawer).

   Breakpoint 991.98px literal mirrors tokens.css --bp-m (62rem at
   16-base); CSS custom properties cannot be used inside @media
   query expressions.
   ============================================ */

.tabbar {
	/* Upward-projecting variant of --shadow-m (which has +2px y-offset).
	   CSS can't flip a shadow's y-offset via calc, so the value is
	   declared inline per Rule #13 partial-pattern. Theme-aware override
	   for the light theme appears below the base rule. */
	--tabbar-shadow: 0 -2px 8px rgba(0, 0, 0, 0.50);

	display: none;  /* default: desktop hides tabbar */
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: var(--z-header);

	background-color: var(--color-surface-glass);
	-webkit-backdrop-filter: blur(var(--surface-glass-blur));
	backdrop-filter: blur(var(--surface-glass-blur));
	box-shadow: var(--tabbar-shadow);

	/* Safe-area inset for iPhone home indicator. Minimum is --space-2xs
	   (4px) so the item's own padding-block-end isn't double-stacked
	   with the wrapper's bottom padding on non-iOS — the previous
	   --space-s minimum made the tabbar visibly heavier than the
	   header. iPhone safe-area inset still expands the bar to clear
	   the home indicator. */
	padding-block-end: max(var(--space-2xs), env(safe-area-inset-bottom));

	transition: transform var(--transition-default);
}

/* Light-theme upward shadow override (matches --shadow-m-light alpha). */
html[data-theme="light"] .tabbar {
	--tabbar-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.tabbar__list {
	display: grid;
	/* Count-neutral by construction. The slot array is filterable
	   (siteshive_tabbar_slots), so an edition may legitimately return three slots
	   or five — and a hard-coded repeat(4, 1fr) silently left the surplus column
	   EMPTY rather than failing, which is the shape that ships unnoticed. The
	   partial emits the real count; 4 is the fallback for any consumer that does
	   not, so every existing install renders byte-identically. */
	grid-template-columns: repeat(var(--tabbar-slot-count, 4), 1fr);
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabbar__slot {
	display: flex;
}

.tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	inline-size: 100%;
	padding-block: var(--space-s);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-default);
}

.tabbar__item:hover,
.tabbar__item:focus-visible {
	color: var(--color-foreground);
}

.tabbar__item--active {
	color: var(--color-foreground);
}

/* Icon box. Drives the icons.css --icon-size KNOB rather than overriding
   inline/block-size, which is what that knob exists for — the renderer then
   sizes its own box and the mask follows.

   --icon-s, RESTORED. This briefly read --icon-xs: when the artwork was reframed
   every box began painting ~0.96 of itself instead of 0.8125, so a 20px box that
   had painted ~16px of glyph started painting 20px, and this bar was re-picked
   DOWN a rung to compensate. That was a per-surface fix for an estate-wide
   problem — the ladder itself was ~16% off, on every surface at once.

   tokens.css v3.14.0 re-valued the ladder by the measured factor 0.837, so
   --icon-s is now 17px and this bar paints ~16.0-16.8px: the size it had before
   the reframing. THE RE-PICK HAD TO BE UNDONE FIRST, or the two corrections
   would have stacked and the tabs would have landed ~16% too small.

   ⚠ Do not re-pick this rung to compensate for a framing change again. If every
   surface moves in the same direction by the same amount, the ladder is wrong,
   not the surface.

   The one reason from the old note that is still worth keeping: "20px is
   off-grid for a 256 viewBox" is VOID either way — zero of the 148 glyphs still
   carry a 256 viewBox, so no rung is integer-aligned and crispness cannot decide
   between them. */
.tabbar__icon {
	--icon-size: var(--icon-s);
}

.tabbar__label {
	font-size: var(--text-xs);
	line-height: 1;
}


/* ==============================
   Drawer interaction — hide tabbar when drawer is open
   ============================== */

body.is-drawer-open .tabbar {
	transform: translateY(100%);
}


/* ==============================
   Viewport switching
   ============================== */

@media (max-width: 991.98px) {
	.tabbar { display: block; }

	/* Clear the fixed tab bar at scroll bottom — body padding equal to
	   the tab bar's full height (including iOS safe-area inset) so the
	   last viewport of page content isn't hidden under the bar. Body
	   class .has-tabbar is added by the body_class filter when the bar
	   actually renders (see functions.php siteshive_is_tabbar_rendering()
	   — gates auth pages, opt-out constant, builder context). */
	body.has-tabbar {
		padding-block-end: calc(var(--space-5xl) + env(safe-area-inset-bottom));
	}
}

@media (min-width: 992px) {
	.tabbar { display: none !important; }
}


/* ==============================
   Reduced motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
	.tabbar,
	.tabbar__item {
		transition: none;
	}
}