/* Block-theme glue. Kept small: anything visual comes from the harvested files. */

/* Template-part wrappers must not create a box: the header is position: sticky
   against the page, and a wrapper would end its sticky range at the header's own height. */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

/* Live snippet #15 (inline style set in JS): less footer top padding when the footer carries the contact form, at <= 991px. */
@media (max-width: 991px) {
	#brx-footer:has(.section-contact) .footer { padding-top: calc(var(--space-l) - var(--space-xs)); }
}

/* Live snippet #8 (printed by WP Extended, as a Perfmatters data: script, on service-category
   archives, service pages, and the contact, divisions and services pages): after the visitor's first
   interaction it set the page intro's bottom padding to var(--space-m) whenever the page has a services
   grid, an overlap video or a location info section. Each page has at most one .section-video;
   !important stands in for the inline style's precedence. (Snippet #9 only repeats this on the same
   pages, and its margin reset is already the default.) */
body:is(.tax-service-category, .single-service, .page-id-1393, .page-id-6357, .page-id-795):has(.services-block, .block-overlap-video, .section-location-info) .section-video { padding-bottom: var(--space-m) !important; }

/* Blog page links (added 2026-10-07; live had none). Bricks' pagination base, site tokens.
   WordPress puts class "page-numbers" on the <ul> too, so the link styles target li > .page-numbers. */
.blog-pagination { grid-column: 1 / -1; margin-block-start: var(--space-l); }
.blog-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; list-style: none; margin: 0; padding: 0; border: 0; }
.blog-pagination li > .page-numbers { display: grid; place-items: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: var(--space-xs); border: 2px solid var(--action); border-radius: var(--radius-s); color: var(--action); font-weight: 600; text-decoration: none; }
.blog-pagination li > a.page-numbers:hover { background-color: var(--action); color: var(--white); }
.blog-pagination li > a.page-numbers:focus-visible { outline: var(--focus-width, 2px) solid var(--focus-color, currentColor); outline-offset: var(--focus-offset, 2px); }
.blog-pagination li > .current { background-color: var(--action); color: var(--white); }
.blog-pagination li > .dots { border-color: transparent; color: var(--base); }

/* Fluent Forms errors in the Super Save red (Stacey, 2026-10-07): the plugin colours every error state
   (message text, field borders, checkbox labels) from --fluentform-danger. Messages are bold. */
.fluentform { --fluentform-danger: var(--primary); }
.fluentform .text-danger, .fluentform .ff-errors-in-stack .error { font-weight: 700; }
.fluentform .ff-el-is-error select, .fluentform .ff-el-is-error .choices__inner { border-color: var(--fluentform-danger); }

/* Megamenu arrow: centred on the menu item that opened it (header.js measures it into
   --megamenu-arrow-left); the old per-menu percentages remain only as a fallback. */
.megamenu::after { left: var(--megamenu-arrow-left, 50.6%); }
.megamenu__divisions::after { left: var(--megamenu-arrow-left, 44.2%); }
.megamenu__locations::after { left: var(--megamenu-arrow-left, 57.4%); }

/* Gas station filters: the active (filled) button had 0.125rem more padding than the outlined ones, so
   it stood 4px taller and the row shifted when the filter changed. Same size for all (Stacey, 2026-10-07). */
.gas-stations__location__button-filter.btn--action:not(.btn--outline) { padding: var(--btn-padding-block) var(--btn-padding-inline); }

/* Quote bar: the whole bar is the tap target, not just the "Get a Free Quote" text and arrow. The bar's
   padding sits on the section around the button (and differs per breakpoint), so the button's hit area is
   stretched well past it and the section (overflow: auto) clips it to the bar's edge. While open it stops
   at the button's bottom edge, so it never covers the top of the form. */
.popup-quote__accordion__title-wrapper {
	position: relative;
}
.popup-quote__accordion__title-wrapper::before {
	content: "";
	position: absolute;
	inset: -3rem;
}
.popup-quote__accordion__title-wrapper[aria-expanded="true"]::before {
	bottom: 0;
}