/**
 * Boss & Bubs Taxi — theme chrome (P9, D139).
 *
 * Owns the page shell, the container, the header, the drawer, the footer and
 * the 404 body (D41). Authored mobile-first: the base rules ARE the 390
 * layout; two min-width layers add 834 and 1280 (PRODUCT.md §6,
 * spec/11-REBUILD-BRIEF.md R8). Nothing is a desktop rule overridden downwards.
 *
 * No literal hex, font-size, border-radius or box-shadow: every such value is
 * a var(--...) from the plugin's tokens.css. Layout spacing is written
 * directly. Type does not rescale (D50). Every control a finger lands on
 * below 1280 is at least 44px (D127).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* 1.1.4: no blue flash box on tap (phones). Keyboard focus rings stay. */
	-webkit-tap-highlight-color: transparent;
	background: var(--base);
}

body {
	margin: 0;
	background: var(--base);
	color: var(--ink);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--harbour);
	text-decoration: none;
}

a:hover {
	color: var(--signal-deep);
}

:focus-visible,
input[type="date"]:focus-within,
input[type="time"]:focus-within {
	/* Native date/time inputs focus an inner segment and never match
	   :focus-visible themselves (P9 keyboard pass, D139). */
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/**
 * The page frame every template wraps its content in (`.bb-page-card`, not
 * the plugin's `.bb-card` - D48). `overflow: hidden` first as the fallback,
 * then `clip`, which crops without creating a scroll container; `hidden`
 * alone would silently break the booking page's sticky bar (D47,
 * 10-PITFALLS.md #9). Do not collapse this to one declaration.
 */
.bb-page-card {
	overflow: hidden;
	overflow: clip;
	/* P24 (D152): on a short page the footer ended above the bottom of the
	   window, leaving a band of page background beneath it. The frame is at
	   least the window's height (less the admin bar when it shows), and main
	   takes the room, so the footer sits at the bottom. Layout only: the
	   header, main and footer stack as before; the drawer and its backdrop are
	   fixed-position and unaffected. */
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
.bb-page-card > main {
	flex: 1 0 auto;
	min-width: 0;
}

/* The one gutter every page shares: 16 / 32 / 48. */
.bb-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}
/* 1.2.3 (client): a page whose shortcode sits in a paragraph block gets an
   empty paragraph above the page (and below it) from the browser, and its
   margin opened a gap under the header. The plugin's pages are whole
   sections, so a paragraph beside them adds no margin and an empty one or a
   line break is dropped. */
main > .bb-container > p {
	margin: 0;
}
main > .bb-container > p:empty,
main > .bb-container > br {
	display: none;
}

/* ===================================================================
 * HEADER — three variants (PAGES-FEATURES-RULES.md §0.1). Never sticky.
 * 390: logo and the drawer trigger (the booking header adds the phone icon
 * beside it; the minimal header has the phone icon or Contact us). 834: the
 * nav appears in the bar, with Book now or the phone's label and number.
 * P26 (D154): the booking header has the inner pages' nav at every width.
 * =================================================================== */

.bb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: var(--base);
	border-bottom: 1px solid var(--rule);
}

.bb-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	min-height: 44px;
	align-self: center;
	padding-top: 6px;
}
.bb-logo-mark {
	font-size: var(--t-24);
	font-weight: 800;
	color: var(--harbour);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
/* On the navy footer the navy wordmark would vanish (matches the design's
   white footer wordmark). */
.bb-logo-mark--on-dark {
	color: var(--on-navy);
}
/* P42 (D171): gold is never text on a light ground - the deep gold here
   (4.6:1 on --base); the plain gold on the navy footer (6.1:1). */
.bb-logo-amp {
	color: var(--signal-deep);
}
.bb-logo-mark--on-dark .bb-logo-amp {
	color: var(--signal);
}
.bb-logo-tag {
	font-size: var(--t-12);
	font-weight: 600;
	color: var(--signal-deep);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-left: 4px;
}
/* --ember is weak on navy; the design's footer uses the lighter tag colour. */
.bb-logo-tag--on-dark {
	color: var(--signal-soft);
}

/* P18 (D146): the operator's uploaded logo. Capped both ways, so an upload of
   any size or shape draws inside the header's 44px-tall logo slot and never
   pushes the nav or the Book now button off the line. */
.bb-logo--image {
	align-items: center;
	padding-top: 0;
}
.bb-logo-img {
	display: block;
	width: auto;
	height: auto;
	/* 1.1.3: larger, so the round badge logo reads properly. 1.2.3 (client):
	   larger again - as wide as the phone header leaves beside its two buttons. */
	max-width: min(240px, calc(100vw - 150px));
	max-height: 64px;
	object-fit: contain;
}
/* In the dark footer with no logo made for dark backgrounds: the regular logo
   on a light plate, so a dark logo never vanishes into the teal. */
.bb-logo--plate {
	padding: 6px 10px;
	border-radius: var(--r-sm);
	background: var(--paper);
}
/* Found reading the 1280 render: the plate sat flush on the description. */
.footer-brand-col .bb-logo--image {
	margin-bottom: 14px;
}

.bb-header-nav {
	display: none;
	align-items: center;
	gap: 28px;
}
.bb-header-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: var(--t-15);
	font-weight: 600;
	color: var(--harbour);
	/* P26: "Our cars" broke onto two lines in the booking header at 834. */
	white-space: nowrap;
}

.bb-header-phone {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	/* P18: from 834 the icon is 38px beside the number; the link stays a 44px target. */
	min-height: 44px;
}
.bb-header-phone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	background: var(--harbour);
	color: var(--paper);
}
/* At 390 the chip is the icon alone (the design's mobile header). The label
   and number stay in the DOM, clipped, so the link keeps its accessible
   name and the pending state is still announced. */
.bb-header-phone-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.bb-header-phone-label {
	font-size: var(--t-12);
	color: var(--muted);
	font-weight: 500;
}
.bb-header-phone-number {
	font-size: var(--t-16);
	font-weight: 700;
	color: var(--harbour);
}
/* Pending: a dashed icon and muted italic text - never a fabricated number,
   and never mistakable for a real one. */
.bb-header-phone.bb-pending .bb-header-phone-icon {
	background: var(--paper);
	border: 1px dashed var(--muted);
	color: var(--muted);
}
.bb-header-phone.bb-pending .bb-header-phone-number {
	color: var(--muted);
	font-style: italic;
}

/* P21 (D149): THE text link. Every text-style action and every link in running
   text wears one look - teal, bold, underlined - in every stylesheet that has
   one (theme.css, booking.css, content-pages.css, confirmation.css hold the
   same declarations; theme/bossandbubs/tests/text-link-test.php keeps them
   identical). Size follows the text around it. Navigation lists (the header
   nav, the drawer, the footer, the legal page pills) are not text links and
   stay without an underline; the closing band's phone keeps this look in its
   light on-teal colour. Before P21 there were seven looks: underlined or not,
   teal or grey, at weights 400, 600 and 700. */
.bb-header-contact-fallback {
	color: var(--harbour);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bb-header-contact-fallback:hover {
	color: var(--signal-deep);
}

.bb-header-contact-fallback {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--t-14);
}

.bb-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
/* The primary action, everywhere it appears outside the booking bar: Book now
   (header, drawer, closing band), a hero's first action, See my price, Send,
   Try paying again, the 404's Go to the homepage.
   P20 (D148): ONE primary look, the booking bar's Continue and Pay
   (booking.css .bb-btn--primary). P42 (D171): navy with white text (14.6:1),
   deepening to --harbour-deep on hover (17.3:1); it was coral with
   --on-signal text. Only the size differs by context - and on the navy
   closing band, where navy would vanish, it is the gold button
   (content-pages.css). The two rules are held identical by
   theme/bossandbubs/tests/primary-button-test.php. */
.bb-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	border: none;
	border-radius: var(--r-md);
	background: var(--harbour);
	color: var(--paper);
	box-shadow: var(--shadow-cta);
	font-family: var(--font);
	font-size: var(--t-14);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.bb-header-cta:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--harbour-deep);
	color: var(--paper);
}
/* Send and Try paying again are disabled while they work; they looked live. */
.bb-header-cta:disabled,
.bb-header-cta[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}
.bb-header-cta--desktop-tablet {
	display: none;
}

/* Drawer trigger: the inner and booking headers' menu at 390 (§0.1, P26). */
.bb-drawer-trigger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	border: 1.5px solid var(--hairline);
	background: var(--paper);
	cursor: pointer;
}
.bb-drawer-trigger-bar {
	display: block;
	height: 2px;
	margin: 0 9px;
	background: var(--harbour);
}

/* ===================================================================
 * DRAWER — the inner and booking headers at 390. Shown and hidden instantly through
 * [hidden]: there is no motion to reduce (§0.4).
 * =================================================================== */

.bb-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: var(--scrim);
	z-index: 40;
}
.bb-drawer-backdrop[hidden] {
	display: none;
}

.bb-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--paper);
	box-shadow: var(--shadow-pop);
	border-radius: var(--r-card) 0 0 var(--r-card);
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 50;
	overflow-y: auto;
}
.bb-drawer[hidden] {
	display: none;
}
.bb-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
/* 1.2.3: the drawer is narrower than the header, so its logo keeps the old size. */
.bb-drawer-head .bb-logo-img {
	max-width: 200px;
	max-height: 56px;
}
/* P21 (D149): THE close button - the same as the trip-details sheet's
   (booking.css .bb-sheet-close): a 44px round outline, a teal x at 24px in the
   site font. It was a deep coral x at 18px in the browser's default font.
   theme/bossandbubs/tests/text-link-test.php keeps the two identical. */
.bb-drawer-close {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--hairline);
	border-radius: var(--r-pill);
	background: var(--paper);
	color: var(--harbour);
	font-family: var(--font);
	font-size: var(--t-24);
	line-height: 1;
	cursor: pointer;
}
.bb-drawer-nav {
	display: flex;
	flex-direction: column;
}
.bb-drawer-nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: var(--t-16);
	font-weight: 700;
	color: var(--harbour);
}
.bb-drawer-cta {
	margin-top: auto;
	text-align: center;
	padding: 14px;
}

/* ===================================================================
 * FOOTER — one design, three sizes (§0.2). 390 shows the regrouped mobile
 * block (the permitted duplicate DOM); 834 the 3-column grid without the
 * brand column; 1280 all four columns. The utility classes below are the
 * whole responsive mechanism for which items survive at each width.
 * =================================================================== */

.bb-footer {
	background: var(--harbour);
	color: var(--on-navy);
	padding: 32px 0 24px;
	/* P43 (D172): a navy ring would vanish here - gold on navy. */
	--focus: var(--focus-on-dark);
}

.bb-footer-grid {
	display: none;
}

.bb-footer-desc {
	margin: 0 0 16px;
	font-size: var(--t-13);
	line-height: 1.6;
	color: var(--on-navy-muted);
	max-width: 280px;
}

/* The ABN box is the one placeholder the design draws; every other pending
   state matches it. Shared with BB_Taxi_Content_Placeholder on light pages
   (D109), so the base rule is light-safe and the footer overrides it. */
.bb-pending-box {
	display: inline-block;
	border: 1px dashed var(--hairline);
	border-radius: var(--r-sm);
	padding: 8px 12px;
}
.bb-footer .bb-pending-box {
	border-color: var(--on-navy-dash);
}
.bb-pending-box-text {
	font-size: var(--t-12);
}
.bb-abn-box-text {
	font-size: var(--t-12);
	color: var(--on-navy-faint);
}

.bb-footer-heading {
	margin: 0 0 8px;
	font-size: var(--t-12);
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* D106: --on-navy-faint passes on navy; --on-navy-label does not. */
	color: var(--on-navy-faint);
}

/* Each link is a 44px row below 1280, so a finger lands on one link. */
.bb-footer-links {
	display: flex;
	flex-direction: column;
}
.bb-footer-links a,
.bb-footer-links > .bb-pending,
.bb-footer-hours {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--t-14);
	color: var(--on-navy-link);
}

/* Pending, base: italic, coloured per context. Footer spans stay on navy. */
.bb-pending {
	font-style: italic;
	color: var(--muted);
}
.bb-footer-links .bb-pending,
.bb-footer-hours .bb-pending,
.bb-footer .bb-pending-box-text.bb-pending {
	color: var(--on-navy-faint);
}

.bb-footer-mobile-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bb-footer-mobile-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.bb-footer-bottom {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--on-navy-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	align-items: center;
}
.bb-footer-copy {
	font-size: var(--t-12);
	/* D106, as the footer heading. */
	color: var(--on-navy-faint);
}
.bb-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}
.bb-footer-legal a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: var(--t-12);
	color: var(--on-navy-muted);
}

/* The visibility utilities that decide which footer items survive at each
   width (§0.2). Scoped to the footer so they outrank the link rules above
   ('.bb-footer-links a' would otherwise re-show a hidden link - found in the
   P9 renders). */
.hide-mobile,
.hide-tablet-mobile,
.bb-footer .hide-mobile,
.bb-footer .hide-tablet-mobile {
	display: none;
}
.show-mobile-only,
.bb-footer .show-mobile-only {
	display: inline;
}

/* ===================================================================
 * 404 (§9) — one screen, identical at every width but for the gutter.
 * Minimal header, no footer, and no phone link unless a number is stored.
 * =================================================================== */

.bb-404 {
	max-width: 40rem;
	padding: 48px 0 64px;
}
.bb-404-eyebrow {
	margin: 0 0 8px;
	font-size: var(--t-13);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* D106: --ember, not --signal, for eyebrow text. */
	color: var(--signal-deep);
}
.bb-404-heading {
	margin: 0 0 16px;
	font-size: var(--t-34);
	line-height: 1.2;
	color: var(--harbour);
}
.bb-404-body {
	margin: 0 0 24px;
	font-size: var(--t-15);
	line-height: 1.6;
	color: var(--slate);
}
.bb-404-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
/* P21 (D149): the 404's Call is the outlined secondary button every page hero's
   Call wears (content-pages.css .bb-page-btn-secondary, which the 404 does not
   load). It was a bare text link. Held identical by text-link-test.php. */
.bb-404-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1.5px solid var(--harbour);
	border-radius: var(--r-md);
	background: var(--harbour-tint);
	color: var(--harbour);
	font-family: var(--font);
	font-size: var(--t-14);
	font-weight: 700;
	text-decoration: none;
}

/* ===================================================================
 * 834 - TABLET
 * =================================================================== */

@media (min-width: 834px) {
	.bb-container {
		padding: 0 32px;
	}

	.bb-header {
		gap: 24px;
		padding: 20px 32px;
	}
	.bb-logo-img {
		max-width: 270px;
		max-height: 76px;
	}
	.bb-header-nav--desktop-tablet {
		display: flex;
	}
	.bb-header-cta--desktop-tablet {
		display: inline-flex;
	}
	.bb-drawer-trigger {
		display: none;
	}

	.bb-header-phone-icon {
		width: 38px;
		height: 38px;
	}
	.bb-header-phone-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		display: flex;
		flex-direction: column;
	}
	/* P26 (D154): the booking header carries the nav from 834 as well as the
	   phone, and there is not room for both the nav and the phone's label and
	   number (measured: the pending text ran 2px past the edge and "Our cars"
	   wrapped). At 834 its phone is the icon, as at 390 - the label and number
	   stay in the DOM, clipped, so the link keeps its accessible name - and
	   they show from 1280. */
	.bb-header--booking .bb-header-phone-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bb-footer {
		padding: 48px 0 28px;
	}
	.bb-footer-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
	.footer-brand-col {
		display: none;
	}
	.bb-footer-mobile-row {
		display: none;
	}
	.bb-footer-bottom {
		margin-top: 32px;
		padding-top: 20px;
	}

	.hide-mobile,
	.bb-footer .hide-mobile {
		display: flex;
	}
	.bb-footer .bb-footer-copy.hide-mobile {
		display: inline;
	}
	.show-mobile-only,
	.bb-footer .show-mobile-only {
		display: none;
	}
}

/* ===================================================================
 * 1280 - DESKTOP
 * =================================================================== */

/* 1.2.3: Book now stays on one line beside the larger logo. */
.bb-header .bb-header-cta {
	white-space: nowrap;
}

/* 1.2.3 (client): the logo at full size once the bar has the room. */
@media (min-width: 1024px) {
	.bb-logo-img {
		max-width: 320px;
		max-height: 88px;
	}
}

@media (min-width: 1280px) {
	.bb-container {
		padding: 0 48px;
	}

	.bb-header {
		padding: 20px 48px;
	}
	.bb-header--booking .bb-header-phone-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		display: flex;
		flex-direction: column;
	}
	.bb-footer {
		padding: 56px 0 28px;
	}
	.bb-footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		gap: 40px;
	}
	.footer-brand-col {
		display: block;
	}
	.bb-footer-heading {
		margin-bottom: 12px;
	}
	.bb-footer-bottom {
		margin-top: 40px;
		padding-top: 24px;
	}

	.hide-tablet-mobile,
	.bb-footer .hide-tablet-mobile {
		display: flex;
	}
}

/* ===================================================================
 * P42 (D171) - THE FLOATING WHATSAPP AND CALL BUTTONS
 * (template-parts/footer/footer.php, bbtheme_render_fab()). The same at
 * every width: two round 56px buttons, stacked, 16px in from the bottom
 * right and above the phone's home indicator. Above the page (the address
 * suggestions are 30) and below the drawer (40, 50), the WordPress admin
 * bar and the booking sheet, a native dialog in the top layer.
 * =================================================================== */

.bb-fab {
	position: fixed;
	left: 16px; /* 1.1.2: bottom-left */
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 35;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* 1.1.1: tucked away while it would cover the booking card or a form. */
.bb-fab.is-tucked {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.bb-fab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--r-pill);
	color: var(--paper);
	box-shadow: var(--shadow-pop);
	text-decoration: none;
}
.bb-fab-btn:hover {
	color: var(--paper);
}
.bb-fab-btn--whatsapp {
	background: var(--whatsapp);
}
.bb-fab-btn--call {
	background: var(--harbour);
}
/* 1.2.0: a white edge, so the navy Call button still shows over the navy footer. */
.bb-fab-btn {
	border: 2px solid var(--paper);
}
.bb-fab-btn svg {
	display: block;
	width: 28px;
	height: 28px;
}
.bb-fab-icon {
	display: inline-flex;
}
/* Navy ring, clear of the button: 13.4:1 on --base. */
.bb-fab-btn:focus-visible {
	outline: 3px solid var(--harbour);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
	.bb-fab {
		transition: opacity 150ms ease-out, visibility 150ms ease-out;
	}
	.bb-fab-btn {
		transition: transform 150ms ease-out;
	}
	.bb-fab-btn:hover {
		transform: translateY(-2px);
	}
}

/* The foot of the page is padded by the stack's height plus its insets, so
   the end of the page (the footer's last line) can always scroll clear of
   the buttons. On the footer, not on body: body padding would open a band
   of page background under the navy footer (P24, D152). */
.bbtheme-has-fab {
	--bb-fab-stack: 56px;
}
.bbtheme-has-fab--two {
	--bb-fab-stack: 124px;
}
/* 1.2.1: the buttons tuck away once the footer (which has the same phone
   and WhatsApp links) scrolls in, so the footer needs no extra padding. */
.bbtheme-has-fab .bb-footer {
	padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ===================================================================
 * 1.1.5 (client): THE FOOTER, ONE LAYOUT AT EVERY WIDTH - the brand with
 * "Proudly backed by Famous Cabs", then Services and Company side by side,
 * then Get in touch. Four columns from 834. Overrides the older per-width
 * footer rules above.
 * =================================================================== */
.bb-footer .bb-footer-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}
.bb-footer .footer-brand-col,
.bb-footer .bb-footer-contact-col {
	display: block;
	grid-column: 1 / -1;
}
.bb-footer-backed {
	margin: 0 0 16px;
	font-size: var(--t-14);
	color: var(--on-navy-body);
}
.bb-footer-backed strong {
	color: var(--signal);
	font-weight: 800;
}
@media (min-width: 834px) {
	.bb-footer .bb-footer-grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 32px;
	}
	.bb-footer .footer-brand-col,
	.bb-footer .bb-footer-contact-col {
		grid-column: auto;
	}
}

/* 1.2.2: skip link - off screen until it receives keyboard focus. */
.bb-skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--harbour);
	color: var(--paper);
	font-weight: 700;
	border-radius: var(--r-pill);
	text-decoration: none;
}
.bb-skip-link:focus {
	top: 8px;
}
#main:focus {
	outline: none;
}
/* 1.2.2: search and archive lists. */
.bb-entry {
	padding: 24px 0;
}
.bb-entry-title {
	margin: 0 0 8px;
}