/**
 * Sticky Action Bar — front-end only (block.json `viewStyle`).
 *
 * These rules live with the block rather than in theme.json's styles.css for
 * one reason: `html { scroll-padding-block-end }` is a document-wide rule, and
 * shipping it on pages that have no bar makes every anchor jump on those pages
 * stop short for nothing. Declared here, WordPress enqueues the sheet only where
 * the block actually rendered.
 *
 * `viewStyle`, not `style`: in the editor canvas a position:fixed bar would
 * float over the post it belongs to. The editor gets the block's placeholder
 * preview instead.
 *
 * Every custom property carries a literal fallback because the plugin has to
 * survive activation under a theme that is not Quartier (Phase 1 exit gate).
 * The fallbacks are CSS system colors rather than hexes, so an unknown theme's
 * light/dark preference still decides — TOKENS.md's never-hex rule holds.
 */

:root {
	/*
	 * The single source for the bar's height. Both consumers below read THIS —
	 * the bar's own box and the scroll padding that keeps focus clear of it
	 * (WCAG 2.2 SC 2.4.11). Two hand-synced numbers drift and the failure is
	 * silent, which is why the safe-area inset is folded in here rather than
	 * added at each use site.
	 */
	--anps-sticky-bar-height: calc(
		var( --wp--custom--sticky-bar--height, 56px ) + env( safe-area-inset-bottom, 0px )
	);
}

.anps-sticky-bar {
	display: none;
}

@media ( max-width: 781px ) {
	.anps-sticky-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		/* Above a sticky header, below modals, notices and the admin bar. */
		z-index: 100;

		display: flex;
		align-items: center;
		gap: var( --wp--preset--spacing--20, 0.5rem );

		min-block-size: var( --anps-sticky-bar-height );
		/*
		 * Border-box everywhere in WP, so this inset lives inside the min-height
		 * above: content keeps the full token height and the bar occupies exactly
		 * --anps-sticky-bar-height. That exactness is what lets the scroll padding
		 * use the same value with no slack.
		 */
		padding-block-end: env( safe-area-inset-bottom, 0px );
		padding-inline: var( --wp--preset--spacing--30, 1rem );

		background-color: var( --wp--preset--color--base, Canvas );
		color: var( --wp--preset--color--contrast, CanvasText );
		border-block-start: 1px solid
			var( --wp--preset--color--border, color-mix( in srgb, currentColor 25%, transparent ) );
	}

	html {
		/* The measured value wins once view.js has a box to measure; the token is
		   the first-paint and no-JS answer. */
		scroll-padding-block-end: var( --anps-sticky-bar-measured, var( --anps-sticky-bar-height ) );
	}
}

/*
 * The server stamps `hidden` on before the store hydrates (B5 fact 3), and the
 * UA's own [hidden] rule loses to the display:flex above — same specificity,
 * author origin wins. Restating it here is what makes the no-flash initial
 * state actually work.
 */
.anps-sticky-bar[hidden] {
	display: none;
}

.anps-sticky-bar__action {
	display: flex;
	/* Icon over label, the way a phone's own tab bar does it — a row of three
	   equal outlined pills read as three equal choices, and one of them is the
	   conversion. */
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;

	/* Design brief §1.3, and WCAG 2.2 SC 2.5.8 with room to spare. A hard
	   constant, not a token: it is an ergonomic floor, not a design choice. */
	min-block-size: 48px;
	padding-inline: var( --wp--preset--spacing--20, 0.5rem );
	border-radius: var( --wp--custom--radius--control, 12px );

	color: inherit;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

/*
 * Emphasis is a per-demo decision (Aura and Vita emphasize Book, TorqueWorks
 * emphasizes Call), so it is expressed as a class the style variations can
 * re-point rather than as a block attribute. Book filled is only the default.
 */
.anps-sticky-bar__action--book,
.anps-sticky-bar__action--addtocart {
	/* Wider than the icon slots and the only filled thing in the bar: it carries
	   a word, not a glyph, and it is what the bar exists for. */
	flex-grow: 1.7;
	border-radius: var( --wp--custom--radius--pill, 999px );
	background-color: var( --wp--preset--color--cta, Highlight );
	color: var( --wp--preset--color--on-cta, HighlightText );
	font-weight: 600;
}

/* Add to cart carries a glyph AND a word AND the price, so it lays its three
   parts in a row rather than the icon-over-label stack of the quiet slots. */
.anps-sticky-bar__action--addtocart {
	flex-direction: row;
	gap: 0.5em;
}

.anps-sticky-bar__price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.anps-sticky-bar__icon {
	display: block;
	flex: none;
}

/* The icon slots are quiet: glyph, label, no chrome. */
.anps-sticky-bar__action--call,
.anps-sticky-bar__action--directions,
.anps-sticky-bar__action--cart {
	font-size: 0.75rem;
	color: var( --wp--preset--color--contrast, CanvasText );
}

.anps-sticky-bar__action:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* Three slots on a 320px screen leaves no room for a wrapped label, and a
   wrapped label would push the bar past the height the scroll padding assumes. */
.anps-sticky-bar__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.anps-sticky-bar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.5em;
	padding-inline: 0.35em;
	border-radius: var( --wp--custom--radius--pill, 999px );

	background-color: var( --wp--preset--color--accent, Highlight );
	color: var( --wp--preset--color--on-accent, HighlightText );
	font-size: var( --wp--preset--font-size--overline, 0.75rem );
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}