/* ==========================================================================
   WordPress content styles.

   The approved design covers the marketing pages only. It has no styles for
   long-form prose, a blog listing, comments, widgets, pagination, or the
   footer additions this theme introduces. Everything below fills those gaps
   using the same tokens the design already declares, so a blog post and a
   service page look like they belong to one site.

   Nothing here overrides a design rule. It only styles selectors the design
   never used.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Prose: the container for anything written in the WordPress editor.
   -------------------------------------------------------------------------- */

.prose {
	max-width: 74ch;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink);
}

.prose > * + * {
	margin-top: 1.15em;
}

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--font-display);
	color: var(--brand-blue-dark);
	line-height: 1.22;
	letter-spacing: -.01em;
}

.prose h2 {
	margin-top: 2.2em;
	font-size: clamp(1.55rem, 3vw, 2rem);
}

.prose h3 {
	margin-top: 1.9em;
	font-size: clamp(1.25rem, 2.2vw, 1.45rem);
}

.prose h4 {
	margin-top: 1.7em;
	font-size: 1.1rem;
}

.prose h2:first-child,
.prose h3:first-child {
	margin-top: 0;
}

.prose a {
	color: var(--brand-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var(--brand-blue-dark);
}

.prose ul,
.prose ol {
	padding-left: 1.35em;
}

.prose li + li {
	margin-top: .4em;
}

.prose li::marker {
	color: var(--brand-blue);
}

.prose img,
.prose figure img {
	border-radius: var(--radius-media);
}

.prose figure {
	margin: 2em 0;
}

.prose blockquote {
	margin: 2em 0;
	padding: 1.1em 1.4em;
	border-left: 4px solid var(--brand-yellow);
	border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
	background: var(--paper-2);
	font-size: 1.08em;
	color: var(--brand-blue-dark);
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

.prose code {
	padding: .15em .4em;
	border-radius: 5px;
	background: var(--surface);
	font-size: .92em;
}

.prose pre {
	padding: 1.1em 1.3em;
	border-radius: var(--radius-card);
	background: var(--brand-blue-deep);
	color: #fff;
	overflow-x: auto;
}

.prose pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.prose hr {
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/* Tables scroll rather than forcing the page sideways. */
.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .96em;
}

.prose :is(td, th) {
	padding: .7em .9em;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.prose th {
	font-family: var(--font-display);
	color: var(--brand-blue-dark);
}

/* --------------------------------------------------------------------------
   Blog listing.
   -------------------------------------------------------------------------- */

.postgrid {
	display: grid;
	gap: var(--s4);
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.postcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--glass-bg-strong);
	border: 1px solid var(--glass-brd);
	box-shadow: var(--shadow-sm);
	transition: transform .28s ease, box-shadow .28s ease;
}

.postcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.postcard__media {
	display: block;
	height: var(--card-media-h, 210px);
	overflow: hidden;
	background: var(--surface);
}

.postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.postcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .6rem;
	padding: 1.4rem 1.5rem 1.6rem;
}

.postcard__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.3;
}

.postcard__title a {
	color: var(--brand-blue-dark);
	text-decoration: none;
}

.postcard__title a:hover {
	color: var(--brand-blue);
}

.postcard__body p {
	margin: 0;
	color: var(--muted);
	font-size: .96rem;
}

.postcard .arrowlink {
	margin-top: auto;
}

.post__meta {
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.post__tags {
	margin-top: 2.4rem;
	font-size: .9rem;
	color: var(--muted);
}

.post__tags a {
	display: inline-block;
	margin: 0 .3em .4em 0;
	padding: .25em .7em;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--brand-blue);
	text-decoration: none;
}

.post__tags a:hover {
	border-color: var(--brand-blue);
	background: var(--paper-2);
}

.post__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-weight: 600;
}

.post__nav a {
	color: var(--brand-blue);
	text-decoration: none;
}

.post__nav a:hover {
	color: var(--brand-blue-dark);
}

.post__next {
	margin-left: auto;
	text-align: right;
}

/* --------------------------------------------------------------------------
   Pagination.
   -------------------------------------------------------------------------- */

.pager {
	margin-top: 3rem;
}

.pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem;
}

.pager :is(.page-numbers) {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .7em;
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	background: var(--paper-2);
	color: var(--brand-blue-dark);
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.pager a.page-numbers:hover {
	border-color: var(--brand-blue);
	color: var(--brand-blue);
}

.pager .page-numbers.current {
	border-color: var(--brand-blue-dark);
	background: var(--brand-blue-dark);
	color: #fff;
}

.pager .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.pager svg {
	width: 18px;
	height: 18px;
}

.pager--inline {
	margin-top: 1.6rem;
	font-family: var(--font-display);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Search form.
   -------------------------------------------------------------------------- */

.searchform {
	display: flex;
	gap: .6rem;
	align-items: flex-end;
	flex-wrap: wrap;
}

.searchform .field {
	flex: 1 1 220px;
	margin: 0;
}

.searchform .btn {
	flex: 0 0 auto;
}

/*
 * The search block on the 404 and search pages.
 *
 * Left to itself the form stretched the width of the container and sat alone
 * in a very tall empty band, which read as a broken section rather than an
 * offer to help. It is boxed, capped and given a heading instead.
 */
.mbjs-findit {
	padding-block: var(--s7);
}

.mbjs-findit__inner {
	max-width: 620px;
	margin-inline: auto;
	padding: 2rem 1.8rem 2.2rem;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper-2);
	box-shadow: var(--shadow-sm);
}

.mbjs-findit h2 {
	margin: 0 0 .5rem;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	color: var(--brand-blue-dark);
}

.mbjs-findit .subhead {
	margin: 0 0 1.4rem;
}

.mbjs-findit .searchform {
	align-items: stretch;
}

@media (max-width: 520px) {

	.mbjs-findit .searchform {
		flex-direction: column;
	}

	/*
	 * The row layout gives the field "flex: 1 1 220px". Once the container
	 * turns into a column, that 220px basis stops being a width and becomes a
	 * height, which inflated the input to the size of a text area. The basis
	 * has to be dropped along with the direction.
	 */
	.mbjs-findit .searchform .field {
		flex: 0 0 auto;
		width: 100%;
	}

	.mbjs-findit .searchform .btn {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Comments.
   -------------------------------------------------------------------------- */

.comments {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.comments__title {
	font-family: var(--font-display);
	color: var(--brand-blue-dark);
}

.comment-list {
	margin: 2rem 0 0;
}

.comment-body {
	padding: 1.2rem 1.4rem;
	margin-bottom: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--paper-2);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--brand-blue-dark);
}

.comment-author img {
	border-radius: 50%;
}

.comment-meta {
	font-size: .82rem;
	color: var(--muted);
}

.comment-metadata a {
	color: var(--muted);
}

.comment-respond {
	margin-top: 2.5rem;
}

.comment-reply-title {
	font-family: var(--font-display);
	color: var(--brand-blue-dark);
}

.comment-form {
	display: grid;
	gap: 1rem;
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: .8em 1em;
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	background: var(--paper-2);
	font: inherit;
	color: var(--ink);
}

.comment-form :is(input, textarea):focus-visible {
	outline: 2px solid var(--brand-blue);
	outline-offset: 1px;
	border-color: var(--brand-blue);
}

.comment-form label {
	display: block;
	margin-bottom: .3em;
	font-size: .88rem;
	font-weight: 600;
	color: var(--muted);
}

.comment-form .submit {
	justify-self: start;
	padding: .8em 1.6em;
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--brand-yellow);
	color: var(--brand-blue-deep);
	font-family: var(--font-display);
	font-weight: 800;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--brand-yellow-dark);
}

.no-comments {
	color: var(--muted);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Additions this theme makes to the footer.
   -------------------------------------------------------------------------- */

.foot__mail {
	display: inline-block;
	margin-top: .5rem;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	word-break: break-all;
}

.foot__mail:hover {
	color: var(--brand-yellow);
}

.foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.foot__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: rgba(255, 255, 255, .82);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.foot__social a:hover {
	border-color: var(--brand-yellow);
	background: var(--brand-yellow);
	color: var(--brand-blue-deep);
}

.foot__social svg {
	width: 18px;
	height: 18px;
}

.foot__utility {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot__utility a {
	color: rgba(255, 255, 255, .7);
	font-size: .88rem;
	text-decoration: none;
}

.foot__utility a:hover {
	color: var(--brand-yellow);
}

/* --------------------------------------------------------------------------
   Small additions used by the theme's own markup.
   -------------------------------------------------------------------------- */

/* A plain drop-down for a menu item that has children but is not a mega panel. */
.nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 220px;
	margin: 0;
	padding: .5rem;
	list-style: none;
	border: 1px solid var(--glass-brd);
	border-radius: var(--radius-card);
	background: var(--paper-2);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav__sub a {
	display: block;
	padding: .5em .8em;
	border-radius: 8px;
	color: var(--brand-blue-dark);
	text-decoration: none;
	white-space: nowrap;
}

.nav__sub a:hover {
	background: var(--surface);
	color: var(--brand-blue);
}

/* The dumpster section's button sits in its own paragraph. */
.dump__cta {
	margin-top: 1.8rem;
}

/* Alignment classes inside prose. */
.prose .alignwide {
	max-width: min(1100px, 92vw);
	margin-inline: calc(50% - min(550px, 46vw));
}

.prose .alignfull {
	max-width: none;
	margin-inline: calc(50% - 46vw);
	width: 92vw;
}

/* --------------------------------------------------------------------------
   Breadcrumbs.

   The design styles its own inline trail with .crumbs, so everything here is
   scoped to .crumbs--theme and cannot reach into it. This
   theme wraps them in a <nav><div class="wrap"><ol><li> instead, because an
   ordered list is what a breadcrumb actually is and it matches the
   BreadcrumbList structured data. The design's rules land on the wrong
   elements as a result, so the list is styled properly here: without this the
   trail renders as a browser-default numbered list.
   -------------------------------------------------------------------------- */

.crumbs--theme {
	display: block;
	padding-block: 1rem;
	border-bottom: 1px solid var(--line);
	background: var(--paper-2);
}

.crumbs--theme .wrap {
	display: block;
}

.crumbs--theme ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .88rem;
	color: var(--muted);
}

.crumbs--theme li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.crumbs--theme li::marker {
	content: none;
}

.crumbs--theme a {
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
	text-decoration: none;
	font-weight: 600;
	color: var(--brand-blue);
}

.crumbs--theme a:hover {
	color: var(--brand-blue-dark);
	text-decoration: underline;
}

.crumbs--theme .crumbs__sep {
	width: 12px;
	height: 12px;
	flex: none;
	color: #9FB2C4;

	/* The sprite's chevron points down; a breadcrumb separator points right. */
	transform: rotate(-90deg);
}

.crumbs--theme [aria-current] {
	font-weight: 600;
	color: var(--ink);
}

/* A dark section directly beneath needs the divider to disappear. */
.crumbs--theme + .phero {
	border-top: 0;
}

/* --------------------------------------------------------------------------
   Price colour on the service cards.

   The design asks for brand blue on .scard__price, but .scard p sets muted
   grey and, being one class plus one element, outranks it. The prices on the
   service-area pages therefore rendered grey while the same prices in the
   .pcard blocks rendered blue. Restoring the intended colour with enough
   specificity makes every published price on the site match.
   -------------------------------------------------------------------------- */

.scard .scard__price {
	color: var(--brand-blue);
}

.scard .scard__price small {
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   The dumpster feature photo.

   Two problems, both visible only once the client's real photo went in. The
   photo carries their logo as a watermark in the top-left corner, and a 4:3
   box cropping a 3:2 photo takes roughly 38 pixels off each side, which cut
   the watermark in half. Anchoring the crop to the left edge protects it.

   The figure was also centred against a taller column, so it sat 70 pixels
   below the heading it belongs to. Aligning it to the top of the row lines it
   up with the copy.
   -------------------------------------------------------------------------- */

.dump__grid {
	align-items: start;
}

.dump__figure img,
.eco__figure img,
.local__figure img {
	object-position: left center;
}

/* --------------------------------------------------------------------------
   The photo in the Why Us heading column.

   That column holds an eyebrow, a heading, one sentence and a rule, while the
   column beside it holds four cards and a call to action. On a wide screen the
   difference left a tall empty rectangle. The photo fills it and stays out of
   the way on narrow screens, where the columns stack and there is no gap to
   fill in the first place.
   -------------------------------------------------------------------------- */

.why__figure {
	display: none;
	margin-top: var(--s5);
	border-radius: var(--radius-media);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
}

.why__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

@media (min-width: 1000px) {

	.why__figure {
		display: block;
	}

	/*
	 * The column is sticky, so it must not stretch to the height of the cards
	 * beside it. Sizing it to its own content is what lets the photo sit
	 * directly under the rule rather than floating in the middle of a gap.
	 */
	.why__sticky {
		align-self: start;
	}
}

/* --------------------------------------------------------------------------
   The scrolling trust bar on hover.

   A later rule in the design's shared hover block turns the label
   --brand-blue-dark. That block was written for the light sections; the trust
   bar's background is that exact colour, so hovering made the text vanish
   against it. White is what the bar's own rule asks for.
   -------------------------------------------------------------------------- */

.trust li:hover,
.trust li:focus-within {
	color: #fff;
}

.trust li:hover svg,
.trust li:focus-within svg {
	color: var(--brand-yellow);
}

/* --------------------------------------------------------------------------
   Graceful degradation when a photo has not been uploaded yet.

   The original design assumed every image slot was filled. A real site is
   filled in over days, so each of these rules keeps the page looking finished
   in the meantime rather than leaving half a row empty.
   -------------------------------------------------------------------------- */

/* Any two-column band with no photo becomes one column. */
.dump__grid.mbjs-nomedia,
.eco__grid.mbjs-nomedia,
.local__grid.mbjs-nomedia {
	grid-template-columns: 1fr;
}

/*
 * The badge is absolutely positioned so it can float over the bottom corner
 * of the photo. With no photo the media column has no height, so the badge
 * fell out of the layout and landed on top of the call-to-action button,
 * covering its label. Putting it back into normal flow fixes that, and it
 * then reads as a small credential under the copy.
 */
.local__grid.mbjs-nomedia .local__media {
	display: flex;
	justify-content: flex-start;
	position: static;
}

.local__grid.mbjs-nomedia .local__stat {
	position: static;
	margin: 0;
	align-self: flex-start;
}

/* On the flipped variant the media column would otherwise sit above the
   heading, which puts a stray badge before the section even starts. */
.local__grid.mbjs-nomedia .local__media {
	order: 2;
}

.local__grid.mbjs-nomedia .local__copy {
	order: 1;
}

/* With no hero photo the copy runs the full width of the container. */
.hero--nomedia .hero__grid {
	grid-template-columns: 1fr;
}

.hero--nomedia .hero__copy {
	max-width: 46rem;
}

/*
 * A service card with no photo. The badge moves into the body and is pinned
 * to the top corner, so the card that has one does not sit a line lower than
 * the cards beside it.
 */
.scard--nomedia {
	position: relative;
}

.scard__badge--inline {
	position: absolute;
	top: 1.1rem;

	/*
	 * The design's base rule pins the badge with left:14px. Setting only
	 * "right" here left both edges anchored, which stretched the badge across
	 * the whole card and dropped it on top of the service icon. Clearing left
	 * is what lets it size to its own text.
	 */
	left: auto;
	right: 1.1rem;
	z-index: 2;
}

/* Keep the heading clear of the badge on a narrow card. */
.scard--nomedia .scard__body {
	padding-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   The top utility bar on small screens.

   The design was drawn at desktop width and never handled this bar narrowing.
   Left alone, the phone number wraps onto three lines on a 390px phone, which
   is exactly the element that must stay readable and tappable.
   -------------------------------------------------------------------------- */

.util-phone {
	white-space: nowrap;
	min-height: 26px;
	padding-block: 2px;
}

@media (max-width: 640px) {

	/* Keep the bar to one line: the trust word, then the number. */
	.util-bar .wrap {
		gap: .6rem;
		justify-content: space-between;
	}

	.util-bar p {
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/*
	 * The long sentence and its bullet are dropped rather than squeezed. The
	 * bold lead carries the message on its own at this width.
	 */
	.util-bar .dot,
	.util-bar p > span[data-live="header_utilbar_text"] {
		display: none;
	}

	.util-bar {
		font-size: .8rem;
	}
}

/* --------------------------------------------------------------------------
   The brand when no logo has been uploaded.

   The design hides the wordmark on desktop because the logo image already
   carries the name. Without a logo that leaves the header with no brand at
   all, so the text is put back. WordPress adds .wp-custom-logo to <body> only
   when a logo is set, which makes this a clean one-line condition.
   -------------------------------------------------------------------------- */

body:not(.wp-custom-logo) .brand__txt {
	display: block;
}

body:not(.wp-custom-logo) .navbar .brand__txt {
	display: block;
}

body:not(.wp-custom-logo) .brand {
	min-height: 44px;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Target size.

   WCAG 2.2 asks for a 24 by 24 pixel minimum on anything you have to hit. The
   slider dots are drawn small on purpose, so the dot keeps its size and an
   invisible padded area around it does the catching.
   -------------------------------------------------------------------------- */

.slider__dot {
	position: relative;
}

.slider__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
}

/*
 * The dots row is only a few pixels tall, so the invisible hit areas would be
 * clipped by the row itself and by the gap between dots. Giving the row real
 * height and spacing the dots apart lets each hit area exist in full without
 * overlapping its neighbour.
 */
.slider__dots {
	min-height: 32px;
	gap: .75rem;
}

/* Give stacked link lists enough vertical room to be tapped apart. */
.foot__col li > a,
.foot__areas li > a {
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
}

/* --------------------------------------------------------------------------
   Print. A visitor printing a quote page should get the phone number, not the
   navigation and not a dark footer that empties a toner cartridge.
   -------------------------------------------------------------------------- */

@media print {

	.util-bar,
	.masthead,
	.drawer,
	.dock,
	.totop,
	.site-footer,
	.trust,
	.final,
	.qband,
	.crumbs {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.section {
		padding: 0 0 1cm;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		word-break: break-all;
	}
}

/* --------------------------------------------------------------------------
   Footer brand contrast.

   The wordmark's second line uses the muted grey meant for light sections.
   On the navy footer that falls below a readable contrast ratio, so it is
   re-stated here for the dark ground only.
   -------------------------------------------------------------------------- */

.site-footer .brand__txt strong {
	color: #fff;
}

.site-footer .brand__txt span {
	color: rgba(255, 255, 255, .72);
}

/* The play triangle sits on the icon's own circle, so it has to invert when
   that circle turns yellow on hover. */
.foot__social a:hover svg,
.foot__social a:focus-visible svg {
	color: var(--brand-blue-deep);
}