/**
 * The Better Moving logo.
 *
 * The new mark is STACKED — "Better" above "Moving" — at an aspect of 1.707,
 * where the previous wordmark ran on one line at 4.117. That is a fundamental
 * layout change, not a swap: a stacked mark needs roughly twice the height to
 * read at the same size, so every height step here was recalculated rather
 * than carried across, and the header grew to accommodate it.
 */

.bm-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	line-height: 0;
	border-radius: var(--bm-radius-sm);
}

.bm-logo img {
	display: block;
	inline-size: auto;
	block-size: var(--bm-logo-height, 3.25rem);
	transition: opacity 160ms ease;
}

.bm-logo:hover img { opacity: 0.8; }

.bm-logo:focus-visible {
	outline: 2px solid var(--bm-border-focus);
	outline-offset: 6px;
}

/* Renditions are trimmed to the mark during asset prep, so these heights are
   the height the logo actually appears — not a box that is mostly empty. */
.bm-logo--sm { --bm-logo-height: 2.5rem; }
.bm-logo--md { --bm-logo-height: 3.25rem; }
.bm-logo--lg { --bm-logo-height: 4.25rem; }

@media (max-width: 30rem) {
	.bm-logo--md { --bm-logo-height: 2.6rem; }
}

/* --------------------------------------------------------------------------
 * The carton mark on its own
 *
 * Used where the full lockup will not fit or would be repetitive — beside a
 * section label, as a list bullet, in the footer. It is the most recognisable
 * part of the identity and survives being small far better than the wordmark.
 * ----------------------------------------------------------------------- */

.bm-mark {
	display: inline-block;
	inline-size: auto;
	block-size: var(--bm-mark-size, 1.5rem);
	vertical-align: middle;
}
.bm-mark--lg { --bm-mark-size: 2.5rem; }

/* --------------------------------------------------------------------------
 * Monogram fallback
 * ----------------------------------------------------------------------- */

.bm-monogram {
	display: inline-grid;
	place-items: center;
	inline-size: var(--bm-monogram-size, 2.5rem);
	block-size: var(--bm-monogram-size, 2.5rem);
	font-family: var(--bm-font-display);
	font-size: calc(var(--bm-monogram-size, 2.5rem) * 0.4);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--bm-action-text);
	background-color: var(--bm-action-bg);
	border-radius: var(--bm-radius-md);
}

/* ============================================================================
 * MOBILE ADAPTATION
 * ============================================================================
 * Inside `max-width: 79.99rem`, which cannot match at 1280px, so the desktop
 * lockup is untouched by arithmetic rather than by promise.
 * ========================================================================== */

@media (max-width: 79.99rem) {

	/* The logo is the first link on every page and, in the footer, one of the
	   last — the same control twice, on every template. Below 30rem the mark
	   steps down to 2.6rem, and the anchor is exactly the mark, so it measures
	   71x42 in the header and 280x42 in the footer: two pixels under the tap
	   floor in both places.

	   A floor on the box, not a taller mark. The anchor already centres its
	   image, so the artwork is unchanged and the 2.4px of hit area is split
	   above and below it. Nothing moves at any width where the mark is already
	   3.25rem — min-block-size only ever raises. */
	.bm-logo { min-block-size: var(--bm-tap-min); }
}

@media (max-width: 79.99rem) and (max-height: 30rem) {

	/* The header shrinks to 3.5rem on a landscape phone — see the matching
	   query in nav.css. A 3.25rem mark in a 3.5rem header leaves two pixels of
	   air above and below it and reads as jammed in, so it steps down to the
	   same 2.6rem the narrow breakpoint already uses. That also keeps the 44px
	   anchor above from being the tallest thing in the header. */
	.bm-logo--md { --bm-logo-height: 2.6rem; }
}