/**
 * Brisbane Car Inspection - project styles.
 *
 * The only stylesheet in this theme that is not inherited from Base Theme.
 * Everything here is specific to this site, so master's files stay identical
 * and an upstream fix can still be copied in file-for-file.
 *
 * Tokens only: no literal colours, sizes or spacing values.
 */

/* ---------------------------------------------------------------------------
 * FAQ - two column layout
 *
 * The heading column holds its position while the questions scroll past it.
 * Sticky only where there is room for it; on a narrow screen the columns
 * stack and sticky would pin the heading over the answers.
 * ------------------------------------------------------------------------ */

@media (min-width: 782px) {
	.bci-faq__aside {
		position: sticky;
		top: var(--wp--preset--spacing--xxl);
	}
}

/*
 * Accordion.
 *
 * Selectors are one class deeper than the equivalents in
 * assets/css/blocks/details.css so they win regardless of the order the two
 * stylesheets happen to load in - block styles are enqueued separately from
 * this file and the order is not guaranteed.
 */

.bci-faq .wp-block-details {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
	position: relative;
}

/*
 * The open marker: a rule down the leading edge that wipes into place. It is
 * decorative - the disclosure triangle replacement in details.css is what
 * actually communicates state, and that is not colour-dependent.
 */
.bci-faq .wp-block-details::before {
	background-color: var(--wp--preset--color--primary);
	content: "";
	inset-block: 0;
	inset-inline-start: 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
	width: 3px;
}

.bci-faq .wp-block-details:hover {
	border-color: var(--wp--preset--color--border-strong);
}

.bci-faq .wp-block-details[open] {
	background-color: var(--wp--preset--color--primary-soft);
	border-color: var(--wp--preset--color--primary);
}

.bci-faq .wp-block-details[open]::before {
	transform: scaleY(1);
}

/*
 * The page runs on three text sizes below the headings: 20px for anything that
 * titles something or introduces a section, 15px for body copy, 13px for
 * eyebrows. The FAQ was the one section that did not obey it - its questions
 * and answers both sat at the 17px default - so it read as though it had been
 * built separately from the rest of the page. It had.
 */
.bci-faq .wp-block-details > summary {
	font-size: var(--wp--preset--font-size--md);
}

.bci-faq .wp-block-details p {
	font-size: var(--wp--preset--font-size--sm);
}

.bci-faq .wp-block-details[open] > summary {
	color: var(--wp--preset--color--primary-dark);
}

@media (prefers-reduced-motion: reduce) {
	.bci-faq .wp-block-details::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Root bands sit flush
 *
 * theme.json sets a root blockGap of --spacing-lg, and WordPress applies it as
 * margin-block-start between the children of .wp-site-blocks - the header,
 * <main> and the footer. Every band on this site carries its own padding and a
 * full-bleed background, so that gap renders as a bare strip of page background
 * between the header and the hero, and again above the dark footer.
 *
 * Zeroing it here rather than setting blockGap to 0 in theme.json keeps the gap
 * working everywhere else it is wanted - between blocks inside a section.
 *
 * WordPress emits its rule inside :where(), which has no specificity, so a
 * single class beats it.
 * ------------------------------------------------------------------------ */

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * The same root gap falls between the full-bleed sections of a page built from
 * the section patterns, where it shows as a strip of page background between
 * two bands that are meant to meet.
 */
.base-section + .base-section {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive header
 *
 * Three separate problems, all visible at phone width:
 *
 * 1. blocks/button.css stacks buttons to full width below 420px so a row of
 *    content CTAs does not overflow. That rule matches every wp-block-buttons
 *    on the page, including the one in the header, which turns the header CTA
 *    into a tall block with its label wrapped over several lines.
 * 2. header.css hides the header CTA below 600px on the grounds that the same
 *    action sits in the navigation overlay. For a business whose entire funnel
 *    is that one booking button, it should stay on screen.
 * 3. The logo is set to 220px in the template, which is right on a desktop and
 *    too wide to sit beside a button and a hamburger on a phone.
 *
 * Selectors here are one class deeper than the rules they override, so they win
 * regardless of the order the block stylesheets happen to load in.
 * ------------------------------------------------------------------------ */

/*
 * The logo scales with the space available instead of forcing overflow.
 *
 * The width is a variable because the mobile menu paints the same logo in its
 * own band at the same width, so the two can never drift apart and opening the
 * menu does not appear to resize the mark.
 */
.base-header {
	--bci-brand-width: 220px;
}

.base-header__brand {
	max-width: var(--bci-brand-width);
}

.base-header__brand .wp-block-site-logo,
.base-header__brand .wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

/* The header CTA is a single action - it never stacks and never wraps. */
.base-header .base-header__cta.wp-block-buttons > .wp-block-button {
	width: auto;
}

.base-header .base-header__cta .wp-block-button__link {
	display: inline-block;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.base-header {
		--bci-brand-width: 200px;
	}

	/*
	 * Booking button first, hamburger hard against the right edge - the order
	 * CarAssure uses, so the two sites feel like one family.
	 *
	 * Done with `order` rather than by moving the blocks in parts/header.html,
	 * because above this breakpoint the same two children sit either side of
	 * the full desktop menu: swapping them in the markup would drop the nav
	 * links to the right of the button on every large screen. The trade is that
	 * a keyboard on a narrow screen still reaches the hamburger before the
	 * button - two adjacent controls out of visual order, which is the smaller
	 * cost of the two.
	 */
	.base-header .base-header__actions > .base-header__cta {
		order: 1;
	}

	.base-header .base-header__actions > .wp-block-navigation {
		order: 2;
	}
}

@media (max-width: 599px) {
	/* Keep the booking button on screen at phone width. */
	.base-header .base-header__cta {
		display: flex;
	}

	.base-header {
		--bci-brand-width: 170px;
	}

	.base-header .base-header__cta .wp-block-button__link {
		font-size: var(--wp--preset--font-size--xs);
		padding: 0.5rem 0.75rem;
	}

	/*
	 * The row is 2px over budget at 360px with the default gap: 40px of gutter
	 * leaves 320px, and a 120px logo, a 40px hamburger and a ~114px button plus
	 * two 24px gaps come to 322px. A tighter gap between the hamburger and the
	 * button brings it back under.
	 */
	.base-header .base-header__actions {
		gap: var(--wp--preset--spacing--sm);
	}
}

@media (max-width: 400px) {
	.base-header {
		--bci-brand-width: 140px;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile navigation overlay
 *
 * Designed as a full-screen sheet: a lime header band carrying the close
 * control, then the links as generously spaced rows separated by hairlines,
 * each with a chevron that slides on touch.
 *
 * On the cause of the original bug: the Navigation block used to carry
 * justifyContent "right", which WordPress turns into an items-justified-right
 * class that core then targets with a five-class selector to set
 * align-items: flex-end on the open overlay - which is what pushed the links
 * off the right edge. That attribute is gone from parts/header.html; the first
 * rule below is a guard at core's own selector depth in case it is ever set
 * again from the Site Editor.
 * ------------------------------------------------------------------------ */

.base-header .wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.base-header .wp-block-navigation.items-justified-space-between .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

/* --- The sheet --------------------------------------------------------- */

/*
 * The band is the height of the closed header - its min-height plus the top
 * and bottom padding set in parts/header.html - so opening the menu reads as
 * the header expanding rather than as a panel of some unrelated size.
 */
.base-header .wp-block-navigation__responsive-container {
	--bci-nav-band: calc(var(--base-header-height) + (2 * var(--wp--preset--spacing--sm)));
}

.base-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
}

.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	z-index: 1;
}

/*
 * The lime band behind the close control.
 *
 * It hangs off the dialog rather than off the container. When the admin bar is
 * showing, core pushes the dialog down by the height of the bar and leaves the
 * container at the top of the viewport - so a band drawn on the container slid
 * out from under its own close button for every logged-in user.
 */
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	background-color: var(--wp--preset--color--lime);
	block-size: var(--bci-nav-band);
	content: "";
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
	z-index: 0;
}

/*
 * The logo, in the empty half of the band.
 *
 * Same mark, same width, same distance from the edge as the header sitting
 * behind the sheet - and the band is the header's own height - so opening the
 * menu leaves the logo exactly where it already was.
 *
 * It is painted rather than added to parts/header.html because the only place
 * the Navigation block would accept an image is among its inner blocks, and
 * those are discarded the moment a menu is created in the Site Editor. The URL
 * comes from bci_nav_logo_css() in inc/brisbane-car-inspection.php. With no
 * custom logo set the property is absent, background-image resolves to none,
 * and the band is simply empty - as it was before.
 *
 * background-size: contain makes the box a bound rather than a size, so this
 * holds whatever shape logo the client uploads next.
 */
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::after {
	background-image: var(--bci-nav-logo);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	block-size: 3rem;
	content: "";
	inline-size: var(--bci-brand-width);
	inset-block-start: calc((var(--bci-nav-band) - 3rem) / 2);
	inset-inline-start: var(--wp--custom--gutter);
	position: absolute;
	z-index: 1;
}

/* Explicitly above the band, so no link can ever paint underneath it. */
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0;
	padding: 0;
	padding-block-start: var(--bci-nav-band);
	position: relative;
	width: 100%;
	z-index: 1;
}

/* --- Close control ------------------------------------------------------ */

.base-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	background-color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary);
	display: flex;
	inset-block-start: calc((var(--bci-nav-band, 4.5rem) - 2.5rem) / 2);
	inset-inline-end: var(--wp--custom--gutter);
	justify-content: center;
	block-size: 2.5rem;
	inline-size: 2.5rem;
	padding: 0;
	transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.base-header .wp-block-navigation__responsive-container-close:hover,
.base-header .wp-block-navigation__responsive-container-close:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-inverse);
}

/* --- Link rows ---------------------------------------------------------- */

/*
 * Every level of the list has to be told to fill the sheet.
 *
 * Core lays the open overlay out as a column flex box with align-items set to
 * flex-start, so any list inside it shrinks to the width of its longest label.
 * The outer container was already handled here; the Page List block adds a
 * second <ul> inside it that was not, and that is the one WordPress falls back
 * to until a menu is built in the Site Editor. The result was a sheet whose
 * rows - hairlines, chevrons and the current-page highlight with them - were
 * stranded in a narrow column against the left edge.
 *
 * Setting the widths outright makes core's alignment irrelevant, so this holds
 * for a Page List, a hand-built menu, or a mix of the two.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	align-items: center;
	display: flex;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	justify-content: space-between;
	min-block-size: 3.5rem;
	padding: var(--wp--preset--spacing--md) var(--wp--custom--gutter);
	width: 100%;
	transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

/*
 * navigation.css hides ::after inside the overlay because it is the desktop
 * underline. Here it is put back to work as the row chevron.
 */
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	background-color: transparent;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	block-size: 0.5rem;
	inline-size: 0.5rem;
	content: "";
	display: block;
	inset: auto;
	opacity: 0.45;
	position: static;
	transform: rotate(-45deg);
	transition: transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		opacity var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
	transform: rotate(-45deg) translate(0.15rem, -0.15rem);
}

/* The page you are on reads as selected, not just hovered. */
.base-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary-soft);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}

/* --- Submenus ----------------------------------------------------------- */

/*
 * Core indents the open overlay's submenu with 2rem of padding on both sides
 * and sizes it to its content, from a five-class selector. That left the two
 * service rows floating in a narrower box than the items above them, inset on
 * the left and short on the right. Matched one class deeper so the rows run the
 * full width like every other row, and the indent comes from the item padding
 * below instead - which puts it only on the reading edge, where an indent
 * belongs.
 */
.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
}

/*
 * The desktop dropdown. Core sizes it to a 200px minimum, which wrapped "Car
 * Inspection North Brisbane" onto a second line while the shorter rows beside
 * it stayed on one - the ragged result read as a mistake. The labels keep their
 * full wording because that is the anchor text those pages are built to rank
 * for, so the panel widens to fit them instead of the labels shrinking to fit
 * the panel.
 *
 * max-content with a ceiling: the panel is exactly as wide as its longest row
 * and can never run off the side of a narrow laptop.
 */
/*
 * The desktop dropdowns open on hover.
 *
 * The two parent items are unclickable on purpose - Services and Service Areas
 * are groupings, not pages - and the only way core will render a nav parent as
 * a <button> rather than a link is openSubmenusOnClick. That attribute also
 * stamps .open-on-click on the item, and core's own hover rule reads
 * :not(.open-on-click), so the two behaviours are mutually exclusive as core
 * ships them. This restores hover without giving the parents a destination.
 *
 * Click still works, and still drives aria-expanded, so the keyboard and screen
 * reader path is core's untouched: Tab to the button, Enter to open. Hover is
 * an extra affordance for a mouse, which is why it is inside (hover: hover) -
 * on a touch screen it would latch open on the first tap.
 *
 * 782px is where this header swaps the hamburger for the horizontal menu. It
 * is not core's 600px: the theme holds the overlay open a breakpoint longer so
 * the logo, the booking button and eight menu items are not fighting for a
 * tablet-width row.
 */
@media (min-width: 782px) {
	.base-header .wp-block-navigation__submenu-container {
		inline-size: max-content;
		max-inline-size: min(20rem, 90vw);
	}

	.base-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

@media (min-width: 782px) and (hover: hover) {
	/*
	 * Repeats core's open state rather than only flipping visibility: the
	 * closed panel is also height: 0, width: 0 and overflow: hidden, so
	 * visibility alone would reveal a zero-sized box.
	 */
	.base-header .wp-block-navigation-item.open-on-click:hover > .wp-block-navigation__submenu-container {
		block-size: auto;
		inline-size: max-content;
		opacity: 1;
		overflow: visible;
		visibility: visible;
	}

	/*
	 * The chevron points the same way whichever route opened the panel. Core
	 * only turns it on aria-expanded, which hover deliberately does not set.
	 */
	.base-header .wp-block-navigation-item.open-on-click:hover > .wp-block-navigation__submenu-icon svg,
	.base-header .wp-block-navigation-item.open-on-click:hover > .wp-block-navigation-submenu__toggle > svg {
		transform: rotate(180deg);
	}
}

.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-block-end: 0;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	padding-block: var(--wp--preset--spacing--sm);
	padding-inline-start: calc(var(--wp--custom--gutter) + var(--wp--preset--spacing--md));
}

@media (prefers-reduced-motion: reduce) {
	.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.base-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after,
	.base-header .wp-block-navigation__responsive-container-close {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Header height
 *
 * base.css sets --base-header-height to 4.5rem. With the block's own padding
 * that made the bar about 104px tall, which is more than the logo needs. 3.5rem
 * plus the reduced padding brings it to roughly 80px - still comfortably taller
 * than the 45px logo, and the sticky offset and scroll-padding follow the
 * variable automatically.
 *
 * On a phone it comes down again, to about 72px. A sticky header is a standing
 * charge against a small screen, and nothing in the bar needs the space: the
 * hamburger is the tallest thing in it at 36px. The logo takes some of what is
 * given up - it is set a size larger at every width below 782px than the
 * desktop scale would have produced, so the mark reads at arm's length.
 *
 * Redeclared on :root rather than on .base-header so that the scroll-padding in
 * base.css, which stops an anchor link landing underneath the sticky bar,
 * shrinks by exactly the same amount.
 * ------------------------------------------------------------------------ */

:root {
	--base-header-height: 3.5rem;
}

@media (max-width: 781px) {
	:root {
		--base-header-height: 3rem;
	}
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * Base Theme's footer.css handles the mechanics - link underlines, the
 * separator, the safe-area inset at the bottom of the page. This section is the
 * design: the four-column grid, the reversed logo, the icon rows and the bottom
 * bar. It stays here rather than in footer.css so that module can still be
 * replaced file-for-file from master.
 *
 * The dark band is #1b1b1b and lime is the only accent used on it, at 14.8:1
 * against that background - so headings, icons and hover states can all use it
 * without a contrast check per element.
 *
 * Everything else is full white. The muted inverse grey the theme offers is a
 * legitimate 4.8:1, but four columns of it on black read as disabled rather
 * than secondary, so hierarchy here comes from size and weight instead of from
 * dimming the text.
 * ------------------------------------------------------------------------ */

/*
 * theme.json sets every heading to --wp--preset--color--text, which on a dark
 * band is the background colour: any heading without an explicit colour class
 * renders black on black. It had already swallowed the footer's own heading and
 * the closing call to action's, in both cases silently - the markup was there
 * and nothing in the editor showed a problem.
 *
 * Keyed off the colour classes rather than off the footer, so it covers the
 * closing band, any dark section a client builds later, and a dark group
 * dropped inside a light one.
 *
 * has-text-inverse-color is the one that generalises: a container that has
 * declared its text is the inverse colour has said everything needed, whatever
 * ground it happens to be sitting on. It is what catches the closing band now
 * that the band is a gradient rather than a named dark background.
 */
.has-dark-background-color :is(h1, h2, h3, h4, h5, h6),
.has-secondary-background-color :is(h1, h2, h3, h4, h5, h6),
.has-text-inverse-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--text-inverse);
}

/*
 * The icon badge is primary-soft on primary-soft wherever a mint section uses
 * one - the same colour as the band, so the badge vanished and left a bare
 * glyph. On mint it goes white instead.
 */
.has-surface-background-color .base-icon-badge,
.has-surface-alt-background-color .base-icon-badge,
.has-lime-background-color .base-icon-badge {
	background-color: var(--wp--preset--color--background);
}

/* --- The columns -------------------------------------------------------- */

/*
 * Three layouts, because core/columns only knows two.
 *
 * Core keeps four columns side by side all the way down to 781px and then
 * stacks them flat. The trouble is above that line, not below it: the brand and
 * contact columns are sized in percentages, and between about 900px and 1200px
 * what is left over leaves the two link columns near 100px wide - narrow enough
 * that every second label wraps.
 *
 * So the brand takes a row of its own below 1024px and the three lists share
 * the next, which is the width they actually need; below 700px there is no room
 * for three abreast and everything stacks.
 *
 * flex-grow is zeroed alongside each basis: a column left growing would absorb
 * the empty half of a short final row and silently undo the width.
 */
@media (max-width: 1023px) {
	/* Core pins this open with "flex-wrap: nowrap !important" above 782px. */
	.base-footer .base-footer__columns {
		flex-wrap: wrap !important;
	}

	.base-footer .base-footer__columns > .base-footer__brand {
		flex-basis: 100% !important;
		flex-grow: 0;
	}

	.base-footer .base-footer__columns > .base-footer__col {
		flex-basis: calc((100% - (2 * var(--wp--preset--spacing--xl))) / 3) !important;
		flex-grow: 0;
	}
}

@media (max-width: 699px) {
	.base-footer .base-footer__columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Brand column ------------------------------------------------------- */

.base-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}

.base-footer__brand > * {
	margin-block: 0;
}

.bci-footer-logo {
	display: inline-block;
	inline-size: fit-content;
	/*
	 * The logo is the one link in the footer that must not pick up the shared
	 * hover underline - an underline under an image reads as a rendering fault.
	 */
	text-decoration: none;
}

.bci-footer-logo:hover,
.bci-footer-logo:focus-visible {
	text-decoration: none;
}

.bci-footer-logo__img {
	block-size: auto;
	display: block;
	inline-size: 220px;
	max-inline-size: 100%;
}

/*
 * A measure, not a width: on a desktop the column is already narrower than
 * this, and it only takes effect once the columns stack and the paragraph would
 * otherwise run the full width of the page.
 */
.base-footer__brand p {
	max-inline-size: 46ch;
}

/* --- Social ------------------------------------------------------------- */

.bci-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bci-social__link {
	align-items: center;
	block-size: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-inverse);
	display: flex;
	inline-size: 2.5rem;
	justify-content: center;
	transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		border-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

/* No underline to show: the link's content is a glyph, not a word. */
.base-footer .bci-social__link:hover,
.base-footer .bci-social__link:focus-visible {
	background-color: var(--wp--preset--color--lime);
	border-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--dark);
	text-decoration: none;
}

.bci-social .bci-icon {
	block-size: 1.125rem;
	inline-size: 1.125rem;
}

/* --- Column headings ---------------------------------------------------- */

.base-footer__heading {
	color: var(--wp--preset--color--lime) !important;
	margin-block-end: var(--wp--preset--spacing--md);
}

/* --- Link lists --------------------------------------------------------- */

.base-footer .base-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	margin-block: 0;
}

.base-footer .base-footer__links a {
	color: var(--wp--preset--color--text-inverse);
	display: inline-block;
	transition: color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

/*
 * The links shift a couple of pixels toward the reading edge on hover instead
 * of underlining. Underline plus colour plus movement is three signals for one
 * state; colour and movement together are enough, and the shift is what makes a
 * dense list feel responsive under a cursor.
 */
.base-footer .base-footer__links a:hover,
.base-footer .base-footer__links a:focus-visible {
	color: var(--wp--preset--color--lime);
	text-decoration: none;
	transform: translateX(3px);
}

/* --- Contact rows ------------------------------------------------------- */

.bci-contact {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding: 0;
}

.bci-contact__row {
	align-items: start;
	display: grid;
	/*
	 * A fixed icon track rather than a flex gap: the second line of a wrapped
	 * address then aligns with the first line's text instead of tucking back
	 * under the pin.
	 */
	grid-template-columns: 1.25rem 1fr;
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-height--normal);
}

.bci-contact .bci-icon {
	block-size: 1.125rem;
	color: var(--wp--preset--color--lime);
	inline-size: 1.125rem;
	/* Optically centred on the first line of text rather than on its box. */
	margin-block-start: 0.15em;
}

.base-footer .bci-contact a {
	color: var(--wp--preset--color--text-inverse);
	/* An email address is the one string here long enough to overflow a column. */
	overflow-wrap: anywhere;
	transition: color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

/*
 * Lime, not an underline. footer.css underlines every link in the footer on
 * hover; the columns beside this one already opt out, and a phone number that
 * gains a line under it reads as a typo rather than as a target.
 */
.base-footer .bci-contact a:hover,
.base-footer .bci-contact a:focus-visible {
	color: var(--wp--preset--color--lime);
	text-decoration: none;
}

.base-footer .bci-contact span {
	color: var(--wp--preset--color--text-inverse);
}

/* --- The footer button -------------------------------------------------- */

/*
 * blocks/button.css stacks buttons full width below 420px. Here that is what is
 * wanted on a phone and not on a desktop, where a full-width button across a
 * narrow column reads as a mistake.
 */
.base-footer .base-footer__cta .wp-block-button__link {
	display: inline-block;
	white-space: nowrap;
}

/*
 * assets/css/footer.css underlines every link in the footer on hover, which is
 * right for the link columns and wrong for the button sitting beside them - it
 * already darkens on hover, and the underline made it read as text that had
 * come loose from its background. The exception lives here because footer.css
 * is master Base Theme's file and stays byte-identical to it.
 */
.base-footer .wp-block-button__link:hover,
.base-footer .wp-block-button__link:focus-visible {
	text-decoration: none;
}

/* --- Bottom bar --------------------------------------------------------- */

.base-footer__legal {
	row-gap: var(--wp--preset--spacing--sm);
}

/*
 * The legal links were a paragraph with literal "|" characters between them,
 * which a screen reader reads out as "vertical line". A list gives the same
 * look from a border, and announces as three links.
 */
.base-footer .base-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	margin-block: 0;
}

.base-footer .base-footer__legal-links li {
	margin-block-end: 0;
}

.base-footer .base-footer__legal-links li + li {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
	padding-inline-start: var(--wp--preset--spacing--md);
}

.base-footer .base-footer__legal-links a {
	color: var(--wp--preset--color--text-inverse);
	transition: color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

/* Lime, no underline - the last row in the footer to opt out of footer.css. */
.base-footer .base-footer__legal-links a:hover,
.base-footer .base-footer__legal-links a:focus-visible {
	color: var(--wp--preset--color--lime);
	text-decoration: none;
}

/* --- Phone -------------------------------------------------------------- */

@media (max-width: 699px) {
	/*
	 * Stacked, the column gap becomes dead space between four short lists.
	 * The columns keep their own internal rhythm; only the distance between
	 * them comes down.
	 */
	.base-footer .base-footer__columns {
		gap: var(--wp--preset--spacing--xl) !important;
	}

	/* 220px of logo on a 360px screen is a banner, not a mark. */
	.bci-footer-logo__img {
		inline-size: 180px;
	}

	.base-footer .base-footer__cta .wp-block-button__link {
		display: block;
		text-align: center;
	}

	.base-footer__legal {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.base-footer .base-footer__links a:hover,
	.base-footer .base-footer__links a:focus-visible {
		transform: none;
	}
}

/* ===========================================================================
 * PAGE SECTIONS
 *
 * The components the section patterns are built from. Named for what they are
 * rather than the page they first appeared on, because they are shared: the
 * hero shell, the stats strip, the icon cards, the icon rows and the closing
 * band are all used by more than one page, and a second page built out of a
 * second set of parts is how a site starts looking like two sites.
 *
 * Everything here is scoped to a bci- class so nothing leaks into a page the
 * client builds later out of the generic block styles.
 *
 * Two conventions run through the whole file:
 *
 * 1. Cards are CSS grid with the action on its own row, so a row of cards ends
 *    with its buttons on one line however unequal the copy above them is. The
 *    old page had three price cards of three different heights with the buttons
 *    wherever the text happened to stop.
 *
 * 2. Anything that looks like data - a score bar, a battery meter, a finding -
 *    is real markup with real text, not an image. It reflows on a phone, it can
 *    be read out, it stays sharp, and it costs nothing to download. Each one
 *    carries a visible "sample" caption, because a made-up number presented as
 *    a real result is the one thing on this page that could mislead somebody.
 * ======================================================================== */

/* --- Shared ------------------------------------------------------------- */

/*
 * The outline button has to match the height of a filled one.
 *
 * theme.json gives buttons 0.875rem/1.75rem of padding and no border. Core then
 * overrides the outline style with its own "padding: .667em 1.333em" plus a
 * border, and blocks/button.css restyles that border to 1px without touching
 * the padding - so an outline button came out 46px tall against a filled
 * button's 49px. In the hero the two sit side by side and the mismatch shows.
 *
 * A pixel comes off each side to pay for the border, which lands the outer box
 * on exactly the same size.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.875rem - 1px) calc(1.75rem - 1px);
}

/*
 * base.css sets the lead paragraph to --font-size--lg, 24px. At that size it
 * competes with the headings it sits under rather than introducing them, and on
 * a page with a lead in almost every section that reads as though everything is
 * shouting. One step down the scale, to 20px.
 *
 * Overridden here rather than in base.css so that module stays identical to
 * master. The element selector wins regardless of stylesheet order.
 */
p.is-style-lead {
	font-size: var(--wp--preset--font-size--md);
}

/*
 * Lists rendered from a wp:html block are direct children of a group, so the
 * group's block gap is what separates them from the paragraph above. Resetting
 * the browser's list margin with the "margin: 0" shorthand also zeroed that
 * gap, and the copy above each one ended up sitting flush against it - most
 * visibly under the hero's buttons, where the gap measured 0px.
 *
 * Only the end margin is reset. The start belongs to the block gap.
 */
.bci-hero__proof,
.bci-steps,
.bci-report-points,
.bci-areas {
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}

.bci-hero .base-icon,
.bci-trust .base-icon {
	flex: none;
}

/*
 * Cards used across the page. One definition rather than six near-identical
 * ones, because the moment the radius or the border differs between two
 * sections the page stops looking designed and starts looking assembled.
 */
.bci-checks__card,
.bci-reasons__card,
.bci-reviews__card,
.bci-report__card,
.bci-battery,
.bci-findings {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* --- Heading outline ---------------------------------------------------- */

/*
 * The heading outline was corrected in September 2026 for SEO. A section's small
 * label used to be an h2, its real heading an h3 and its card titles h4, and
 * the number strips under each hero were h4s straight after the h1. Now the
 * label is a paragraph, the heading an h2, card titles h3, and the numbers,
 * review names and booking notes are paragraphs.
 *
 * The outline was asked for; a change in the design was not. Each tag brings
 * its own defaults - an h2 is set tighter than an h3, an h3 is a size up from
 * an h4 and base.css balances its lines, a paragraph takes body type rather
 * than heading type - so these rules put back exactly what the old tag looked
 * like. Delete them and the page still reads correctly, but every section
 * heading and card title changes size and line spacing, so they stay.
 *
 * The stored pages were rewritten to match in the same release, by a one-time
 * tool that has since been removed. Until then these rules also carried the
 * old tags; that half is gone now that no page uses them.
 */

/* The label kept its Eyebrow style, but the heading typeface came from the h2. */
p.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
}

/*
 * Section headings keep the h3 metrics they were designed at. The closing
 * band's heading was always an h2 and keeps its own.
 */
.base-section:not(.bci-closing) h2.has-xxl-font-size {
	letter-spacing: -0.01em;
	line-height: var(--wp--custom--line-height--snug);
}

/* Blog card titles: the post-title block sets its own line-height, so only the tracking moved. */
.wp-block-post-template h2.wp-block-post-title {
	letter-spacing: -0.01em;
}

/* Card titles: the h4 size, and no line balancing - base.css balances h1-h3 only. */
:is(.bci-steps__step, .bci-checks__card, .bci-reasons__card, .bci-report-points__item, .bci-areas__item, .bci-plan, .bci-area__note-head, .bci-suburbs__head, .base-related-posts) h3 {
	font-size: var(--wp--preset--font-size--lg);
	text-wrap: wrap;
}

/* Former headings that are paragraphs now. Scoped one class deep to outrank each component's own "p" rule. */
.bci-stats__item .bci-stats__value,
.bci-score .bci-score__value,
.bci-reviews__card .bci-reviews__name,
.bci-report-points__item .bci-report-points__title {
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

/* --- Hero --------------------------------------------------------------- */

/*
 * The eyebrow is a group with the icon and an editable paragraph inside it, so
 * the type moves onto the paragraph and the row keeps the layout.
 */
.bci-hero__eyebrow {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-block: 0;
}

.bci-hero__eyebrow p {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block: 0;
}

.bci-hero__eyebrow .base-icon {
	block-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	inline-size: 1.125rem;
}

.bci-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	list-style: none;
}

.bci-hero__proof__item {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.bci-hero__proof__item p {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-block: 0;
}

.bci-hero__proof .base-icon {
	block-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	inline-size: 1.25rem;
}

/* --- Hero photograph ---------------------------------------------------- */

/*
 * The hero's right half: a photograph with the report card overlapping its
 * lower left corner.
 *
 * The wrapper carries padding on the two sides the card and the chip hang over,
 * so nothing escapes the column and collides with the headline beside it. The
 * card is taken out of flow, which is why the wrapper needs that padding at the
 * end - there is no content left to reserve the space.
 */
.bci-hero__media {
	position: relative;
}

.bci-hero__photo {
	margin: 0;
}

/*
 * block-size: auto is load-bearing, the same as on the field strip. WordPress
 * writes width and height attributes onto an uploaded image, and an explicit
 * height attribute beats aspect-ratio - without this an uploaded photograph
 * would render at its own full height instead of the 4:3 crop the overlap is
 * built around.
 */
.bci-hero__photo img {
	aspect-ratio: 4 / 5;
	block-size: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

@media (min-width: 782px) {
	.bci-hero__media {
		padding-block-end: var(--wp--preset--spacing--xl);
		padding-inline-end: var(--wp--preset--spacing--lg);
	}

	/*
	 * Pulled left of the photograph rather than tucked inside it. Sitting flush
	 * would read as a caption; hanging over the edge reads as a separate object
	 * in front, which is the whole point of the overlap.
	 */
	.bci-hero__media .bci-report {
		inline-size: 58%;
		inset-block-end: 0;
		inset-inline-start: calc(var(--wp--preset--spacing--lg) * -1);
		position: absolute;
	}

	/*
	 * Tighter than the card is anywhere else on the site. It has to fit inside
	 * the photograph's height here, and at 1024px the column is narrow enough
	 * that the default padding and gap alone push it taller than the picture it
	 * is meant to sit on.
	 */
	/*
	 * The card is a step smaller everywhere it appears in the hero.
	 *
	 * At full size it is taller than the photograph it sits on, which is the
	 * whole problem: an overlap only reads as an overlap while there is picture
	 * left around it. One step down the type scale for every line, a narrower
	 * label track, and the vehicle name stops wrapping to two lines - which on
	 * its own was costing more height than the padding did.
	 *
	 * Only inside .bci-hero__media. The same card is full size on the pages
	 * where it stands on its own.
	 */
	.bci-hero__media .bci-report__card {
		/*
		 * The type scale stops at xs, and the card needs to go below it here -
		 * so one derived step, defined once and used by every line that takes
		 * it. Derived rather than typed as a pixel value so it still follows if
		 * the scale is ever retuned in theme.json.
		 */
		--bci-card-text: calc(var(--wp--preset--font-size--xs) * 0.9);
		gap: var(--wp--preset--spacing--sm);
		padding: var(--wp--preset--spacing--sm);
	}

	.bci-hero__media .bci-report__vehicle {
		font-size: var(--wp--preset--font-size--base);
	}

	.bci-hero__media .bci-report__label {
		font-size: var(--bci-card-text);
	}

	.bci-hero__media .bci-report__meta,
	.bci-hero__media .bci-report__cat,
	.bci-hero__media .bci-report__scores b,
	.bci-hero__media .bci-report__flag {
		font-size: var(--bci-card-text);
	}

	.bci-hero__media .bci-report__scores {
		gap: 0.3rem;
	}

	/* The labels are shorter at this size, so the track gives up the slack. */
	.bci-hero__media .bci-report__scores li {
		grid-template-columns: minmax(0, 6.25rem) 1fr auto;
		gap: var(--wp--preset--spacing--xs);
	}

	/* The row icons scale with the text they sit beside, not with the card. */
	.bci-hero__media .bci-report__cat .base-icon {
		block-size: 0.9rem;
		inline-size: 0.9rem;
	}

	.bci-hero__media .bci-report__flag {
		gap: var(--wp--preset--spacing--xs);
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	}

	.bci-hero__media .bci-report__flag .base-icon {
		block-size: 0.95rem;
		inline-size: 0.95rem;
	}

	/*
	 * The picture takes its height from the headline beside it rather than from
	 * a crop of its own.
	 *
	 * Fixed ratios cannot do this. The text column's height moves with where the
	 * lead paragraph happens to wrap - 453px at 1000px wide, 458px at 1100px,
	 * then 394px at 1199px - so any ratio that balances the two columns at one
	 * width unbalances them at the next, and the tallest column sets the height
	 * of the whole band. Stretching both columns and letting the photograph fill
	 * what is left keeps them level at every width, with no breakpoints to keep
	 * in step.
	 *
	 * The min-block-size is the floor: the card has to have somewhere to sit
	 * even when the headline is short, so the picture never shrinks past the
	 * card's height plus a clear third above it.
	 */
	.bci-hero__grid.are-vertically-aligned-center {
		align-items: stretch;
	}

	/*
	 * Core puts the centring on each column as align-self, not on the row, so
	 * stretching the row alone does nothing - the columns have to opt out of it
	 * themselves. They then centre their own contents instead, which looks the
	 * same and leaves both columns full height.
	 */
	.bci-hero__grid > .wp-block-column.is-vertically-aligned-center {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.bci-hero__media {
		display: flex;
		/* Grows to the height the row settles on, which the headline sets. */
		flex: 1 1 auto;
		flex-direction: column;
		min-block-size: 26rem;
	}

	/*
	 * flex-basis 0, so the figure takes the space left after the padding that
	 * reserves room for the card rather than starting from the picture's own
	 * height. The image then fills that box absolutely - height: 100% against
	 * an auto-height parent resolves to nothing, which is what left the picture
	 * at its intrinsic size on the first attempt.
	 */
	.bci-hero__photo {
		flex: 1 1 0;
		min-block-size: 0;
		position: relative;
	}

	.bci-hero__photo img {
		aspect-ratio: auto;
		block-size: 100%;
		inline-size: 100%;
		inset: 0;
		object-fit: cover;
		position: absolute;
	}

	/* Above the photograph's top right corner, clear of the card below it. */
	.bci-hero__rating {
		inset-block-end: auto;
		inset-block-start: calc(var(--wp--preset--spacing--md) * -1);
		inset-inline-end: 0;
		inset-inline-start: auto;
		z-index: 2;
	}

	/*
	 * The photo count belongs to the card, so it rides on the card's own top
	 * right corner. Overriding both insets because the rule it inherits pins it
	 * to the opposite side, where it would now sit off the column.
	 */
	.bci-hero__media .bci-report__chip--photos {
		inset-block-end: auto;
		inset-block-start: calc(var(--wp--preset--spacing--md) * -1);
		inset-inline-end: calc(var(--wp--preset--spacing--md) * -1);
		inset-inline-start: auto;
	}

	.bci-hero__media .bci-report figcaption {
		text-align: start;
	}
}

/*
 * Below the columns break there is no room to overlap anything, so the three
 * parts simply stack. The card returns to the wrapping flex row it uses
 * everywhere else, and the rating chip - which is no longer inside it - sits
 * between the photograph and the card on its own.
 */
@media (max-width: 781px) {
	.bci-hero__media {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--lg);
	}

	.bci-hero__rating {
		align-self: flex-start;
	}

	/*
	 * Landscape on a phone. The portrait crop exists to give the card somewhere
	 * to sit, and nothing overlaps down here - so a tall picture would only
	 * push the buttons further below the fold.
	 */
	.bci-hero__photo img {
		aspect-ratio: 3 / 2;
	}
}

/* --- Hero: the sample report ------------------------------------------- */

.bci-report {
	margin: 0;
	position: relative;
}

.bci-report__card {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--xl);
	box-shadow: var(--wp--preset--shadow--lg);
}

.bci-report__head > * {
	margin-block: 0;
}

.bci-report__label {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bci-report__vehicle {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
	margin-block-start: 0.35rem !important;
}

.bci-report__meta {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-block-start: 0.2rem !important;
}

.bci-report__scores {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bci-report__scores li {
	align-items: center;
	display: grid;
	/*
	 * A fixed label track keeps every bar starting and ending on the same two
	 * lines, which is the only reason a set of bars is quicker to read than the
	 * numbers on their own.
	 */
	grid-template-columns: minmax(0, 9.5rem) 1fr auto;
	gap: var(--wp--preset--spacing--sm);
}

.bci-report__cat {
	align-items: center;
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	gap: 0.5rem;
	min-inline-size: 0;
}

.bci-report__cat .base-icon {
	block-size: 1.125rem;
	color: var(--wp--preset--color--primary);
	flex: none;
	inline-size: 1.125rem;
}

.bci-report__bar {
	background-color: var(--wp--preset--color--border);
	block-size: 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	display: block;
	overflow: hidden;
}

.bci-report__bar i {
	background-color: var(--wp--preset--color--primary);
	block-size: 100%;
	border-radius: inherit;
	display: block;
}

.bci-report__bar.is-warn i {
	background-color: var(--wp--preset--color--warning);
}

.bci-report__scores b {
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
}

.bci-report__scores b.is-good {
	color: var(--wp--preset--color--primary);
}

.bci-report__scores b.is-warn {
	color: var(--wp--preset--color--warning);
}

.bci-report__flag {
	align-items: start;
	background-color: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: var(--wp--preset--spacing--sm);
	margin-block: 0;
	padding: var(--wp--preset--spacing--md);
}

.bci-report__flag .base-icon {
	block-size: 1.25rem;
	color: var(--wp--preset--color--primary-dark);
	flex: none;
	inline-size: 1.25rem;
	margin-block-start: 0.1em;
}

/*
 * The two chips are decoration hung off the card's corners, so they are absolute
 * on a wide screen and become an ordinary row underneath it on a phone, where
 * there is no margin for them to sit in.
 */
.bci-report__chip {
	align-items: center;
	background-color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--md);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--xs);
	gap: 0.4rem;
	margin-block: 0;
	padding: 0.5rem 0.9rem;
	white-space: nowrap;
}

.bci-report__chip .base-icon {
	block-size: 1rem;
	color: var(--wp--preset--color--primary);
	inline-size: 1rem;
}

.bci-report__chip--rating .base-icon {
	color: var(--wp--preset--color--warning);
}

.bci-report figcaption {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--xs);
	margin-block-start: var(--wp--preset--spacing--sm);
	opacity: 0.75;
	text-align: center;
}

@media (min-width: 782px) {
	.bci-report__chip {
		position: absolute;
		z-index: 1;
	}

	.bci-report__chip--rating {
		inset-block-start: calc(var(--wp--preset--spacing--lg) * -1);
		inset-inline-end: calc(var(--wp--preset--spacing--md) * -1);
	}

	.bci-report__chip--photos {
		inset-block-end: var(--wp--preset--spacing--xl);
		inset-inline-start: calc(var(--wp--preset--spacing--lg) * -1);
	}
}

@media (max-width: 781px) {
	/*
	 * Wrap rather than a column, so the two chips sit beside each other on one
	 * line instead of stacking. Order puts the card above them and the caption
	 * below; the chips keep their natural width and only break onto separate
	 * lines on a screen too narrow to hold both, which no current phone is.
	 */
	.bci-report {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--md);
	}

	.bci-report__card {
		flex: 1 0 100%;
		order: -1;
		padding: var(--wp--preset--spacing--lg);
	}

	.bci-report__chip {
		flex: 0 0 auto;
	}

	.bci-report figcaption {
		flex: 1 0 100%;
		margin-block-start: 0;
		order: 1;
	}
}

@media (max-width: 560px) {
	/*
	 * The label track gives up its fixed width before the bar gives up its
	 * place. A row of bars is the fastest thing on the card to read and it is
	 * worth keeping to the narrowest screen that can hold one.
	 */
	.bci-report__scores li {
		grid-template-columns: minmax(0, 7rem) 1fr auto;
	}
}

@media (max-width: 359px) {
	.bci-report__scores li {
		grid-template-columns: 1fr auto;
	}

	.bci-report__bar {
		display: none;
	}
}

/* --- Trust strip -------------------------------------------------------- */

.bci-stats {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bci-stats__item {
	align-items: center;
	display: grid;
	gap: 0.15rem;
	/*
	 * A grid item defaults to min-width: auto, so it refuses to be narrower
	 * than its longest word. Four of these across 320px need to be allowed to
	 * shrink or the strip pushes the page sideways.
	 */
	min-inline-size: 0;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon value"
		"icon label";
	padding-inline: var(--wp--preset--spacing--md);
}

.bci-stats__item + .bci-stats__item {
	border-inline-start: 1px solid var(--wp--preset--color--border);
}

.bci-stats__icon {
	align-items: center;
	background-color: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--md);
	block-size: 2.5rem;
	color: var(--wp--preset--color--primary);
	display: flex;
	grid-area: icon;
	inline-size: 2.5rem;
	justify-content: center;
	margin-inline-end: var(--wp--preset--spacing--sm);
}

.bci-stats__icon .base-icon {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.bci-stats__item p {
	/* Both sit in the 1fr track and must be allowed to wrap inside it. */
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.bci-stats__item .bci-stats__value {
	font-size: var(--wp--preset--font-size--lg);
	grid-area: value;
	letter-spacing: normal;
	line-height: 1.1;
	margin-block: 0;
}

.bci-stats__item p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
	grid-area: label;
	margin-block: 0;
}

@media (max-width: 899px) {
	.bci-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	}

	/* Vertical rules only work on a single row; on two they box the cells in. */
	.bci-stats__item + .bci-stats__item {
		border-inline-start: 0;
	}
}

/*
 * Two across all the way down rather than one. Four stacked rows of a 40px icon
 * beside two short lines is a lot of scrolling for four facts that are only
 * worth reading as a set - as a 2x2 the reader takes them in at a glance, which
 * is the entire job of the strip.
 */
@media (max-width: 400px) {
	.bci-stats {
		gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
	}

	.bci-stats__item {
		padding-inline: 0;
	}

	/* The icon loses its margin before the label loses a second line. */
	.bci-stats__icon {
		margin-inline-end: var(--wp--preset--spacing--xs);
	}
}

/* --- How it works ------------------------------------------------------- */

.bci-steps {
	display: grid;
	gap: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xl);
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	position: relative;
}

/*
 * The rule that joins the steps is drawn on the list, not between the items, so
 * adding or removing a step in the editor cannot leave a line hanging off the
 * end. It stops short of both outer numbers by half a column.
 */
.bci-steps::before {
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--primary) 0 60%,
		transparent 60% 100%
	);
	background-size: 12px 2px;
	block-size: 2px;
	content: "";
	inset-block-start: 1.5rem;
	inset-inline: 12.5%;
	opacity: 0.35;
	position: absolute;
}

/*
 * Number on its own line, then the icon and the title together, then the copy.
 *
 * The icon used to sit on a row of its own between the number and the title,
 * which put three things in a column twelve pixels apart and read as one
 * crowded block. Pairing it with the title takes a row out and gives what is
 * left room to breathe.
 */
/*
 * align-content: start is doing real work here.
 *
 * Each step is a grid item stretched to the height of the tallest one, and a
 * grid whose rows are all auto-sized defaults to align-content: stretch - so
 * the spare height in the three shorter steps was shared out between their
 * rows, and their numbers and titles sat a few pixels lower than the tall one's.
 * Packing the rows to the top lines all four up.
 */
.bci-steps__step {
	align-content: start;
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"num  num"
		"icon head"
		"body body";
	justify-items: start;
	position: relative;
	z-index: 1;
}

.bci-steps__num {
	grid-area: num;
	/* Extra room under the number, which is the step's own heading. */
	margin-block-end: var(--wp--preset--spacing--xs);
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border: 4px solid var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	block-size: 3rem;
	color: var(--wp--preset--color--text-inverse);
	display: flex;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	inline-size: 3rem;
	justify-content: center;
}

/*
 * A fixed box rather than a line box: an inline SVG is baseline-aligned, so the
 * span's height moved a pixel or two with the glyph and the four headings under
 * them ended up on slightly different lines.
 */
.bci-steps__icon {
	block-size: 1.5rem;
	color: var(--wp--preset--color--primary);
	display: flex;
	grid-area: icon;
}

.bci-steps__icon .base-icon {
	block-size: 1.5rem;
	inline-size: 1.5rem;
}

.bci-steps h3 {
	font-size: var(--wp--preset--font-size--md);
	grid-area: head;
	margin-block: 0;
}

.bci-steps p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	grid-area: body;
	margin-block: 0;
}

@media (max-width: 899px) {
	.bci-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.bci-steps::before {
		display: none;
	}
}

@media (max-width: 560px) {
	.bci-steps {
		gap: var(--wp--preset--spacing--xl);
		grid-template-columns: 1fr;
	}
}

/* --- What we check ------------------------------------------------------ */

/*
 * The minimum is set so that six cards land as three and three rather than four
 * and two, which left a ragged half-empty row at the bottom of the section.
 *
 * min(19rem, 100%) rather than a bare 19rem: a track minimum is a hard floor,
 * so on a screen narrower than the minimum plus the gutters the card overflowed
 * the page and took the whole document with it. Below 360px this was pushing
 * the page four pixels wide and giving every section a horizontal scrollbar.
 */
.bci-checks {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.bci-checks__card {
	/* Same reason as .bci-steps__step: stretched cards, auto rows. */
	align-content: start;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	justify-items: start;
	padding: var(--wp--preset--spacing--xl);
	transition: border-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.bci-checks__card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.bci-checks__card h3,
.bci-reasons__card h3 {
	font-size: var(--wp--preset--font-size--md);
	margin-block: 0;
}

/*
 * Two lines' worth of room whether the title needs it or not, so the lists
 * across a row start on the same line - without it "Body & paint" sits a line
 * higher than "Tyres, brakes & suspension" and the row reads as misaligned.
 *
 * Only while the cards are actually in a row. Stacked on a phone there is
 * nothing to line up with and the reserved line is just a gap. The two widths
 * differ because the two grids have different column minimums.
 */
@media (min-width: 700px) {
	.bci-checks__card h3 {
		min-block-size: calc(2em * var(--wp--custom--line-height--snug));
	}
}

@media (min-width: 560px) {
	.bci-reasons__card h3 {
		min-block-size: calc(2em * var(--wp--custom--line-height--snug));
	}
}

.bci-checks__card ul {
	color: var(--wp--preset--color--text-muted);
	display: grid;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	inline-size: 100%;
}

.bci-checks__card li {
	padding-inline-start: 1.25rem;
	position: relative;
}

.bci-checks__card li::before {
	background-color: currentColor;
	block-size: 0.375rem;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: 0.375rem;
	inset-block-start: 0.6em;
	inset-inline-start: 0.25rem;
	opacity: 0.45;
	position: absolute;
}

/* --- Packages ----------------------------------------------------------- */

/*
 * Core lays columns out as flex items that stretch, so each card is already the
 * height of the tallest. Making the card itself a grid with the button row last
 * is what pulls the buttons down to a single line at the bottom.
 */
.bci-plans .bci-plan {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	/* name, price, who it is for, inclusions, button. */
	grid-template-rows: auto auto auto 1fr auto;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--xl);
	position: relative;
}

.bci-plans .bci-plan > * {
	margin-block: 0 !important;
}

.bci-plan--featured {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--lg);
}

/*
 * The flag is lifted out of the grid and sat on the card's top edge. As a row
 * of its own it pushed the featured card's name, price and list one step down,
 * so none of the three prices lined up with each other - which is the one
 * comparison this section exists to make.
 */
.bci-plan__flag {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	inset-block-start: -0.85rem;
	inset-inline-start: 50%;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.75rem;
	position: absolute;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
}

.bci-plan__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1;
}

/* The one thing every reader wants next to a price is what it does not include. */
.bci-plan__price::after {
	color: var(--wp--preset--color--text-muted);
	content: " inc. GST";
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0;
}

.bci-plan__list {
	align-self: start;
}

.bci-plan__list li {
	margin-block-end: 0.4rem;
}

.bci-plan__cta {
	align-self: end;
}

.bci-plan__cta .wp-block-button {
	width: 100%;
}

.bci-plan__cta .wp-block-button__link {
	display: block;
	text-align: center;
	width: 100%;
}

.bci-plans__note {
	align-items: center;
	margin-block: var(--wp--preset--spacing--lg) 0;
	background-color: var(--wp--preset--color--background);
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: var(--wp--preset--spacing--sm);
	justify-content: center;
	padding: var(--wp--preset--spacing--md);
	text-align: center;
}

.bci-plans__note .base-icon {
	block-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	flex: none;
	inline-size: 1.25rem;
}

/* --- EV: battery panel -------------------------------------------------- */

.bci-battery {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--xl);
}

.bci-battery > * {
	margin-block: 0;
}

.bci-battery__label {
	align-items: center;
	color: var(--wp--preset--color--primary);
	display: flex;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	gap: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bci-battery__label .base-icon {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.bci-battery__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
}

.bci-battery__value span {
	font-size: 0.4em;
	margin-inline-start: 0.1em;
	vertical-align: 0.55em;
}

.bci-battery__meter {
	background-color: var(--wp--preset--color--border);
	block-size: 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
}

.bci-battery__meter i {
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--lime)
	);
	block-size: 100%;
	border-radius: inherit;
	display: block;
}

.bci-battery__facts {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bci-battery__facts li {
	border-block-start: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 0.1rem;
	padding-block-start: var(--wp--preset--spacing--sm);
}

.bci-battery__facts b {
	font-size: var(--wp--preset--font-size--md);
}

.bci-battery__facts span {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

.bci-battery__foot,
.bci-findings__foot {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* --- Report: findings panel -------------------------------------------- */

.bci-findings {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--xl);
}

.bci-findings > * {
	margin-block: 0;
}

.bci-findings__head {
	align-items: center;
	display: flex;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	gap: 0.5rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bci-findings__head .base-icon {
	block-size: 1.25rem;
	color: var(--wp--preset--color--warning);
	inline-size: 1.25rem;
}

.bci-findings__head b {
	background-color: var(--wp--preset--color--warning);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-inverse);
	font-size: var(--wp--preset--font-size--xs);
	padding: 0.1rem 0.5rem;
}

.bci-findings ul {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bci-findings li {
	align-items: center;
	border-radius: var(--wp--custom--radius--md);
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	grid-template-columns: auto 1fr;
	padding: var(--wp--preset--spacing--sm);
	/* The severity rule is the only colour on the row; the text stays black. */
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--border-strong);
}

.bci-findings li.is-high {
	background-color: rgba(207, 26, 59, 0.06);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--error);
}

.bci-findings li.is-med {
	background-color: rgba(138, 107, 1, 0.06);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--warning);
}

.bci-findings__thumb {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
	block-size: 2.75rem;
	color: var(--wp--preset--color--primary);
	display: flex;
	inline-size: 2.75rem;
	justify-content: center;
}

.bci-findings__thumb .base-icon {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.bci-findings__body {
	display: grid;
	gap: 0.1rem;
	min-inline-size: 0;
}

.bci-findings__body b {
	font-size: var(--wp--preset--font-size--sm);
}

.bci-findings__body span {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* --- Report: the three points ------------------------------------------ */

/*
 * Core blocks rather than raw HTML, so a writer can edit the words. The list
 * became a group of groups, the bold title an h4 and the body a paragraph -
 * the layout below is what keeps that reading exactly as the markup it
 * replaced. Typography comes from the blocks' own preset classes, so this
 * rule set is only ever about placement.
 */
.bci-report-points {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	list-style: none;
}

.bci-report-points__item {
	display: grid;
	gap: 0.35rem var(--wp--preset--spacing--md);
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon head"
		"icon body";
}

.bci-report-points .base-icon-badge {
	grid-area: icon;
}

/*
 * The title was a <b> before it was a heading, so it inherited body metrics.
 * theme.json gives headings a tighter line-height and negative tracking, which
 * silently pulled about 20px out of every section that uses this component.
 * Put the old metrics back: the markup changed to make the words editable, the
 * design did not.
 */
.bci-report-points__item h3,
.bci-report-points__item .bci-report-points__title {
	align-self: center;
	grid-area: head;
	letter-spacing: normal;
	line-height: var(--wp--custom--line-height--normal);
	margin-block: 0;
}

.bci-report-points__item p {
	grid-area: body;
	margin-block: 0;
}

/* --- Coverage ----------------------------------------------------------- */

.bci-areas {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	list-style: none;
}

.bci-areas__item {
	display: grid;
	gap: 0.35rem var(--wp--preset--spacing--md);
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon head"
		"icon body";
}

.bci-areas .base-icon-badge {
	grid-area: icon;
}

.bci-areas__item h3 {
	align-self: center;
	font-size: var(--wp--preset--font-size--md);
	grid-area: head;
	/* The old markup was a <b>, so it took body metrics, not heading metrics. */
	letter-spacing: normal;
	line-height: var(--wp--custom--line-height--normal);
	margin-block: 0;
}

/*
 * On the home page each region name links to its service area page. Underlined
 * on hover rather than always, so the row still reads as a heading first and a
 * link second.
 */
.bci-areas__item h3 a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.bci-areas__item h3 a:hover,
.bci-areas__item h3 a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.bci-areas__item p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	grid-area: body;
	margin-block: 0;
}

.bci-map {
	color: var(--wp--preset--color--primary);
	display: grid;
	gap: var(--wp--preset--spacing--md);
	justify-items: center;
}

.bci-map svg {
	block-size: auto;
	inline-size: min(100%, 22rem);
}

.bci-map__pins .is-hub {
	stroke-width: 2.6;
}

.bci-map__caption {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--sm);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
	padding: 0.5rem 1rem;
}

/* --- In the field ------------------------------------------------------- */

/*
 * Full bleed and flush: no section padding, no gaps between the pictures, no
 * rounded corners. The strip is a seam between two sections rather than a
 * section of its own, and any gap would have shown the page background through
 * it and given it a ground it is not supposed to have.
 *
 * The photographs are core/image blocks so they can be replaced from the
 * editor, which means this has to work against core/columns rather than a grid
 * of its own. Everything the layout depends on lives here - the 4:3 crop, the
 * caption over the bottom of the picture, how many sit across - so uploading a
 * portrait photograph, or one straight off a phone camera, cannot change the
 * shape of the strip.
 */
.bci-field {
	padding: 0;
}

.bci-field__grid {
	gap: 0;
	margin-block: 0;
}

.bci-field__item {
	position: relative;
}

.bci-field__photo {
	margin: 0;
}

/*
 * block-size: auto is load-bearing. WordPress writes width and height
 * attributes onto an uploaded image so the browser can reserve its space, and
 * an explicit height attribute beats aspect-ratio - without this a replaced
 * photograph would render at its own full height instead of the 4:3 crop.
 */
.bci-field__photo img {
	aspect-ratio: 4 / 3;
	block-size: auto;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/*
 * The caption sits on a gradient rather than a flat panel, so it stays readable
 * whatever the photograph does underneath it without boxing the picture in.
 */
.bci-field__caption {
	background-image: linear-gradient(to top, rgba(27, 27, 27, 0.88), rgba(27, 27, 27, 0.5) 55%, transparent);
	color: var(--wp--preset--color--text-inverse);
	display: grid;
	gap: 0.15rem;
	inset-block-end: 0;
	inset-inline: 0;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	position: absolute;
}

.bci-field__car {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	margin-block: 0;
}

.bci-field__meta {
	font-size: var(--wp--preset--font-size--xs);
	margin-block: 0;
	opacity: 0.85;
}

/*
 * Two across from tablet down. Core keeps four columns side by side to 782px
 * and only then stacks them flat, and four of these below about 900px are too
 * small to be photographs.
 */
@media (max-width: 899px) {
	.bci-field .bci-field__grid {
		flex-wrap: wrap !important;
	}

	.bci-field .bci-field__grid > .wp-block-column {
		flex-basis: 50% !important;
		flex-grow: 0;
	}
}

/*
 * One across on a phone. Two 195px tiles leave the caption wider than the
 * picture it sits on - the suburb and the finding wrapped onto three lines and
 * the row went ragged. Full width is also the right call for the section: it is
 * the only photographic evidence on the page and a thumbnail proves nothing.
 */
@media (max-width: 559px) {
	.bci-field .bci-field__grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Reviews ------------------------------------------------------------ */

.bci-score {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	/* Only the end margin: the start one is the section's block gap. */
	margin-block-end: 0;
}

/* .base-rating is display:flex, so as a flex item it would otherwise stretch. */
.bci-score .base-rating {
	flex: none;
	margin-block: 0;
}

.bci-score .bci-score__value {
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: normal;
	line-height: var(--wp--custom--line-height--normal);
	margin-block: 0;
}

.bci-score p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
}

.bci-reviews {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.bci-reviews__card {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	/* The attribution is pinned to the bottom so a short quote does not float it. */
	grid-template-rows: auto 1fr auto auto;
	margin: 0;
	padding: var(--wp--preset--spacing--xl);
}

.bci-reviews__card .base-rating {
	margin-block: 0;
}

.bci-reviews blockquote {
	border: 0;
	margin: 0;
	padding: 0;
}

.bci-reviews blockquote p {
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-height--normal);
	margin-block: 0;
}

/*
 * The quote marks belong on the paragraph, not the blockquote. Core's quote
 * block nests a paragraph inside, so generated content on the blockquote became
 * two block-level lines of its own - a stray quote mark above the text and
 * another below it, adding a line and a half to every card.
 */
.bci-reviews blockquote p::before {
	content: open-quote;
}

.bci-reviews blockquote p::after {
	content: close-quote;
}

/*
 * The attribution was a figcaption holding a name and a line of meta. It is now
 * a heading and a paragraph so both are editable, and the rule that separated
 * it from the quote moves onto the name.
 */
.bci-reviews__card .bci-reviews__name {
	border-block-start: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: normal;
	line-height: var(--wp--custom--line-height--normal);
	margin-block: 0;
	padding-block-start: var(--wp--preset--spacing--md);
}

.bci-reviews__card > p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
	margin-block: 0.1rem 0;
}

/* --- Why us ------------------------------------------------------------- */

.bci-reasons {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.bci-reasons__card {
	align-content: start;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	justify-items: start;
	padding: var(--wp--preset--spacing--xl);
}

.bci-reasons__card p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
}

/* --- Closing band ------------------------------------------------------- */

.bci-closing__actions > * {
	margin-block: 0;
}

.bci-closing__actions {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	justify-items: start;
}

.bci-closing__actions .wp-block-buttons {
	justify-content: flex-start;
}

@media (max-width: 781px) {
	.bci-closing .wp-block-button__link {
		display: block;
		text-align: center;
		width: 100%;
	}

	.bci-closing__actions,
	.bci-closing__actions .wp-block-buttons {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bci-checks__card {
		transition: none;
	}

	.bci-checks__card:hover {
		transform: none;
	}
}

/*
 * The honest note under the mobile page's kit card. Bordered rather than filled
 * so it reads as a caveat attached to the card above it rather than as another
 * claim competing with it.
 */
.bci-kit__honest {
	align-items: start;
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	margin-block-end: 0;
	padding: var(--wp--preset--spacing--md);
}

.bci-kit__honest p {
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
}

.bci-kit__honest .base-icon {
	block-size: 1.25rem;
	color: var(--wp--preset--color--primary);
	flex: none;
	inline-size: 1.25rem;
	margin-block-start: 0.1em;
}

/* ---------------------------------------------------------------------------
 * Blog
 * ------------------------------------------------------------------------ */

/*
 * The card style in blocks/post-template.css assumes a featured image, which
 * bleeds to the card's top edge and is why the card has no top padding. A post
 * without one put its category label hard against the border. :has() lets the
 * padding appear only on the cards that need it, so a mixed listing still looks
 * like one set of cards.
 */
.wp-block-post-template.is-style-cards > li:not(:has(> .wp-block-post-featured-image)) {
	padding-block-start: var(--wp--preset--spacing--xl);
}

/* The article's own head sits on mint, so its breadcrumb needs the room. */
.bci-article__head .base-breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--lg);
}

/* A lead-in image for the article, matching every other card on the site. */
.bci-article > .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/*
 * Category labels are metadata, not prose links. The theme underlines links by
 * default, which is right inside a paragraph and wrong on an eyebrow above a
 * heading - it read as though the label had been accidentally linked. The
 * underline comes back on hover, so it is still discoverable as a link.
 */
.wp-block-post-terms a,
.base-post-meta a {
	text-decoration: none;
}

.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible,
.base-post-meta a:hover,
.base-post-meta a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Legal pages
 *
 * Long prose at a 760px measure. The only thing these pages need beyond the
 * theme's defaults is a clearer gap before each numbered clause than between
 * the paragraphs inside one, so a reader scanning for a clause can find where
 * it starts. Without that, a page of even paragraphs is one grey wall.
 * ------------------------------------------------------------------------ */

.bci-legal h2 {
	margin-block-start: var(--wp--preset--spacing--xxl);
}

/* The lead is the summary, not the first clause; it keeps the smaller gap. */
.bci-legal .is-style-lead + h2 {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.bci-legal__updated {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	margin-block: 0 var(--wp--preset--spacing--lg);
	text-transform: uppercase;
}

/* A clause list is reference material, so it sits closer than body copy. */
.bci-legal .wp-block-list.is-style-checklist > li {
	margin-block-end: var(--wp--preset--spacing--sm);
}

/*
 * A one-line introduction between a card's title and its list, used by the
 * pricing page's "which package" cards. It sits at body size because it is
 * a sentence rather than an item, and takes the muted colour so the list under
 * it still reads as the substance of the card.
 *
 * Its margins are zeroed because .bci-checks__card is a grid: the gap between
 * children is the card's own, and a paragraph's default margin would add to it
 * and open a hole the other cards do not have.
 */
.bci-checks__lede {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
}

/*
 * The comparison table needs a ground of its own.
 *
 * blocks/table.css gives the header row the surface tint but leaves the body
 * transparent, which works on a white section and disappears on a mint one -
 * the cells took the band's colour and the table stopped reading as a card at
 * all. White body against the tinted header also puts the contrast back between
 * the header row and the rows under it.
 */
.wp-block-table.is-style-comparison table {
	background-color: var(--wp--preset--color--background);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* The hover tint has to differ from the body, not from the section. */
.has-surface-background-color .wp-block-table.is-style-comparison tbody tr:hover {
	background-color: var(--wp--preset--color--primary-soft);
}

/* ---------------------------------------------------------------------------
 * Booking
 *
 * The slot a third-party form embeds into. Almost nothing is styled inside it,
 * on purpose: the provider ships its own CSS and fighting it from here would
 * break the form every time they change a class name. The theme supplies the
 * box, the width and the space around it, and stays out of the rest.
 * ------------------------------------------------------------------------ */

.bci-booking__slot {
	scroll-margin-block-start: calc(var(--base-header-height) + var(--wp--preset--spacing--xl));
}

/*
 * Let the embed have the whole slot.
 *
 * The pattern used to constrain this group's children to 820px, which was the right
 * call when every embedded form was a single column. Brisbane's is two, so 820px left
 * the fields in a 394px column beside a 320px summary while the rest of the page ran
 * to 1200px.
 *
 * This rule is here as well as in the pattern because the pattern only affects new
 * insertions - the block markup for the existing page is already saved in the database,
 * still carrying the old width. WordPress generates its constraint as
 * `.wp-container-... > :where(...)`, and :where() contributes no specificity, so two
 * classes beat it comfortably.
 */
.bci-booking__slot > .bci-booking__embed {
	max-width: 100%;
}

/*
 * What shows until the booking script URL is set. A panel that offers a phone
 * number, not an apology - an unconfigured embed should read as a different way
 * to book rather than as a page that is broken.
 */
.bci-booking__fallback {
	background-color: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	justify-items: start;
	padding: var(--wp--preset--spacing--xxl);
}

.bci-booking__fallback h2 {
	font-size: var(--wp--preset--font-size--md);
	margin-block: 0;
}

.bci-booking__fallback p {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
	max-inline-size: 46ch;
}

.bci-booking__fallback .bci-contact {
	margin-block-end: 0;
}

.bci-booking__fallback .bci-contact a {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	/*
	 * The same guard the footer and the contact cards carry. The panel is a
	 * grid, so an unbreakable email address does not merely overflow its line -
	 * it sets the track width, widening the panel past the viewport at 320px.
	 */
	overflow-wrap: anywhere;
}

/* Colour only on hover, matching the contact cards and the footer. */
.bci-booking__fallback .bci-contact a:hover,
.bci-booking__fallback .bci-contact a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/*
 * Three across under the form, where the home page's version of this component
 * is a stacked column beside a picture.
 */
.bci-booking__assurance {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* --- Contact ------------------------------------------------------------ */

/*
 * The three direct-contact cards in the hero. White on the lime band so they
 * read as the answer rather than as more of the heading, and sized so the
 * phone number is the largest thing in each one.
 *
 * Only the end margin is reset. The start belongs to the hero block gap, and
 * the margin shorthand would zero that too, putting the cards hard against the
 * lead paragraph - the same way it did to the hero proof row and the coverage
 * list earlier in this file.
 */
.bci-contact-cards {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	list-style: none;
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}

.bci-contact-cards > li {
	align-content: start;
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--sm);
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	justify-items: start;
	padding: var(--wp--preset--spacing--xl);
}

.bci-contact-cards__label {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-block-start: var(--wp--preset--spacing--xs);
	text-transform: uppercase;
}

.bci-contact-cards b {
	font-size: var(--wp--preset--font-size--md);
}

/*
 * The email is the one value long enough to overflow its card, so it takes a
 * step down from the phone number - which is the card that should shout anyway.
 * break-word rather than anywhere: with the <wbr> after the @ the browser now
 * has a sensible place to break, and only falls back to breaking mid-word if
 * the address is longer than any card could hold.
 */
.bci-contact-cards li.is-email b {
	font-size: var(--wp--preset--font-size--base);
	overflow-wrap: break-word;
}

.bci-contact-cards a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

/*
 * Colour only. The underline made a phone number in a white card look like a
 * mistyped link, and the card is already the affordance - the whole thing is
 * one target for the eye, the same way the footer links change colour rather
 * than underlining.
 */
.bci-contact-cards a:hover,
.bci-contact-cards a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.bci-contact-cards__note {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* --- The inspector photograph ------------------------------------------- */

/*
 * The one photograph on the About page, beside the heading that asks who is
 * actually looking at your car. Same treatment as the hero picture - a real
 * core/image block behind a fixed crop - so the client can replace it without
 * the layout depending on what they upload.
 *
 * 3:2 landscape rather than the hero's portrait: it sits next to three short
 * lines of intro, and a tall crop here would push the credential cards below
 * it most of a screen further down for no gain.
 */
.bci-about__photo {
	margin: 0;
}

.bci-about__photo img {
	aspect-ratio: 3 / 2;
	/* Same reason as every other cropped image here - a height attribute on an
	   uploaded file beats aspect-ratio without it. */
	block-size: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* --- Service areas ------------------------------------------------------ */

/*
 * The photograph on a service area page, and the pin under it.
 *
 * A separate picture per page, so the four pages stop being one template with
 * the suburb name swapped - which is the thing every competitor's location
 * pages are, and the reason they read as filler.
 */
.bci-area__photo {
	margin: 0;
}

.bci-area__photo img {
	/*
	 * Landscape on a phone, where the picture runs the full width and a tall
	 * crop would just cost scrolling.
	 */
	aspect-ratio: 3 / 2;
	/* A height attribute on an upload beats aspect-ratio without this. */
	block-size: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--md);
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/*
 * Sits under the picture rather than floating on it: a caption over a
 * photograph nobody has taken yet could land on a face or a number plate.
 */
.bci-area__pin {
	align-items: center;
	background-color: var(--wp--preset--color--background);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--sm);
	color: var(--wp--preset--color--primary-dark);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.4rem;
	margin-block: var(--wp--preset--spacing--sm) 0;
	margin-inline: 0;
	padding: 0.4rem 0.85rem;
}

.bci-area__pin .base-icon {
	block-size: 1rem;
	color: var(--wp--preset--color--primary);
	inline-size: 1rem;
}

/*
 * Square once it sits beside the text rather than above it. The column of
 * points next to it runs close to 900px, and a landscape crop in a 42% column
 * came out 317px tall - small enough that the picture read as an afterthought
 * floating in the gap rather than as half the section.
 */
@media (min-width: 782px) {
	/*
	 * Portrait once the column is half the section rather than 42% of it. A
	 * square in a 548px column still left 300px of empty column below it; 4:5
	 * fills the height the text beside it actually occupies.
	 */
	.bci-area__photo img {
		aspect-ratio: 4 / 5;
	}
}

/*
 * The warnings the photograph displaced. A rule on the reading edge rather than
 * a card, because a second card in this column would compete with the points
 * above it - and these are a footnote to them, not a peer.
 */
.bci-area__note {
	border-inline-start: 2px solid var(--wp--preset--color--primary);
	margin-block-start: var(--wp--preset--spacing--lg);
	padding-inline-start: var(--wp--preset--spacing--md);
}

.bci-area__note-head {
	align-items: center;
	display: flex;
	gap: 0.45rem;
	margin-block-end: var(--wp--preset--spacing--xs);
}

.bci-area__note h3 {
	font-size: var(--wp--preset--font-size--sm);
	margin-block: 0;
}

.bci-area__note-head .base-icon {
	block-size: 1rem;
	color: var(--wp--preset--color--primary);
	inline-size: 1rem;
}

.bci-area__note ul {
	color: var(--wp--preset--color--text-muted);
	display: grid;
	font-size: var(--wp--preset--font-size--xs);
	gap: 0.3rem;
	margin-block: 0;
	padding-inline-start: var(--wp--preset--spacing--md);
}

/*
 * The suburb lists on the four service area pages. Three named groups rather
 * than one long run of names: eighteen suburbs in a single list reads as a
 * keyword dump and scans as nothing, where three groups of six can actually be
 * read by somebody looking for their own suburb.
 *
 * auto-fit rather than a fixed three, so the groups stack at one column on a
 * phone and sit in a row on a laptop with no breakpoint of their own.
 */
.bci-suburbs {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	/* Only the end margin. The start belongs to the section block gap. */
	margin-block-end: 0;
	margin-inline: 0;
}

.bci-suburbs__group {
	align-content: start;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
}

/*
 * The icon-and-heading rows created by the conversion are flex with nowrap, so
 * their text has to be told it may shrink - a flex item defaults to min-width:
 * auto and refuses to wrap, which pushed "Bayside and Moreton Bay" 4px past the
 * viewport at 320px.
 */
.bci-suburbs__head > *,
.bci-area__note-head > *,
.bci-hero__eyebrow > *,
.bci-hero__proof__item > * {
	min-inline-size: 0;
}

/* The icon is a sibling of the heading now, so the row holds them together. */
.bci-suburbs__head {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--sm);
}

.bci-suburbs__group h3 {
	font-size: var(--wp--preset--font-size--md);
	margin-block: 0;
}

/*
 * The suburb names themselves. Chips rather than a bulleted list because the
 * eye is scanning for one word, not reading a sentence, and a chip gives that
 * word an edge to catch on.
 */
.bci-suburbs__group ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin-block: 0;
	padding: 0;
}

.bci-suburbs__group li {
	background-color: var(--wp--preset--color--background);
	/* Matches .bci-report__chip - the site already has one chip shape. */
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.35rem 0.85rem;
	white-space: nowrap;
}

/*
 * The row that links the other three area pages. A visitor who arrived here
 * searching for the wrong suburb should not have to go back to the menu.
 */
.bci-suburbs__nearby {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-block-end: 0;
	margin-inline: 0;
	text-align: center;
}

.bci-suburbs__nearby a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	margin-inline-start: var(--wp--preset--spacing--xs);
	text-decoration: none;
	transition: color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
	white-space: nowrap;
}

.bci-suburbs__nearby a:hover,
.bci-suburbs__nearby a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* --- Post cards --------------------------------------------------------- */

/*
 * The card was 663px tall for four short lines of text, and the reason was not
 * the gap - it was that flex adds adjacent margins to it rather than collapsing
 * them, the way normal flow would. The title carried 20px of its own margin top
 * and bottom and the excerpt 24px, so a 16px gap rendered as 36px under the
 * category, 60px under the title and 91px above the date.
 *
 * Zeroing the children's margins leaves the gap as the only thing setting the
 * rhythm, which is what a flex container is for. The date keeps its auto start
 * margin: that is what pins it to the bottom edge so dates line up across a row
 * of cards of different lengths.
 *
 * Scoped under .wp-block-query so it outranks blocks/post-template.css, which
 * is master Base Theme's file and stays byte-identical to it.
 */
.wp-block-query .wp-block-post-template.is-style-cards > li > * {
	margin-block: 0;
}

.wp-block-query .wp-block-post-template.is-style-cards > li > .wp-block-post-date {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--md);
}

/* Matches the tightening applied to every other card on the site. */
.wp-block-query .wp-block-post-template.is-style-cards > li {
	gap: var(--wp--preset--spacing--sm);
	padding-block-end: var(--wp--preset--spacing--lg);
}

/*
 * The image is the one child that keeps a little air under it: it runs to the
 * card edge, so without it the category label sits tight against a hard edge
 * rather than against white space.
 */
.wp-block-query .wp-block-post-template.is-style-cards > li > .wp-block-post-featured-image {
	margin-block-end: var(--wp--preset--spacing--xs);
}

/*
 * Hover lifts and shadows, and that is all. The border also turned green, which
 * on a grid of three put a hard coloured outline around one card and made the
 * other two look switched off. Shadow and movement say "this is the one" without
 * redrawing the card's edge.
 */
.wp-block-query .wp-block-post-template.is-style-cards > li:hover {
	border-color: var(--wp--preset--color--border);
}

/*
 * A card is one link target. Underlining the title on hover marked out the
 * words when the whole card is already lifting, which read as two hover states
 * for one thing. The colour change stays.
 */
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	text-decoration: none;
}

/*
 * The previous/next link is a post title too, and it sits directly under the
 * share row, so leaving it underlined put two treatments of the same thing
 * within a few pixels of each other. Colour carries the hover, as it now does
 * on every other post title on the site.
 */
.wp-block-post-navigation-link a {
	text-decoration: none;
}

.wp-block-post-navigation-link a:hover,
.wp-block-post-navigation-link a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* --- Tags and sharing --------------------------------------------------- */

/*
 * Both rows sit under the article at the same 760px measure as the prose, and
 * both are a label plus a wrapping list, so they share a shape and read as one
 * band of article furniture rather than two widgets.
 */
.bci-tags,
.bci-share {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.bci-tags__label,
.bci-share__label {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bci-tags__list,
.bci-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin-block: 0;
	padding: 0;
}

/* Tag chips, the same shape as the suburb chips on the service area pages. */
.bci-tags__list a {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary-dark);
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.35rem 0.85rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.bci-tags__list a:hover,
.bci-tags__list a:focus-visible {
	background-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/*
 * Share buttons borrow .bci-social's circle from the footer rather than
 * inventing a second icon button, but sit on a light background so they take
 * the bordered treatment instead of the inverted one.
 */
.bci-share__link {
	align-items: center;
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	block-size: 2.5rem;
	color: var(--wp--preset--color--primary-dark);
	display: inline-flex;
	inline-size: 2.5rem;
	justify-content: center;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		border-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.bci-share__link svg {
	block-size: 1.125rem;
	inline-size: 1.125rem;
}

.bci-share__link:hover,
.bci-share__link:focus-visible {
	background-color: var(--wp--preset--color--lime);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/* --- The contact form --------------------------------------------------- */

/*
 * assets/css/forms.css already styles form fields by element selector, which is
 * the right way round: any plugin gets the site's look without knowing about
 * the theme. WPForms then ships its own stylesheet at a higher specificity and
 * wins, which is why the form arrived with a blue button and 3px corners.
 *
 * Rather than fight that with ever-longer selectors, this maps WPForms' own
 * custom properties onto the theme's tokens. It is the integration point the
 * modern renderer is built around, so it holds whatever "Include Form Styling"
 * is set to in WPForms settings, and it survives their updates.
 */
.wpforms-container {
	--wpforms-field-background-color: var(--wp--preset--color--background);
	--wpforms-field-border-color: var(--wp--preset--color--border-strong);
	--wpforms-field-border-radius: var(--wp--custom--radius--md);
	--wpforms-field-border-size: 1px;
	--wpforms-field-text-color: var(--wp--preset--color--text);
	--wpforms-field-menu-color: var(--wp--preset--color--background);
	--wpforms-field-size-font-size: var(--wp--preset--font-size--base);
	--wpforms-field-size-input-height: 3rem;
	/*
	 * This is the gap between a label and its own field, not between fields.
	 * At lg it pushed every label 24px off the box it names, so the form read
	 * as sixteen loose things rather than eight pairs. 0.4rem is what
	 * assets/css/forms.css gives labels everywhere else on the site.
	 */
	--wpforms-field-size-input-spacing: 0.4rem;
	--wpforms-field-size-line-height: 1.5;
	--wpforms-field-size-padding-h: 1rem;
	--wpforms-field-size-checkbox-size: 1.05rem;

	--wpforms-label-color: var(--wp--preset--color--text);
	--wpforms-label-error-color: var(--wp--preset--color--error);
	--wpforms-label-sublabel-color: var(--wp--preset--color--text-muted);
	--wpforms-label-size-font-size: var(--wp--preset--font-size--sm);
	--wpforms-label-size-line-height: 1.4;
	--wpforms-label-size-sublabel-font-size: var(--wp--preset--font-size--xs);

	/* Matches the site's own buttons: 49px tall, same radius, same green. */
	--wpforms-button-background-color: var(--wp--preset--color--primary);
	--wpforms-button-border-color: var(--wp--preset--color--primary);
	--wpforms-button-border-radius: var(--wp--custom--radius--md);
	--wpforms-button-size-font-size: var(--wp--preset--font-size--sm);
	--wpforms-button-size-height: 3.0625rem;
	--wpforms-button-size-margin-top: var(--wp--preset--spacing--sm);
	--wpforms-button-size-padding-h: var(--wp--preset--spacing--lg);
	--wpforms-button-text-color: var(--wp--preset--color--text-inverse);

	--wpforms-page-break-color: var(--wp--preset--color--primary);

	margin-block: 0;
}

/*
 * The variables do not cover weight, and WPForms sets 700 from a three-class
 * selector - heavier than every other label on the site, which sit at 600.
 */
/*
 * The gap between one field and the next. WPForms pads each field 15px, which
 * looked even while the labels sat 24px off their inputs. With the labels
 * pulled in tight the gap between groups has to be clearly bigger than the gap
 * inside one, or the pairs stop reading as pairs.
 */
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field {
	padding-block: 0 var(--wp--preset--spacing--md);
}

.wpforms-container .wpforms-form .wpforms-field-label {
	font-weight: 600;
}

/*
 * The asterisk is decoration - the required attribute is what a screen reader
 * announces - so it is quiet rather than alarming.
 */
.wpforms-container .wpforms-required-label {
	color: var(--wp--preset--color--error);
	text-decoration: none;
}

/* The same focus ring the rest of the site's fields use. */
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	outline: none;
}

.wpforms-container .wpforms-form textarea {
	min-block-size: 8rem;
	padding-block: 0.75rem;
	resize: vertical;
}

.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* Buttons on this site darken on hover; WPForms exposes no variable for it. */
.wpforms-container .wpforms-form button[type="submit"] {
	font-weight: 600;
	transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form button[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

/* The consent checkbox sits beside its text rather than above it. */
.wpforms-container .wpforms-field-checkbox label {
	font-weight: 400;
}

/*
 * What people see after they send. The default is an unstyled paragraph on a
 * pale green slab, which reads as a system notice rather than as an answer -
 * so it takes the same shape as the cards above it, with the tick badge the
 * rest of the site uses.
 */
.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full {
	/* Two classes to outrank WPForms' div.wpforms-container-full descendant rule. */
	background-color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--text);
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: auto 1fr;
	margin-block: 0;
	padding: var(--wp--preset--spacing--xl);
}

.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full::before {
	background-color: var(--wp--preset--color--background);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006a43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.35rem;
	block-size: 2.75rem;
	border-radius: var(--wp--custom--radius--md);
	content: "";
	inline-size: 2.75rem;
}

.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full p {
	align-self: center;
	font-size: var(--wp--preset--font-size--base);
	margin-block: 0;
	max-inline-size: 52ch;
}

.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full p + p {
	margin-block-start: var(--wp--preset--spacing--sm);
}

@media (max-width: 559px) {
	/* At this width the badge costs more than it says. */
	.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full {
		grid-template-columns: 1fr;
		padding: var(--wp--preset--spacing--lg);
	}
}