/**
 * DigitaVision base layer, loaded after Astra and Astra Pro: colour scheme,
 * canvas and ink, typography, links, focus, selection, Astra's buttons, the
 * header, drawer and footer, the 404 page and its search form, the page shell,
 * media and reduced motion. The styleguide page's rules are in styleguide.css.
 *
 * Astra prints its element styles inline with selectors such as
 * `.ast-separate-container`, `.entry-content :where(h2)` and `button:hover`.
 * Where a rule here must beat one of them it repeats Astra's selector and
 * wins on load order. !important is reserved for the focus ring and the
 * reduced-motion overrides.
 */

/* Colour scheme ------------------------------------------------------------ */

/* Native controls and scrollbars follow the active theme; without JavaScript (no data-theme), the OS. */
html {
	color-scheme: light dark;
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* Canvas and ink ------------------------------------------------------------ */

/* Astra's boxed layouts paint the body (.ast-separate-container) with palette slot 5. */
body,
body.ast-separate-container {
	background: var(--dv-bg-canvas);
}

body {
	color: var(--dv-ink);
	font-family: var(--dv-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button,
input,
optgroup,
select,
textarea {
	font-family: var(--dv-font-body);
}

/* Inter ships 400/500/600; keep bold text on the 600 face instead of a synthesised 700. */
b,
strong {
	font-weight: 600;
}

code,
kbd,
pre,
samp {
	font-family: var(--dv-font-mono);
}

/* Headings ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-content :where(h1, h2, h3, h4, h5, h6) {
	color: var(--dv-ink);
	font-family: var(--dv-font-display);
	font-weight: 600;
	letter-spacing: var(--dv-tracking-display);
	text-wrap: balance;
}

/*
 * Display tracking at full strength from h1 up; it eases off as headings get
 * smaller (the Bricolage files are its tightly spaced 96pt optical size) and is
 * neutral from h4 down. Sizes are spec 6.3: 36/24/18 px.
 */
h1,
.entry-content :where(h1) {
	font-size: var(--dv-text-h1);
	line-height: 1.1;
}

h2,
.entry-content :where(h2) {
	font-size: var(--dv-text-h2);
	line-height: 1.2;
	letter-spacing: calc(var(--dv-tracking-display) * 2 / 3);
}

h3,
.entry-content :where(h3) {
	font-size: var(--dv-text-h3);
	line-height: 1.3;
	letter-spacing: calc(var(--dv-tracking-display) / 3);
}

h4,
.entry-content :where(h4) {
	font-size: var(--dv-text-body);
	line-height: 1.4;
	letter-spacing: 0;
}

h5,
.entry-content :where(h5) {
	font-size: var(--dv-text-body-s);
	line-height: 1.4;
	letter-spacing: 0;
}

h6,
.entry-content :where(h6) {
	font-size: var(--dv-text-label);
	line-height: 1.4;
	letter-spacing: var(--dv-tracking-eyebrow);
	text-transform: uppercase;
}

/* Linked headings (archive titles) read as headings, not as links. */
.entry-title a {
	color: var(--dv-ink);
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--dv-ink);
	text-decoration: underline;
}

/*
 * Post meta (author, date): Astra colours it with palette slot 0, and brand
 * red on the canvas is 4.4:1, below AA for small text. Muted ink instead.
 */
.entry-meta,
.entry-meta * {
	color: var(--dv-ink-3);
}

.entry-meta a:not(.ast-button):hover,
.entry-meta a:not(.ast-button):hover *,
.entry-meta a:not(.ast-button):focus,
.entry-meta a:not(.ast-button):focus * {
	color: var(--dv-ink);
}

/* Long-form rhythm (posts, policy pages): more air above a heading than below it. */
.entry-content > h2:not(:first-child) {
	margin-top: var(--dv-space-7);
}

.entry-content > h3:not(:first-child) {
	margin-top: var(--dv-space-6);
}

.entry-content > h4:not(:first-child) {
	margin-top: var(--dv-space-5);
}

.entry-content > :is(h2, h3, h4) {
	margin-bottom: var(--dv-space-3);
}

/* Links --------------------------------------------------------------------- */

a {
	color: var(--dv-link);
	text-underline-offset: .2em;
}

/* Astra turns links brand red on hover; links keep their colour. */
a:hover,
a:focus {
	color: var(--dv-link);
}

/*
 * Underlined links thicken on hover. Repeated for Astra's singular-content
 * rule, whose text-decoration shorthand resets the thickness. Thickness only,
 * so link-shaped components inside content keep their own colours.
 */
a:hover,
a:focus,
.ast-single-post .entry-content a:hover,
.ast-single-post .entry-content a:focus {
	text-decoration-thickness: 2px;
}

/* Astra underlines every link in singular content; link-shaped components opt out. */
.ast-single-post .entry-content :is(a.dv-btn, a.dv-chip) {
	text-decoration: none;
}

/* Focus --------------------------------------------------------------------- */

/*
 * One visible 2px ring for keyboard focus everywhere (spec 6.8). Astra and
 * WooCommerce set thin dotted outlines, or none, on dozens of :focus
 * selectors up to ID specificity, hence !important.
 */
:focus-visible {
	outline: 2px solid var(--dv-link) !important;
	outline-offset: 2px !important;
}

/* No ring for pointer focus (Astra draws a dotted outline on a:focus). */
:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background-color: var(--dv-brand-soft);
	color: var(--dv-ink);
}

/* Astra buttons --------------------------------------------------------------- */

/*
 * Astra paints buttons, button blocks and WooCommerce buttons with palette
 * slots 0/1 (brand, mapped in tokens.css) and hard-coded white text. They take
 * the .dv-btn--primary tokens here; the text uses --dv-on-brand because white
 * on the dark-mode brand fails AA. Selectors repeat Astra's.
 */
button,
.ast-button,
.ast-custom-button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-element-button,
.wp-block-button .wp-block-button__link,
.woocommerce-js a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-color: var(--dv-brand);
	border-radius: var(--dv-radius-md);
	background-color: var(--dv-brand);
	box-shadow: none;
	color: var(--dv-on-brand);
	font-family: var(--dv-font-body);
	font-weight: 600;
	transition: background-color var(--dv-dur-fast) var(--dv-ease), border-color var(--dv-dur-fast) var(--dv-ease), color var(--dv-dur-fast) var(--dv-ease);
}

button:hover,
button:focus,
.ast-button:hover,
.ast-custom-button:hover,
.button:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.woocommerce-js a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	border-color: var(--dv-brand-hover);
	background-color: var(--dv-brand-hover);
	color: var(--dv-on-brand);
}

/* Header -------------------------------------------------------------------- */

/*
 * Astra's header builder (config/astra-settings.json): logo left, menu centred,
 * search, theme toggle and "Client area" right; below 922 px logo, search,
 * toggle and the drawer trigger. The bar is 72 px on desktop and 60 px below
 * 922 px (Astra's hb-header-height). Astra's separator is off: the hairline is
 * drawn inside the bar, so the bar keeps exactly that height.
 *
 * Astra Pro's sticky-state colour rules carry five or six classes, so rules
 * that must hold while the bar is stuck are scoped to #masthead.
 */
.ast-primary-header-bar,
.ast-primary-header-bar.ast-primary-header {
	background-color: var(--dv-bg-canvas);
	box-shadow: inset 0 -1px 0 var(--dv-border);
}

/* Astra pads the logo block by 1em below 922 px, which would make the bar taller than 60 px. */
#masthead .site-branding {
	padding-top: 0;
	padding-bottom: 0;
}

/* Stuck (Astra Pro adds .ast-sticky-active on scroll): a hairline, never a drop shadow. */
.main-header-bar.ast-sticky-active {
	box-shadow: inset 0 -1px 0 var(--dv-border);
}

/* Where supported, the stuck bar is translucent canvas over a slight blur. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (color: color-mix(in srgb, red, blue)) {
	#masthead .main-header-bar.ast-sticky-active {
		background-color: color-mix(in srgb, var(--dv-bg-canvas) 84%, transparent);
		-webkit-backdrop-filter: saturate(1.5) blur(14px);
		backdrop-filter: saturate(1.5) blur(14px);
	}
}

/*
 * Logo: the PNG is red and black, so dark mode draws it white until a light
 * wordmark SVG exists (spec open question 3). Both dark-mode paths, as in
 * tokens.css.
 */
:root[data-theme="dark"] .custom-logo {
	filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .custom-logo {
		filter: brightness(0) invert(1);
	}
}

/* Primary menu: muted ink, full ink on hover and on the current section, which is also underlined in brand red. */
#masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
	padding: 0 var(--dv-space-3);
	color: var(--dv-ink-2);
	font-size: var(--dv-text-body-s);
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--dv-dur-fast) var(--dv-ease);
}

/* Between 922 and 1100 px the menu sits between the logo and the utilities with little room to spare. */
@media (max-width: 1099px) {
	#masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding: 0 var(--dv-space-2);
	}
}

#masthead .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
#masthead .ast-builder-menu-1 .main-header-menu > .menu-item.focus > .menu-link,
#masthead .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:focus,
#masthead .ast-builder-menu-1 .main-header-menu > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent) > .menu-link {
	color: var(--dv-ink);
}

#masthead .ast-builder-menu-1 .main-header-menu > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent) > .menu-link {
	text-decoration-line: underline;
	text-decoration-color: var(--dv-brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
}

/* Sub-menus and the dropdown header: Astra paints them white or light grey, which dark-mode ink cannot be read on. */
.main-header-menu .sub-menu,
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu .sub-menu,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content {
	background-color: var(--dv-bg-surface);
}

/* Utilities: search, theme toggle and "Client area" (Task 7 and components.css), 8 px apart. */
#masthead .site-header-primary-section-right {
	gap: var(--dv-space-2);
}

#masthead .site-header-primary-section-right > .ast-builder-layout-element {
	padding-right: 0;
	padding-left: 0;
}

/* The search button (Astra's slide search) and the drawer trigger match the theme toggle: 40 px round, hairline. */
#masthead .ast-header-search .astra-search-icon,
#masthead [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	background-color: transparent;
	box-shadow: none;
	color: var(--dv-ink);
	font-size: inherit;
	line-height: 1;
	transition: background-color var(--dv-dur-fast) var(--dv-ease), border-color var(--dv-dur-fast) var(--dv-ease);
}

#masthead .ast-header-search .astra-search-icon:hover,
#masthead [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:hover {
	border-color: var(--dv-ink);
	background-color: var(--dv-bg-subtle);
	color: var(--dv-ink);
}

/* The Astra buttons rule above colours every focused <button> in brand red; the trigger keeps its look. */
#masthead [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus:not(:hover) {
	border-color: var(--dv-border);
	background-color: transparent;
	color: var(--dv-ink);
}

/* A 44 px hit area, as on the theme toggle (and on the drawer's close button, below). */
#masthead .ast-header-search .astra-search-icon::before,
#masthead [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle::before,
#ast-mobile-popup .menu-toggle-close::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

#masthead .ast-header-search .astra-search-icon .ast-icon,
#masthead .ast-header-search .astra-search-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

#masthead .ast-header-search .astra-search-icon svg {
	fill: none;
	stroke: currentColor;
}

#masthead [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* The search field Astra slides out to the left of the button. */
#masthead .ast-search-menu-icon .search-form {
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	background-color: var(--dv-bg-surface);
	color: var(--dv-ink);
}

#masthead .ast-search-menu-icon .search-field {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--dv-ink);
	font-size: var(--dv-text-body-s);
}

#masthead .ast-search-menu-icon .search-field::placeholder {
	color: var(--dv-ink-3);
	opacity: 1;
}

#masthead .ast-search-menu-icon .search-submit {
	background-color: transparent;
	color: var(--dv-ink);
}

/* The focus ring goes round the whole pill, not the bare field inside it. */
#masthead .ast-search-menu-icon .search-form:focus-within {
	outline: 2px solid var(--dv-link);
	outline-offset: 2px;
}

#masthead .ast-search-menu-icon .search-field:focus-visible {
	outline: none !important;
}

/* Astra's scroll-to-top button: round, hairline and surface like the header buttons, not a brand-red square. */
#ast-scroll-top {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	background-color: var(--dv-bg-surface);
	color: var(--dv-ink);
	line-height: 42px;
	transition: border-color var(--dv-dur-fast) var(--dv-ease);
}

#ast-scroll-top:hover {
	border-color: var(--dv-ink);
}

/* Drawer ---------------------------------------------------------------------- */

/*
 * Astra's off-canvas drawer, from the right below 922 px: the primary menu and
 * "Client area" on a surface panel with hairlines. Astra paints the panel
 * white with grey text; the ID selectors beat its rules.
 */
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	width: min(90%, 400px);
	border-left: 1px solid var(--dv-border);
	background-color: var(--dv-bg-surface);
	box-shadow: none;
	color: var(--dv-ink);
}

#ast-mobile-popup .ast-mobile-popup-header {
	padding: var(--dv-space-3) var(--dv-space-4);
}

#ast-mobile-popup .menu-toggle-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-full);
	background-color: transparent;
	color: var(--dv-ink);
	font-size: 20px;
}

#ast-mobile-popup .menu-toggle-close:hover {
	border-color: var(--dv-ink);
	background-color: var(--dv-bg-subtle);
	color: var(--dv-ink);
}

/* Astra focuses the close button when the drawer opens: it keeps its look (and takes the ring from the keyboard). */
#ast-mobile-popup .menu-toggle-close:focus:not(:hover) {
	border-color: var(--dv-border);
	background-color: transparent;
	color: var(--dv-ink);
}

#ast-mobile-popup .menu-toggle-close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Astra fills the drawer menu with the canvas colour; the rows sit on the panel. */
#ast-mobile-popup .ast-builder-menu-mobile .main-header-menu {
	border-top: 1px solid var(--dv-border);
	background-color: transparent;
}

#ast-mobile-popup .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link {
	padding: var(--dv-space-4) var(--dv-space-5);
	border-bottom: 1px solid var(--dv-border);
	background-color: transparent;
	color: var(--dv-ink);
	font-family: var(--dv-font-display);
	font-size: var(--dv-text-h2);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: calc(var(--dv-tracking-display) * 2 / 3);
}

#ast-mobile-popup .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link:hover {
	background-color: var(--dv-bg-subtle);
	color: var(--dv-ink);
}

#ast-mobile-popup .ast-builder-menu-mobile .main-header-menu > :is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent) > .menu-link {
	color: var(--dv-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--dv-brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

#ast-mobile-popup .ast-header-button-1 {
	padding: var(--dv-space-5);
}

#ast-mobile-popup .ast-header-button-1 .ast-builder-button-wrap,
#ast-mobile-popup .ast-header-button-1 .dv-btn {
	width: 100%;
}

#ast-mobile-popup .ast-header-button-1 .dv-btn {
	--dv-btn-height: 48px;
	font-size: var(--dv-text-body);
}

/* Footer ---------------------------------------------------------------------- */

/*
 * Astra's footer builder rows: the columns ([dv_footer_columns]), the wordmark
 * ([dv_wordmark]) and the legal row (the legal line and [dv_prefs_controls]).
 * Canvas throughout, hairlines between rows, and the 20 px side gutter of
 * Astra's header container, so the edges line up with the header.
 */
.site-footer .site-above-footer-wrap[data-section="section-above-footer-builder"],
.site-footer .site-primary-footer-wrap[data-section="section-primary-footer-builder"],
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
	min-height: 0;
	padding-right: 20px;
	padding-left: 20px;
	border-width: 0;
	background-color: var(--dv-bg-canvas);
}

.site-footer .site-above-footer-wrap[data-section="section-above-footer-builder"] {
	padding-top: var(--dv-space-8);
	padding-bottom: var(--dv-space-7);
	border-top: 1px solid var(--dv-border);
}

.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] {
	padding-top: var(--dv-space-5);
	padding-bottom: var(--dv-space-5);
	border-top: 1px solid var(--dv-border);
}

.site-footer [data-section] .ast-builder-grid-row,
.site-footer .site-footer-section {
	min-height: 0;
}

.site-footer .site-footer-section {
	margin-bottom: 0;
}

/* The columns are left-aligned; Astra centres footer HTML elements. */
.site-footer .footer-widget-area[data-section^="section-fb-html-"] .ast-builder-html-element,
.site-footer .ast-footer-copyright {
	text-align: left;
}

/* Columns: the brand at 2fr and four menus; two menu columns below 768 px, one below 480 px. */
.dv-footer {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 4fr);
	gap: var(--dv-space-6);
	color: var(--dv-ink-2);
	font-size: var(--dv-text-body-s);
	line-height: 1.5;
}

.dv-footer p {
	margin: 0;
}

.dv-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--dv-space-3);
	max-width: 36ch;
}

.dv-footer__name {
	color: var(--dv-ink);
	font-family: var(--dv-font-display);
	font-size: var(--dv-text-h2);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--dv-tracking-display);
}

.dv-footer__blurb {
	color: var(--dv-ink-2);
	font-size: var(--dv-text-body);
}

.dv-footer__policy {
	color: var(--dv-ink-3);
}

.dv-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dv-space-6);
}

.dv-footer .dv-footer__heading {
	margin: 0 0 var(--dv-space-2);
}

.dv-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dv-footer__links li {
	margin: 0;
}

/* Each link is a 32 px row (44 px on touch screens), so the list keeps a steady rhythm without gaps. */
.dv-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--dv-ink-2);
	text-decoration: none;
	transition: color var(--dv-dur-fast) var(--dv-ease);
}

.dv-footer__links a:hover,
.dv-footer__links a:focus {
	color: var(--dv-ink);
	text-decoration: underline;
}

@media (pointer: coarse) {
	.dv-footer__links a {
		min-height: 44px;
	}
}

/* Below 1100 px the brand goes above the menus, so the four columns keep room for their links. */
@media (max-width: 1099px) {
	.dv-footer {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dv-space-7);
	}
}

@media (max-width: 768px) {
	.dv-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--dv-space-6);
	}
}

@media (max-width: 480px) {
	.dv-footer__nav {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Wordmark: "DigitaVision" across the full width at ~96 % of the viewport,
 * faint ink, with its bottom third clipped by the legal row's hairline. Drawn
 * from the data attribute (pure decoration, hidden from assistive technology);
 * the row drops Astra's content width so the word can span the page, and
 * clips it, so it never scrolls sideways.
 */
.site-footer .site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
	padding: 0;
	overflow: hidden;
}

.site-footer .site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
	max-width: none;
}

.dv-wordmark {
	box-sizing: content-box;
	height: .52em;
	padding-top: .04em;
	overflow: hidden;
	font-family: var(--dv-font-display);
	font-size: clamp(4rem, 18vw, 18rem);
	font-weight: 700;
	line-height: .8;
	letter-spacing: -0.04em;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.dv-wordmark::before {
	content: attr(data-dv-wordmark);
	display: block;
	color: var(--dv-ink);
	opacity: .08;
}

:root[data-theme="dark"] .dv-wordmark::before {
	opacity: .1;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .dv-wordmark::before {
		opacity: .1;
	}
}

/* Legal row: the legal line left, the display preferences right; stacked below 922 px. */
@media (min-width: 922px) {
	.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--dv-space-6);
	}

	.site-footer .footer-widget-area[data-section="section-fb-html-3"] .ast-builder-html-element {
		text-align: right;
	}

	.site-footer .dv-prefs {
		justify-content: flex-end;
	}
}

@media (max-width: 921px) {
	.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
		row-gap: var(--dv-space-4);
	}
}

.site-footer .ast-footer-copyright p {
	margin: 0;
	text-wrap: balance;
}

/* The display preferences follow the row's alignment: left when stacked, right beside the legal line. */
.site-footer .dv-prefs {
	justify-content: flex-start;
}

.dv-legal-line {
	color: var(--dv-ink-3);
	font-size: var(--dv-text-body-s);
	line-height: 1.6;
}

/* The Companies House link sits in running text, so it is underlined, not only coloured (WCAG 1.4.1). */
.ast-footer-copyright .dv-legal-line a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.ast-footer-copyright .dv-legal-line a:hover,
.ast-footer-copyright .dv-legal-line a:focus {
	color: var(--dv-ink);
}

/* 404 -------------------------------------------------------------------------- */

/*
 * 404.php: line art, the message, a search and the ways back, centred in one
 * column. The side padding adds to Astra's narrow 404 container gutter, so on
 * phones the edges line up with the header's 20 px.
 */
.dv-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--dv-space-8) var(--dv-space-3) var(--dv-space-9);
	text-align: center;
}

.dv-404__art {
	margin: 0 auto var(--dv-space-6);
	color: var(--dv-ink);
}

.dv-404__art svg {
	display: block;
	width: min(100%, 280px);
	height: auto;
	margin: 0 auto;
}

/* One stroke weight at any size; colours from the tokens, so the art follows the theme. */
.dv-404-art * {
	vector-effect: non-scaling-stroke;
}

.dv-404-art__panel {
	fill: var(--dv-bg-surface);
}

.dv-404-art__glass {
	fill: var(--dv-bg-subtle);
}

.dv-404-art__tiles {
	stroke: var(--dv-ink-3);
}

.dv-404-art__gap {
	stroke: var(--dv-ink-2);
}

.dv-404-art__mark {
	stroke: var(--dv-brand);
}

.dv-404-art__handle {
	stroke: var(--dv-brand);
	stroke-width: 7px;
}

.dv-404 .dv-404__code {
	margin: 0 0 var(--dv-space-3);
}

.dv-404 .dv-404__title {
	margin: 0 0 var(--dv-space-4);
	font-size: var(--dv-text-display-l);
	font-weight: 700;
	line-height: var(--dv-leading-display);
	letter-spacing: var(--dv-tracking-display);
}

.dv-404__lede {
	max-width: 46ch;
	margin: 0 auto var(--dv-space-6);
	color: var(--dv-ink-2);
	font-size: var(--dv-text-body-l);
	line-height: 1.5;
}

.dv-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dv-space-3);
	margin: var(--dv-space-5) 0 0;
}

/* Search form (searchform.php, 'dv_context') ------------------------------------ */

.dv-search {
	display: flex;
	gap: var(--dv-space-2);
	max-width: 520px;
	margin: 0 auto;
}

.dv-search .dv-search__field {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 0 var(--dv-space-4);
	border: 1px solid var(--dv-border);
	border-radius: var(--dv-radius-md);
	background-color: var(--dv-bg-surface);
	box-shadow: none;
	color: var(--dv-ink);
	font-size: var(--dv-text-body);
	line-height: 1.5;
}

.dv-search .dv-search__field:focus {
	border-color: var(--dv-ink);
	background-color: var(--dv-bg-surface);
	box-shadow: none;
	color: var(--dv-ink);
}

.dv-search .dv-search__field::placeholder {
	color: var(--dv-ink-3);
	opacity: 1;
}

.dv-search .dv-search__submit {
	flex: none;
}

/* WooCommerce ------------------------------------------------------------------ */

/*
 * The breadcrumb on shop and product pages: WooCommerce's #777 is below AA on
 * the canvas (4.1:1 light, 4.2:1 dark), so muted ink. Selectors repeat
 * Astra's WooCommerce CSS.
 */
.woocommerce-js .woocommerce-breadcrumb,
.woocommerce-js .woocommerce-breadcrumb a {
	color: var(--dv-ink-3);
}

/*
 * Astra sizes and spaces the breadcrumb only under body.woocommerce-js, which WooCommerce's footer script sets once the
 * page has been parsed, often after the first paint: the same values without the class, so the page under the
 * breadcrumb does not move down when the script runs (a 0.1 layout shift on the category hubs, Plan 4 Task 11).
 */
.woocommerce-breadcrumb {
	margin: 0 0 1em;
	font-size: .92em;
}

.woocommerce-js .woocommerce-breadcrumb a:hover,
.woocommerce-js .woocommerce-breadcrumb a:focus {
	color: var(--dv-ink);
}

/*
 * Notices, such as the empty catalogue on /tools/: WooCommerce paints them a
 * fixed light grey that stays bright in dark mode. Subtle background and full
 * ink in both modes, under the brand-red top rule.
 */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-top-color: var(--dv-brand);
	background-color: var(--dv-bg-subtle);
	color: var(--dv-ink);
}

/* Page shell --------------------------------------------------------------------- */

/*
 * Astra's full-width page layout spaces the content 60 px from the header and
 * footer only from 1200 px up; below that, page titles touch the header bar.
 */
@media (max-width: 1199px) {
	.ast-plain-container.ast-no-sidebar #primary {
		margin-top: var(--dv-space-6);
		margin-bottom: var(--dv-space-7);
	}
}

/* Media --------------------------------------------------------------------- */

img {
	height: auto;
	max-width: 100%;
}

/* Reduced motion -------------------------------------------------------------- */

/*
 * The OS setting, or the visitor's "Reduce motion" choice
 * (html[data-motion="reduce"], set by the theme-mode script). Feedback stays
 * (100 ms); decoration, loops and smooth scrolling go.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 100ms !important;
		scroll-behavior: auto !important;
	}
}

html[data-motion="reduce"],
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 100ms !important;
	scroll-behavior: auto !important;
}

/* Page transitions ------------------------------------------------------------ */

/*
 * Cross-document View Transitions: a 180 ms cross-fade between pages of this site, in browsers that support them
 * (others navigate as before). Only when the OS allows motion; a visitor who chose "Reduce motion"
 * (html[data-motion="reduce"]) gets no root snapshot and no animation, so the page swaps at once as without them.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 180ms;
		animation-timing-function: var(--dv-ease);
	}
}

html[data-motion="reduce"] {
	view-transition-name: none;
}

html[data-motion="reduce"]::view-transition-group(*),
html[data-motion="reduce"]::view-transition-old(*),
html[data-motion="reduce"]::view-transition-new(*) {
	animation-name: none !important;
	animation-duration: 0s !important;
}