/*
 * ggc-theme-action-bar (TH-U): the mobile action bar and body.has-action-bar. Loads on every
 * page; its script, js/action-bar.js, loads where the bar renders.
 * Registered and enqueued only by inc/assets.php (docs/contracts.md §5.3). Unlayered.
 *
 * Direction B's conditional Call/Request bar (direction-b/styles.css and home.html at 0e1d416):
 * Deep Green, fixed to the bottom of the screen below 48em, Call as the quiet control and Request
 * as the white one. It is the "Quick actions" nav (O11; blocks/action-bar/render.php). It is rendered
 * hidden, and the script shows it once the page's own request button has scrolled away; it never
 * shows from 48em or without JavaScript, and TH-B's print.css hides it in print.
 */

.action-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 20;
	margin: 0;
	padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
	background: var(--wp--preset--color--deep-green);
	color: var(--wp--preset--color--white);
}

/* The bar is rendered hidden, and a button without an address is hidden inside it. Core's button
   styles set display on .wp-block-button, which would beat the browser's own [hidden] rule. */
.action-bar[hidden],
.action-bar [hidden] {
	display: none !important;
}

/* Two equal controls side by side, or one across the bar when only one is left. */
.action-bar .wp-block-buttons {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
}

.action-bar .wp-block-button {
	margin: 0;
	min-width: 0;
}

/* Each label sits centred in its half of the bar, so the side padding shows only when text is
   large: at 320 px with 200% text, 0.25rem keeps "Call" whole and "Request" on two lines. */
.action-bar .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding-inline: 0.25rem;
	hyphens: auto;
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-green);
}

.action-bar .action-bar__call .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
}

.action-bar .wp-block-button__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.action-bar :focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

/* The Request button reads "Request"; its accessible name is "Request a walkthrough". */
.action-bar .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Phones only. */
@media (min-width: 48em) {
	.action-bar {
		display: none !important;
	}
}

/* The bar's space is always reserved on phones, so it never covers the last content and never
   shifts the layout when it appears: 0.5rem more than the bar's height, as the prototypes' 4.5rem
   is for their 4rem bar. The root element holds the viewport's scroll padding, 1rem more than the
   bar, so a focused control or a #fragment target scrolls clear of it.
   The bar's height is js/action-bar.js's measurement, --ggc-action-bar-height, because a label
   that wraps at large text makes the bar taller: at 320 px with 200% text Request takes two lines
   and the bar outgrows a fixed 4.5rem. Until the script has measured it, and without scripting,
   where the bar never shows, the one-line bar's 4rem stands in (3rem controls in 0.5rem of
   padding). This file is the reserve's only owner (docs/contracts.md §5.4). */
@media screen and (max-width: 47.99em) {
	body.has-action-bar {
		padding-bottom: calc(var(--ggc-action-bar-height, 4rem) + 0.5rem);
	}

	:root:has(> body.has-action-bar) {
		scroll-padding-bottom: calc(var(--ggc-action-bar-height, 4rem) + 1rem);
	}
}

/* Forced colours replace the Deep Green ground with the page's Canvas, so the bar keeps an edge
   above the content it covers. Its buttons keep their own 2 px borders (theme.json). */
@media (forced-colors: active) {
	.action-bar {
		border-top: 2px solid CanvasText;
	}
}